如今，前端開發(fā)人員越來越多，因此，對(duì)于前端人員的要求也越來越高。很多時(shí)候，我們在開發(fā)一些項(xiàng)目時(shí)，我們的項(xiàng)目在成長的話，其要求和復(fù)雜性也在增加。其中，作為前端開發(fā)人員，一個(gè)非常重要的能力就是網(wǎng)站的優(yōu)化能力，這樣，才能使網(wǎng)站變得更快，更便于瀏覽器閱讀。
本文將向你分享一些網(wǎng)站優(yōu)化技巧，并為你提供一些工具，以幫助你提升專業(yè)性與工作效率。
一般而言，所有前端優(yōu)化都?xì)w結(jié)為兩種類型的任務(wù)。首先，是通過加快網(wǎng)絡(luò)的數(shù)據(jù)傳輸。它由兩個(gè)子項(xiàng)目組成：減少對(duì)服務(wù)器的請求數(shù)量和減少傳輸?shù)臄?shù)據(jù)量。其次，是加快瀏覽器中的應(yīng)用程序的速度。
現(xiàn)在，讓我們進(jìn)行深入研究學(xué)習(xí)。
1、緩存JavaScript和CSS樣式
盡可能少地向服務(wù)器發(fā)出請求。記得10年前，一個(gè)頁面上要加載5-6個(gè)JS，但理想情況下，你應(yīng)該有一個(gè)JS文件和一個(gè)CSS文件，這就足夠了。
只要確保JavaScript的不同部分在不同頁面上執(zhí)行即可。此外，請記住有關(guān)緩存的信息：下載一次文件后，用戶會(huì)將其保存到瀏覽器緩存中，并且下一次你登陸此網(wǎng)站時(shí)，瀏覽器將立即從緩存中加載，而不是從遠(yuǎn)程服務(wù)器加載靜態(tài)信息。
2、壓縮JavaScript，CSS樣式和HTML代碼
即使我們每個(gè)服務(wù)器僅發(fā)出一個(gè)請求，也不要忘記這個(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ì)量損失來壓縮圖像。通常，我們不需要超高圖片質(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)行很多請求。要分別提供每個(gè)圖標(biāo)，請將其粘貼到圖片中，合并制作為一張大圖片，減少服務(wù)器的請求。
5、應(yīng)用延遲加載—圖像的延遲加載
延遲加載是指腳本也指樣式，同時(shí)，也經(jīng)常引用到圖像中。具有十二個(gè)屏幕和巨大著陸頁的圖片，無論我們擁有多快的互聯(lián)網(wǎng)，加載這些海量數(shù)據(jù)都是一個(gè)問題。
延遲加載的想法是僅在真正需要資源時(shí)才加載資源。對(duì)于圖像，僅加載當(dāng)前可見的那些圖像。如果用戶僅滾動(dòng)登錄頁面的前幾個(gè)屏幕，則許多圖片將隱藏在網(wǎng)站的“下方”，因此不會(huì)加載。所以，我們的服務(wù)器將擺脫不必要的煩人請求，更重要的是，將節(jié)省流量和站點(diǎn)訪問。
6、不要偷懶，要預(yù)覽圖像
有多少人無視這些簡單的規(guī)則。你在網(wǎng)站上看到一個(gè)漂亮的畫廊，上面載滿了圖像，然后想到“多么偉大的人”。然后，你會(huì)注意到滑塊上的縮略圖是相同的大圖像，只是在CSS中有所減少。然后你會(huì)想，“這到底是怎么回事？”
創(chuàng)建縮略圖的任務(wù)不能稱為第一線。如果你必須自己做，我只能表示同情。通常，這是通過專門指派的人員來完成的，這些人員需要親手完成這項(xiàng)不費(fèi)力的工作，或者借助批處理圖像處理工具來完成?；蛘?，如果慈善事業(yè)對(duì)你而言并不陌生，那么就在后端。
在將圖像上傳到服務(wù)器或首次訪問所需圖像時(shí)，通常由CMS /框架插件對(duì)圖像進(jìn)行大小調(diào)整。無論如何，作為前端開發(fā)人員，你都應(yīng)該了解確保快速加載站點(diǎn)，把內(nèi)容呈現(xiàn)給你的客戶。
7、提供來自不同域/子域的靜態(tài)內(nèi)容
如果你有一個(gè)小型項(xiàng)目，博客或網(wǎng)站，你將不會(huì)有任何收益。但是，如果你知道，你正在開發(fā)第二個(gè)Facebook，則應(yīng)將許多靜態(tài)信息和相同的照片散布在不同的子域或域中。事實(shí)是，瀏覽器對(duì)從一個(gè)（子）域下載資源的線程數(shù)量有所限制。因此，如果你有大量的內(nèi)容，最好將其分散。
8、將JavaScript代碼或文件放在頁面末尾
在內(nèi)容結(jié)束標(biāo)簽前，瀏覽器必須先下載內(nèi)容，然后才下載JS。當(dāng)然，如果你是單頁應(yīng)用程序，則此建議將無濟(jì)于事。如果你正在使用SPA，那么一切都很好。
9、包含動(dòng)態(tài)樣式
渲染裸HTML后嘗試加載樣式。頁面加載加速可能會(huì)忽略不計(jì)。但是你的HTML可能會(huì)有的可怕，以至于沒有樣式，用戶會(huì)很快就從網(wǎng)站中逃脫。通常，請嘗試并確定是否需要它。
10、擺脫不必要的DOM元素
DOM操作是瀏覽器中最難的部分之一。不要在兩個(gè)浮動(dòng)div足夠的表上做。不要為了美而雕刻額外的跨度。除非javascript邏輯要求，否則不要為容器包裝程序創(chuàng)建包裝程序。一般而言，請保持簡單并努力追求極簡主義。
11、用JavaScript代替jQuery
我們不要使用jQuery來操縱dom。我們剛剛習(xí)慣了編寫$（'＃myDiv'）比document.getElementById（'myDiv'）更方便。但是支持IE的時(shí)代已經(jīng)過去，如果優(yōu)化對(duì)你來說真的很關(guān)鍵，那么請切換到Native，使用DOM的工作速度將提高數(shù)十倍甚至數(shù)百倍。
12、不要害怕將ID放在DOM元素上，以便從JavaScript代碼快速訪問它們
請保留JS的ID，這是訪問所需項(xiàng)目的最快方法。此外，你將很快不再對(duì)應(yīng)用樣式的優(yōu)先順序感到困惑，并且將永遠(yuǎn)知道：如果id放在此元素上，則javascript需要從中獲取一些東西。如果該類已掛起，則需要CSS。
13、使用CSS動(dòng)畫代替JavaScript
有時(shí)用JS制作棘手的動(dòng)畫非常酷，但是你必須始終記住，這對(duì)瀏覽器來說是很大的負(fù)擔(dān)。更不用說額外的js代碼了。長期以來，CSS3一直備受推崇，可以隨意使用過渡和關(guān)鍵幀。
當(dāng)然，你應(yīng)該考慮所需的瀏覽器對(duì)這些屬性的支持。動(dòng)畫通常是裝飾性的，互補(bǔ)的。如果用戶的瀏覽器不支持CSS轉(zhuǎn)換，那么他將看到靜態(tài)圖片。但是，如果必須實(shí)施動(dòng)畫，則值得用javascript制作它。
14、避免繁瑣的DOM操作
你最喜歡的客戶喜歡調(diào)整屏幕上的窗口大小觀看時(shí)，改變位置，從顯示器邊緣跳出。不幸的是，領(lǐng)導(dǎo)們沒有聽到處理器上的舊散熱器如何開始嘯叫，也沒有看到瀏覽器中的內(nèi)存消耗。但是，所有的站點(diǎn)訪問者都擁有配備Core i7和8 GB內(nèi)存的MacBook。
當(dāng)然，可以在不干擾DOM的情況下進(jìn)行某些轉(zhuǎn)換，而僅通過樣式和媒體查詢即可。但是通常，你必須以舊JS的形式重新連接。
15、AJAX請求并分析來自服務(wù)器的數(shù)據(jù)傳輸
你不能自己決定的另一點(diǎn)，是它與服務(wù)器的交互。
與你的后端同事討論客戶端和服務(wù)器之間的數(shù)據(jù)交換。協(xié)商數(shù)據(jù)格式和API。一起構(gòu)建REST服務(wù)。畢竟，你是知道客戶端上需要什么數(shù)據(jù)的人。
例如，如果你需要有關(guān)在線商店的購買者的一般信息，請從請求中刪除所有帶有名稱，價(jià)格和折扣的訂單上不必要的數(shù)據(jù)。在單獨(dú)的請求中將其取出。你的請求越簡單，越輕便，處理請求就越容易，服務(wù)器上的負(fù)載也就越少。
總結(jié)
以上就是我分享的15個(gè)前端優(yōu)化的小技巧，這些技巧對(duì)我的幫助還是很大的。
暫無評(píng)論，快來評(píng)論吧!