提高Web前端開發技能的優化技巧總結！

       在網際網路盛行的今天，越來越多的線上使用者希望得到安全可靠並且快速的訪問體驗。針對Web網頁過於膨脹以及第三指令碼蠶食流量等問題，小千提出以下改進建議。希望本篇文章能夠對小夥伴們有所幫助。下面我們一起來看一看吧！

       1、管理“頁面膨脹”

       頁面大小與效能有著密切的關係。Radware電商效能“行業現狀”報告顯示，100強電商頁面大小中位數達到了1492KB，比一年半之前增大了48%。

       在研究報告里載入最快的10個頁面中，頁面包含的資源請求中位數為50個，頁面大小中位數為556KB。而載入最慢的10個頁面中，頁面包含的資源請求中位數為141個，頁面大小中位數為3289KB。換句話說，載入最慢的頁面的資源中位數幾乎是載入最快的頁面的三倍，頁面大小則是六倍。

       仔細研究頁面尺寸大小，我們可以得到更多的資訊。載入最快的10個頁面所包含的資源總數範圍比較密集：在15個~72個之間；頁面尺寸最小的僅為251KB，最大的2003KB。而載入最慢的10個頁面所包含的資源總數範圍則比較廣泛：在89個~373個之間；頁面尺寸最小為2073KB，最大的則超過了10MB。

       2、進行影像優化

       影像是造成頁面膨脹的罪魁禍首之一，通常佔據頁面位元組數的50-60%。在頁面中新增圖片或是將現有圖片放大，是迅速獲取使用者並提高業務轉化率的有效方式。但是這種方法會對效能造成嚴重的影響。

       進行影像優化是提升效能最簡單的一種方法，它可以使頁面載入更快。為了更有效的完成影像渲染，影像必須經過壓縮和整合、影像的尺寸和格式必須經過仔細調整，影像質量也必須經過優化，這樣才可以依據影像的重要性進行區別化的載入處理。

       3、控制第三方指令碼

       在典型的頁面伺服器請求中，來自於第三方指令碼的請求佔了其中的50%或更多。這些第三方指令碼不僅會增加頁面的位元組數，帶來延遲，而且也會成為Web頁面中最大的潛在故障點。無響應、未經優化的第三方指令碼會降低整個網路的載入速度。

       解決辦法是延遲第三方指令碼的載入，將其放在關鍵頁面內容之後進行載入，更為理想的情況是放在頁面onLoad事件之後載入，這樣才不會影響企業的搜尋排名(谷歌將onLoad事件作為載入時間指標)。對於一些分析工具和第三方廣告商而言，如果延遲第三方指令碼載入的方法不可行，可以利用指令碼的非同步版本，與關鍵內容的載入同步進行。使用者必須瞭解網站中有哪些指令碼，刪除那些無用的指令碼，並對第三方指令碼的效能進行持續監控。

       4、真正做到移動裝置優先

       “移動裝置優先”並不是一個全新的概念。早在2013年，移動裝置的使用量就已經超過了桌上型電腦，然而與眾多口頭承諾的移動效能相比，真正專注於移動裝置的開發還是存在一定的差距。例如，2011年11月，移動裝置上的平均頁面大小為475KB，現在則增長至897 KB。也就是說，在短短三年之間，平均頁面大小几乎翻了一番。

       儘管移動裝置和網路取得了一些進展，但就效能而言，還是無法與大小已接近1MB的服務頁面需求保持同步。我們知道，頁面大小與載入時間息息相關，移動使用者對緩慢的載入速度尤其敏感。如果企業希望網站可以真正做到“移動裝置優先”，就必須正確處理這些問題。

       5、這在進行響應式Web設計時兼顧效能

       響應式設計讓設計人員和開發人員可以更好地控制Web頁面的外觀和感覺。它可以使跨多平臺和裝置上的頁面變得更漂亮。但同時也會帶來巨大的效能損失，這些效能損失並不能通過更快速的瀏覽器、網路和小工具得到緩解。而且隨著時間的推移，這樣影響還將持續惡化。

       響應式設計建立在樣式表和JavaScript之上。然而，低效的CSS和JS所帶來的效能問題遠遠大於其設計優勢給我們帶來的好處。樣式表應當放在HEAD文件中，用以實現頁面的逐步渲染。然而，樣式表卻經常出現在頁面其它位置，這就阻礙了頁面的渲染速度。換句話說，JavaScript檔案應當放在頁面底部或在關鍵內容載入完成之後再被載入才是合理的處理方式。

       6、實時監控效能

       大家都知道要解決一個問題就必須先對問題有充分的瞭解。要解決頁面效能問題，企業就必須知道使用者在什麼時候可以看到主要頁面內容並與之進行互動；同時，企業還需瞭解效能和可用性問題是如何影響業務指標的。企業需要有方法獲取實際的效能指標並對其進行分析。實時使用者監控(RUM)工具可以從真實使用者的角度實時獲取、分析並記錄網站的效能和可用性。

       7、這切勿過分依賴CDN解決所有效能問題

       Radware季度電商效能“行業現狀”報告中存在一項最具爭議性的調查結果，即：使用內容分發網路(CDN)的網站完成主要內容渲染所需的時間比未曾使用CDN的網站要長的多。這是一個相關性問題，而非因果關係：通常情況下，相較於未使用CDN的網站，使用CDN的網站頁面更大，也更復雜。頁面的大小和複雜程度才是造成效能問題的元凶，而非CDN。但這一結果也表明，僅依靠CDN並不能解決所有的效能難題。

       如果部署得當，CDN會是解決延遲問題非常有效的工具：縮短託管伺服器接收、處理並響應影像、CSS檔案等頁面資源請求所需的時間。但是，延遲僅僅只是現代電商網站的關鍵問題之一。為了實現最佳的加速效果，網站運營人員可以採用組合解決方案：CDN+前端優化(如Radware FastView解決方案)+應用交付控制器(ADC)和內部管理。

       8、在企業內部加強Web效能觀念的宣傳

       大量研究證明，提高頁面速度可以對所有的關鍵效能指標產生積極影響：頁面訪問量、使用者粘連度、業務轉化率、使用者滿意度、客戶保持、購物車的內容多少和收入。        然而，正如上述7個建議中所表明的那樣，許多企業都犯了同樣的錯誤，最終損害了Web效能。目前，企業應該重點解決Web開發目標和線上業務目標之間的差距問題，而且，每個企業都應該至少擁有一個內部效能專家，以便更好的解決Web效能問題。

       以上就是小千 今天為大家分享的關於提高 技能的技巧。希望本篇文章能夠對正在從事Web前端工作的小夥伴們有所幫助。如果你想學習Web前端， 可以關注小千，後期會分享更多Web前端知識。

       本文來自千鋒教育，轉載請註明出處。