在线客服
扫描二维码
下载博学谷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前端面试题你会几个？
相关推荐 更多
前端开发和后端开发都是干什么的？有哪些区别？
前端开发和后端开发都是干什么的？有哪些区别？通俗地讲，前端干的工作是用户可以直接看得见的，而后端开发的工作主要在服务端，用户不太能直接看到。虽然前端开发和后端开发的工作有巨大的区别，但是他们的工作都是相辅相成的，都是为了更好的用户体验。
9452
2019-09-29 10:19:17
企业级微信小程序开发实战学什么？
小程序无需安装或者卸载，不占用手机内存不受手机系统的限制一触即用。小程序目前入口不少于50个，且能覆盖附件的微信用户；与线上引流相结合，具备强大的传播能力。因此掌握微信小程序开发技能必不可少。
5902
2020-01-03 16:33:33
前端培训机构有必要参加吗？
前端培训机构有必要参加吗？答案是肯定的，如果大家都可以通过自学，掌握前端开发的核心技术，那么市面上也不会有这么多大大小小的前端培训机构。一般来讲，优质的培训机构有经验丰富的讲师、与时俱进的课程以及良好的学习氛围。尤其是零基础学习者更需要系统全面的前端培训。因此，大家要考虑的不是“前端培训机构有必要参加吗”，而是“选择什么培训机构好”。
5454
2020-07-29 10:51:17
面试网易的前端工程有多难？问啥啥不会？
一个合格的前端需要扎实且前沿的知识体系，新形势下企业更注重前端工程师的综合能力。作为职场人都有感触，成功的面试大部分是愉快的交流过程，但不成功的面试却各有各的尴尬......近日一位程序员网友发帖吐槽：前端面试太难了，问啥啥不会都快面哭了。
4317
2022-04-08 11:26:32
前端开发需要会什么？先掌握这三大核心关键技术
要成为一名前端工程师，你知道如何制作一个网站应用呢？
3252
2022-12-02 16:52:55
