前端优化新得一则

因为把公司的电脑搞坏两台，这两天没有工作电脑可用了，所以就不干活，从小图书馆拿了几本书看。其中一本是《高性能网站建设指南─前端工程师技能精髓》。

先说点题外话，这是一本讲前端性能优化的书，但是不看小标题的话，估计会忽悠到许多做后端的同学买下。当然我赞同作者所说的，前端优化解决80%问题的观点，所以如果做后端的同学如果不小心买下了，看看也好的。

总的来说，这本3年前的书所列出的优化规则大多我都熟知，不过每次看书总会有所得。这里记录一个我以前没想到过的优化方法。


两全其美（中文版第59页）

对于脚本或样式表，或者引用外部文件，或者直接在html中内嵌。

前者的优点是可以利用快取（cache），缺点是无快取时（比如用户第一次访问时）多一个http请求。后者的优点是减少了http请求，缺点是无法利用快取，在许多页面使用相同脚本和样式表内容时平白增加了下载量。

对于如何平衡这两者，相信许多同学都有经验。通常来说会倾向于用外部文件，而只在一个页面中使用的脚本和样式就内嵌于html中。另外作为特例，主页可能更适合内嵌（原因参见58页）。

而作者进一步提出了两全其美的办法。

一是加载后下载（post-onload download）。比如在主页中内嵌脚本，并在主页加载完成后的某个空闲时刻加载外部文件。对于当前页面这当然是多余的，因为同样的脚本或样式定义重复了。载入的唯一目的只是为了将外部文件放入快取，从而在载入其他使用外部文件的页面时可以利用快取。考虑到重复载入可能造成的问题，作者提出将这些对外部文件的引用放入一个iframe中，其实这个就是一种预加载方式，所以应该也可以使用XHR等方式来预加载。

进一步的，作者介绍了动态内嵌（dynamic inlining）。以cookie作为指示，如果没有cookie，说明很大可能是第一次访问因而很大可能不存在快取，那么就内嵌脚本和样式（并进行外部文件预加载和设定cookie），而如果已经有cookie，说明很可能已经有快取，那么就引用外部文件。

应该说这个方法是很巧妙的，当然也有一些成本：
1. 服务器端要动态响应，也就是静态html不能胜任，而需要php之类的动态页面技术。当然理论上说服务器只需要根据cookie来选择不同的版本，可以用更轻量级的方式（如apache的mod_rewrite或mod_negoation），配合自动部署系统可以根据源码产生不同部署版本即可。
2. cookie只是一个指示，并不能完全对应快取的状态。实际上目前并没精确的办法来获得某个资源是否存在在快取中的信息（html5草案中的application cache机制或许可以）。而且cookie本身也会失效。如果cookie状态和快取状态不匹配，就不能起到优化的效果，虽然页面仍然能工作。

考虑到这两点，在一般的网站中动态内嵌技术的性价比或许并不是很高。不过如果是像yahoo这样级别的网站，性能可以说榨一点是一点，就确实可以采用了。