在线客服
扫描二维码
下载博学谷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操作的性能的具体方法。相信看完本篇文章,大家如果在前端面试题再遇到这样的问题,就可以能轻松应对啦。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
前端页面如何优化?解决方案讲解
前端页面的用户体验有多重要,相信大家都能够了解。试想,如果一个网站的页面打开的很慢,无疑会影响网站的浏览量,因此可以说前端页面的打开速度决定了网站的存亡。那么我们应该如何优化前端页面呢?众所周知,前端的页面主要包括HTML,CSS,JS等,因此解决方案可以从这几点入手,下面是详细讲解。
4459
2019-09-25 14:53:16
Web自动化测试主流框架有哪些?
Web自动化测试主流框架有哪些?现在市面上的Web自动化测试主流框架有selenium、AutoRunner、watir、Robot Framework、QTP。这五种主流框架都是目前被广泛使用,且深受程序员的喜爱和欢迎。下面本文将一一为大家介绍这些主流框架的优缺点。
9738
2019-10-24 11:40:27
前端有关node.js的面试题含答案
node.js是一个平台,它是基于Chrome JavaScript运行时建立的。同时,node.js也常常被看做是运行在服务端的 JavaScript。对于前端程序员来说,即使不懂得动态编程语言,想要创建自己的服务,只要选择Node.js就好了。因此在前端面试中,有关node.js的面试题是需要重点复习的内容。下面是小编整理的有关node.js的面试题和答案,一起来看看吧!
8972
2019-10-31 10:42:10
Web前端在线学习实战教程介绍
从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都属于前端工程师的专业领域。因此掌握Web前端开发技能,在这个大前端时代你将拥有更多的就业选择。为了帮助更多还在前端学习路上的小伙伴,本文将向大家介绍有些Web前端在线学习实战教程,希望大家能够通过实战巩固理论知识,掌握真正的开发技能!
4393
2020-06-01 10:27:35
HTTPS传输协议加密安全原理是什么?
HTTPS其实是SSL+HTTP的简称,当然现在SSL基本已经被TLS取代。在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。HTTPS和HTTP的区别主要区别:ca申请证书、http是超文本传输协议,https则是具有安全性的ssl加密传输协议;http和https使用的是完全不同的连接方式;链接方式不同。
4388
2020-10-20 16:08:02