前端性能優(yōu)化方案索引

1、 陸續(xù)整理和不斷更新網(wǎng)絡(luò)上給出的前端性能的優(yōu)化方案。這里只是做一個總概括式的索引,每一個方案都十分值得推敲和細說。1 請求和響應(yīng)緩存控制請求頭里,可以發(fā)送If-Modified-Since 以及If-None-Match 等信息,來詢問服務(wù)端請求內(nèi)容是否有更新,如果沒有更新,可返回304,告訴瀏覽器使用緩存,避免重新下載資源。Pragma 和Cache-Control 等也能控制緩存。如告訴服務(wù)端不要緩存等。響應(yīng)頭里,Expires 可以告訴瀏覽器過期時間,Last-Modified 最近更新時間,ETag 則可允許瀏覽器進行緩存驗證(在If-None-Match 請求信息中使用。復(fù)用TCP請

2、求頭里,Connection 可控制TCP 通道的使用,使用keep-alive 可以復(fù)用上次打開的TCP。GZIP壓縮如果可以啟用gzip 壓縮,將減少響應(yīng)數(shù)據(jù)大小,加快響應(yīng)。請求頭里面可用Accept-Encoding 告知瀏覽器支持的壓縮方式,而服務(wù)端則用Content-Encoding 作為回應(yīng)。Cookies發(fā)送請求時,cookies 也在請求之中。因此,cookies 也可以作為減少請求的優(yōu)化對象。如,根據(jù)同源限制策略,可以使用多個域名加載資源,如加載靜態(tài)資源,就不會發(fā)送多余的cookies;同時,合理設(shè)置cookies 的路徑和域名,如在子站避免不必要的來自父站的cookies。

3、減少HTTP請求有很多細節(jié)可以實現(xiàn),比如CSS Sprites、Data URL等等,由于此部分內(nèi)容和下述內(nèi)容有所重復(fù),故部分細節(jié)在下面會講到。多域名分發(fā)同域下瀏覽器能并發(fā)的請求有限,而為了增加并發(fā),尤其是一些靜態(tài)資源上,可以使用多個域名。但由于域名DNS解析本身也是耗時的,所以實踐原則是2-4個為宜。需要額外提醒的是,加載圖像資源的時候,并發(fā)沒有問題;但在加載JavaScript 腳本的時候,還是會暫停加載其他資源。使用CDN根據(jù)用戶能訪問的最快位置加速訪問。避免重定向和404重定向和404將浪費加載請求。favicon.ico瀏覽器默認加載的資源,最好能夠緩存之。2 HTML減少DOM過多

4、的DOM元素會影響渲染、加載、執(zhí)行。除了精簡頁面結(jié)構(gòu)外,還可以適時刪除不必要的DOM元素(頁面內(nèi)已經(jīng)不會再訪問的元素,又或者可以懶加載(不一定會使用到的元素,如登錄框。CSS 和JavaScript 文件位置CSS 放head,JavaScript 放body 閉標簽前。乃是因為:樣式表不參與DOM 修改,所以不會為了解析樣式停止文檔解析瀏覽器要避免重繪,在沒有拿到全部樣式前不會開始渲染解析樣式時,有的瀏覽器(FF會停止腳本運行,而有的(Webkit則會在腳本訪問樣式屬性但可能受未加載樣式影響時停止腳本運行腳本解析中可能請求樣式,如果樣式還未解析完畢就會出錯腳本執(zhí)行將暫停文檔的解析和資源的下載

5、因此,將二者放在適當?shù)奈恢?能夠極大提高渲染效率。腳本延遲加載可將腳本添加defer 和async 屬性。兩個屬性的共通點在于,腳本的加載和文檔的解析是同步進行的,而區(qū)別在于:async 一旦加載完畢,立即停止文檔解析并執(zhí)行腳本;defer 等待文檔解析完畢后再執(zhí)行。合理使用內(nèi)聯(lián)腳本和樣式,應(yīng)按需選擇內(nèi)聯(lián)或者外鏈。對于訪問少、樣式和腳本復(fù)用少的頁面,可以考慮使用內(nèi)聯(lián)樣式從而減少HTTP 請求。但如果頁面訪問頻繁,樣式腳本在多個頁面經(jīng)常復(fù)用,使用外鏈則是最優(yōu)選擇。無論如何,需要避免使用import 來導(dǎo)入樣式。而圖像也是一樣,高級瀏覽器支持將圖像數(shù)據(jù)直接base64 編碼在src 屬性里,必要時

6、可直接在HTML 里輸出圖片數(shù)據(jù)。減少iframeiframe 本身有許多優(yōu)點,比如可以并行下載腳本,適合加載慢內(nèi)容(如廣告,同時瀏覽器可以對其進行安全控制。減少使用iframe 的主要考慮是:iframe 會阻礙頁面加載,同時也沒有語義。3 CSS選擇器選擇器效率排行如下:ID選擇器類選擇器標簽選擇器相鄰選擇器子選擇器后代選擇器通配符選擇器屬性選擇器偽類選擇器效率與優(yōu)先級并不是對等關(guān)系,優(yōu)先級高的不一定效率高。如#id.class 合用比單個#id 的優(yōu)先級高,但效率卻比值慢。選擇器書寫建議是:避免使用通配符不使用標簽名或類名修飾ID規(guī)則:如果規(guī)則使用ID選擇器作為關(guān)鍵選擇器,不要給規(guī)則添加

7、標簽名。因為ID本身就是唯一的,添加標簽名會不必要地降低匹配效率不使用標簽名修飾類:相較于標簽,類更具獨特性盡量選擇最具體的方式:造成低效的最簡單粗暴的原因就是在標簽上使用太多規(guī)則。給元素添加類可以更快細分到類方式,可以減少規(guī)則去匹配標簽的時間關(guān)于后代選擇器和子選擇器:避免使用后代選擇器,非要用的話建議用子選擇器代替,但子選擇器也要慎用,標簽規(guī)則永遠不要包含子選擇器利用可繼承性:沒必要在一般內(nèi)容上聲明樣式避免濾鏡、表達式、Hack效率低。Sprites合并圖片可減少HTTP 請求。其他建議有:Sprite 中水平排列圖片,垂直排列會增加文件大小Sprite 中把顏色較近的組合在一起可以降低顏色

8、數(shù),理想狀況是低于256色以便適用PNG8格式不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小,但對于用戶代理來說它需要更少的內(nèi)存來把圖片解壓為像素地圖。100100的圖片為1萬像素,10001000就是100萬像素使用3D動畫使用transform: translate3d 等可加速GPU 渲染。4 JavaScript避免重排渲染中可能存在的高成本操作:修改、增加、刪除DOM節(jié)點移動DOM位置或者動畫效果CSS樣式修改(重繪比重排好些調(diào)整窗口大小,或者滾動時有絕對定位、fixed 背景以及動畫修改頁面默認字體瀏覽器一般會緩存Render Tree的更新渲染,但以下情況除外:調(diào)整窗口大小和修改頁面默認字體client/offset/scrollgetComputedStyle( currentStyle優(yōu)化建議:修改className 而非style離線DOM 后修改,如documentFragment 或者display:none 后再調(diào)整樣式緩存屬性值動畫使用absolute/fixed不使用table 布局(牽一發(fā)動全身修改層級比較低的DOM事件委托將多個節(jié)點上的事件放到其父節(jié)點(經(jīng)典案例:將li 上的事件綁定到ul 上。內(nèi)存管理合理釋放和緩存內(nèi)存。如緩存復(fù)用的屬性,接觸對象引用等。5 資源壓縮大小壓縮樣式、腳本、圖像等資源的大