博客地址:http://www.kapeter.com/archives/326
详细讲解请见:《高性能网站建设指南》
规则一:减少HTTP请求
1、图片地图(Image Map):将图片合并,通过定位响应操作,适用于导航栏或使用多个图片做超链接。
2、CSS Sprites(雪碧图):将多个小图片合并,利用background-position指定显示偏移量,雪碧图制作工具:Go!Png(由腾讯alloyteam团队开发)
3、内联图片(Inline Images):没有使用过……
4、合并CSS样式表和Javascript脚本:尽量将css代码放到一个文件中,javascript同理。
规则二:使用内容发布网络(CDN)
简而言之,就是在多个地理位置部署服务器,用户访问网站时会自动连接到离自己最近的服务器,从而提高响应速度,相当于设置了多个网站副本。
个人网站忽略此条,完全是用钱堆出来的……
规则三:添加Expires头
Expires:Fri, 14 Aug 2015 02:24:29 GMT Cache-Control:max-age=315360000
第一段代码表示在2015年8月14日02:24:29前可以使用当前缓存,第二段代码表示自请求开始后的十年中都能使用该副本,第二段代码较一段的好处在于不需要更新失效日期。这些长期有效的缓存适用于那些不需要经常更改的组件,比如CSS样式表等。如果我们更改了这些缓存,我们可以通过修改文件名的方式(如加入版本号),让浏览器重新发送请求。
规则四:压缩组件(gzip)
这一点,你需要对服务器进行配置,博主使用的是虚拟主机,没有实践过……
详细请参加Apache的mod_gzip模块。
规则五:将样式表放在顶部
众所周知,浏览器是逐步解析的,将样式表放在最后,虽然可以使页面元素更快地加载,但存在“白屏”或“闪屏”的风险,即当页面加载完毕后,样式表会对页面进行重绘,画面会发生改变,从而引起“闪屏”。因此,虽然从性能的角度来说,放在底部会加快页面加载速度,但极大的影响了用户体验,两者权衡之下,用户体验更为重要,因此将样式表放在顶部。
规则六:将javascript脚本放在底部
原理同规则五。
前端开发基本常识之一:脚本会阻塞浏览器的下载与解析,即浏览器会先解析javascript脚本,再进行下一部分的加载。
同时,将javascript脚本放在底部还能避免另一个问题发生,详见我的博文:《JS错误”Cannot set property onclick of null”的解决方法》。
规则七:避免CSS表达式
div{ position: absolute; width: 100px; height: 100px; left: expression(document.body.offsetWidth - 110 + "px"); top: expression(document.body.offsetHeight - 110 + "px"); background: red; }
观察上面的代码,每当用户进行操作时,表达式就会被执行一次,如果存在多个div,执行次数会达到一个恐怖的数字,导致用户的浏览速度明显变慢。
解决方法很简单,将表达式写在javascript脚本中,明确用户执行什么操作运行这段代码。
规则八:使用外部Javascript和Css
首先,需要明确一点 ,内联样式的加载速度优于外部样式。举个例子,一个页面有4个CSS文件和一个Javascript文件,那么它的HTTP请求为6,而如果将这些通过内联集合到一个页面中去,则HTTP请求为1,可想而知,哪个更加快速。
但这里我们需要考虑两点,外部文件是可以建立缓存的,而内联样式是做不到的。如果用户访问我们网站多个页面,而这些页面之前存在通用样式,用户在第一次访问我们的主页时,就缓存了这些文件,接下来就不需要再去请求这些外部文件。第二,外部文件还有一点好处,那就是代码重用,你可以在不同页面反复调用这些代码,比如网站的头部和底部样式,基本上整个网站使用同一个样式,使用外部文件可以大大地减少我们开发的工作量。
规则九:减少DNS查找
Internet是通过IP地址来查找服务器的,但这些IP地址很难被记忆,因此通常使用URL(即网址)来取代它。当我们在浏览器中输入URL后,DNS通过该URL去查找对应的IP地址返回给浏览器,从而与服务器建立连接。这一部分也是会消耗一定的时间的,因此需要减少DNS查找。基本方法是在计算机中设置DNS缓存,不过博主基本没用过……
规则十:精简Javascript和Css
简而言之,就是压缩Javascript和css文件的大小。具体做法是,删除文件中的空格与注释,将一些变量转变为更加短小的字符串,来减小文件大小。具体案例可以参考jquery,压缩前的jquery.js有几百KB,压缩后的jquery.min.js大小减少到90KB。
这里我推荐两个压缩插件:
js压缩工具:uglify(该插件也是jquery所使用的压缩工具)
css压缩工具:grunt-contrib-cssmin
具体配置方法请见:Grunt搭建前端开发环境
规则十一:避免重定向
一句话:不要使用重定向……
规则十二:移除重复脚本
如果是个人开发,一般不会出现这种情况。但大型的网站项目中,往往有很多团队成员参与同一个页面的开发,成员A不知道成员B重复已经引用了C.js这个文件,从而导致了重复脚本。我们可以通过设置版本号避免这一问题。
规则十三:配置ETag
规则十四:使ajax可缓存
<---------------------------------------------------华丽的分割线--------------------------------------------------->
使用Yslow进行网站性能优化
什么是YSlow?
Yslow是雅虎开发的基于网页性能分析浏览器插件。
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。
YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修改意见。
以上的yahoo!军规十四条均被整合在插件中。
如何使用YSlow?
这里我使用的是Firefox浏览器。
在安装YSlow之前,你需要确保自己的浏览器安装了Firebug。
YSlow可在火狐插件商店直接下载,它被集合在Firebug界面中。
不幸的是,最新版的Firefox无法兼容YSlow,
你可以访问这里http://yslow.org/mobile/
把页面最后的那个Desktop Bookmarklet Installation Instructions 里的 Yslow 按钮拖拽到火狐的书签工具栏即可。
以下是我个人博客的YSlow检测结果。
上文提到的十四条军规其实是Yslow的第一个版本,目前规则已经扩充到23条,功能更加强大了。
你还有什么理由不用它呢!