在线客服
扫描二维码
下载博学谷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操作的性能的具体方法。相信看完本篇文章,大家如果在前端面试题再遇到这样的问题,就可以能轻松应对啦。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
前端页面性能指标有哪些?
前端页面与用户直接面对面沟通,为了提升用户对前端页面的使用体验,前端工程师往往要对页面的性能进行优化。那一般前端工程师都需要优化哪些页面的性能指标呢?
9926
2019-07-16 18:17:31
小程序开发好学吗?需要掌握哪些知识技能?
不知道从什么时候开始,小程序突然爆火了起来。当然这不是没有原因的,一方面是由于小程序依托着微信庞大的用户群体,另一方面也是由于它自身即用即走的便利性。目前正处于小程序开发的红利期,一时之间国内的企业公司纷纷开发起了小程序。那么小程序开发好学吗?需要掌握哪些知识技能呢?
7484
2019-10-17 12:03:40
在线学习前端开发需要什么基础?
在线学习前端开发需要什么基础?会这么问的小伙伴,一定是不了解博学谷的零基础前端课程。一般来讲,普通的在线课程确实需要学习者有一些的前端知识的基础,比如HTML、CSS和JavaScript基础语法等等。但是博学谷专门为零基础的学员开设了前端在线课程,内容循序渐进,搭配着相关的项目实践,可以说是完全从零开始手把手的前端教程,即便是IT小白也可以跟得上课程进度。
8047
2019-10-25 19:09:09
JavaScript基础教程新手入门必看
对前端稍微有点了解的初学者都知道,JavaScript是必不可少的工具。毫不夸张的说,大部分网页都使用了JavaScript,想要成为一个优秀的前端工程师,做出漂亮令用户满意的网页,熟练掌握JavaScript是一个必备技能。本文为新手整理了一篇JavaScript基础教程入门指南,希望可以帮助编程小白可以更加轻松的掌握JavaScript。
4598
2020-03-29 12:06:46
前端培训机构有必要参加吗?
前端培训机构有必要参加吗?答案是肯定的,如果大家都可以通过自学,掌握前端开发的核心技术,那么市面上也不会有这么多大大小小的前端培训机构。一般来讲,优质的培训机构有经验丰富的讲师、与时俱进的课程以及良好的学习氛围。尤其是零基础学习者更需要系统全面的前端培训。因此,大家要考虑的不是“前端培训机构有必要参加吗”,而是“选择什么培训机构好”。
5157
2020-07-29 10:51:17