读书笔记 -- 高性能网站建站指南（JS篇）
本文目的
最近项目开发到一定阶段了，大部分需求已经完成，可以将精力放到Web性能优化上。首先从前端js入手，找来这本书《高性能网站建站指南》作为指导。周末在家将所有JS相关的优化点阅读了一边，现在记录下要点，作为备忘。
主要有四点需要优化的地方：
- 将脚本放到底部（Rule 6: Put Scripts at the Bottom）
- 将JS和CSS放到页面外部（Rule 8: Make JavaScript and CSS External）
- 最小化JS（Rule 10: Minify JavaScript）
- 脚本去重（Rule 12: Remove Duplicate Scripts）
下面逐一分析原因（亲，Rule后面的数字越小，越重要哟！）。
将脚本放到底部（Rule 6: Put Scripts at the Bottom）
脚本加载会堵塞其他页面元素的并行下载，比如图片。所以，最好将脚本等引用放到页面底部。
脚本放到顶部和底部的性能区别，可以参考这个的例子：http://stevesouders.com/hpws/move-scripts.php
将JS和CSS放到页面外部（Rule 8: Make JavaScript and CSS External）
从一次页面加载而言，同样大小的页面，内置的css和js比外置的快。因为外置的页面会有多个http请求，由于网络延时和带宽等原因，比较耗时，所以较慢。但是，如果页面被用户访问多次，并且访问期间js和css没有改变，那么外置的页面就会更快，更省流量，并且这种优势，随着页面访问量的加大和频率加快而加强。所以，一个页面的js和css是否放到外部，是基于此页面的访问量，访问频率而定的，不能一概而论。
如何在Linux上设置apahce缓存，参见下面的连接：
- Apache官网参数资料：http://httpd.apache.org/docs/current/mod/mod_expires.html
- 快速配置apache缓存（如果apache配置不陌生，5分钟可以搞定）：http://wesoho.blog.51cto.com/715082/186347
最小化JS（Rule 10: Minify JavaScript）
精简：去除所有空白符号，如空格，回车。
混淆：做了精简的工作，同时用简化的字符替换函数名和变量名，进一步减JS件大小。优点：相比于精简，它能够节省更多流量，而且可以保护源代码被反向工程。缺点：1）容易引入bug；2）提高维护成本；3）现网bug难以定位。
压缩：采用gzip等算法压缩。
gzip压缩一般可以节省70%，而精简和混淆只有20%。精简或混淆后再gzip，节省的文件也超不过80%。所以，gzip对节省流量贡献最大。大多数情况，只用gzip就OK了。gzip不会有精简和混淆的缺点。
如何在Linux上设置apache的gzip压缩，参见下面的链接：
- Apache官网参考资料：http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
- 快速配置apahce gzip模块（5分钟可以搞定）：http://yangsiwei.com/add-mod_deflate-module-to-apache2
脚本去重（Rule 12: Remove Duplicate Scripts）
脚本可能会多重引用吗？如果同一个页面，只有你一个人编辑，可能不会，但是如果同一个页面有数个人同时编辑，那么引用重复的脚本的概率很大。据此书给出的数据，截至写书时，CNN和youtube两个站点出现过此情况。浏览器然道不会记录已经下载的脚本吗？此书说ff不会重复下载，但是IE会。不过经过IE8实验后,，发现IE8也不会重复下载。可能此书年代较为久远（2008年），也可能是此问题被此书指出之后，IE接受并修复了。所以“纸上得来终觉浅，绝知此事要躬行”。
但是，即使没有多的http请求，那么就可以放任这类情况不管了吗？当然不行，因为虽然不会加载多的http请求，但是会重复执行代码。这样轻则影响性能，重则引入bug。可以参见这个例子：http://stevesouders.com/hpws/dupe-scripts-cached10.php。此例子将一个脚本包含了10次，每一次就会将一个全局变量自增1，最后此变量自增了10次。
此书最后还提供了一个自动解决脚本重复的方案，主要是通过js代码引入脚本，有兴趣的同学可以去下载此书看看究竟。
OK，上面就是学到的一些前端JS优化的内容，希望对你有帮助！（本文欢迎转载，请注明出处，谢谢合作）
