网站性能优化(二)一定要将CSS置于顶部，JS置于底部吗？

“CSS文件在header中引入，JS文件在body底部引入”，这条建议在前端界几乎是黄金法则。

首先，笔者声明，坚决支持这条法则！

只不过，在现代浏览器中，尤其是Chrome，已经对浏览器渲染做了极大的优化。哪怕并未遵从这条规矩，恐怕也不会引发太大的性能问题。

（注：下面提到的浏览器仅限于chrome）

1. 误区：浏览器在解析完整个HTML才会渲染页面

其实，“为达到更好的用户体验，render引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，render引擎会将部分内容解析并显示出来”（来自文章《浏览器的工作原理：新式网络浏览器幕后揭秘》By Tali Garsiel and Paul Irish）。

一般，前端主要关心首屏（也就是可视区域内的页面）渲染速度，这也是，为什么要提倡“图片懒加载”的原因。

2. 误区：按照顺序依次下载CSS和JS文件

其实外部脚本文件和CSS文件是并行下载的。笔者做了个小实验，如下。
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事件中触发，这时，页面已经完全呈现（相应的资源文件下载完毕），只需要动态创建