雅虎前端優化法則

時間 2019-11-18

標籤雅虎前端優化法則简体版

原文原文鏈接

一、儘可能減小HTTP請求次數
　　網頁加載中大部分時間都在下載js，css，flash，圖片
　　一、合併文件 css，js，圖片（css sprite）
　　二、內聯圖像 data:URL scheme 低級瀏覽器不支持，如過放到頁面中會加大html，放到css中最好，由於他能夠在客戶端進行緩存

二、減小DNS查找次數即減小頁面中的主機名（css,js, img，flash等）
　　dns解析時瀏覽器處於等待狀態大部分瀏覽器有本身的緩存不會受系統的緩存的影響
　　一、減小主機名數量，則減小了dns查詢，但同時減小了頁面中並行下載的數量
　　把頁面中的主機名分紅2~4個，兩者可兼得php

三、避免跳轉
　　下降了用戶體驗
　　url自己最後應該有/若是不帶則用戶訪問時會發生一次301跳轉
　　能夠在服務器中進行設置來避免它

四、可緩存的ajax
　　可將請求的地址設置爲永不過時，而後請求的地址中帶上文件的最後修改時間css

五、推遲加載內容（不是馬上要用的）
　　用onload把頁面分紅兩部分摺疊的，隱藏的，js效果能夠後加劇
　　img，css。js 根據需求進行加劇 html

六、預加載
　　在用戶空閒時加載之後要用到的 img，css，js，這些均可以緩存
　　在這個頁面加載下個頁面要用到的頁面組件
　　一樣能夠把這些要加載的放到 onload 裏面

七、減小DOM元素數量
　　頁面元素越多JavaScript遍歷DOM的效率越慢
　　YUI CSS utilities
　　document.getElementsByTagName('*').length 計算頁面所有的元素個數web

八、根據域名劃分頁面內容
　　能夠並行下載考慮到dns查詢時間2到三個最好

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

　　缺點：
　　即時內容爲空，加載也須要時間
　　會阻止頁面加載
　　沒有語意

十、避免404ajax

十一、使用內容分發網絡 瀏覽器

十二、爲文件頭指定Expires或Cache-Control 緩存

1三、Gzip壓縮文件內容服務器

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

1五、儘早刷新輸出緩衝
　　最好放到head和body之間 <?php flush(); ?>網絡

1六、使用GET來完成AJAX請求
　　POST方法是一個「兩步走」的過程：首先發送文件頭，而後才發送數據佈局

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

1八、避免使用CSS表達式（Expression）
　　它們的計算頻率要比咱們想象的多，在頁面縮放，滾動，或者即便是鼠標移動時都會計算

1九、使用外部JavaScript和CSS
　　能夠被緩存

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

2一、用<link>代替@import

2二、避免使用濾鏡
　　徹底避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替

2三、把腳本置於頁面底部
　　阻止了頁面的平行下載
　　HTTP/1.1 規範建議，瀏覽器每一個主機名的並行下載內容不超過兩個
　　腳本加載時會阻止頁面上全部的元素進行加載，即便是不一樣域名

2四、剔除重複腳本

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

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

2七、減少Cookie體積

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

2九、優化圖像

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

3一、不要在HTML中縮放圖像

3二、favicon.ico要小並且可緩存

3三、保持單個內容小於25K

3四、打包組件成複合文本