简述网页的渲染机制

网页=HTML(网页元素内容)+css(控制网页样式)+JavaScript(操作网页内容),实现功能或者效果。
浏览器渲染:
先说一下用到的几个概念:

  • DOM :document object Model,浏览器将HTML解析成数据结构,简称DOM。
  • cssOM :浏览器将css解析成树形的数据结构,简称CSSOM.
  • renderTree:DOM和CSSOM 合并后生产renderTree。
  • Layout:计算出Render Tree 每个节点的具体位置。
  • Painting:通过显卡,将layout 后的节点内容分别呈现在屏幕上。

当浏览器通过utl,从后台获得html后,会自上而下的加载,并在加载的过程中,进行解析和渲染。
第一步,解析HTML标签,构建DOM树。
第二步解析CSS标签,构建CSSOM树,在解析的过程中,如果遇到外部的css文件和图片,浏览器你会发出一个请求,来获取css文件和相应的图片。这个请求是异步的,不影响后面html内容的加载。
第三步,把DOM和cssOM组合成渲染书,html和css都解析完后,再渲染树 的基础上进行布局,
第四步painting 计算每个节点的几何结构,把每个节点绘制到屏幕上。
在加载的过程中,如果遇到javascript,html文件会挂起渲染的线程,等JavaScript加载完毕后,html文件在继续渲染。JavaScript要放在body的最后,原因是要先画页面,在操作页面。对于图片盒css在加载时候,会 并发进行,加载js会禁用并发,并且组织其他内容的下载。所以如果把js放到顶部,也会出现白屏的问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容