读书笔记 -- 高性能网站建站指南(JS篇)

  1. 云栖社区>
  2. 博客>
  3. 正文

读书笔记 -- 高性能网站建站指南(JS篇)

吞吞吐吐的 2017-09-06 15:11:00 浏览1008
展开阅读全文

本文目的

最近项目开发到一定阶段了,大部分需求已经完成,可以将精力放到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缓存,参见下面的连接:

 

最小化JS(Rule 10:  Minify JavaScript)

精简:去除所有空白符号,如空格,回车。

混淆:做了精简的工作,同时用简化的字符替换函数名和变量名,进一步减JS件大小。优点:相比于精简,它能够节省更多流量,而且可以保护源代码被反向工程。缺点:1)容易引入bug;2)提高维护成本;3)现网bug难以定位。

压缩:采用gzip等算法压缩。

gzip压缩一般可以节省70%,而精简和混淆只有20%。精简或混淆后再gzip,节省的文件也超不过80%。所以,gzip对节省流量贡献最大。大多数情况,只用gzip就OK了。gzip不会有精简和混淆的缺点。

如何在Linux上设置apache的gzip压缩,参见下面的链接:

 

脚本去重(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优化的内容,希望对你有帮助!(本文欢迎转载,请注明出处,谢谢合作)


本文转自bourneli博客园博客,原文链接:http://www.cnblogs.com/bourneli/archive/2012/10/29/2744875.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
吞吞吐吐的
+ 关注