前段优化随笔

第二章             优化客户端浏览器的下载和展示

 

1、  第一类工具如Firebug 、Yslow、Page Speed帮助分析 HTTP相应的以下部分

服务器响应的全面检测

前段文件包括里面js代码的逻辑结构

浏览器获取的资源列表

浏览器获取资源所花的时间

优化服务器响应的建议

 

2、第二类工具如 YUI Compressor、Closure compiler、Smush it 可以帮助优化服务器响应

         Firebug调试js  console.log()????

         Console tab（控制台）,点击“概况”，页面会显示JS函数信息，

名称	注释
函数	调用函数名
调用	调用次数
百分比	此函数调用时间占所有函数时间比例
占用时间	函数调用话的时间
时间	不知以楼上有何差别
平均时间	时间/调用
最小时间	调用函数的最小时间
最大时间	调用函数的最大时间
文件	JS函数所在的文件

 

 

网络

URL 状态 域  大小  远程IP  时间线

这个好像没什么好解释的

 

3、  YSlow v2 可以优化以下内容

         CSS    Image   Javascript    Server

1、  css优化

         把CSS文件放在html文件的顶部

         避免直接在HTML中使用HTML表达式

         缩小css文件的大小(减少css文件中的空白、换行)

 

2、  Image优化

         指定图片的大小而不是使用width  height属性

         尽量创建sprites 以 图片请求数量

                          

3、  Js优化

引入的JS文件放在HTML的底部

减少JS文件大小（去掉空白）

外部引入JS

减少引入的js文件数量

 

4、  server优化

         服务器是否使用Gzip/bzip2压缩

         DNS查找是否减少

         是否有ETags

 

 

4、YSlow下载https://addons.mozilla.org/en-US/firefox/search?q=YSLOW&cat=all

 

5、page speed下载https://dl-ssl.google.com/page-speed/current/page-speed.xpi，优化的有很多项可以参考。ss

 

6、YUI compressor  js文件精简

 

7、Closure compiler  同上

 

8、Smush.it  image服务器文件压缩