只需三種手段，將傳統(tǒng)的網(wǎng)站的性能提高 24%-魔扣目錄

對(duì)于技術(shù)人而言，性能優(yōu)化是一個(gè)亙古不變的話題。而隨著框架、語(yǔ)言、庫(kù)等工具的不斷演進(jìn)，傳統(tǒng)的優(yōu)化手段是否仍然適用？在創(chuàng)新的環(huán)境之下，又有哪些較為捷徑的優(yōu)化手段？在本文中，作者將以一年前的網(wǎng)站為測(cè)試對(duì)象，嘗試了最新的三種手段，有效地將網(wǎng)站性能提高了 24%，接下來(lái)，我們將一探究竟。

作者 | SwissGreg

譯者 | 彎月，責(zé)編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

上周末，我們提升了一年以前構(gòu)建的一個(gè)網(wǎng)站的性能。

我們的這個(gè)網(wǎng)站是為瑞士的軟件開(kāi)發(fā)人員提供的求職平臺(tái)，該網(wǎng)站的性能非常重要，原因有如下兩個(gè)：

良好的用戶體驗(yàn)：既包括網(wǎng)站的加載時(shí)間（以及與用戶交互時(shí)間），也包括使用該網(wǎng)站時(shí)的快捷感。
seo：在很大程度上，我們的流量依賴于google搜索，而且眾所周知Google更加偏向性能出眾的網(wǎng)站（Google甚至在搜索控制臺(tái)中顯示了速度報(bào)告）。

如果你在網(wǎng)上搜索“網(wǎng)站性能基礎(chǔ)”，就會(huì)發(fā)現(xiàn)很多小技巧，例如：

使用CDN（內(nèi)容交付網(wǎng)絡(luò)）提供能夠緩存一段時(shí)間的靜態(tài)文件。
優(yōu)化圖像尺寸和格式。
使用GZIP或Brotli壓縮。
減少非關(guān)鍵JS和css代碼的大小。

我們實(shí)現(xiàn)了很多容易達(dá)成的目標(biāo)。

另外，由于我們的主頁(yè)基本上是一個(gè)可過(guò)濾的列表（用React編寫），所以我們引入了react-window，可以一次只渲染10個(gè)列表項(xiàng)（而不是250個(gè)）。

上述技巧幫助我們極大地提高了性能，然而在查看了速度報(bào)告后，感覺(jué)我們還有進(jìn)步的空間。

因此，我們開(kāi)始研究更多不尋常的方式來(lái)提升網(wǎng)站的速度，最終我們?nèi)〉昧司薮蟮某晒Γ∵@是本周的報(bào)告：

這份報(bào)告顯示，網(wǎng)站的整體加載時(shí)間減少了24%！

那么，為了取得這樣的成果，我們究竟做了哪些努力呢？

1. 針對(duì)JSON數(shù)據(jù)采用rel ="preload"

index.html文件中加入的這一行代碼可以指示瀏覽器：在JAVAScript調(diào)用AJAX/fetch請(qǐng)求JSON數(shù)據(jù)前，就應(yīng)該獲取這些數(shù)據(jù)。

當(dāng)實(shí)際需要使用數(shù)據(jù)時(shí)，就可以從瀏覽器緩存中讀取，而不必再次獲取數(shù)據(jù)。這個(gè)技巧幫助我們節(jié)省了大約0.5秒的加載時(shí)間。

本來(lái)我們可以早點(diǎn)實(shí)現(xiàn)這個(gè)技巧，但是Chrome瀏覽器中曾經(jīng)有一些問(wèn)題導(dǎo)致重復(fù)下載。不過(guò)如今看來(lái)已經(jīng)改好了。

2. 在服務(wù)器端實(shí)現(xiàn)超級(jí)簡(jiǎn)單的緩存

在實(shí)現(xiàn)JSON預(yù)加載后，我們發(fā)現(xiàn)下載職位列表仍然是瓶頸（從服務(wù)器獲取響應(yīng)大約需要0.8秒）。因此，我們決定研究服務(wù)器端的緩存。首先，我們嘗試了節(jié)點(diǎn)緩存，但是令人驚訝的是，獲取時(shí)間并沒(méi)有縮短。

值得一提的是/api/jobs端點(diǎn)是一個(gè)簡(jiǎn)單的getAll端點(diǎn)，因此沒(méi)有改進(jìn)的余地。

但是，我們決定更進(jìn)一步，通過(guò)一個(gè)JS變量簡(jiǎn)單地構(gòu)建自己的緩存。如下所示：