Chrome对网页性能的检测--2015-05-05总结

Chrome浏览器非常强大，使用Chrome浏览器对页面性能进行检测，根据测试的结果进行优化。当然这个结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。

1、Chrome检测工具

F12之后点击Audits然后出现了如下界面，选中重载页面开始检测按钮，然后点击Run按钮，之后就是等待结果。

2、检测结果

这个检测结果分为2类，一个是网络，一个是网页性能；



检测结果不仅列出了问题，还定位问题在哪里，可以很快入手解决对应的问题。
问题一：总共有29个可以压缩的JS文件



合并JS文件：Combine external JavaScript

There are multiple resources served from same domain. Consider combining them into as few files as possible.一个域名有多个文件，可以考虑将他们压缩为尽可能少的文件。



启用gzip压缩：Enable gzip compression

Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).启用gzip压缩降低传输大小。



浏览器缓存：Leverage browser caching

The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。资源没有指定过期时间，浏览器可能不会缓存。



代理缓存：Leverage proxy caching (38)　？

Resources with a "?" in the URL are not cached by most proxy caching servers:



Minimize cookie size

The average cookie size for all requests on this page is 36 B



Serve static content from a cookieless domain (35)

12.8 KB of cookies were sent with the following static resources. Serve these static resources from a domain that does not set cookies:



Specify image dimensions (10)

A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:

网页性能部分

1、优化样式和脚本的顺序：Optimize the order of styles and scripts (4)

The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

2、把CSS放到head中：Put CSS in the document head (3)

CSS in the document body adversely impacts rendering performance.

3、删除没用的CSS：Remove unused CSS rules (44)

44 rules (19%) of CSS not used by the current page.

4、Use normal CSS property names instead of vendor-prefixed ones (3)