浏览器资源加载最佳优化（JavaScript 篇）

Question

不同于过去，从 Yahoo优化网站性能的14条规则 中的第 5，6 条。

 5. 将 CSS 样式放在页面的上方 	[css]
 6. 将脚本移动到底部（包括内联的） 	[javascript]

但已经不完全正确了，例如当使用下午的技术之后，位置不那么重要。

另外，如果是需要 JS 文件的下载和执行不阻塞文档和 cssdom 的执行，提高 JS 网络的并行加载能力，需要的 Script-inject 技术也已经过时了，在以前的法则中：

<!-- BAD: blocking external script -->
<script src="//somehost.com/awesome-widget.js"></script>

<!-- GOOD: remote script is loaded asynchronously -->
<script>
    var script = document.createElement('script');
    script.src = "//somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

但是 ，Ilya Grigorik 在如今浏览器技术突飞猛进的情况下，给出了最新的解决方案(注意实用范围)。

<!-- BAD: the pre async / pre preload scanner era -->
<script>
    var script = document.createElement('script');
    script.src = "//somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

<!-- GOOD: simpler, faster, and better all around -->
<!-- Modern browsers will use 'async', older browsers will use 'defer' -->
<script src="//somehost.com/awesome-widget.js" async defer></script>