网页=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放到顶部,也会出现白屏的问题。