雅虎前端優化法則


 

1、盡量減少HTTP請求次數
  網頁加載中大部分時間都在下載js,css,flash,圖片
  1、合並文件 css,js,圖片(css sprite)
  2、內聯圖像 data:URL scheme 低級瀏覽器不支持,如過放到頁面中會加大html,放到css中最好,因為他可以在客戶端進行緩存

2、減少DNS查找次數即減少頁面中的主機名(css,js, img,flash等)
  dns解析時瀏覽器處於等待狀態 大部分瀏覽器有自己的緩存不會受系統的緩存的影響
  1、減少主機名數量,則減少了dns查詢,但同時減少了頁面中並行下載的數量
  把頁面中的主機名分成2~4個,二者可兼得

3、避免跳轉
  降低了用戶體驗
  url本身最后應該有/如果不帶則用戶訪問時會發生一次301跳轉
  可以在服務器中進行設置來避免它

4、可緩存的ajax
  可將請求的地址設置為永不過期,然后請求的地址中帶上文件的最后修改時間

5、推遲加載內容(不是立刻要用的)
  用onload把頁面分成兩部分 折疊的,隱藏的,js效果可以后加重
  img,css。js 根據需求進行加重

6、預加載
  在用戶空閑時加載以后要用到的 img,css,js,這些都可以緩存
  在這個頁面加載下個頁面要用到的頁面組件
  同樣可以把這些要加載的放到 onload 里面

7、減少DOM元素數量
  頁面元素越多JavaScript遍歷DOM的效率越慢
  YUI CSS utilities
  document.getElementsByTagName('*').length 計算頁面全部的元素個數

8、根據域名划分頁面內容
  可以並行下載考慮到dns查詢時間2到三個最好

9、使iframe的數量最小
  優點
    解決加載緩慢的第三方內容如圖標和廣告等的加載問題
    Security sandbox
    並行加載腳本

  缺點:
  即時內容為空,加載也需要時間
  會阻止頁面加載
  沒有語意

10、避免404

11、使用內容分發網絡

12、為文件頭指定Expires或Cache-Control

13、Gzip壓縮文件內容

14、配置ETag
  web服務器和瀏覽器用於判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制

15、盡早刷新輸出緩沖
  最好放到head和body之間 <?php flush(); ?>

16、使用GET來完成AJAX請求
  POST方法是一個“兩步走”的過程:首先發送文件頭,然后才發送數據

17、把樣式表置於頂部
  把樣式表放到<head />內會使頁面有步驟的加載顯示,以便於及時給用戶反饋(顯示的頁面),改善了用戶體驗

18、避免使用CSS表達式(Expression)
  它們的計算頻率要比我們想象的多,在頁面縮放,滾動,或者即使是鼠標移動時都會計算

19、使用外部JavaScript和CSS
  可以被緩存

20、削減JavaScript和CSS
  減少請求的大小

21、用<link>代替@import

22、避免使用濾鏡
  完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替

23、把腳本置於頁面底部
  阻止了頁面的平行下載
  HTTP/1.1 規范建議,瀏覽器每個主機名的並行下載內容不超過兩個
  腳本加載時會阻止頁面上所有的元素進行加載,即使是不同域名

24、剔除重復腳本

25、減少DOM訪問
  緩存已經訪問過的有關元素
  線下更新完節點之后再將它們添加到文檔樹中
  避免使用JavaScript來修改頁面布局

26、開發智能事件處理程序
  delegate 方法綁定

27、減小Cookie體積

28、對於頁面內容使用無coockie域名

29、優化圖像

30、優化CSS Spirite
  水平排列圖片會比垂直要小
  顏色相近的擺放在一起
  空隙不宜過大

31、不要在HTML中縮放圖像

32、favicon.ico要小而且可緩存

33、保持單個內容小於25K

34、打包組件成復合文本

 


免責聲明!

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



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