浏览器渲染页面流程

2019-04-18 08:54:39来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

浏览器步骤:

  1. 解析HTML文本,构建dom tree
  2. 歇息CSS样式表,构建CSSOM tree
  3. 根据DOM tree和 CSSOM tree 构建Render tree
  4. 根据Render tree来进行布局处理(Layout)
  5. 将页面元素进行绘制(Painting)

 

谈谈阻塞:

css: css被视为阻塞渲染的资源,也很好理解,要不然怎么构建render tree, 怎么进行布局处理呀~~ 因此浏览器会等待CSSOM tree构建完毕。

js: script标签会阻塞html解析,因为js可能会改变dom和css,因此浏览器会先解析script,避免浪费。 要想避免阻塞的话,可使用defer 和 async。

 

谈谈Repaint和Reflow

Repaint: 发生在屏幕的一部分要重新画,比如背景颜色,布局没有改变!,浏览器只需要走第五步。

Reflow: 布局发生了改变!浏览器需要重新从Layout这一步开始,因为Render tree已经变了。多走一步,显然更加耗费性能啦~~

所以呢重点关注会引起Reflow的操作:

  • 当你增加、删除、修改DOM结点时,会导致Reflow或Repaint
  • 当你移动DOM的位置,或是搞个动画的时候。
  • 当你修改CSS样式的时候。
  • 当你Resize窗口的时候(移动端没有这个问题),或是滚动的时候。
  • 注:display:none会触发reflow,而visibility:hidden只会触发repaint,因为没有发现位置变化。

原文链接:https://www.cnblogs.com/yadiblogs/p/10730123.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:双飞翼布局

下一篇:css常见的各种布局下----三列布局