前端不哭！最新優化效能經驗分享來啦 | 技術頭條

AI科技大本營發表於2019-04-26
前端優化

640?wx_fmt=jpeg


作者 | Dimitris Kiriakakis

譯者 | 風車雲馬

編輯 | Jane

出品 | Python大本營（id：pythonnews）


【導語】Angular、React、VueJS 是現在一些主流的 JS 框架，那它們在構建網站或前端程式時，是如何保證效能，減少大家詬病的？今天這篇文章，就為大家介紹一些工具或技術技巧，來幫助前端工程師保證開發效能與效率，畢竟快過節了，要趕緊把研發和優化都做到位，少加班！


640?wx_fmt=png

（圖片來源：作者 Dimitris Kiriakakis 的原文）     


如果網站頁面超過 3 秒還未載入出來，會是什麼結果？你會失去近 50% 的訪客！也許這個數字讓你有些意想不到。長時間載入對應用程式的轉化率會產生負面影響，而減少頁面的載入時間可以顯著提升使用者體驗、提高效率、優化搜尋等，最終保證產品的成功率。


想保證構建的網站或前端程式的效能，可以從哪些方面思考呢？接下來，我們就先談如何衡量，再談如何優化。


一、如何衡量效能？


首先，我們必須要有一些衡量效能的指標。在衡量前端應用程式的效能時，有兩個工具推薦給大家：


（1） 谷歌瀏覽器 Lighthouse

（2） Speedcurve


這兩款工具都可以跟蹤主要的效能 KPI（如頁面響應速度指數 Pagespeed Index，頁面變為可互動的時間 TTI，首次對使用者顯示內容的時間 FCP等)。其中 Lighthouse 包含在 Chrome 開發工具裡，通過分析網站/應用程式提供一些非常有用的提示，從而告訴開發人員如何提升相應的指標。使用 Speedcurve，可以在任何時間監測所有這些 KPI 及其效能。


640?wx_fmt=png       Chrome 的 Lighthouse 提示資訊


衡量產品前端效能之後，下一步就要優化我們的網站，使其發揮最大作用。


二、如何優化？


（一）優化影象


任何一個網站，影象都是至關重要的部分。平均而言，影象類資料佔 Web頁面載入資料的 60%以上，因此，影象的優化也是最重要的一環，其實也是最容易實現的。為什麼這麼說？可以從哪幾方面入手？


1、調整影象大小


如何調整影象大小使其符合佈局要求。最重要的一點是：檢查影象的解析度是否合適。此外，確保影象響應與佈局響應相同。這方面可以推薦給大家一個很棒的工具——響應影象生成器（Responsive Image Breakpoints Generator），它可以生成不同版本的影象，可以根據你的需要或習慣，以及可使用的 HTML5 程式碼。這些程式碼還可以在任何前端應用程式或網站中使用。


如果對gulp感興趣，可以使用 gulp-responsive 外掛自動執行此過程。


640?wx_fmt=png       響應式佈局需要響應式影象


2、確保延遲載入


延遲載入可以通俗理解為不需要立即載入影象，但可以在之後需要的時候載入顯示。這個概念，結合一下使用經驗就容易理解了。無論使用哪個框架，都可以使用延遲載入影象的外掛，如 VueJS 中的 v-lazy-image，當然開發者們也可以自己構建，不過需要檢測元素進入或退出的時間。


3、影象傳輸：使用 CDN 進行


上面主要是從網站載入影象的大小和數量兩個維度採取優化措施的，之後要考慮哪些問題呢？舉一個例子，如果你想讓你的網站在全球範圍都是可用的，可以怎麼做？這裡向大家介紹 CDN 方法——內容分發網路來實現。


CDN 在其全球分佈的伺服器網路上快取映像。它是如何幫助優化的？舉個例子，你在歐洲，一個澳大利亞的使用者向網站傳送一個影象的請求，CDN 會從另一個，離這位澳大利亞使用者更近的站點傳送影象，而不是從歐洲的伺服器上檢索併傳送影象，這就減少了載入影象所需的往返時間。


（二）CSS, JS 和 HTML


幾乎所有框架都提供了優化程式碼的方法，如程式碼拆分、搖樹優化、壓縮等，除了程式碼，還能優化什麼？


1.優化 HTML 文件


HTML（幾乎）是所有 Web 應用程式的基礎。在 HTML 文件中引用資源時，有下面兩點建議想與大家分享！


（1）將 CSS 引用放在 HTML 標頭檔案的頂部，確保漸進呈現。

（2）將 JavaScript 屬性放在 HTML 主體的底部，並選擇非同步指令碼載入。這可以防止任何<script> 標記阻塞 HTML 的呈現過程。


2.確保只載入需要的東西


640?wx_fmt=png       延遲載入元件和模組


Angular、React 和 VueJS 都提供延遲載入，所以開發者只需根據自己的需要正確地分割程式碼，並在真正需要的時候載入所需模組。例如，一個電子商務網站，應該確保使用者在主頁時，購物車頁面（模組）或支付頁面（模組）沒有被載入。


3.壓縮和快取


前端開發中需要的所有資源，比如影象或程式碼，是否都壓縮，採取爭取的快取方式了？為什麼要講這一點？檔案壓縮可以讓程式變得更輕，減少請求往返所需要的時間，最常用的檔案壓縮方法之一是 Gzip，一種用於壓縮程式碼塊、文件、影象和音訊檔案的好方法。


Brotli 是另一種檔案壓縮演算法，並且越來越受歡迎。這個開源演算法現在由谷歌和其他組織的軟體工程師在定期更新維護。和現有方法相比，它能以更好的比率壓縮檔案。


此外，還可以通過修改它們的配置檔案，如在 nginx 上啟用 brotli 或在 Apache 上啟用 brotli，在 nginx、Apache 或其他正在使用的伺服器上選擇喜歡的壓縮方法。


談到快取，最常用的快取技術是利用瀏覽器快取，Lighthouse 也推薦使用這個方法，同樣可以通過修改伺服器的配置檔案來啟用（啟用瀏覽器快取）。


總結


通過分享上面幾個經驗，總結為一個核心問題就是：前端問題，效能是一個重要的問題，需要前端工程師們認真地思考與對待。


最後，也希望這篇文章能幫助前端工程師，正在前往前端開發路上的小夥伴們一些幫助，在 Review 的時候，別忘了確保前端的效能。


原文連結：

https://medium.freecodecamp.org/how-to-boost-your-front-end-applications-performance-72ce872b08c


（本文為Python大本營原創文章，轉載請微信聯絡1092722531）


長三角開發者聯盟

程式碼就是力量，長三角的開發者聯合起來！

加入「長三角開發者聯盟」將獲得以下權益

長三角地區明星企業內推崗位
CSDN獨家技術與行業報告
CSDN線下活動優先參與權
CSDN線上分享活動優先參與權


掃碼新增聯盟小助手，回覆關鍵詞“長三角2”，加入「長三角開發者聯盟」。

640?wx_fmt=jpeg

推薦閱讀：

640?wx_fmt=png


點選閱讀原文，瞭解「CTA核心技術及應用峰會」。

相關文章