web前端頁面性能優化方法

web前端性能優化方法總結

一，html語義化

　　語義化的html是讓標籤作本身該作的事，便於其餘開發者閱讀以及使代碼規範，優雅整潔。 也是爲了網絡爬蟲更好的解析。

       問： 爲何要作到語義化呢？

　　1. 有利於SEO（是指從天然搜索結果得到網站流量的技術和過程），有利於搜索引擎爬蟲更好的解析咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。

　　2. 在沒有css的時候可以清晰的看出網頁的結構，加強可讀性。

　　3. 團隊合做中，語義化的html更能讓其餘開發人員理解和閱讀，便於團隊的代碼維護與修改。

　　4. 支持多終端設備的瀏覽器渲染。

       問： 怎麼作到語義化的html呢？

　　1. 熟記各類html標籤，知道每一個html標籤該如何使用。

　　2. 對應的內容用對應的標籤，如標題，就可選擇<h1>~<h6>這些標籤。

二，減小重複代碼，壓縮css，js代碼大小

      1. 你的背景圖片保證不超過3個以上，你的css文件不超過2個，js文件不超過3個。並且良好的遵照web標準的一些規定，css放到head中，js文件放到</body>以前或者以後。

三，背景圖片大小及數量

　　1. 圖片的大小能夠壓縮，儘可能選擇比較小的圖片。

       2. 可將多張圖片用css精靈之城 css sprites

四，減小http請求，合理設置緩存

　　1. 合併css，js文件，減小css，js重複代碼，合併圖片等都是爲了減小http請求，應爲每次http請求的代價都是很是昂過的，因此減小http請求能有效優化訪問性能。

　　2. 緩存能緩存得更多，緩存得更久，也是能夠大大減小http請求，就優化了訪問性能。

五，圖片懶加載（lazyout images）

六，減小cookie傳輸

　　一方面，cookie包含在每次請求和響應中，太大的cookie會嚴重影響數據傳輸，所以哪些數據須要寫入cookie須要慎重考慮，儘可能減小cookie中傳輸的數據量。另外一方面，對於某些靜態資源的訪問，如CSS、script等，發送cookie沒有意義，能夠考慮靜態資源使用獨立域名訪問，避免請求靜態資源時發送cookie，減小cookie傳輸次數。　　

七，js中減小DOM操做，避免使用eval和 Function，減小做用域鏈查找（儘可能把變量設爲局部變量）。

八，CDN加速

　　CDN（contentdistribute network，內容分發網絡）的本質仍然是一個緩存，並且將數據緩存在離用戶最近的地方，使用戶以最快速度獲取數據。

九，反向代理

　　1. 傳統代理服務器位於瀏覽器一側，代理瀏覽器將http請求發送到互聯網上，而反向代理服務器位於網站機房一側，代理網站web服務器接收http請求。

　　2 .反向代理也能夠實現負載均衡的功能，而經過負載均衡構建的應用集羣能夠提升系統整體處理能力，進而改善網站高併發狀況下的性能。