如何建设高性能网站--将样式表放在顶部、将脚本放在底部

关心性能的前端开发人员都希望页面能逐步地加载，也就是说：希望浏览器能够尽快显示内容。那么如何实现浏览器逐步的呈现内容给用户值得思考的问题。
白屏一词是经常听别人吐槽网站的词，那怎么写代码会出现白屏的现象呢？
将CSS放在底部会出现白屏的现象，当将CSS放在底部，那么浏览器要等将CSS先全部下载完成之后再进行呈现，这段等待的时间就出现了白屏。
将样式表放在底部会导致白屏问题的情形：
1、在新窗口中打开，
2、重新加载时，就是浏览器刷新，
3、作为主页。
将CSS放在顶部来解决白屏的问题。即文档顶部的HEAD中。
那么怎么引入CSS呢？这个问题也值得思考。
如果使用@import来引入CSS，也会出现白屏的现象。
使用@import规则会导致组件下载时的无序性 。即样式表还是最后下载的。所以请用LINK标签来引入样式。当页面是逐渐的呈现给用户，用户会感觉到快。实际上真正花费较少时间的是用@import引入和将CSS放在底部。
使用LINK标签将样式表放在文档的HEAD中！！！
为什么浏览器使用LINK标签将样式放在文档的HEAD中工作呢？
如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析之前无需绘制任何东西。否则，在还没加载完毕之前显示内容就会遇到FOUC（无样式内容的闪烁）。
将CSS样式放在底部时当页面逐渐加载时，文字首先显示，再者是图片，最后在样式表正确下载并解析之后，已经呈现过的东西再次重新样式绘画----无样式内容闪烁的现象。
脚本（外部JavaScript文件）放在顶部也会阻碍页面的逐步呈现，解决方案是——将脚本从页面的顶部移到底部。这样页面既可以逐步呈现，也可提高下载的并行度。
并行下载：并行下载这次顾名思义就是一起下载。组件可并行下载，它的优点是减少响应时间。但脚本是阻塞下载的。在下载脚本的时候，并行下载是被禁用的。
为什么在下载脚本的时候，并行下载是被禁用的呢？
1、脚本可能使用document.write来修改页面内容，因此浏览器会等待，以确保页面能恰当布局。
2、如果并行下载多个脚本，就无法保证响应按照拿个特定的顺序到达浏览器。
将脚本放在底部，不会阻止页面逐渐呈现，而且页面的组件也可尽早下载。
总结：在使用样式表时，页面逐步呈现会被阻止，直到所有的样式表下载完成，这就是最好将样式表移到文档的HEAD中的原因，能首先下载它们而不会阻止页面呈现。使用脚本时，对于所有位于脚本以下的内容，逐步呈现都被阻塞了，脚本放在页面越靠下的地方，就意味着页面逐步呈现越容易。