改善前端優(yōu)化的有用技巧

1、緩存JavaScript和CSS樣式

盡可能少地向服務(wù)器發(fā)出請求。記得10年前，一個頁面上要加載5-6個JS，但理想情況下，你應(yīng)該有一個JS文件和一個CSS文件，這就足夠了。
只要確保JavaScript的不同部分在不同頁面上執(zhí)行即可。此外，請記住有關(guān)緩存的信息：下載一次文件后，用戶會將其保存到瀏覽器緩存中，并且下一次你登陸此網(wǎng)站時，瀏覽器將立即從緩存中加載，而不是從遠程服務(wù)器加載靜態(tài)信息。

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

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

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

基本上，我們不需要在網(wǎng)站上上傳10MP照片。它們不僅可以降低分辨率，而且還可以以最小的質(zhì)量損失來壓縮圖像。通常，我們不需要超高圖片質(zhì)量的網(wǎng)站。另外，如果不需要透明度，也可以將圖像從png轉(zhuǎn)換為jpg。
像Photoshop這樣的圖形軟件都可以提供幫助（它們甚至具有特殊的選項“為網(wǎng)絡(luò)壓縮”）和相同的構(gòu)建工具，例如gulp-imagemin和image in-pngquant插件。

4、制作大合成圖

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

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

延遲加載是指腳本也指樣式，同時，也經(jīng)常引用到圖像中。具有十二個屏幕和巨大著陸頁的圖片，無論我們擁有多快的互聯(lián)網(wǎng)，加載這些海量數(shù)據(jù)都是一個問題。
延遲加載的想法是僅在真正需要資源時才加載資源。對于圖像，僅加載當前可見的那些圖像。如果用戶僅滾動登錄頁面的前幾個屏幕，則許多圖片將隱藏在網(wǎng)站的“下方”，因此不會加載。所以，我們的服務(wù)器將擺脫不必要的煩人請求，更重要的是，將節(jié)省流量和站點訪問。

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

有多少人無視這些簡單的規(guī)則。你在網(wǎng)站上看到一個漂亮的畫廊，上面載滿了圖像，然后想到“多么偉大的人”。然后，你會注意到滑塊上的縮略圖是相同的大圖像，只是在CSS中有所減少。然后你會想，“這到底是怎么回事？”
創(chuàng)建縮略圖的任務(wù)不能稱為第一線。如果你必須自己做，我只能表示同情。通常，這是通過專門指派的人員來完成的，這些人員需要親手完成這項不費力的工作，或者借助批處理圖像處理工具來完成?；蛘?#xff0c;如果慈善事業(yè)對你而言并不陌生，那么就在后端。
在將圖像上傳到服務(wù)器或首次訪問所需圖像時，通常由CMS /框架插件對圖像進行大小調(diào)整。無論如何，作為前端開發(fā)人員，你都應(yīng)該了解確保快速加載站點，把內(nèi)容呈現(xiàn)給你的客戶。

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

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

8、將JavaScript代碼或文件放在頁面末尾

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

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

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

10、擺脫不必要的DOM元素

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

11、用JavaScript代替jQuery

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

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

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

13、使用CSS動畫代替JavaScript

有時用JS制作棘手的動畫非常酷，但是你必須始終記住，這對瀏覽器來說是很大的負擔(dān)。更不用說額外的js代碼了。長期以來，CSS3一直備受推崇，可以隨意使用過渡和關(guān)鍵幀。
當然，你應(yīng)該考慮所需的瀏覽器對這些屬性的支持。動畫通常是裝飾性的，互補的。如果用戶的瀏覽器不支持CSS轉(zhuǎn)換，那么他將看到靜態(tài)圖片。但是，如果必須實施動畫，則值得用javascript制作它。

14、避免繁瑣的DOM操作

你最喜歡的客戶喜歡調(diào)整屏幕上的窗口大小觀看時，改變位置，從顯示器邊緣跳出。不幸的是，領(lǐng)導(dǎo)們沒有聽到處理器上的舊散熱器如何開始嘯叫，也沒有看到瀏覽器中的內(nèi)存消耗。但是，所有的站點訪問者都擁有配備Core i7和8 GB內(nèi)存的MacBook。
當然，可以在不干擾DOM的情況下進行某些轉(zhuǎn)換，而僅通過樣式和媒體查詢即可。但是通常，你必須以舊JS的形式重新連接。

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

你不能自己決定的另一點，是它與服務(wù)器的交互。
與你的后端同事討論客戶端和服務(wù)器之間的數(shù)據(jù)交換。協(xié)商數(shù)據(jù)格式和API。一起構(gòu)建REST服務(wù)。畢竟，你是知道客戶端上需要什么數(shù)據(jù)的人。
例如，如果你需要有關(guān)在線商店的購買者的一般信息，請從請求中刪除所有帶有名稱，價格和折扣的訂單上不必要的數(shù)據(jù)。在單獨的請求中將其取出。你的請求越簡單，越輕便，處理請求就越容易，服務(wù)器上的負載也就越少。

總結(jié)

以上是生活随笔為你收集整理的改善前端优化的有用技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。