在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
众所周知，在富网页应用中编写脚本时，无可避免地要跟DOM打交道，但是频繁地对于DOM进行操作，又会导致损耗性能，那么如何才能优化这个性能瓶颈呢？其实这也是前端面试的必考题，一般来说有大致七种方式，归纳起来都是从三种角度出发，即访问和修改DOM元素；修改DOM样式；通过DOM事件处理程序来响应用户。下面我们来详细讲解一下优化DOM操作的性能。
1、查找元素的优化。因为 ID 是唯一的，也有原始的方法，因此使用ID 查找元素是最快的，其次的是根据类和类型查找元素，通过属性查找元素是最慢的，因此应该尽可能的通过 ID 或者类来查找元素，避免通过属性来查找元素。
2、减少访问和改变DOM元素，包括添加，修改，删除DOM。改变DOM就会引起浏览器渲染，而渲染是相当慢的，因此应该避免不必要的渲染。
3、减少改变DOM的样式类等。改变DOM元素的样式，类也会导致浏览器渲染，因此也应该减少不必要的操作。
4、批量修改DOM时从文档流中摘除该元素 ，对其应用多重改变 ， 将元素带回文档中 ， 这样可以最小化重绘和重排版 。
具体方法:
（1）隐藏元素，进行修改，然后再显示它。
（2）将原始元素拷贝到一个脱离文档的节点中，修改副本，然后覆盖原始元素。
5、减少 iframeiframe 需要消耗大量的时间，并阻塞下载，建议少用。
6、样式放在 header 中，脚本放在关闭标签</body>之前样式放在。header 中，可以加快渲染，脚本放在关闭标签</body>之前可以加快下载速度，不免阻塞下载。
7、使用事件委托，减少绑定事件的数量。多次访问同一DOM，应该用局部变量缓存该DOM。
以上就是如何优化DOM操作的性能的具体方法。相信看完本篇文章，大家如果在前端面试题再遇到这样的问题，就可以能轻松应对啦。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
前端页面如何优化？解决方案讲解
下一篇：
30道常见Web前端面试题你会几个？
相关推荐 更多
web前端网页开发离不开的三要素
Web前端是目前高薪岗位之一，是从最开始的页面开发不断发展优化而产生的一个特定的岗位。现在web前端开发一定会用到的三门技术：HTML、CSS、JavaScript。无论是多么炫酷的页面都是这三门技术的组合而形成的。
8136
2019-06-24 18:07:06
IT前端和后端要做什么？哪个辛苦加班多？
IT前端和后端要做什么？前端开发和后端开发是软件开发的重要组成部分。前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。要问哪个辛苦加班多？其实都差不多，毕竟技术研发行业都不会太轻松。
21215
2019-08-28 10:31:21
Flutter入门学习哪些内容？
入门需要学习Dart语言、Flutter控件体系、动画体系、触摸和交互机制、网络编程、数据存储、状态管理等内容。Flutter是Google力推的跨平台框架，可快速在iOS、Android构建高质量的原生用户界面，且完全免费与开源；
6901
2019-12-30 17:57:05
Web前端开发常用工具推荐
随着互联网发展的愈加深入，前端作为公司的门面，人才需求会越来越大。正因如此，才吸引了那么多的人投身前端行业。对于刚入门前端的新手和一些资深的前端开发人员来讲，掌握一些常用的Web前端开发工具是十分有必要的。好用的工具可以帮助大家更好的完成工作，并且提高开发的效率。下面我就来推荐一些Web前端开发常用工具。
5809
2020-03-26 20:33:32
微前端开发常见问题汇总
前端应用可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具而是一套架构体系。其在开发中会有各种问题.
5629
2020-10-15 11:07:56
