README.md

怎样更快的让页面可见且可操作

讨论的前提条件：

1. head里的css文件体积较大，加载时间较长
2. 要求不仅能够尽快展现东西给用户（需要尽快加载、解析完相应的html+css），还要让用户能够尽快交互某些东西（在此以搜索框为例，需要尽快加载、解析完相应的html+js）
3. 对不支持预加载的浏览器

分析

搜索框的html：放在尽量靠近body标签的地方即可。

搜索框的css：放在head中即可。

搜索框的js：

在此假定foo.js中实现搜索框的交互逻辑。

在传统的方案中，js全放在html文件的底部，需要等待head中大量的css和全部html加载、解析完才发出请求。所以，能不能让foo.js尽快执行。

解决方案

在head中的css前面使用script[async]加载foo.js，对于不支持script[async]的浏览器，使用内联的js动态插入script标签来加载foo.js，在主流浏览器中具有和script[async]同样的效果。

为什么不放在head里的css后面

放css后面需要等待css的加载、解析

foo.js中怎么知道搜索框的html被解析并生成相应的DOM元素了？

1. DOMContentLoaded事件 搜索框的html后面可能还有比较多的html和js需要加载、解析，但我们没必要等它们都加载、解析完，还有可加快的空间
2. 搜索框html后面放一段执行时间很短的js，告诉foo.js搜索框的html被解析过了 如果这段js前后有img，会使得前后img的加载变成串行的
3. 在搜索框中用html的onclick属性通知foo.js用户在操作这个搜索框，这样foo.js中就不需要查找DOM来获取搜索框元素的引用了。 比如onclick="getAutoComplete(this)"来获取搜索框的自动补全数据，并传入搜索框dom元素的引用。

TODO

• 实践，验证
• 研究：head中静态加载的css能不能体积小点，能不能在head中只静态加载首屏的css，后续的css再动态插入。
• 考虑在支持预加载的浏览器下应该怎么做