JS、CSS渲染机制
解析html构建DOM树
解析CSS构建CSSOM树
把DOM和CSSOM组合成渲染树(Render Tree)
在渲染树的基础上进行布局,计算每个节点的几何结构(Layout Tree)
把每个节点绘制到屏幕上(Painting)
当浏览器从服务器接收到了html文档,并把html在内存中转换成DOM树,在转换过程中如果发现某个节点上引用了CSS或者image,就会再发一个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回后,只需要把返回的内容放入到DOM树中对应的位置就可以了。但当引用了JS的时候,浏览器发送一个JS request就会一直等待该request的返回。
CSS应该放在页面顶部的head标签中
由于Render Tree是由DOM树和CSSOM树组合成的,html页面需要等到CSS解析完后才能完成渲染,所以CSS应放在head标签内,优先下载解析,以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。
JS应该放在body的底部
因为浏览器需要一个稳定的dom树结构,而且js中很有可能有代码直接改变了dom树结构,浏览器为了防止出现js修改dom树,需要重新构建dom树的情况,所以就会阻塞其他的下载和呈现。
将JavaScript放在head内和body底部的区别也在于此,放在head里面,由于浏览器发现head里面有JavaScript标签就会暂时停止其他渲染行为,等待JavaScript下载并执行完成才能接着往下渲染,而这个时候由于在head里面这个时候页面是白的;如果将JavaScript放在页面底部,render Tree已经完成大部分,所以此时页面有内容呈现,即使遇到JavaScript阻塞渲染,也不会有白屏出现
如果CSS和JS都在head标签内,则应将JS放在所有CSS的前面
JS的执行有可能依赖最新样式。比如,可能会有var width=$('#id').width,这意味着,JS代码在执行前,浏览器必须保证在此JS之前的所有CSS(无论外链还是内嵌)都已下载和解析完成。
而嵌入的JS会阻塞后面的资源加载,所以当head中js放在CSS后面时,就会出现CSS阻塞下载的情况。
把JS放在CSS后会导致页面阻塞,去等待CSS的下载。
另外如果要在head引入JS尽量将JS内嵌。
async和defer也可以达到不阻塞渲染的效果
带有 defer 属性的
但是
defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持,所以它不是一个理想的跨浏览器解决方案。在其他浏览器中,defer属性会被直接忽略,因此
async的作用和 defer一样,能够异步地加载和执行脚本,不因为加载脚本而阻塞页面的加载。
但是
在有 async 的情况下,JavaScript 脚本一旦下载好了就会执行,所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性,使用 async 就很有可能出现错误。
本文版权属吴天乔所有,转载务必注明出处。
如有错误,欢迎指出。