前端性能优化之DOM（三）

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”) 进行一系列的操作的时候可以使用以下步骤来减少重排和重绘：使元素脱离文档流，对其应用多重改变，把元素带回文档中。步骤二中有三种方法：隐藏元素，应用修改，重新显示；使用文本片段；将原始元素拷贝到一个脱离文档流的节点中，修改副本，完成后再替换原始元素。第二种方法最好。

转载于:https://www.cnblogs.com/CloverH/p/5246633.html

前端性能优化之DOM（三）相关推荐

在dom最前面插入_前端性能优化之dom编程
写在前面总所周知,在前端的日常里面,采用JS操作DOM节点的情况占据了大多数.虽然现在有MVVM主流框架代替我们做了这些事情,但充分理解在DOM操作各种损耗问题,将有助于让我们更加理解和优化问题. ...
前端性能优化的三个维度
前端性能优化可以分为三个level:静态资源优化.接口访问优化.页面渲染速度优化,在操控门槛上依次递增,优化效果上越发没有这么明显,所以很多小团队只会做到了第一个level 追求极致的前端性能体验,提 ...
前端性能优化（重点）
前端性能优化可以分为三个level:静态资源优化.接口访问优化.页面渲染速度优化一.静态资源优化减少静态资源的加载时间,主要包括html.css.js和图片文件,静态资源的加载时间是前端性能最大的 ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
[译] 2019 前端性能优化年度总结 — 第三部分
原文地址:Front-End Performance Checklist 2019 - 3 原文作者:Vitaly Friedman 译文出自:掘金翻译计划本文永久链接:github.com/xit ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...
移动H5前端性能优化指南[转]
移动H5前端性能优化指南米随随2015.01.23 移动H5前端性能优化指南概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点 ...
WEB前端性能优化小结
1. 请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
前端服务器获取js文件偶尔慢_我所认识的前端性能优化
现象: 用户体验差网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力从哪处理:各处的缓存地址缓存减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...

前端性能优化之DOM（三）

前端性能优化之DOM（三）相关推荐

最新文章

热门文章