改善前端優化的有用技巧

1、緩存JavaScript和CSS樣式

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

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

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

3、圖片壓縮優化

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

4、制作大合成圖

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

5、應用延遲加載—圖像的延遲加載

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

6、不要偷懶，要預覽圖像

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

7、提供來自不同域/子域的靜態內容

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

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

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

9、包含動態樣式

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

10、擺脫不必要的DOM元素

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

11、用JavaScript代替jQuery

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

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

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

13、使用CSS動畫代替JavaScript

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

14、避免繁瑣的DOM操作

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

15、AJAX請求并分析來自服務器的數據傳輸

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。