在线客服
扫描二维码
下载博学谷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前端页面的设计流程及注意事项。
6368
2019-11-11 18:33:29
零基础如何学好前端？有什么建议？
前端作为互联网时代直接触达用户的窗口，大到我们每天浏览到的网站，小到一次点击按钮的页面，前端无处不在。并且在产品的众多开发环节之中，最能让用户直观感受到的就是前端开发。因而前端行业的广阔发展前景也吸引了不少人的转业学习。那么，零基础如何学好前端呢？有什么建议吗？本文将为初学者详细解答一下这两个问题，下面一起来看看吧！
4406
2020-03-20 19:05:49
React项目开发教程推荐
React作为当下最流行的框架之一，拥有简单的代码逻辑和较高的性能，因此它可以很好地解决前端视图中所遇到的问题。本文将为大家推荐React项目开发教程，希望大家可以通过这个实战项目的课程，系统学习React新特性及其生态圈相关知识，并掌握实战开发的相关经验，下面我们一起来看看教程简介吧~
4492
2020-05-04 15:49:24
网站开发中前端的重要性
前端开发在整个网站开发的过程中扮演什么角色？有什么重要的意义？我们通过各大招聘平台可以看到，目前互联网技术领域招聘中，前端开发工程师占有非常大的比重，这足以说明前端开发的重要性。另外除了简单易学，岗位薪资高之外，前端开发具有什么重要性呢？
6927
2020-08-07 10:34:03
前端和后端哪个工资高？学哪个简单？
各个大厂前端和后端工程师在技术水平相当的情况下，薪资水平相当，但随着工作时间的年限增加一般后端工程师的薪资水平比前端工程师高一些。在整个互联网行业中后端的薪资比前端的要高。但由于前端发展没有后端早，前端是近10年才开始快速发展，以处在高级工程师水平上的人数来说后端的工程师数量更多整体薪资会更高一点。
6047
2021-03-26 10:22:29
