前端不哭！最新優(yōu)化性能經(jīng)驗(yàn)分享

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

（圖片來(lái)源：作者 Dimitris Kiriakakis 的原文）

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

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

一、如何衡量性能？

首先，我們必須要有一些衡量性能的指標(biāo)。在衡量前端應(yīng)用程序的性能時(shí)，有兩個(gè)工具推薦給大家：

（1） 谷歌瀏覽器Lighthouse

（2） Speedcurve

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

Chrome 的Lighthouse提示信息

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

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

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

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

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

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

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

響應(yīng)式布局需要響應(yīng)式圖像

2、確保延遲加載

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

3、圖像傳輸：使用 CDN 進(jìn)行

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

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

（二）CSS, JS 和 HTML

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

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

HTML（幾乎）是所有 Web 應(yīng)用程序的基礎(chǔ)。在 HTML 文檔中引用資源時(shí)，有下面兩點(diǎn)建議想與大家分享！

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

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