在线客服
扫描二维码
下载博学谷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前端面试题你会几个？
相关推荐 更多
前端与移动开发培训课程怎么样？
在互联网技术高度发展的过程中，国内移动互联网技术已经跻身全球移动互联网领域的首位，由于平台多元化的发展，PC端、移动端、小程序等等前端展示效果越来越复杂。因此要求前端工程师不仅仅能够实现前端页面开发，还要能够兼容平台的多样化。为了更好的掌握技术，大部分前端工程师和想入行的小伙伴，都选择通过前端与移动开发培训的方式进入前端开发领域。那现在前端与移动开发培训课程怎么样呢？
6646
2019-09-10 18:31:19
30道常见Web前端面试题你会几个？
30道常见Web前端面试题你会几个？以下30到web前端面试答出了大多数的或者是全部的题表明你的基础扎实；只答出小部分或者答出了大部分题但答案不正确，说明水平还差的远，基础知识不扎实距离拿高薪还很遥远，需要基础夯实基础。
6300
2019-09-27 15:11:17
Web前端在线学习实战教程介绍
从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都属于前端工程师的专业领域。因此掌握Web前端开发技能，在这个大前端时代你将拥有更多的就业选择。为了帮助更多还在前端学习路上的小伙伴，本文将向大家介绍有些Web前端在线学习实战教程，希望大家能够通过实战巩固理论知识，掌握真正的开发技能！
6062
2020-06-01 10:27:35
前端浏览器对象模型BOM常用对象用法介绍
前端浏览器对象模型BOM常用对象介绍，BOM即Broswer Object Model 浏览器对象模型，在JavaScript中可以理解为window对象，用来进行与浏览器相关的一些操作，学习BOM就是学习 JavaScript中的window对象。
4880
2020-08-24 10:37:08
前端和后端开发哪个工资高？
一般来说前端开发平均薪资17k左右，后端开发平均工资16k左右，能拿到这个薪资水平的一般是有1-2年工作经验的开发人员，由于公司要求几个人能力不同薪资差距还是比较大的。
12267
2020-12-22 16:06:41
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么？先掌握这三大核心关键技术
- 前端开发的工作方向有哪些？
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试？两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些，才能成为架构师 查看更多
扫描二维码，了解更多信息
