前端性能优化之DOM

Posted 2020-06-18

DOM和JavaScript在浏览器中是独立实现的; IE ： DOM—> 一个名为mshtml.dll的库（内部称为Trident） JavaScript—> 它的实现名为JScript，位于jscript文件中 Safaria ： JavaScript—> 由独立的JavaScriptCore引擎（最新版本名字为SquirrelFish）实现 DOM—> 使用webkit的WebCore实现 Chorme: JavaScript—> V8 DOM—> 使用webkit的WebCore FF: JavaScript —> SpiderMonkey（最新版本为TraceMonkey） DOM—> Gecko的渲染引擎 两个相互的功能只要通过接口彼此连接就会产生消耗。因此如果多次访问某个DOM节点，就需要将其缓存在局部变量，以此达到提高性能的效果。 DOM访问与修改： 用innerhtml代替使用DOM创造节点的方法； 用局部变量缓存DOM节点，以此减少节点的访问，提高性能； 用element.cloneNode()的方法代替document.createElement(); 若使用元素集合的length，将其保存在局部变量； 使用nextSibling代替childNodes遍历节点（老浏览器中更快）； 使用children代替childNode遍历子节点； 使用querySeletorAll()和querySeletor()代替document.getElementsByTagName()和 document.getElementById(); 重绘和重排： 重排：浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。 例如：添加删除可见的DOM元素；元素位置，尺寸改变；内容改变；浏览器窗口尺寸改变。 重绘：完成重排后，浏览器会重新绘制收到影响的部分到屏幕中。 1、避免或缓存使用最新的布局信息：偏移量(offsets),滚动位置(scroll values),计算出的样式指(getComputedStyle). 2、和并多次对DOM的操作，例如cssText(注：它会覆盖已保存的样式，可使用cssText+=“value”) 进行一系列的操作的时候可以使用以下步骤来减少重排和重绘：使元素脱离文档流，对其应用多重改变，把元素带回文档中。 步骤二中有三种方法：隐藏元素，应用修改，重新显示；使用文本片段；将原始元素拷贝到一个脱离文档流的节点中，修改副本，完成后再替换原始元素。第二种方法最好。