影響用戶訪問的最大部分是前端的頁面。網站的劃分一般為二:前端和後臺。我們可以理解成後臺是用來實現網站的功能的,比如:實現用戶註冊,用戶能夠為文章發表評論等等。而前端呢?其實應該是屬於功能的表現。 而我們建設網站的目的是什麼呢?不就是為了讓目標人群來訪問嗎?所以我們可以理解成前端才是真正和用戶接觸的。 ...
影響用戶訪問的最大部分是前端的頁面。網站的劃分一般為二:前端和後臺。我們可以理解成後臺是用來實現網站的功能的,比如:實現用戶註冊,用戶能夠為文章發表評論等等。而前端呢?其實應該是屬於功能的表現。
而我們建設網站的目的是什麼呢?不就是為了讓目標人群來訪問嗎?所以我們可以理解成前端才是真正和用戶接觸的。
除了後臺需要在性能上做優化外,其實前端的頁面更需要在性能優化上下功夫,只有這樣才能給我們的用戶帶來更好的用戶體驗。不僅僅如此,如果前端優化得好,他不僅可以為企業節約成本,他還能給用戶帶來更多的用戶,因為增強的用戶體驗。說了這麼多,那麼我們應該如何對我們前端的頁面進行性能優化呢?
前端性能優化的方法?
一、content方面
1,減少HTTP請求:合併文件、CSS精靈、inline Image
2,減少DNS查詢:DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法:DNS緩存、將資源分佈到恰當數量的主機名,平衡並行下載和DNS查詢
3,避免重定向:多餘的中間訪問
4,使Ajax可緩存
5,非必須組件延遲載入
6,未來所需組件預載入
7,減少DOM元素數量
8,將資源放到不同的域下:瀏覽器同時從一個域下載資源的數目有限,增加域可以提高並行下載量
9,減少iframe數量
10,不要404
二、Server方面
1,使用CDN
2,添加Expires或者Cache-Control響應頭
3,對組件使用Gzip壓縮
4,配置ETag
5,Flush 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,合理設計事件監聽器、
六、圖片方面
1,優化圖片:根據實際顏色需要選擇色深、壓縮
2,優化css精靈
3,不要在HTML中拉伸圖片
4,保證favicon.ico小並且可緩存
七、移動方面
1,保證組件小於25k
2,Pack Components into a Multipart Document
我目前是在職前端開發,如果你現在也想學習前端開發技術, 在入門學習前端的過程當中有遇見任何關於學習方法,學習路線,學習效率等方面的問題, 你都可以申請加入我的前端學習交流裙:前面:600 中間:610 最後:151。裡面聚集了一些正在自學前端的初學者, 裙文件裡面也有我做前端技術這段時間整理的一些前端學習手冊,前端面試題, 前端開發工具,PDF文檔書籍教程,需要的話都可以自行來獲取下載。