前端性能

發佈自 Kindem的博客，歡迎你們轉載，可是要注意註明出處

提升前端性能的方法

宏觀上看

1. CDN加速

   • 什麼是CDN(內容分發網絡)
   • 因爲 CDN 位於用戶網絡的第一跳，將大多數靜態文件啓用 CDN 加速能夠大大提升效率，不少框架用的不少的靜態文件都啓用了 CDN 加速

2. 反向代理

   • 什麼是反向代理 ? 正常的代理服務器是位於瀏覽器一端，代理用戶發送 http 請求給 Web 服務器，可是反向代理服務器則是位於 Web 服務器一端，代理 Web 服務器接受請求，而後再將請求處理轉發，這樣能夠提升效率，用過 Nginx 的同窗可能就有印象， Nginx 就能夠作反向代理

3. 減小 http 請求，合理設置 http 緩存

   • 將多個文件合併成一個文件，將多個請求合併成一個請求
   • 可以進行緩存的狀況下緩存越多越好，越久越好

4. 使用瀏覽器緩存

   • 某些靜態文件長期不變化，可使用 http 頭中的 cache-control 和 expires設置瀏覽器緩存

5. 壓縮文件

   • 很常見，html、css、js 等文件壓縮後的效果很好，不少框架支持構建 min 文件，便是這麼一種辦法

6. CSS Sprites

   • 即便用該技術將不少零散的圖片合成一張大圖，比較適合圖標之類的使用，能夠參照不少遊戲製做中的 Sprites 貼圖，效果相似，這種辦法可以大大減小 http 請求量

7. LazyLoad Images

   • 懶加載，好比旋轉木馬，能夠先加載第一張圖片，若是用戶不繼續翻閱，後面的圖片也沒有加載的必要了

8. CSS 放在頁面最上部，javascript 放在頁面最下面

   • 這與頁面的渲染順序有關，CSS儘早加載可使得頁面儘早開始渲染，而js是會阻塞頁面的，js的加載須要等到 DOM 完成造成以後纔會開始生效，因此js最好放到最下面

9. 減小 cookie 傳輸

   • cookie 是會包含在每一次 http 請求中的(若是啓用 cookie)，因此太大的 cookie 是會影響到性能的

微觀(代碼層面)上看

1. 虛擬 DOM

   • 什麼是虛擬 DOM ? 大致上來講就是使用 js 模擬了 DOM，對虛擬 DOM 的操做會影響到真正的 DOM，這樣的方式提升了性能，不少前端框架都採用了虛擬 DOM，好比 Vue、React 等等
   • 詳細了說有點麻煩，看這裏吧：虛擬DOM介紹

2. 慎用eval

   • 這玩意真的慢

3. js 鏈式做用域須要注意的地方

   • js 的鏈式做用域：用到一個變量的時候，如今當前做用域下的局部變量查詢，查不到了再往上一級做用域查詢
   • 由於這樣的做用域，當使用到全局變量的時候，最好先將全局變量緩存到本地

4. 變量/常量訪問開銷

   • 常量最快
   • 局部變量次之
   • 鏈式做用域找到的變量再次之
   • 對象和數組的操做涉及到尋址，很慢

5. 字符串拼接

   • 想一想都慢
   • 可使用模板字符串或者儘可能避免

6. css 選擇器優化

   • 選擇器其實是從右往左選，因此 div#hello 會比 #hello div 效率高不少

參考資料

• 前端影響性能的細節 - CSDN - i秋風伴落葉
• 百度百科 - CDN
• 虛擬 DOM 介紹

侵刪