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

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

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

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

一、如何衡量性能？

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

（1） 谷歌瀏覽器Lighthouse

（2） Speedcurve

這兩款工具都可以跟蹤主要的性能 KPI（如頁面響應速度指數(shù) Pagespeed Index，頁面變?yōu)榭山换サ臅r間 TTI，首次對用戶顯示內(nèi)容的時間 FCP等)。其中 Lighthouse 包含在 Chrome 開發(fā)工具里，通過分析網(wǎng)站/應用程序提供一些非常有用的提示，從而告訴開發(fā)人員如何提升相應的指標。使用 Speedcurve，可以在任何時間監(jiān)測所有這些 KPI 及其性能。

Chrome 的Lighthouse提示信息

衡量產(chǎn)品前端性能之后，下一步就要優(yōu)化我們的網(wǎng)站，使其發(fā)揮最大作用。

二、如何優(yōu)化？

（一）優(yōu)化圖像

任何一個網(wǎng)站，圖像都是至關(guān)重要的部分。平均而言，圖像類數(shù)據(jù)占 Web頁面加載數(shù)據(jù)的 60%以上，因此，圖像的優(yōu)化也是最重要的一環(huán)，其實也是最容易實現(xiàn)的。為什么這么說？可以從哪幾方面入手？

1、調(diào)整圖像大小

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

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

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

2、確保延遲加載

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

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

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

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

（二）CSS, JS 和 HTML

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

1.優(yōu)化 HTML 文檔

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

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

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