web前端性能優化問題

時間 2019-11-12

標籤 web 前端性能優化問題欄目 HTML 简体版

原文原文鏈接

經常使用的幾大優化解決：css

頁面內容的優化

減小http請求

　　　　途徑：html

　　　　　　1>啓用http/2--愈來愈多的瀏覽器都開始支持 HTTP/2。HTTP/2 爲同一服務器的併發鏈接問題帶來了不少好處。換句話說，若是有不少小型資源須要加載（若是你　　打包過的話就沒有必要了），在延遲和性能方面 HTTP/2 秒殺 HTTP/1。webpack

　　　　　　2>設計層面保持簡潔，減小資源請求。web

　　　　　　3>根據需求設置http緩存--少變的能夠在header中延長過時頭；變化不頻繁而又可能會變的資源可使用 Last-Modifed來作請求驗證gulp

　　　　　　4>資源合併壓縮--外部的文件進行壓縮處理（js,css,image），減小屢次請求。壓縮合並工具grunt，gulp，webpack等瀏覽器

　　　　　　5>css Sprites 精靈圖多個圖片在一個總體的圖片上，減小圖片的請求緩存

　 2. 減小DOM的數量服務器

　　　　DOM的操做費時費力，每次的訪問及修改都會致使頁面的reflow和repaint須要耗費大量的資源，如使用循環的時候，結束後將變量保存到局部，在進行訪問。cookie

　　 3. 避免404併發

　　 4.減小DNS查詢的數量

　　　　DNS解析優化（DNS緩存、減小DNS查找、keep-alive、適當的主機域名）

　　 5. 避免沒必要要的http跳轉

　　　　根據服務器需求http路由請求時‘/’是否要帶

JavaScript&&css的優化

樣式表置頂--腳本表置底
外部引入文件
避免css表達式
link替代@import 由於@import至關於將css放到底部
避免Fliters
避免重複代碼
Javascript代碼優化減小空格和註釋

圖片

壓縮圖片使用Sprite技術 -- 水平排列，顏色接近的排在一塊兒，
favcion.ico 瀏覽器會去讀取這個圖片 --確保存在，小 <1k ,過時時間設置較長

cookie

減小cookie的大小和控制cookie污染

　　　　去除沒有必要的cookie 存在請求頭中

　　　　cookie<=4k 儘可能減少cookie的使用

　　　　合理使用cookie的生命週期

　　 2. 頁面內容是用無域名cookie

　　　　靜態頁面資源不須要cookie，可使用domain單獨存放這些靜態文件，有些proxy拒絕緩存帶有cookie的內容，若是能將這些靜態資源cookie去除，那就能夠獲得這些　　　 proxy的緩存支持。

標籤的優化

　　　1.<title>標題：只強調重點便可，儘可能把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘可能作到每一個頁面的<title>標題中不要設置相同的內容。

　　 2.<meta keywords>標籤：關鍵詞，列舉出幾個頁面的重要關鍵字便可，切記過度堆砌。

3.<meta description>標籤：網頁描述，須要高度歸納網頁內容，切記不能太長，過度堆砌關鍵詞，每一個頁面也要有所不一樣。

4.<body>中的標籤：儘可能讓代碼語義化，在適當的位置使用適當的標籤，用正確的標籤作正確的事。讓閱讀源碼者和「蜘蛛」都一目瞭然。好比：h1-h6 是用於標題類的， <nav>標籤是用來設置頁面主導航的等。

　　 5.<a>標籤：頁內連接，要加「title」屬性加以說明，讓訪客和「蜘蛛」知道。而外部連接，連接到其餘網站的，則須要加上 el="nofollow" 屬性, 告訴「蜘蛛」不要爬，因爲一旦「蜘蛛」爬了外部連接以後，就不會再回來了。

移動客戶端

　　　　保持單個內容小於25kb

參考文章：

http://blog.csdn.net/grandpang/article/details/51329289

http://www.cnblogs.com/EnSnail/p/5671345.html

http://www.qdfuns.com/notes/18892/168da392c447a172d3dd0d8e1754ca48.html

http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html

http://www.cnblogs.com/ricoliu/p/6090290.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。