淺談Web前端優化的本質與方法

對Web前端進行優化，就當前的網絡開發環境而言也是有必要的。其必要性在於不少企業是在本身的服務器上來進行Web開發，而因爲硬件資源有限，同時又有商業用途，怎樣用有限的資源去知足企業網站商用化的目標，這成爲了對Web前端優化的原動力。從用戶的體驗角度講，必然但願本身瀏覽的網站文字、圖片、視頻動畫，以及其餘模塊的加載是流暢的，從而得到好的瀏覽體驗。尚學堂陳老師從企業開發的角度來審視和回答關於Web前端優化問題，但願可以對從事相關工做的朋友們有所幫助。
當前，整個網絡環境都經歷了不一樣程度的改善，包括經常使用的TCP/IP協議在內，這讓Web前端開發變得愈來愈容易，同時，瀏覽器版本的提高也日益改善了用戶體驗，各類代理服務器的產生也讓不少企業不用再爲硬件問題擔心。但以上這些只解決了Web開發和優化中的一部分問題。代理服務器畢竟用途和空間都是頗有限的，爲了確保數據的安全和可操控性，仍是應該從Web系統的各個層次去制定優化目標。
優化的最終目標，對於用戶而言就是頁面加載更快，操做響應及時，減小用戶沒必要要的等待時間；對於企業而言，減小網站的運營成本和維護費用，減小網絡帶寬的佔用和存儲資源的佔用。因此優化途徑也就是從網站頁面和代碼的優化方向來進行。具體來說大概有如下幾個方面：

1、減小過多的HTTP外部請求
一個完整的HTTP請求就是一個網絡資源佔用的過程，從DNS、數據傳輸到最終的服務器響應，以及數據的接收須要必定的時間，隨主機的硬件、服務器的架構以及工做環境的不一樣，響應的時間也是不同的。這一過程決定着用戶的使用體驗，通常狀況下，頁面加載在一秒之內是能夠接受的，固然0.5秒之內響應會更好提高用戶體驗。那麼這樣，最簡單的辦法就是設計一個簡潔的頁面，合併和壓縮一些圖片，減小多餘的CSS和多餘的插件，巧妙利用瀏覽器的緩存技術，減小第二次瀏覽所需加載的時間。若是是大型的網站，服務器有多個而且分佈於不一樣的地理位置，能夠利用CDN服務器緩存技術，將站內文件分發到離用戶最近的服務器當中。瀏覽器緩存也是利用相似的原理，這也是當前最經常使用的減小外部請求的方法。

2、在恰當的位置使用CSS
在通常狀況下的網頁設計中，設計者們習慣於在創建好HTML的框架以後來引入CSS。這樣的作法是可行的，這樣也能夠節約設計者的構思時間，方便管理整個網頁的設計流程；但若是要是從優化的角度考慮，筆者仍是建議將帶有樣式的CSS文件獨立出來，不用寫在HTML中，並且樣式的設計儘可能使用代碼。這樣，一般能夠將CSS放在HTML的上面，加快了網絡加載速度。同時，合併CSS圖片也是減小HTTP請求數的好辦法。

3、優化代碼
代碼的優化核心思想就是讓代碼變得簡潔高效。代碼越多，頁面文件就越大，這樣不利於提升頁面的加載速度。因此在精簡代碼，減小沒必要要標籤的同時也要善於合理利用標籤。好比在作粗體字的時候咱們可使用B標籤而不是Strong標籤，B標籤的使用能夠大大縮減無關的冗餘代碼；在合理使用標籤的同時也要減小嵌套語句的使用和with、eval與 Function等，由於這些函數變量會使網頁的響應速度大大下降，也不利於後期的維護和優化；還有就是建議使用輕量級的框架，相似於Pure、Skeleton等，減小使用javascript、ajax、iframe框架，這樣能夠簡化代碼，避免出現錯誤。