在线客服
扫描二维码
下载博学谷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操作的性能的具体方法。相信看完本篇文章,大家如果在前端面试题再遇到这样的问题,就可以能轻松应对啦。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
微信小程序开发教程学什么?
微信小程序开发教程内容涵盖注册与登陆、开发工具的安装、微信小程序的配置、样式、组件、数据渲染、网络请求API、获取用户信息API等相关知识点。由于微信小程序无需下载,用完即走,实现了应用触手可及的梦想,具备出色的用户体验。
5794
2020-01-10 18:11:29
HTML标签基础学习笔记
众所周知,HTML标签是网页制作的的基础。可以说网页的本质就是超级文本标记语言。严格来说,HTML并不是一门编程语言,而是超文本标记语言。HTML作为网页中的结构,就好比人的骨架。所以,学好HTML和div布局是网页稳固的一个关键。本文为初学者整理汇总了HTML标签基础学习笔记,下面一起来看看吧!
4724
2020-03-04 02:06:48
零基础转行Web前端开发学什么?
大家比较关心零基础转行Web前端开发学习什么,Web前端开发技术人才待遇好,Web前端分工更加明细,技术要求增高。学习Web前端知识开始,转行成为Web前端开发,零基础小白不要着急着手开始学习,先制定好自己的学习规划再上手学习。
4832
2020-03-24 15:35:55
Web前端三大主流框架是什么?
前端框架对于前端开发的好处是显而易见的,比如减少代码中因失误产生的bug,还能大大节约时间和人力成本,缩短开发周期等等。目前,市面上Web前端三大主流框架分别指的是Angular、React和Vue,在Web前端开发中,它们平分秋色,各有优劣。下面我们一起来好好认识一下它们吧~
11636
2020-06-05 18:16:01
前端开发的工作方向有哪些?
前端具体分哪些方向,选择前端你可以做什么!前端方向,可以说是前端目前的方向划分,也可以说是前端未来的发展方向。
4677
2022-12-02 16:55:48