js和css文件位置对页面性能的影响
翻译了一篇Performance上的关于页面性能的文章《DecIPhering the critical rendering path》,原文在这里。需要进一步整理和了解有关js、css等脚本位置对性能的影响。以下总结了几点原理：
- 同步脚本会阻止页面中其他内容的加载与显示。例如dom树的构建，因为js可能会有document.write操作，所以必须等到同步js脚本下载执行完毕之后，页面的解析才会继续
- js脚本可能会被css阻塞，例如js需要获取dom元素的计算样式，就需要等待CSSOM的完成。有一些隐式使用计算样式的情况，例如使用jquery获取dom元素的width，源码中就是使用的js获取计算样式
- <head>中包含的js脚本，必须等待js脚本都被下载、解析和执行完成之后，才开始呈现页面（浏览器遇到<body>标签才开始显示内容）
- defer属性，只适用于外部脚本文件。脚本会立即下载，但是会延迟到整个页面都解析完毕之后再运行。defer多个脚本是按照顺序执行的，如果有依赖关系，需要特别注意脚本顺序。
- async属性，同样只适用于外部脚本。浏览器立即下载脚本，但是下载完毕之后立即执行。使用async主要是脚本下载时并不影响页面的渲染。多个async脚本之间不能保证运行顺序。
- window.load事件在页面的一切加载完毕时触发
- HTML5的DOMContentLoaded事件则在形成DOM树完成后触发，在页面进入domInteractive状态之后立即触发（DOM树构建完成之后，页面进入domInteractive状态,domInteractive状态意味着用户可以与页面产生交互）
- 待续
参考文档
2、HTML5官方文档关于DOM树完成之后，脚本的执行以及状态的变化的部分
