關於Yahoo十四條軍規與前端性能優化

時間  2019-12-01
標籤 關於 yahoo 十四 軍規 前端 性能 優化 欄目 硅谷 简体版
原文   原文鏈接

關於Yahoo十四條軍規與前端性能優化

熱度 4已有 223 次閱讀2014-8-3 15:01 |我的分類:前端相關|系統分類:前端優化| 前端優化, yahoo, 性能優化php


  • 啓用Gzip壓縮。Gzip的思想就是把文件先在服務器端進行壓縮，而後再傳輸。這樣能夠顯著減小文件傳輸的大小。傳輸完畢後瀏覽器會 從新對壓縮過的內容進行解壓縮，並執行。目前的瀏覽器都能「良好」地支持 gzip。不只瀏覽器能夠識別，並且各大「爬蟲」也一樣能夠識別，各位seoer能夠放下心了。並且gzip的壓縮比例很是大，通常壓縮率爲85%，就是 說服務器端100K的頁面能夠壓縮到25K左右再發送到客戶端。具體的Gzip壓縮原理你們能夠參考csdn上的《gzip壓縮算法》 這篇文章。雅虎特 彆強調， 全部的文本內容都應該被gzip壓縮: html (php), js, css, xml, txt… 這一點咱們網站作得不錯，是一個A。之前咱們的首頁也並非A，由於首頁上還有不少廣告代碼投放的js，這些廣告代碼擁有者的網站的js沒有經 過gzip壓縮，也會拖累咱們網站。
  • 減小HTTP請求數。當你輸入url地址按回車鍵到下載內容到客戶端瀏覽器後，須要通過1. 域名解析   2. 開啓TCP鏈接 
       3. 發送請求 
       4. 等待(主要包括網絡延遲和服務器處理時間)
       5. 下載資源         
    減小http請求有這樣幾個優勢:
    (1)   減小DNS請求所耗費的時間.
    且不說對錯,由於從基原本說,減小http請求數的確能夠減小DNS請求和解析耗費的時間.
    (2)   減小服務器壓力.
    這個一般是被考慮最多的,也是我用來說解給別人聽的最大理由,由於每一個http請求都會耗費服務器資源,特別是一些須要計算合併等操做的服務器,耗費服務器的cpu資源可不是開玩笑的事情,硬盤能夠用錢買來,cpu資源可就沒那麼廉價了.
    (3)   減小http請求頭.
    當咱們對服務器發起一個請求的時候,咱們會攜帶着這個域名下的cookie和一些其餘的信息在http頭部裏,而後服務器響應請求的時候也會帶回一些cookie之類的頭部信息.這些信息有的時候會很大,在這種請求和響應的時候會影響帶寬性能.
  • 無疑，每一次http請求都是 很是耗時的，那麼，該如何減小http請求數呢？
  • 如何減小請求數

    一、合併文件
         合併文件就是把不少JS文件合併成1個文件，不少CSS文件合併成1個文件，這種方法應該不少人用到過，這裏不作詳細介紹，
         只推薦1個合併的工具：yuiCompressor 這個工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/

      二、合併圖片
         這是利用css sprite，經過控制背景圖片的位置來顯示不一樣的圖片。這種技術也是你們都用過的，不作詳細介紹，推薦1個在線合併圖片的網站:http://csssprites.com/

      三、把JS、CSS合併到1個文件
         上面第1種方法說的只是把幾個JS文件合併成1個JS文件，幾個CSS文件合併成1個CSS文件，哪如何把CSS和JS都合併到1個文件中，見個人另1篇文章:
         http://www.blogjava.net/BearRui/archive/2010/04/18/combin_css_js.html

      四、使用Image maps
         Image maps 是把多個圖片合併成1個圖片，而後使用html中的<map>標籤鏈接圖片，並實現點擊圖片不一樣的區域執行不一樣的動做，image map在導航條中比較容易使用到。
         image map的使用方法見： http://www.w3.org/TR/html401/struct/objects.html#h-13.6

      五、data嵌入圖片
         這種方法把圖片進行編碼直接嵌入到html中進行使用，以減小HTTP請求，但這個會增長HTML頁面的大小，並且這樣嵌入的圖片不能緩存。
  • 將CSS文件放在<head></head>標籤中，是爲了防止在低網速的狀況下，用戶的IE瀏覽器只能看到空白頁。Firefox雖然不會阻止，但可能須要重畫，這就可能致使頁面閃爍的問題。因此，爲了提升瀏覽器的渲染性能，避免頁面出現空白或者閃爍的現象。應該將css文件放在<head>標籤中，而不是<body>標籤。
  • 使用CDN內容分發網絡。CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。
  • 將<script>標籤放在最下面。他會先講內容呈現出來，不會讓用戶等得過久。由於防止script腳本的執行阻塞頁面的下載。在頁面loading的過程當中，當瀏覽器讀到js執行語句的時候必定會把它所有解釋完畢後在會接下來讀下 面的內容。不信你能夠寫一個js死循環看看頁面下面的東西還會不會出來。因此放在頁面最後，能夠有效減小頁面可 視元素的加載時間

  • 添加Expire/Cache-Control 頭：Add an Expires Headercss

    如今愈來愈多的圖片，腳本，css，flash被嵌入到頁面中，當咱們訪問他們的時候勢必會作許屢次的http請求。其實咱們能夠經過設置 Expires header 來緩存這些文件。Expire其實就是經過header報文來指定特定類型的文件在覽器中的緩存時間。大多數的圖片，flash在發佈後都是不須要常常修 改的，作了緩存之後這樣瀏覽器之後就不須要再從服務器下載這些文件而是而直接從緩存中讀取，這樣再次訪問頁面的速度會大大加快。html

  • 避免使用CSS Expression表達式。CSS表達式會下降瀏覽器的渲染性能；在頁面滾動乃至鼠標移動和頁面縮放的時候全部元素都要被從新計算一次，大大下降了瀏覽器的性能。


    8. 把css文件和js文件放外部。不只從性能優化上會這麼作，用代碼易於維護的角度看也應該這麼作。把css和js寫在頁面內容能夠減小2次請求，但也增 大了頁面的大小。若是已經對css和js作了緩存，那也就沒有2次多餘的http請求了。固然，我在前面中也說過，有些特殊的頁面開發人員仍是會選擇內聯 的css和js文件。也大大提升了css和js代碼的複用性。


    寫在頁面內的狀況：只用用於一個頁面；不常常被訪問到；腳本和樣式不多。


    9. 減小DNS請求：在網絡 上每臺計算機都對應有一個獨立的ip地址。在域名和ip地址之間的轉換工做稱爲域名解析，也稱DNS查詢。一次DNS的解析過程會消耗20-120毫秒的 時間,在dns查詢結束以前，瀏覽器不會下載該域名下的任何東西。因此減小dns查詢的時間能夠加快頁面的加載速度。yahoo的建議一個頁面所包含的域 名數儘可能控制在2-4個。


    IE默認的DNS緩存時間爲30min；Firefox爲60s；chrome爲60s；




    10.
    壓縮 JavaScript 和 CSS 。能夠去除沒必要要的字符、註釋和空格。
    壓縮js和css的左右很顯然，減小頁面字節數。容量小頁面加載速度天然也就快。並且壓縮除了減小體積之外還能夠起到必定的保護左右。這點咱們作得不錯。 經常使用的壓縮工具備JsMin、YUI compressor等。另外像http://dean. edwards.name/packer/還給咱們提供了一個很是方便的在線壓縮工具。



    11. 避免重定向。原始請求被轉向了其餘請求。









    14.使用AJAX緩存。


另外，除了以上的yahoo十四條軍規外，還可使用以下三條優化建議：
高性能HTML
1、避免使用iframe
　　iframe也叫內聯frame，可將一個HTML文檔嵌入另外一個HTML文檔中。
　　iframe的好處是，嵌入的文檔獨立於父文檔，一般也藉此使瀏覽器模擬多線程。缺點是：
　　①雖然iframe能模擬多線程，但主流瀏覽器的同域名並行下載數是不變的，瀏覽器對同域名的連接老是共享瀏覽器級別的鏈接池，
　　   即便是不一樣窗口或標籤頁的同域名網頁。
　　②在頁面加載時，iframe會阻塞父文檔onload事件的觸發。而且有些瀏覽器需在觸發onload事件後才能被觸發onunload事件。
　　   故用戶用onload事件長久未觸發而離開頁面時，不會觸發onunload事件。
　　　　※不兼容IE6~8的解決方案：使用JavaScript動態加載iframe元素或動態設置其src屬性。
  1. <iframe id=ifr ></iframe>
  2. document.getElementById( ‘ifr’ ).setAttribute( ‘src’ , ‘url ’ );
複製代碼



　　③iframe是文檔內最消耗資源的元素之一，即便是空iframe的開銷也是昂貴的。【經過 Steve Souders測試】

2、避免空鏈接屬性
　　空鏈接指：img、link、script 和 iframe元素的src或href屬性的值爲空。（如src = 」」）
　　設置了空鏈接後瀏覽器依然會以默認規則發送請求：
　　①IE6~8中只有img元素會出問題：IE會將img的空地址解析爲當前頁面地址的目錄地址並請求。
　　　如當前網頁地址爲 http://aaa.com/bb/c.html，img的地址會被解析爲 http://aaa.com/bb
　　②早些版本的Webkit和Firefox會將空鏈接解析爲當前頁面的地址。在ios與android中此問題較嚴重。
　　　若是頁面有多個空鏈接屬性元素，會增長服務器的請求次數。
　　③幸運的是，主流瀏覽器對iframe的src屬性值爲空時，會解析爲about:blank地址，而不發送額外請求。

3、避免節點深層級嵌套
　　層級越深的節點在初始化構建時，所佔內存越多。
　　經過瀏覽器HTML解析器會將整個HTML文檔的結構存儲爲DOM樹結構。當節點嵌套層次越深，構建的DOM書層次也越深。

4、縮減HTML文檔大小
　　①刪除對執行結果無影響的空格空行和註釋；
　　②避免table佈局；
　　③使用HTML5；

五。顯式指定文檔字符集
　　在HTML頁面開時指定字符集有助於瀏覽器當即開始解析HTML代碼。
　　HTML文檔一般被解析爲一序列的帶字符集編碼信息的字符串，經過Internet傳送。
　　字符集編碼在HTTP響應頭中，或HTML標記中指定。瀏覽器經過指定的字符集，吧編碼解析爲可現實在屏幕上的字符。
　　若瀏覽器沒法獲知頁面的編碼字符集，通常會在執行腳本和渲染頁面以前，先將字節流緩存，再搜索可進行解析的字符集 或 以默認字符集來解析。

6、顯示設置圖片的寬高
　　有時須要在頁面加載完以前，就對頁面佈局進行定位。
　　若頁面中的圖片沒指定尺寸，或尺寸與實際圖片大小不符，瀏覽器會在圖片下載完成後再"回溯"該圖片並從新顯示，從而浪費時間。
　　故最好爲頁面的圖片設置指定尺寸（行內樣式或CSS樣式）。
  1. <img src="hello.png" width="400" height="300">
複製代碼



7、避免 腳本阻塞加載
　　瀏覽器在解析常規script標籤時，會等待script下載完畢後，才解析執行，以後的HTML代碼就只能等待。
　　故應該將腳本放在文檔的末尾：
  3. <script src="example.js" ></script>
  4. </body>
複製代碼



高性能CSS
1、避免使用@import
　　CSS2.1加入的@import，會使頁面在加載時添加額外延遲。
　　因爲瀏覽器不能並行下載樣式，會致使頁面增添額外的往返耗時。而使用<link>能並行下載樣式，但任然是屢次請求。
2、避免AlphaImageLoader濾鏡
　　此濾鏡能解決IE6即一下版本顯示PNG圖片的半透明效果，但會在加載圖片時終止內容的呈現，並凍結瀏覽器。
　　在每一個元素(不只僅是圖片)都會運算一次，添加內存開支。
　　應使用PNG8格式來代替，或用下劃線(_filter)只針對IE6。
3、避免CSS表達式
　　CSS表達式是設置動態CSS屬性的即強調又危險的方法。IE5開始支持，IE獨有。

// 實現每隔一小時切換一次背景顏色
 
複製代碼

　　CSS表達式的缺點是技術頻率極大，在頁面顯示、縮放、滾動 或 移動鼠標，都會從新計算一次。移動隨便會達到1w次以上的計算量。
　　①使用一次性的表達式能減小計算次數，在第一次運行時將結果賦給指定樣式屬性，並用該屬性代替CSS表達式。
　　②若是樣式屬性必須在頁面週期內動態地改變，使用時間句柄代替CSS表達式是一個可行的辦法。

4、避免通配選擇器
　　優化選擇器的原則是減小匹配時間。CSS選擇器的匹配機制是：從右向左進行規制匹配的！
　　　　#header > a { font-weight:blod; }
　　　　　　上面這條規制實際是瀏覽器遍歷頁面全部a元素，並肯定其父元素的id是否爲header。
　　　　#header  a {...}
　　　　　　後代選擇器開銷更大，在遍歷頁面的全部a元素後，會需向上遍歷直到根節點。
　　由此可知，選擇器最右邊的規制 每每決定了向左移匹配的工做量。故最右邊的選擇規則 稱之爲關鍵選擇器。
　　　　.selected * {...}
　　　　　　在匹配全部元素後，再分別向上匹配直至根節點。一般比開銷最小的ID選擇器高出·~3個數量級。

5、避免單規則的屬性選擇器
　　.selected [href='#index'] {...}
　　　　瀏覽器先匹配全部的元素，檢查其是否有href屬性而且值爲「#index」，再分別向上匹配class爲selected的元素。
　　故應該避免使用關鍵選擇器是單規則屬性選擇器的規則。

6、避免正則的屬性選擇器
　　CSS3添加了複雜的屬性選擇器，經過類正則表達式進行匹配。但這些類型的選擇器會比基於類別的匹配慢不少。

7、移除無匹配的樣式
　　①刪除無用的樣式，可縮減樣式文件大小，加快加載速度。
　　②對於瀏覽器，全部樣式規則都會被解析後索引發來，即便是當前頁面無匹配的規則！故移除無匹配的規則，減小索引項，加快瀏覽器查找速度。

高性能JavaScript
1、使用事件代理
　　當過多的時間句柄被頻繁觸發時，頁面反應會遲鈍。
　　如一個div有10個按鈕，只需給div附加一次事件句柄，而沒必要給每一個按鈕添加一個句柄。
　　　　事件冒泡時刻捕捉到事件 並判斷時那個事件發出的。【觸發事件的元素 = ev.srcElement ? ev.srcElement : ev.target;】
2、緩存選擇器查詢結果
　　減小選擇器查詢的次數，並儘量緩存選中的結果，便於之後的重用。


  1. jQuery('#top').find('p.classA');
  2. ...
  3. jQuery('#top').find('p.classB');
複製代碼

// 使用下面的方法 減小開銷
  1. var cached = jQuery('#top');
  2. cached.find('p.classA');
  3. ...
  4. cached.find('p.classB');
複製代碼



3、避免頻繁的IO操做
　　應減小對cookie或localstorage的操做，由於對它們進行操做的API是同步的，而它們是多個tab頁面間共享的。
　　多頁面同時操做cookie和localstorage時，會存在同步加鎖機制。

4、避免頻繁的DOM操做
　　JavaScript訪問DOM元素緩慢，應作到：
　　①緩存已經查詢過的元素；
　　②線下更新完節點以後，在將它們添加到文檔樹中；
　　③避免使用JavaScript來修改頁面佈局。

5、使用微類庫
　　儘可能避免使用大而全的類庫，而是按需使用微類庫來輔助開發。
 
轉載原文：http://www.w3cfuns.com/blog-5434413-5399486.html
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程