web性能優化

 

1.減小圖片請求的次數（雪碧圖）

圖片越多請求次數越多，形成延遲的可能性也就越大。因此在這裏咱們要作的就是把網頁中經常使用的圖片整合到一張圖片文件中，而後經過移動圖片的位置來實現圖片的正確顯示效果。

2.使用CDN（內容發佈網絡）

CDN的基本原理是普遍採用各類緩存服務器，將這些緩存服務器分佈到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離最近的工做正常的緩存服務器上，由緩存服務器直接響應用戶請求。 CDN的原理簡單易懂，就是將內容緩存在離用戶更近的節點上，以此來提升用戶體驗，它主要適用於靜態資源的訪問加速，包括靜態頁面、圖片、視頻、js文件、css文件等。

3.懶加載（按需加載）

懶加載(Load On Demand)是一種獨特而又強大的數據獲取方法,它可以在用戶滾動頁面的時候自動獲取更多的數據,而新獲得的數據不會影響原有數據的顯示,同時最大程度上減小服務器端的資源耗用。

實現：

首先爲全部懶加載的靜態資源添加自定義屬性字段，好比若是是圖片，能夠指定data-src爲真實的圖片地址，src指向loading的圖片。 

而後當資源進入視口的時候，將src屬性值替換成data-src的值。 

在vue中懶加載的實現是經過import引入組件

component: () => import(src/xxx")

component: resolve => require(['../components/hello'], resolve),

4.節流和防抖

節流： 就是指連續觸發事件，可是該事件在規定時間內只執行一次。

防抖： 就是指連續觸發事件，可是該事件在規定時間內只執行一次。若是在規定時間內該事件又觸發了，則會從新計算函數的執行時間。

//函數節流 let myBtn = document.getElementById('myBtn'); let canRun = true; myBtn.onclick = function () { if (!canRun) { return; } canRun = false; setTimeout(() => { console.log('我被點擊了一次'); canRun = true; }, 1000); }

 

//函數防抖 let timer = false; let myBtn = document.getElementById('myBtn'); myBtn.onclick = function () { clearTimeout(timer); timer = setTimeout(() => { console.log('我被點擊了一次'); },1000) }

5.避免css表達式（CSS Expression）

css表達式就是動態的設置css屬性，由於 CSS 表達式太強大了，以致於 CSS 表達式帶來的嚴重的性能問題：「 爲了確保有效性，CSS 表達式會進行頻繁的求值 」，到底有多頻繁？就是在你改變窗口大小，滾動頁面甚至移動鼠標都會觸發表達式進行求值，如此頻繁的求值以致於瀏覽器的性能收到嚴重的影響；

6.避免重定向

重定向會增長http請求的次數，會影響到整個網站的性能，可是必要的重定向又能夠提升用戶體驗，因此咱們須要在性能和用戶體驗之間去權衡，達到最好的目的。

HTTP重定向，簡言之，就是當用戶瀏覽器或搜索引擎訪問某個舊的網址時，服務器告訴瀏覽器或搜索引擎，「該網頁已經搬家了，新家的地址是……，請使用新地址來訪問該網頁」。例如，當用戶訪問網址http://www.baidu.com/index.php時，服務器將告訴瀏覽器，這個頁面應該重定向到http://www.baidu.com/。此時，瀏覽器或者搜索引擎就會自動跳轉到新的網址從而訪問網頁內容。

怎麼避免重定向？

1、在定義連接地址的href屬性的時候，儘可能使用最完整的、直接的地址。例如

使用www.cnblogs.com 而不是cnblogs.com

使用cn.bing.com 而不是bing.com

使用www.google.com.hk 而不是google.com

使用www.mysite.com/products/ 而不是 www.mysite.com/products

2、在使用Response.Redirect的時候，設置第二個參數爲false

考慮是否可用Server.Execute代替

考慮Respone.RedirectPermanent

3、若是涉及到從測試環境到生產環境的遷移，建議經過DNS中的CNAME的機制來定義別名，而不是強制地重定向來實現

7.減小DNS查找（DNS域名系統）

DNS用於映射主機名和IP地址

DNS查找流程：首先查看瀏覽器緩存是否存在，不存在則訪問本機DNS緩存，再不存在則訪問本地DNS服務器。因此DNS也是開銷，一般瀏覽器查找一個給定URL的IP地址要花費20-120ms，在DNS查找完成前，瀏覽器不能從host那裏下載任何東西。

爲達到更高的性能，DNS解析一般被多級別地緩存。

8.壓縮組件

客戶端請求報文中包含Accept-Encoding表示客戶端能識別的壓縮方法，若是客戶端請求報文沒有包含Accept-Encoding首部，服務器就會假設客戶端可以接受任何編碼格式；服務器響應報文中包含Content-Encoding表示採用的壓縮方法。基於文本的資源如html，js，css，xml都適用於壓縮。然而對於圖片而言，卻不該該對圖片進行壓縮，由於圖片自己是已經被壓縮過了，若是再進行gzip壓縮，有可能獲得的結果是和圖片自己大小相差不大或更大，這樣就浪費了服務器的CPU資源來作無用功了。

9.使用外部css和javascript

在實際應用中使用外部文件能夠提升頁面速度，由於JavaScript和CSS文件都能在瀏覽器中產生緩存。內置在HTML文檔中的JavaScript 和CSS則會在每次請求中隨HTML文檔從新下載。

10.樣式置於頭部，腳本置於底部

至於爲何CSS寫在頭部，是由於瀏覽器預先加載CSS後，能夠沒必要等待HTML加載完畢就能夠開始渲染頁面了。CSS 不會阻塞 DOM 的解析。

至於JavaScript寫在尾部，這是由於JS主要扮演事件處理的功能。這樣的話，頁面渲染的時候和JS沒有關係，放在後面慢慢加載，不要影響更重要的CSS和HTML的加載。