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)
-
