英文 | https://javascript.plainenglish.io/15-useful-techniques-you-can-use-to-improve-your-frontend-optimization-8317cb6e54e9

翻譯 | 小愛(ài)

如今，前端開(kāi)發(fā)人員越來(lái)越多，因此，對(duì)于前端人員的要求也越來(lái)越高。很多時(shí)候，我們?cè)陂_(kāi)發(fā)一些項(xiàng)目時(shí)，我們的項(xiàng)目在成長(zhǎng)的話，其要求和復(fù)雜性也在增加。其中，作為前端開(kāi)發(fā)人員，一個(gè)非常重要的能力就是網(wǎng)站的優(yōu)化能力，這樣，才能使網(wǎng)站變得更快，更便于瀏覽器閱讀。

本文將向你分享一些網(wǎng)站優(yōu)化技巧，并為你提供一些工具，以幫助你提升專業(yè)性與工作效率。

一般而言，所有前端優(yōu)化都?xì)w結(jié)為兩種類型的任務(wù)。首先，是通過(guò)加快網(wǎng)絡(luò)的數(shù)據(jù)傳輸。它由兩個(gè)子項(xiàng)目組成：減少對(duì)服務(wù)器的請(qǐng)求數(shù)量和減少傳輸?shù)臄?shù)據(jù)量。其次，是加快瀏覽器中的應(yīng)用程序的速度。

現(xiàn)在，讓我們進(jìn)行深入研究學(xué)習(xí)。

1、緩存JavaScript和CSS樣式

盡可能少地向服務(wù)器發(fā)出請(qǐng)求。記得10年前，一個(gè)頁(yè)面上要加載5-6個(gè)JS，但理想情況下，你應(yīng)該有一個(gè)JS文件和一個(gè)CSS文件，這就足夠了。

只要確保JavaScript的不同部分在不同頁(yè)面上執(zhí)行即可。此外，請(qǐng)記住有關(guān)緩存的信息：下載一次文件后，用戶會(huì)將其保存到瀏覽器緩存中，并且下一次你登陸此網(wǎng)站時(shí)，瀏覽器將立即從緩存中加載，而不是從遠(yuǎn)程服務(wù)器加載靜態(tài)信息。

2、壓縮JavaScript，CSS樣式和HTML代碼

即使我們每個(gè)服務(wù)器僅發(fā)出一個(gè)請(qǐng)求，也不要忘記這個(gè)數(shù)據(jù)也很重要。壓縮代碼可使你最多減少40％到50％的代碼量。對(duì)于移動(dòng)設(shè)備尤其如此。有大量的在線服務(wù)可以進(jìn)行縮小優(yōu)化，例如minifycode.com。但是使用諸如grunt.js，gulp.js或webpack.js之類的前端構(gòu)建工具要方便得多。

3、圖片壓縮優(yōu)化

基本上，我們不需要在網(wǎng)站上上傳10MP照片。它們不僅可以降低分辨率，而且還可以以最小的質(zhì)量損失來(lái)壓縮圖像。通常，我們不需要超高圖片質(zhì)量的網(wǎng)站。另外，如果不需要透明度，也可以將圖像從png轉(zhuǎn)換為jpg。

像Photoshop這樣的圖形軟件都可以提供幫助（它們甚至具有特殊的選項(xiàng)“為網(wǎng)絡(luò)壓縮”）和相同的構(gòu)建工具，例如gulp-imagemin和image in-pngquant插件。

4、制作大合成圖

小圖標(biāo)，按鈕的背景，復(fù)選標(biāo)記和箭頭，這些很小的圖片，但需要對(duì)服務(wù)器進(jìn)行很多請(qǐng)求。要分別提供每個(gè)圖標(biāo)，請(qǐng)將其粘貼到圖片中，合并制作為一張大圖片，減少服務(wù)器的請(qǐng)求。

5、應(yīng)用延遲加載—圖像的延遲加載

延遲加載是指腳本也指樣式，同時(shí)，也經(jīng)常引用到圖像中。具有十二個(gè)屏幕和巨大著陸頁(yè)的圖片，無(wú)論我們擁有多快的互聯(lián)網(wǎng)，加載這些海量數(shù)據(jù)都是一個(gè)問(wèn)題。

延遲加載的想法是僅在真正需要資源時(shí)才加載資源。對(duì)于圖像，僅加載當(dāng)前可見(jiàn)的那些圖像。如果用戶僅滾動(dòng)登錄頁(yè)面的前幾個(gè)屏幕，則許多圖片將隱藏在網(wǎng)站的“下方”，因此不會(huì)加載。所以，我們的服務(wù)器將擺脫不必要的煩人請(qǐng)求，更重要的是，將節(jié)省流量和站點(diǎn)訪問(wèn)。

6、不要偷懶，要預(yù)覽圖像

有多少人無(wú)視這些簡(jiǎn)單的規(guī)則。你在網(wǎng)站上看到一個(gè)漂亮的畫(huà)廊，上面載滿了圖像，然后想到“多么偉大的人”。然后，你會(huì)注意到滑塊上的縮略圖是相同的大圖像，只是在CSS中有所減少。然后你會(huì)想，“這到底是怎么回事？”

創(chuàng)建縮略圖的任務(wù)不能稱為第一線。如果你必須自己做，我只能表示同情。通常，這是通過(guò)專門(mén)指派的人員來(lái)完成的，這些人員需要親手完成這項(xiàng)不費(fèi)力的工作，或者借助批處理圖像處理工具來(lái)完成。或者，如果慈善事業(yè)對(duì)你而言并不陌生，那么就在后端。

在將圖像上傳到服務(wù)器或首次訪問(wèn)所需圖像時(shí)，通常由CMS /框架插件對(duì)圖像進(jìn)行大小調(diào)整。無(wú)論如何，作為前端開(kāi)發(fā)人員，你都應(yīng)該了解確?？焖偌虞d站點(diǎn)，把內(nèi)容呈現(xiàn)給你的客戶。

7、提供來(lái)自不同域/子域的靜態(tài)內(nèi)容

如果你有一個(gè)小型項(xiàng)目，博客或網(wǎng)站，你將不會(huì)有任何收益。但是，如果你知道，你正在開(kāi)發(fā)第二個(gè)Facebook，則應(yīng)將許多靜態(tài)信息和相同的照片散布在不同的子域或域中。事實(shí)是，瀏覽器對(duì)從一個(gè)（子）域下載資源的線程數(shù)量有所限制。因此，如果你有大量的內(nèi)容，最好將其分散。

8、將JavaScript代碼或文件放在頁(yè)面末尾

在內(nèi)容結(jié)束標(biāo)簽前，瀏覽器必須先下載內(nèi)容，然后才下載JS。當(dāng)然，如果你是單頁(yè)應(yīng)用程序，則此建議將無(wú)濟(jì)于事。如果你正在使用SPA，那么一切都很好。

9、包含動(dòng)態(tài)樣式

渲染裸HTML后嘗試加載樣式。頁(yè)面加載加速可能會(huì)忽略不計(jì)。但是你的HTML可能會(huì)有的可怕，以至于沒(méi)有樣式，用戶會(huì)很快就從網(wǎng)站中逃脫。通常，請(qǐng)嘗試并確定是否需要它。

10、擺脫不必要的DOM元素

DOM操作是瀏覽器中最難的部分之一。不要在兩個(gè)浮動(dòng)div足夠的表上做。不要為了美而雕刻額外的跨度。除非javascript邏輯要求，否則不要為容器包裝程序創(chuàng)建包裝程序。一般而言，請(qǐng)保持簡(jiǎn)單并努力追求極簡(jiǎn)主義。

11、用JavaScript代替jQuery

我們不要使用jQuery來(lái)操縱dom。我們剛剛習(xí)慣了編寫(xiě)$（'＃myDiv'）比document.getElementById（'myDiv'）更方便。但是支持IE的時(shí)代已經(jīng)過(guò)去，如果優(yōu)化對(duì)你來(lái)說(shuō)真的很關(guān)鍵，那么請(qǐng)切換到Native，使用DOM的工作速度將提高數(shù)十倍甚至數(shù)百倍。

12、不要害怕將ID放在DOM元素上，以便從JavaScript代碼快速訪問(wèn)它們

請(qǐng)保留JS的ID，這是訪問(wèn)所需項(xiàng)目的最快方法。此外，你將很快不再對(duì)應(yīng)用樣式的優(yōu)先順序感到困惑，并且將永遠(yuǎn)知道：如果id放在此元素上，則javascript需要從中獲取一些東西。如果該類已掛起，則需要CSS。

13、使用CSS動(dòng)畫(huà)代替JavaScript

有時(shí)用JS制作棘手的動(dòng)畫(huà)非?？幔悄惚仨毷冀K記住，這對(duì)瀏覽器來(lái)說(shuō)是很大的負(fù)擔(dān)。更不用說(shuō)額外的js代碼了。長(zhǎng)期以來(lái)，CSS3一直備受推崇，可以隨意使用過(guò)渡和關(guān)鍵幀。

當(dāng)然，你應(yīng)該考慮所需的瀏覽器對(duì)這些屬性的支持。動(dòng)畫(huà)通常是裝飾性的，互補(bǔ)的。如果用戶的瀏覽器不支持CSS轉(zhuǎn)換，那么他將看到靜態(tài)圖片。但是，如果必須實(shí)施動(dòng)畫(huà)，則值得用javascript制作它。

14、避免繁瑣的DOM操作

你最喜歡的客戶喜歡調(diào)整屏幕上的窗口大小觀看時(shí)，改變位置，從顯示器邊緣跳出。不幸的是，領(lǐng)導(dǎo)們沒(méi)有聽(tīng)到處理器上的舊散熱器如何開(kāi)始嘯叫，也沒(méi)有看到瀏覽器中的內(nèi)存消耗。但是，所有的站點(diǎn)訪問(wèn)者都擁有配備Core i7和8 GB內(nèi)存的MacBook。

當(dāng)然，可以在不干擾DOM的情況下進(jìn)行某些轉(zhuǎn)換，而僅通過(guò)樣式和媒體查詢即可。但是通常，你必須以舊JS的形式重新連接。

15、AJAX請(qǐng)求并分析來(lái)自服務(wù)器的數(shù)據(jù)傳輸

你不能自己決定的另一點(diǎn)，是它與服務(wù)器的交互。

與你的后端同事討論客戶端和服務(wù)器之間的數(shù)據(jù)交換。協(xié)商數(shù)據(jù)格式和API。一起構(gòu)建REST服務(wù)。畢竟，你是知道客戶端上需要什么數(shù)據(jù)的人。

例如，如果你需要有關(guān)在線商店的購(gòu)買(mǎi)者的一般信息，請(qǐng)從請(qǐng)求中刪除所有帶有名稱，價(jià)格和折扣的訂單上不必要的數(shù)據(jù)。在單獨(dú)的請(qǐng)求中將其取出。你的請(qǐng)求越簡(jiǎn)單，越輕便，處理請(qǐng)求就越容易，服務(wù)器上的負(fù)載也就越少。

總結(jié)

以上就是我分享的15個(gè)前端優(yōu)化的小技巧，這些技巧對(duì)我的幫助還是很大的。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)