网页的基本组成结构
网页 = HTML + CSS + JavaScript
HTML:网页元素内容
CSS: 控制网页样式
Javascript: 操作网页内容,实现功能或效果
基本概念:
DOM:浏览器将HTML解析成树形的数据结构。
CSSOM:浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
Layout:计算出Render Tree每个节点的具体位置。
Painting:通过显卡,将Layout后的节点内容分别呈现到屏幕上。
过程
浏览器获得html文件后,会自上而下的加载,并在加载过程中进行解析和渲染。 如果在加载的过程中,遇到外部css文件和图片,浏览器会另外发出一个请求,来获取css文件和相应的图片,这个请求是异步的,并不会影响html文件。
js会阻塞后面内容的呈现和其后组件的下载。
html如果遇到JavaScript文件,html文件会将等待javascript加载完毕后,html文件再继续渲染*。
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.