在线客服
扫描二维码
下载博学谷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前端面试题你会几个？
相关推荐 更多
前端与移动开发培训班H5和移动Web课程怎么样？
前端技术目前正想着多元化发展。就要求前端工程师要有更高的工作技能，不再是只要掌握基本的HTML/CSS/JavaScript就能找到工作。那对于想学习的小伙伴来说前端与移动开发培训班H5和移动Web课程怎么样呢？
6433
2019-12-05 15:47:46
前端HTML面试题汇总附参考答案
前端的核心技术就是有结构、表现和行为三部分构成的，模式是HTML、CSS和JavaScript。HTML又叫超文本标记语言，HTML语言可以制作网页。对于前端面试者来说，HTML是几乎一项必考的知识点。因此小编汇总了前端的HTML面试题，希望能帮助求职者牢牢掌握这方面的知识点。
5266
2019-09-23 22:04:57
Node.js-Koa2框架实战项目需要学习哪些知识点？
Node.js-Koa2框架实战项目需要学习哪些知识点？Node.js-Koa2框架实战项涉及技术选型和知识点、技术方案设计、用户管理、用户设置、创建微博、个人主页、广场页、首页功能、at 和回复、at 提到我的、线上环境等内容。
8290
2019-10-15 14:27:44
十个实用的CSS代码技巧整理
为了让大家高效率的进行工作，本文归纳总结了十个实用的CSS代码技巧，希望对大家能有所帮助。简单来说，这十大技巧分别是注意外边距折叠，使用flex进行布局，所有元素设置为Border-box，重置元素的CSS样式，使用transform属性来创建动画，短横线命名，不要使用!important，使用AutoPrefixer达到更好的兼容性，Caniuse和验证。
4659
2019-11-10 14:57:03
Web前端三大主流框架是什么？
前端框架对于前端开发的好处是显而易见的，比如减少代码中因失误产生的bug，还能大大节约时间和人力成本，缩短开发周期等等。目前，市面上Web前端三大主流框架分别指的是Angular、React和Vue，在Web前端开发中，它们平分秋色，各有优劣。下面我们一起来好好认识一下它们吧~
10942
2020-06-05 18:16:01
