分类目录归档:高性能PHP

前端优化 – 提高客户端下载和呈现性能

1 前端优化评估-Firebug

控制台(Console)选项卡
firebug console
注意,除了这些参数,还有总时间 和 总调用次数。

终端选项卡显示目前浏览的网页上所有的JS日志信息、警告或错误。在某些情况下,Web开发人员可以通过这个窗口使用console.log()追踪JS。它还提供了一种分析页面上执行的JS的方式,如上图。

网络(Net)选项卡
firebug net

2 YSlow(作为Firebug的一部分)
YSlow是一个网页性能分析工具,YSlow采用了一系列规则来为网页评分。目前有两种版本的规则:默认的YSlow v2规则,基于全部22条规则为网页评分;以及Classic v1规则,根据23条规则中的13条为网页评分。YSlow v2中的22条网站优化规则包含CSS优化,图像优化,JS优化,服务器优化。YSlow还提供了可用来优化CSS、JS和HTML的在线工具参考。

YSlow的规则:
CSS优化规则
将CSS样式放置在HTML文件顶部
避免某种CSS表达式
精简CSS文件

图像优化规则
使用所要求的图像大小,而不是在HTML中使用宽度和高度属性重新调整图像尺寸。
在可能的情况下创建子画面(??)

JS优化
将JS放置在HTML底部
精简JS
将JS作为外部文件

服务器优化
服务器是否采用了Gzip/bip2压缩
DNS查找是否有所减少
是否实现了Etag
YSlow 一览

Grade选项卡:
YSlow包含6个结果过滤器,分别是Content、Cookie、CSS、Image、JavaScript和Server。
Statistics选项卡
Statistics选项卡包含关于缓存使用的信息。

Tools选项卡
包含一个工具列表。

3 Page Speed
Google的Page Speed也是用于Firefox/Firebug的插件。与YSlow不同的是,Page Speed提供的信息包括它对哪些文件进行了分析,如何优化文件,在网页的什么地方进行优化以及衡量优化可以提供多少性能的指标。

4 优化工具
4.1 JavaScript放置位置
浏览器在遇到script标记时它会中断网页上所有进一步的程序,因此用户会看到并只能看到等待中的页面内容。如果将所有JavaScript移到HTML文件底部,则HTML将可以呈现更快。

4.2 精简JavaScript
精简操作可通过删除JavaScript文件中的空白空间、移除无用代码、去除注释、缩小变量、删除不必要的代码来减少JavaScript文件的大小。

5 精简工具
主要有两款工具,Yahoo的YUI Compressor已经Google的Closure Compiler。

减少资源请求,合并JS文件。使用服务器端压缩。

6 图像压缩
通用规则,用GIF做页面上的徽标和小图标,用JPEG呈现照片和高品质图像,其它的都有PNG格式。可以更进一步使用Web压缩工具(比如Yahoo!的Smush.it)来压缩图像。 Smush.it是Yahoo开发的无损压缩工具,可以进一步减少图像文件的大小。可以通过www.smushit.com访问该工具。

永久链接: http://blog.ifeeline.com/776.html