“CSS文件在header中引入，JS文件在body底部引入”，这条建议在前端界几乎是黄金法则。
首先，笔者声明，坚决支持这条法则！
只不过，在现代浏览器中，尤其是Chrome，已经对浏览器渲染做了极大的优化。哪怕并未遵从这条规矩，恐怕也不会引发太大的性能问题。
（注：下面提到的浏览器仅限于chrome）
1. 误区：浏览器在解析完整个HTML才会渲染页面
其实，“为达到更好的用户体验，render引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，render引擎会将部分内容解析并显示出来”（来自文章《浏览器的工作原理：新式网络浏览器幕后揭秘》By Tali Garsiel and Paul Irish）。
一般，前端主要关心首屏（也就是可视区域内的页面）渲染速度，这也是，为什么要提倡“图片懒加载”的原因。
2. 误区：按照顺序依次下载CSS和JS文件
其实外部脚本文件和CSS文件是并行下载的。笔者做了个小实验，如下。
HTML部分：
<html>
<head>
<link rel="stylesheet" href="css.css">
</head>
<body>
...
<script type="application/javascript" src="js1.js"></script>
<script type="application/javascript" src="js2.js"></script>
</body>
</html>
脚本和CSS加载情况：
loading.png
一般资源（如图片，CSS文件）的获取和加载不会阻挡当前webkit的渲染过程，但是，某些资源会阻碍主线程渲染（如JS文件），这时，webkit会启动另外一个线程去遍历后面的HTML，并收集需要的资源URL，发起请求。因此，Chrome支持并发下载资源文件（参考《WebKit技术内幕-朱永盛》）。
有文章将此现象称为“浏览器预解析”：浏览器先对HTML代码做静态分析找到外链的JS和CSS文件，然后并行下载(但是执行顺序不变)。PS：IE>=8 及其他主流浏览器基本都实现了这个功能。
注意：针对JS文件，并行下载完成后，有序执行。
小贴士：
Chrome浏览器渲染过程步骤如下（简单分析）：
1. 解析HTML构建DOM树，同时下载脚本，CSS和图片；
2. CSS文件下载好之后构建CSSOM树；
3. DOM tree和CSSOM tree合并生成Render tree;
4. 做重排(layout)和重绘(paint)工作；
3.小结
为了提高性能，真正需要关心的是“首次必须加载哪些CSS和JS？”，尽可能通过异步方式加载那些并不是首屏必需的外部文件。并且，尽量不要加载那些会频繁操作DOM节点定位或样式（尤其是首屏的DOM元素）的JS文件，否则，会导致页面做多次重排和重绘工作，影响渲染速度。
那么，如何异步加载脚本或者CSS文件？
加载事件一般在window.onload事件中触发，这时，页面已经完全呈现（相应的资源文件下载完毕），只需要动态创建<script>标签或者<link>标签即可，如下（注意：动态加载文件也可以利用浏览器缓存）：
window.onload = function(){
downloadCSS("a.css");
downloadJS("b.js");
}
//动态加载CSS文件
function downloadCSS(url) {
var elem = document.createElement("link");
elem.rel = "stylesheet";
elem.type = "text/css";
elem.href = url;
document.body.appendChild(elem);
}
//动态加载JS文件
function downloadJS(url) {
var elem = document.createElement("script");
elem.src = url;
document.body.appendChild(elem);
}
微信公众号：
网友评论