原创前端面试题如何优化DOM操作的性能？

发布时间：2019-09-26 10:14:53 浏览 1536 来源：博学谷作者：照照

　　众所周知，在富网页应用中编写脚本时，无可避免地要跟DOM打交道，但是频繁地对于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操作的性能的具体方法。相信看完本篇文章，大家如果在前端面试题再遇到这样的问题，就可以能轻松应对啦。

Web开发面试题

— 申请免费试学名额 —

在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！

上一篇：前端页面如何优化？解决方案讲解下一篇： 30道常见Web前端面试题你会几个？

相关推荐 更多

从前端到全栈开发的技术迭代升级

从前端到全栈开发的技术迭代升级，从前端技术演进看前端发展野心、同时满足技术需求和商业需求的前端全栈、打破物理隔离，实现真全栈、小程序云服务的发展优化、从前端开发到全栈开发等五个方面具体来看看。

3735

2019-05-22 11:10:57

Web开发全栈开发
Web前端开发在线培训班靠不靠谱？学了能就业吗?

目前，前端开发工程师在人才市场上可谓是格外的紧缺，不少小伙伴也看到了其中的就业机遇。想要学习前端开发，自学太慢效率太低，那么Web前端开发在线培训班靠不靠谱？学了能就业吗?针对大家的担忧，小编就来仔细分析一下博学谷培训班的课程。

3223

2019-12-16 19:11:32

Web开发IT在线培训班课程大纲
微信小程序前端怎么做？新手开发入门教程

在大家的实际生活中，微信小程序随处可见。想必大家都多多少少学习过微信小程序，或者尝试开发微信小程序，那么微信小程序前端怎么做呢？本文是一个新手开发入门教程，希望给前端的小伙伴开发小程序，提供一点帮助。

2441

2019-09-05 17:48:42

Web开发小程序小程序开发
为什么要使用HTML5开发手机APP？

为什么要使用HTML5开发手机APP？从未来的发展趋势看，现在的大部分开发商都因为HTML5的便捷性而广泛使用它，而且使用HTML5可以带来更好的互动。从程序员开发的角度来讲，HTML5的代码更加清晰简单。下面我们就从HTML5的七大特性，来详细分析使用HTML5开发手机APP的优势。

2236

2019-10-10 16:55:06

HTML5开发Web开发
JS数据结构与算法基础知识在线学习

以前常常听到前后端分离的说法，近几年有了翻天覆地的变化。在前、后端界限融合，效率当先的时代，掌握数据结构与算法知识变得尤其重要。因此博学谷推出了可以帮助前端工程师进阶的相关课程，现在让我们一起来在线学习， JS数据结构与算法的基础知识吧！

725

2020-07-24 18:30:27

Web前端技术Web开发进阶提升