码迷,mamicode.com
首页 > Web开发 > 详细

html页面渲染过程

时间:2018-11-04 15:36:52      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:on()   logs   构建   UNC   参考   www   html解析   end   元素   

1.解析html文件,创建DOM树
  自上而下解析,遇到任何样式(link、style)和脚本(script)都会阻塞
  1)css加载不会阻塞html文件的解析,但会阻塞dom的渲染
  2)css加载会阻塞后面js语句的执行
  3)js会阻塞html的解析和渲染
  4)没有defer和async标签的script会立即加载并执行
  5)有async标签的js,js的加载执行和html的解析和渲染并行
  6)有defer标签的js,js的加载和html的解析和渲染并行,但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
  7)DOMContentLoaded和onload的区别:DOMContentLoaded在html解析完毕后执行,loload在页面完全加载完成后执行(包括样式和图片)
2.解析css,生成CSSOM,css对象模型
3.dom和css合并,构建渲染树(Render Tree)
4.布局(Layout)和绘制(Paint),重绘(repaint)和重排(reflow/回流)
  1)重绘:根据元素的新属性重新绘制,使元素呈现新的外观
  2)重排:当渲染树中的一部分因为元素的规模尺寸,布局,隐藏等改变而需要重新构建
  3)重排必定会引发重绘,但重绘不一定会引发重排

补充:
监听资源加载完成有四种方式
  1. window.onload = function(){....}
  2. window.addEventListener("load",function(){....});
  3. document.body.onload = function(){....}
  4. <body onload = "load()">

参考:
1.http://www.cnblogs.com/bibiafa/p/9364986.html
2.https://blog.csdn.net/yuhk231/article/details/53581212

html页面渲染过程

标签:on()   logs   构建   UNC   参考   www   html解析   end   元素   

原文地址:https://www.cnblogs.com/bear-blogs/p/9903936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!