使用YSlow分析前端頁面性能


YSlow是什么

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

YSlow gives you:

Performance report card
HTTP/HTML summary
List of components in the page
Tools including JSLint

YSlow分析web頁面並基於一種高性能網站的規則集對於提高網站頁面性能提出建議。YSlow是基於Firefox  的頁面開發工具。YSlow基於預先制定的3組規則集或者用戶自定義的規則集對頁面進行分級。它提供一些提高網站頁面性能的建議,分析頁面的組成部分,顯示頁面靜態文件,以及提供一些性能分析工具,包括Smush.it和JSLint

在firebug擴展里找到YSlow並安裝后,它會顯示在firebug選項卡里

開始測試網站

      

   測試結果

         

綜合級別B,算是不錯的結果

最左側列出的平時幾項比較所有推薦的優化原則,包括減少http請求,避免空src屬性,404頁面,使用gzip壓縮頁面內容等,cnblogs大部分都考慮到了。

現在重點說明幾項

1 傾向於使用ajax get請求

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE's maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

當使用XMLHttpRequest時,瀏覽器通過兩步實現post請求, (1) 發送頭信息  (2) 發送數據。因為get方法是把頭信息和數據一起發送的,所以使用get會更好點,除非數據量比較大時,數據量超過一定范圍的話,不適合使用get

2 Put JavaScript at bottom

JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.

瀏覽器在下載js過程過程中會阻斷html下載,將js放置於頁面底部有利於頁面加載。

3 on Use cookie-free domains

When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. To workaround this problem, make sure that static components are requested with cookie-free requests by creating a subdomain and hosting them there.

當瀏覽器向服務器請求一張靜態的圖片前,會先發送同域名下的 cookie,服務器對於這些 cookie 不會做任何處理。因此它們只是在毫無意義的消耗帶寬。所以你應該確保對於靜態內容的請求是無 cookie 的請求。

Use cookie-free domains 的翻譯摘自網絡,平時開發對於這一項不是很注意

另外提供了Yshow一些工具

       

JSLint 是一個在線js語法檢查工具,根據自己的規則檢測js合法性,編寫js時可以作為參考

其它的工具用於顯示頁面所有js,css等功能

使用YShow可以檢測頁面性能,為我們平時的優化起到一定的參考作用

參考閱讀

http://developer.yahoo.com/performance/rules.html#cookie_free

推薦閱讀

一步一步實現網站的多語言版本

說說程序中的日志

如果您覺得文章內容有一定幫助,請點擊推薦

PS:YSlow不僅僅在Firefox下可以使用,同時兼容很多主流瀏覽器,詳細請查看官網

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM