前端性能優化(四)——網頁加載更快的N種方式
網站前端的用戶體驗，決定了用戶是否想要繼續使用網站以及網站的其他功能，網站的用戶體驗佳，可留住更多的用戶。除此之外，前端優化得好，還可以為企業節約成本。那麼我們應該如何對我們前端的頁面進行性能優化呢？
前端性能優化可以分為三個方面：接口訪問優化、靜態資源優化和頁面渲染速度優化。
一、接口訪問優化
1.1、減少http請求，合理設置 HTTP緩存
http協議是無狀態的應用層協議，每次發送http請求時，都需要建立連接、通信、斷開連接，在服務器端每個http都需要開啟獨立的線程去處理。所以盡量減少http請求，儘可能地提高訪問性能。
減少http請求的方法：
- 合併 js、css、圖片等文件，合併成一個文件，瀏覽器就只需請求一次就可以了。圖片合併要適當，不能想着優化呢，盲目地都合併成一張圖片。
- 借用瀏覽器緩存。恰當的緩存設置可以大大減少http請求。不懂瀏覽器緩存的可參考《瀏覽器九大緩存方法》。
- 接口合併。前端交互，經常需要請求多個並行或串行接口，此時可以通過接口合併方式，提高接口訪問速度。
- 能使用css的盡量不使用js，能使用js的盡量不用三方插件，避免三方插件大量的庫。
1.2、減少cookie傳輸
cookie 存在於 http 頭，在客戶端與服務器之間交換，儘可能地控制 cookie 的大小，cookie越小，響應速度越快，減少 cookie 傳輸，響應速度更快。
1.3、使用CDN提供靜態文件
使用 CDN 可以更快地在全球範圍內獲取到你的靜態文件，加快網頁加載。
1.4、啟用 GZIP 壓縮
http 協議上 GZIP 編碼，是一種用來改進 web 應用程序的。開啟 GZIP 後，服務器會把網頁內容壓縮後傳輸，一般能壓縮到原大小40%，這樣網頁傳輸速度就更快了。GZIP 有兩大好處：一是減少存儲空間，二是通過網絡傳輸文件時，可以減少傳輸時間。
1.5、分域存放資源
HTTP 客戶端一般對同一個服務器的並發連接個數都是有限制的，通常最大並行連接為四了，剩下的會進入等待隊列，等前邊的執行完畢，等待的才會執行。所以利用多域名主機存放資源，增加並行連接量，縮短資源加載時間。
1.6、減少頁面重定向
開啟 https 可以有效防範攻擊，保證用戶始終訪問到網站的加密連接，保護數據安全，同時省去 301/302 跳轉的時間，大大提升網站的安全係數和用戶體驗。
如果在網站設置當用戶訪問域名的時候強制 https 進行 301 或者 302 跳轉，但是這個過程中，用到 HTTP 因此容易發生劫持，受到第三方的攻擊。所以儘可能使用https安全。
1.7、避免使用iframe
iframe 相當於本頁面又嵌套了一個頁面，消耗性能，還要加載嵌套頁面的資源，所以更消耗時間。
1.8、借用瀏覽器緩存
ajax 請求到的數據，可以緩存到瀏覽器，下次使用的時候無需再次獲取，直接取緩存數據就可以。這個會根據具體的項目來做，比如常用的角色類型就會緩存，獲取到的普通數據為了保證實時性，不能使用緩存。
二、靜態資源優化
2.1、壓縮 html、css、js 等文件
刪除不必要的空格、注釋和中行，減少文件大小，顯著減少用戶下載時間，加快網頁加載速度。可以直接使用壓縮工具，可以自動刪除所有不必要內容。
2.2、在 js 之前引用 css
這是一個小細節，js 執行的時候會進入阻塞，如果放入 js 之後加載，會等待 js 執行完成之後才能加載 css，渲染頁面，此時就會出現布局錯亂。所以 css 文件需要非阻塞引入，以防DOM 花費更多時間才能渲染。
2.3、非阻塞 js
js 會阻止 html 文檔的正常解析，當解析器到達 script 標記時，它會停止解析並執行腳本。所以我們經常把 script 引入的 js，放到 html 中最底下。如果需要讓腳本位於頁面頂部，建議添加非阻塞屬性。經常使用 defer 和 async 來異步加載js文件。
<!-- 使用defer -->
<script defer src="foo.js" ></script>
<!-- 使用async -->
<script async src="foo.js"></script>2.4、圖片壓縮
最常見的就是 css 雪碧，就是將很多很多的小圖標放在一張圖片上，就稱為雪碧圖。雪碧圖最大優點就是可以減少http請求，除此也能壓縮圖片文件大小。使用的時候，通過設置 background-position ，移動圖片的位置。除此之外，網站用到的大圖，也需要在保證圖片質量前提下優化到最小。
2.5、矢量圖替代位圖
矢量圖（SVG）往往比圖像小很多，縮放的時候不失真，這些圖像還可以通過 css 進行動畫和修改，比位圖方便控制。可以的話，盡量用矢量圖多點。
2.6、js代碼相關優化
- 盡量減少使用閉包，因為閉包所在的上下文不會被釋放。
- js避免嵌套循環和死循環，一旦遇到死循環，瀏覽器會卡死。
- 在js封裝過程中，盡量做到低耦合高內聚。減少頁面的冗餘代碼。
- 盡量減少遞歸，避免死遞歸。
- 盡量使用window.requestAnimationFrame替代傳統的定時器。
三、頁面渲染速度
3.1、懶加載
素材類的網站，頁面一屏展示很多圖片，而且圖片還不能失真，圖片加載太多，網頁加載慢得很，所以就引用懶加載，只加載可視區的圖片，避免加載可以能不需要或不必要的圖像。改善頁面的響應時間。
3.2、避免響應式布局
響應式網站雖然能夠兼容所有終端設備，但是會出現隱藏部分無用內容，浪費帶寬，加載時間還長，頁面的渲染時間也長。想更多了解響應式布局，請點擊《前端響應式布局為什麼是個坑？》。
3.3、設置大小，避免重繪
遇到 img 標籤，會立馬發送一個 http 請求，下載圖片，頁面繼續向下渲染，等圖片加載成功了，發現圖片的寬高大小發生變化，影響後邊排版，所以頁面會重新再繪製一次這部分。所以儘可能設置圖片的大小。
3.4、減少DOM元素
解析 html 內容，將標籤轉化為DOM節點，之後再解析其他文件，DOM元素越少，也就是標籤越少，文件轉化得越快，加載速度也就快了。
3.5、減少 Flash 的使用
flash 文件比較大，加載起來耗時。除此，flash 插件還需要運行才能運行，最主要有些瀏覽器flash插件馬上要下線了，建議盡量不用 flash。
3.6、文件順序
css文件放在最頂部，優先渲染。js放在最底部，避免阻塞。
讓網頁如何加載更快，有好多的細節，還是要好好提升自己的技能~~~~~~~~~
點個關注！更多分享內容。
