DOM性能瓶颈与Javascript性能优化
这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(《JS特性性能缺陷及JIT的解决方案》,《Javascript垃圾回收浅析》),主要描述了untyped,GC带来的问题与JIT引擎的解决方案。但相对于Js引擎的问题,我认为DOM导致的性能问题更值得关注。
一.Dom的性能瓶颈及原因
1. 为什么是DOM
标准的xml/html的文本解析协议,常见的有DOM与SAX。在解析速度及内存占用上,SAX比DOM有优势,但为什么浏览器选择DOM解析html?
(1)DOM VS SAX
SAX提供一次性解析文本,不生成对象,Iterator模式访问元素,event-based,PUSH模式触发,简单说:App需要向Parser注册,当Parser遍历xml时,触发调用APP 。想深入体验,用下javax.xml.parsers.SAXParser。这里说个题外话,改进版StAX是PULL模式,但这都不重要了,重要是:一次性文本解析,不生成对象。
DOM解析文本后,生成DOM树。即:一次性文本解析,生成对象。
(2)浏览器选择了DOM
单次效率DOM不如SAX,但SAX不生成对象,浏览器很多操作很难满足,比如:元素定位,元素样式渲染……所以DOM是必然之选。
2. DOM的性能问题
【1】核心问题
当解析的html文件很大时,生成DOM树占用内存较大,同时遍历(不更新)元素耗时也更长。但这都不是重点,DOM的核心问题是:DOM修改导致的页面重绘、重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨!
DOM操作会导致一系列的重绘(repaint)、重新排版(reflow)操作。为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的,这些浏览器将对对 DOM的操作放进一个队列,并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说,在JavaScript执行的过程,直到发生重新排版,用户一直被阻塞。
一般的浏览器中(不含IE),repaint的速度远快于reflow,所以避免reflow更重要。
导致repaint、reflow的操作:
* DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
* 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
* 应用新的样式或者修改任何影响元素外观的属性
* Resize浏览器窗口、滚动页面
* 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))
【2】其他
某些Javascript框架中,CSS选择器,如:var el = $('.hyddd');由于IE6、7不支持,所以Javascript框架必须通过遍历整个DOM树来寻找对象。
二. 针对DOM问题,Javascript的应对方案
1. 针对repaint、reflow,Nicholas 大叔在他的《Speed up your JavaScript, Part 4》做了详细介绍,这里我也整理一下:
解决问题的关键是:减少因DOM操作,引起的reflow。Nicholas总结了一些方法:
【1】在DOM外,执行尽量多的变更操作。Demo:
// 不好的做法 for (var i=0; i < items.length; i++){var item = document.createElement("li");item.appendChild(document.createTextNode("Option " + i);list.appendChild(item); }
// 更好的做法 // 使用容器存放临时变更, 最后再一次性更新DOM var fragment = document.createDocumentFragment(); for (var i=0; i < items.length; i++){var item = document.createElement("li");item.appendChild(document.createTextNode("Option " + i);fragment.appendChild(item); } list.appendChild(fragment);
【2】操作DOM前,先把DOM节点删除或隐藏,因为隐藏的节点不会触发重排。Demo如下:
list.style.display = "none"; for (var i=0; i < items.length; i++){ var item = document.createElement("li"); item.appendChild(document.createTextNode("Option " + i); list.appendChild(item); } list.style.display = "";
【3】一次性,修改样式属性。Demo如下:
// 不好的做法 // 这种做法会触发多次重排 element.style.backgroundColor = "blue"; element.style.color = "red"; element.style.fontSize = "12em";
// 更好的做法是,把样式都放在一个class下 .newStyle { background-color: blue; color: red; font-size: 12em; } element.className = "newStyle";
【4】使用缓存,缓存临时节点。
// 不好的做法 document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft + document.getElementById("myDiv").offsetWidth + "px";
// 更好的做法 var myDiv = document.getElementById("myDiv"); myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";
2. 针选择其的问题,我只能说:没办法…… : (
转载于:https://www.cnblogs.com/songchunmin/p/7789642.html
DOM性能瓶颈与Javascript性能优化相关推荐
- javascript性能优化
2019独角兽企业重金招聘Python工程师标准>>> 很久就想总结一下关于javascript性能优化方面的一些东西,平时也有注意收集这方面的资料.把del.icio.us里的收藏 ...
- JavaScript性能优化【下】--性能优化的具体方式
前言 下面出现的代码只做效率测试,若运行,请修改其中存在命名冲突,再进行代码的执行. 代码优化 如何精准测试 JavaScript 性能 本质上就是采集大量的执行样本进行数学统计和分析. 使用基于 B ...
- JavaScript 深度剖析 - JavaScript 性能优化
文章目录 一.性能优化介绍 二.JavaScript 内存管理(Memory Management) 2.1 内存管理介绍 2.2 JavaScript 中的内存管理 三.JavaScript 中的垃 ...
- JavaScript性能优化详解
性能优化介绍 性能优化是不可避免的 无处不在的前端性能优化 function func(){arr = []arr[100000] = 'lg is a dog' } func() JavaScrip ...
- JavaScript强化教程——javascript性能优化
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 --数据存取 数据的存取位置也影响着JavaScript的运行速度,我们来总结一下如能分配存取位置最合理,能 ...
- java性能瓶颈分析_Java性能优化技巧整理,做一个深度的程序员
原标题:Java性能优化技巧整理,做一个深度的程序员 在我们身边是一大批的程序员,层次不一,但是放眼观,我们很容易就可以看到那些是业务型程序员,那些是有层次的程序员.注重细节,注重性能,做一个有深度的 ...
- JavaScript性能优化 DOM编程
最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...
- JavaScript性能优化:度量、监控与可视化1
HTTP事务所需要的步骤: 接下来,浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接,类似对讲机的Over(完毕) Roger(明白) TCP/IP模型 TCP即传输控制协议( ...
- Javascript性能优化【内联缓存】 V8引擎特性
javascript 是单线程.动态类型语言,那么我们在编码时候如何编写性能最优代码呢?下面将讲解V8引擎的内联优化.利用内联缓存这个特性我们可以编写更加优秀的代码. 什么是内联缓存 引用官方的描述: ...
最新文章
- 常见数字IC设计、FPGA工程师面试题
- vue 加载体验优化
- flutter - dart基础之map
- C语言函数题-利用指针,实现字符串比较函数
- 09年03月27日--request 之 getParameterMap
- php软删除代码,PHP laeavel软删除以及软删除还原 易错点
- Android中RxJava+Retrofit2.0+MVP模式的整合
- 如何用10万资金炒房到1000万
- 重磅快讯:CCF发布最新版推荐中文科技期刊目录
- java接口自动化(四) - 企业级代码管理工具Git的应用
- Ba Gua Zhen
- mysql锁表语句,从理论到实践!
- linux驱动基础开发1——linux 设备驱动基本概念-转
- 《Windows程序设计》学习笔记(chap10菜单及其它资源)(一)
- 清华天才王垠和阿里 P10 面试官赵海平神仙打架后,我们来说说技术面试中的该与不该!...
- 基于Python绘制一个摸鱼倒计时界面
- IIR数字滤波器设计(数字信号处理)
- C++多线程异步通信
- ADS学习:电磁仿真设计
- led的伏安特性曲线 matlab实现_一种基于MATLAB的分析避雷器伏安特性的方法与流程...