網站前端該怎麼優化？詳解網站前端優化技巧及建議

若是網頁龐雜，網頁打開速度慢，會有什麼後果?

首先，網頁代碼繁雜，會出現網站加載速度慢的直接後果。有鑑於國內網速慢的大環境，更是加重了繁雜網頁打開慢，加載慢的問題。

其次，移動端用戶的崛起，形成了大量用戶經過手機，平板等移動端訪問網站的情況，網站打開速度慢的問題更加凸顯。

再次，網站加載速度的快與慢直接影響到網站給予搜索引擎友好度的多與少。

最後，從網站管理者或者seo優化人員來說，繁雜的網頁會形成維護困難的問題。

實際來看，優化網站頁面(前端)不是技術難題，給頁面減肥也是容易操做的事情，甲爪聯盟教程的建議是：容易的完成的事情需便可，立刻完成。網站頁面(前端)優化方法及建議以下：

1：啓用GZIP壓縮網頁。

什麼是GZIP壓縮?GZIP最先由Jean-loup Gailly和Mark Adler建立，用於UNⅨ系統的文件壓縮。咱們在Linux中常常會用到後綴爲.gz的文件，它們就是GZIP格式的。現今已經成爲Internet 上使用很是廣泛的一種數據壓縮格式，或者說一種文件格式。

GZIP壓縮網頁與什麼用?

HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術。

大流量的WEB站點經常使用GZIP壓縮技術來讓用戶感覺更快的速度。

這通常是指WWW服務器中安裝的一個功能，當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來.通常對純文本內容可壓縮到原大小的40%.這樣傳輸就快了，效果就是你點擊網址後會很快的顯示出來.固然這也會增長服務器的負載。

以甲爪聯盟教程爲例，使用的是阿里雲服務器，其默認就有GZIP壓縮模塊，網站原網頁大小爲78120，壓縮後大小爲10544，估計的壓縮比達到了86.5% 。拋開硬件條件，網站代碼越少，越精簡，相對來說其打開，加載的速度就會更快。

2：網頁(前端)支持瀏覽器緩存以達到速度優化效果。

瀏覽器緩存有什麼用?瀏覽器緩存(Browser Caching)是爲了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就能夠從本地磁盤顯示文檔，這樣就能夠加速頁面的閱覽。

瀏覽器緩存放在什麼地方?

可放到文件，內存中(如session)，還有cache(高速緩存)，還有 cookie，session，viewstate，這些是咱們常常用到的，但能夠認爲他們是緩存數據。其實cache跟session有類似功能，但 cache可在代碼中設置過時時間，依賴項。所謂依賴項(例如：微軟的類cachedependcy sqlCacheDependency)當依賴項變更了，系統會通知cache過時，無效。緩存但是有服務器緩存，客戶端緩存。

舉例如何使用瀏覽器緩存以優化網頁(前端)。

使用瀏覽器緩存以優化網頁(前端)

對於seo優化人員來說，沒必要掌握如何使用瀏覽器緩存代碼，但須要知曉相關原理。

3：利用內容分發網絡(CDN)優化網站加載速度。

內容分發網絡(CDN)概念：CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。

內容分發網絡(CDN)原理：CDN的基本原理是普遍採用各類緩存服務器，將這些緩存服務器分佈到用戶訪問相對集中的地區或網絡中，在用戶訪問網站時，利用全局負載技術將用戶的訪問指向距離最近的工做正常的緩存服務器上，由緩存服務器直接響應用戶請求。

內容分發網絡(CDN)目的：使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。

內容分發網絡(CDN)的主體是空間商而非網站管理員自己。

4：刪除多餘代碼。

不少時候，一個網站的網頁中存在不少多餘的代碼。如首頁用到的js，列表頁就用不到，若是全站使用頭部調用，就讓某些本不須要相關代碼的網頁也無端添加了許多代碼，這些代碼的精簡，是有利於前端的打開速度的。也就是說：網站中的每個頁面，都無需多餘代碼。

5：充分利用css控制樣式。

網站頁面(前端)優化方法及建議-css樣式

一個前端代碼精簡的網站，其css代碼與div是分離的，無需在前端對某些代碼使用style定義樣式，一切以css控制便可。如：某一個網頁中即便用了style定義樣式，又使用了css定義樣式，這樣就重複了代碼，也會形成網站前端加載速度的慢化。

6：CSS代碼的優化與控制。

甲爪聯盟所提供的一切網站頁面(前端)優化方法及建議，其最終目的都是加快網站打開速度，這些方法和建議的落地點在於精簡代碼，給網頁前端進行減肥，css代碼優化的點包括但不限於：縮寫css代碼;排列css代碼;同屬性提取共用css選擇器;分離網頁顏色和背景設置樣式(較大站點須要注意);條理化css代碼等。

7：前端js代碼優化.

與css代碼相似，前端js代碼優化方法包括但不限於：

避免全局查找：在一個函數中會用到全局對象存儲爲局部變量來減小全局查找，由於訪問局部變量的速度要比訪問全局變量的速度更快些;

定時器：若是針對的是不斷運行的代碼，不該該使用setTimeout，而應該是用setInterval，由於setTimeout每一次都會初始化一個定時器，而setInterval只會在開始的時候初始化一個定時器;

字符串鏈接：若是要鏈接多個字符串，應該少使用+=;若是是收集字符串，好比屢次對同一個字符串進行+=操做的話，最好使用一個緩存，使用Java數組來收集，最後使用join方法鏈接起來;

避免with語句：和函數相似 ，with語句會建立本身的做用域，所以會增長其中執行的代碼的做用域鏈的長度，因爲額外的做用域鏈的查找，在with語句中執行的代碼確定會比外面執行的代碼要慢，在能不使用with語句的時候儘可能不要使用with語句;

數字轉換成字符串：般最好用」」 + 1來將數字轉換成字符串，雖然看起來比較醜一點，但事實上這個效率是最高的;

浮點數轉換成整型：不少人喜歡使用parseInt()，其實parseInt()是用於將字符串轉換成數字，而不是浮點數和整型之間的轉換，咱們應該使用Math.floor()或者Math.round();若是定義了toString()方法來進行類型轉換的話，推薦顯式調用

toString()，由於內部的操做在嘗試全部可能性以後，會嘗試對象的toString()方法嘗試可否轉化爲String，因此直接調用這個方法效率會更高;

多個類型聲明：在Java中全部變量均可以使用單個var語句來聲明，這樣就是組合在一塊兒的語句，以減小整個腳本的執行時間，就如上面代碼同樣，上面代碼格式也挺規範，讓人一看就明瞭。

插入迭代器：如var name=values; i++;前面兩條語句能夠寫成var name=values[i++];

使用DocumentFragment優化屢次append;

使用一次innerHTML賦值代替構建dom元素;

經過模板元素clone，替代;

使用firstChild和nextSibling代替childNodes遍歷dom元素;

刪除DOM節點;

使用事件代理;

重複使用的調用結果，事先保存到局部變量;

注：seo優化人員沒必要要求掌握前端js代碼優化的具體代碼，這是前端人員的工做。

8：tab表格的使用建議。

tab表格佈局網頁是較過期的技術，現目前效果更好的是div。對於tab表格的使用建議以下：儘可能少使用tab表格，杜絕在嵌套條件下的表格使用。

9：網站圖片seo優化。

網站圖片優化是加快整站打開，加載速度的重要一環，對於網站來說，咱們須要使用正確的圖片尺寸與格式，並在不損害圖片質量的狀況下壓縮圖片。

首先，使用正確的圖片格式如jpg格式的圖片。

其次，使用合理的圖片尺寸。圖片尺寸越大，對加載的速度影響越大。有相關統計，圖片減小50%，其網站總體頁面會減小75%。對於圖片尺寸的處理，其基本要求是在知足用戶需求的基礎上使用相應大小的圖片。

再次，使用工具壓縮圖片。圖片變小有利於網站打開速度的提高，使用壓縮工具可讓圖面所佔的空間更小。

10：刪除多餘的字體和網頁註釋。

從字體方面分析，若是使用字體過多，勢必會形成網站加載速度變慢，從而不利於網站前端的打開速度的提高;

從網頁註釋分析，網頁註釋有利於前端開發人員對於網站的維護，但另一方面，這些註釋對搜索引擎是無用的，是多餘的「噪聲」。

本文由甲爪廣告聯盟供稿！原文連接：http://www.jiazhua.com/wz/126... 轉載請註明！