我各位哥的友链:

大哥:emin.ink;二哥:ashtwo;三哥:pealipala.cn;

信息展示

昵称:aliveto 邮箱:some_body@foxmail.com

影响页面性能的因素,优化DOM节点

1.页面渲染的三步曲:

  1. 绘制domTree
  2. 绘制cssTree
  3. domTree + cssTree = renderTree
构建树的特点:采用深度遍历的原则去构建

[domTree绘制:]

  • 识别标签,将其解析到Tree
  • 遇到img时,将img解析到Tree上,同时开个线程异步去加载src里的资源。
注意:生成dom树叫dom节点的解析,解析完(生成完) ! =  加载完。页面的解析完页面不一定加载完。

[cssTree绘制:]

  • 跟生成domTree一样,最终形成cssTree

[renderTree绘制:]

  • 等domTree,cssTree构建完成后,拼成一个renderTree,两树合并,不占dom节点的不会出现在renderTree上(比如display:none等)。
  • 渲染引擎对randerTree进行布局计算。
  • 将renderTree中的每一个节点都绘制到页面上。

2.影响页面性能,浪费效率的例子:

[reflow(重排);]

1.概念:我们计算他们在当前设备中准备的位置和尺寸,这就是布局要做的工作,该阶段英语中称为‘’回流‘’(reflow)。当renderTree中的一部分或全部因元素的大小.规格.隐藏等改变需要重新构建,也需要回流,重新布局。每个页面至少需要一次回流,就是刚加载的时候。

2.触发重排:

  • dom节点的删除,添加等。
  • dom节点的宽高,位置变化(display:none –>display:block)等。
  • 求元素的offsetWidth,offsetLeft(当获取这两个值是,浏览器为了保持这两个值的实时性,会重新绘制然后返回值)。

[repait(重绘):]

1.概念:当renderTree中的一些元素需要更新属性,而这些属性值影响元素的外观,风格等。

2.触发重绘

  • 元素的颜色,透明度的改变会重绘。重绘对页面产生的影响比较小。

3.优化dom

基于浏览器的智能,当dom 变动或者改动时会触发重排,浏览器会将所有的变动集中在一起,排成一个队列,然后一次性执行完,所以当有可能触发重排的程序尽量写到一起避免触发多次的重排。

实例代码:(避免多次reflow)


odiv.style.left = "40px";
odiv.style.top = "30px";