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

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

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

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

一、如何衡量性能？

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

（1） 谷歌瀏覽器Lighthouse

（2） Speedcurve

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

Chrome 的Lighthouse提示信息

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

二、如何優化？

（一）優化圖像

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

1、調整圖像大小

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

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

響應式布局需要響應式圖像

2、確保延遲加載

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

3、圖像傳輸：使用 CDN 進行

上面主要是從網站加載圖像的大小和數量兩個維度采取優化措施的，之后要考慮哪些問題呢？舉一個例子，如果你想讓你的網站在全球范圍都是可用的，可以怎么做？這里向大家介紹 CDN 方法——內容分發網絡來實現。

CDN 在其全球分布的服務器網絡上緩存映像。它是如何幫助優化的？舉個例子，你在歐洲，一個澳大利亞的用戶向網站發送一個圖像的請求，CDN 會從另一個，離這位澳大利亞用戶更近的站點發送圖像，而不是從歐洲的服務器上檢索并發送圖像，這就減少了加載圖像所需的往返時間。

（二）CSS, JS 和 HTML

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

1.優化 HTML 文檔

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

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

（2）將 JavaScript 屬性放在 HTML 主體的底部，并選擇異步腳本加載。這可以防止任何