網站性能優化或者網頁性能優化

一、網絡加載

1.DNS預加載

通過 dns-prefetch 屬性可以讓浏覽器提前解析資源或接口對應的伺服器IP位址，避免在請求中發起 DNS 解析請求，節省請求時間。

2.CDN 加速

解決因分布、帶寬、伺服器性能帶來的通路延遲問題，适用于站點加速、點播、直播等場景。使使用者可就近取得所需内容，解決 Internet 網絡擁擠的狀況，提高使用者通路網站的響應速度和成功率。

CDN的優點：

• 本地Cache加速，加快通路速度
• 鏡像服務，消除營運商之間互聯的瓶頸影響，保證不同網絡的使用者都能得到良好的通路品質
• 遠端加速，自動選擇cache伺服器
• 帶寬優化，分擔網絡流量，減輕壓力，
• 叢集抗攻擊
• 節約成本

3.資源預加載

利用preload，prefetch，preconnect屬性我們可以在内部聲明式的書寫資源擷取請求，提前加載非首屏但又較重要的資源，避免在滿足首屏優先加載的情況下，反而忽略了其他次重要資源的加載；

4.http 緩存頭的設定

HTTP緩存包括強緩存（Cache-Control，Expire）和協商緩存（Last-modified, Etag）兩種。其中，協定緩存資源每次都會像服務端發送請求來判斷資源是否過期，未過期則傳回304，在網絡極其卡頓的情況下，這個304請求有可能堵塞整個頁面的資源加載；

5.對JS資源按照子產品和首屏需求進行優先加載，不需要的子產品按需加載

移動端的網絡資源有限，為了盡快讓使用者看到有意義的首屏，我們需要盡可能的保持首屏需要加載的資源越小越好；

6.内聯首屏關鍵CSS

将首屏關鍵樣式内聯至頁面中，保證最快速度看到帶有基本樣式的首屏，避免使用者端出現較長時間的白屏時間；

7.内聯關鍵JS代碼

内聯關鍵代碼也是為了讓使用者第一時間感受到頁面已經加載成功，但是内聯代碼不能将所有代碼都内聯至HTML中，因為這些代碼每次都會伴随HTML下載下傳下來，加大HTML檔案的體積，也無法讓代碼在不同的網頁間提供複用的功能。

8.檢查服務端下發的資源是否使用GZIP壓縮

GZIP對于文本資源（JS，CSS檔案）有較高的壓縮效率，通常可以減少70%的體積。但是不是每個浏覽器都支援gzip的，如果知道用戶端是否支援gzip呢，請求頭中有個Accept-Encoding來辨別對壓縮的支援。用戶端http請求頭聲明浏覽器支援的壓縮方式，服務端配置啟用壓縮，壓縮的檔案類型，壓縮方式。當用戶端請求到服務端的時候，伺服器解析請求頭，如果用戶端支援gzip壓縮，響應時對請求的資源進行壓縮并傳回給用戶端，浏覽器按照自己的方式解析，在http響應頭，我們可以看到content-encoding:gzip，這是指服務端使用了gzip的壓縮方式。

9.避免資源的重定向

增大加載時間，使用者體驗較差。

10.異步延遲加載第三方非關鍵代碼

移動端網絡資源有限，為了讓這些不重要的代碼不影響首屏渲染，可以延遲一小段時間再加載；

11.合理的使用本地緩存（sessionstorage和localstorage），避免把不必要的資料全部放到cookie當中

因為用戶端添加了很多cookie，在每次請求的時候都會将所有cookie，都送出到伺服器，太多時 會造成400錯誤；

12.使用service worker，增加頁面的離線體驗和頁面的加載體驗

頁面發送請求時，會先經過SW的腳本，這樣可以讓我們通過程式設計的方式來制定我們需要緩存的檔案，同時，緩存在service worker中的檔案，可以讓使用者離線通路；

參考：https://segmentfault.com/a/1190000012353473?utm_source=tag-newest

13.在條件允許的情況下，可以使用HTTP2.0協定

HTTP2.0協定可以提升網絡鍊路的複用性，提升資源加載效率；見http 2.0和1.1的對比。

二、HTML

1. 注重标簽的語義化，保持用最簡潔的标簽完成所需的功能

标簽的語義化（見HTML5中新增的語義化标簽）提高代碼的可維護性，在頁面加載CSS失敗時也不至于很難看。同時，需要保持标簽最小化，無意義的标簽可以利用僞類表示；

2.CSS放到head中，JS放到body尾部，JS和CSS都需要放在head中時，JS即放在前面：

JS 和 CSS 在頁面中的位置，會影響其他資源（指 img 等非 js 和 css 資源）的加載順序，究其原因，有三個值得注意的點：

js 有可能會修改 DOM， 典型的，可能會有 document.write， 這意味着，在目前 js 加載和執行完成前，後續所有資源的下載下傳有可能是沒必要的。這是 js 阻塞後續資源下載下傳的根本原因。

js 的執行有可能依賴最新樣式。比如，可能會有 var width = $(’#id’).width(). 這意味着，js 代碼在執行前，浏覽器必須保證在此 JS 之前的所有 css（無論外鍊還是内嵌）都已下載下傳和解析完成。這是 css 阻塞後續 js 執行的根本原因。

現代浏覽器很聰明，會進行 prefetch 優化。性能是如此重要，現代浏覽器在 競争中，在 UI update 線程之外，還會開啟另一個線程，對後續 JS 和 CSS 提前下載下傳（注意，僅提前下載下傳，并不執行）。有了 prefetch 優化，這意味着，在不存在任何阻塞的情況下，理論上 js 和 css 的下載下傳時機都非常優先，和位置無關。

參考：https://www.erdangjiade.com/topic/133487.html

https://www.jianshu.com/p/0291ad9ac8fb

3.HTML代碼壓縮，去除注釋、空白符

減少網絡傳輸的檔案大小。

4.盡量避免使用iframe

iframe 内資源的下載下傳程序會阻塞父頁面靜态資源的下載下傳與 CSS 及 HTML DOM 的解析，window 的 onload 事件需要在所有 iframe 加載完畢後(包含裡面的元素)才會觸發。

三、CSS

1. 壓縮CSS代碼，排除重複的CSS樣式

減少網絡傳輸的檔案大小。

2. 根據元件打包CSS檔案

按需加載，減少網絡傳輸的檔案大小。

3. 避免使用CSS的@import文法

可能阻塞頁面的加載，@import引用的CSS會等到頁面全部被下載下傳完再被加載，是以網速如果受限制 那就會加載出隻有架構無樣式的網頁，而且@import有個數限制。

4. 使用Sass、Stylus、Less等預編譯語言時，編碼CSS嵌套不超過3層

提高解析css的效率；

5. 使用autoprefixer給CSS代碼自動增加字首

自動幫助我們添加浏覽器頭，避免意想不到的浏覽器相容性問題。

6. 盡量少使用css通配符（*），特别是多層嵌套的末尾使用通配符

CSS的解析過程是從右往左逆向比對，使用CSS通配符會增加解析的計算量。

7. 不要濫用高消耗的樣式

box-shadow、border-radius這些屬性繪制前都需要浏覽器進行大量的計算。

四、動畫

1.簡單動畫盡量隻使用transform、opacity、transition等屬性完成

width、height、top、left、right、bottom、margin等屬性的變更都會觸發頁面的重排，在移動端環境中頻繁的重排會導緻動畫卡頓。

2. 較複雜動畫可以使用css幀動畫

在移動端相容性好、性能好、更具有可操控性。

3. js動畫不要使用setTimeout、setInterval，使用requestAnimationFrame

setTimeout和setInterval在動畫執行存在性能問題，且無法準确的控制幀數。

五、JavaScript

1. JS代碼壓縮，代碼分子產品加載

減少代碼大小，根據頁面需求按需加載資源，最下化使用者需要加載的資源大小加快頁面展示的速度；

2. 處理長清單或者大量DOM元素時，不要綁定太多的事件監聽函數

節省記憶體和減少監聽事件的注冊，比如使用事件代理等；

添加到頁面上的事件數量會影響頁面的運作性能，如果添加的事件過多，會導緻網頁的性能下降。采用事件代理的方式，可以大大減少注冊事件的個數。

事件代理的當時，某個子孫元素是動态增加的，不需要再次對其進行事件綁定。

不用擔心某個注冊了事件的DOM元素被移除後，可能無法回收其事件處理程式，我們隻要把事件處理程式委托給更高層級的元素，就可以避免此問題。

3. 利用throttle和debounce函數去處理頻發觸發，但是不需要頻發執行的函數，例如scroll,touchmove

避免頻繁的無效的操作，避免頁面的卡頓，詳情見防抖和節流一文：https://blog.csdn.net/zl13015214442/article/details/90600153；

4. 利用setTimeout代替setInterval

setInterval可能存在指令堆積的問題，導緻頁面卡頓；

⑸ 盡量避免大批量的重排重繪（回流）

頁面的重排重繪很耗性能，尤其是重排（回流）。

六、圖檔

1.使用工具壓縮圖檔

移動端網絡條件有限，圖檔越大加載時間越長，合理使用工具壓縮圖檔，可以兼顧圖檔品質和圖檔大小。

2. 用較高壓縮比格式的檔案webp

使用具有較高壓縮比格式的圖檔，如webp等。在同等圖檔畫質的情況下，高壓縮比格式的圖檔體積更小，能夠更快完成檔案傳輸，節省網絡流量。減少檔案傳輸的大小，避免出現圖檔尺寸使用不當的問題，小icon用大圖。

3. 使用雪碧圖

CSS雪碧的基本原理是把你的網站上用到的一些圖檔整合到一張單獨的圖檔中，進而減少你的網站的HTTP請求數量。該圖檔使用CSS background和background-position屬性渲染，這也就意味着你的标簽變得更加複雜了，圖檔是在CSS中定義，而非标簽。減少http請求數，不過當我們的http協定更新至1.1，2.0之後，雪碧圖減少http請求數的效果并不明顯；

4. 圖檔懶加載

避免使用者提前加載過多無用的資源，浪費使用者流量，詳情見博文懶加載實作一文：https://blog.csdn.net/zl13015214442/article/details/88600300；

5. 根據不同的螢幕像素比加載不同尺寸的圖檔

在較大像素比的螢幕下加載小尺寸的圖檔，圖檔會模糊；在較小像素比的螢幕下加載大尺寸的圖檔，會浪費使用者流量和cdn流量；

6. 小于2KB的圖檔可以嘗試使用base64格式去替換

在頁面使用的背景圖檔不多且較小的情況下，可以将圖檔轉化成base64編碼嵌入到HTML頁面或CSS檔案中，這樣可以減少頁面的HTTP請求數。需要注意的是，要保證圖檔較小，一般圖檔大小超過2KB就不推薦使用base64嵌入顯示了。将圖檔轉換成base64格式可以減少http請求數量，但是，不能對較大尺寸的圖檔使用base64格式，因為base64算法會提升三分之一的檔案大小；

七、字型

1. 壓縮字庫大小，避免加載過多無用的資源，推薦工具字蛛

我們隻需要頁面需要的字型檔案即可，不需要浪費流量加載使用者不需要的資源；

2. 優化字型的展示政策

使用font-display屬性可以避免在字型加載過程中，不顯示文字的問題；

3. 當特殊文字量較少且内容固定時，可以嘗試使用圖檔代替

快速完美的還原界面