您好,登录后才能下订单哦!
本篇文章为大家展示了如何优化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操作的性能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。