前端性能優(yōu)化

前端性能優(yōu)化的方法?
content方面
1,減少HTTP請求:合并文件、CSS精靈、inline Image
2,減少DNS查詢:DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法:DNS緩存、將資源分布到恰當數(shù)量的主機名,平衡并行下載和DNS查詢
3,避免重定向:多余的中間訪問
4,使Ajax可緩存
5,非必須組件延遲加載
6,未來所需組件預(yù)加載
7,減少DOM元素數(shù)量
8,將資源放到不同的域下:瀏覽器同時從一個域下載資源的數(shù)目有限,增加域可以提高并行下載量
9,減少iframe數(shù)量
10,不要404

Server方面
1,使用CDN
2,添加Expires或者Cache-Control響應(yīng)頭
3,對組件使用Gzip壓縮
4,配置ETag
5,F(xiàn)lush Buffer Early
6,Ajax使用GET進行請求
7,避免空src的img標簽

Cookie方面
1,減小cookie大小
2,引入資源的域名不要包含cookie

css方面
1,將樣式表放到頁面頂部
2,不使用CSS表達式
3,使用不使用@import
4,不使用IE的Filter

Javascript方面
1,將腳本放到頁面底部
2,將javascript和css從外部引入
3,壓縮javascript和css
4,刪除不需要的腳本
5,減少DOM訪問
6,合理設(shè)計事件監(jiān)聽器

圖片方面
1,優(yōu)化圖片:根據(jù)實際顏色需要選擇色深、壓縮
2,優(yōu)化css精靈
3,不要在HTML中拉伸圖片
4,保證favicon.ico小并且可緩存

移動方面
1,保證組件小于25k
2,Pack Components into a Multipart Document

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 圍繞前端的性能多如牛毛,涉及到方方面面,以我我們將圍繞PC瀏覽器和移動端瀏覽器的優(yōu)化策略進行羅列注意,是羅列不是展...
    流動碼文閱讀 743評論 0 0
  • 作者:minwe原文地址:https://csspod.com/frontend-performance-best...
    IT程序獅閱讀 1,735評論 0 13
  • AJax 優(yōu)化 緩存 Ajax 請求盡量使用GET, 僅取決于cookie數(shù)量 Cookie 優(yōu)化 減少Cooki...
    KeKeMars閱讀 9,472評論 5 89
  • 一、Web前端優(yōu)化最佳實踐之 內(nèi)容 篇 1. 盡量減少HTTP請求; 合并文件,比如把多個css文件合成一個;CS...
    不忘初心___閱讀 780評論 0 2
  • 網(wǎng)站的劃分一般為二:前端和后臺。我們可以理解成后臺是用來實現(xiàn)網(wǎng)站的功能的,比如:實現(xiàn)用戶注冊,用戶能夠為文章發(fā)表評...
    ConRon閱讀 1,041評論 0 0

友情鏈接更多精彩內(nèi)容