web前端優化

2024-04-27 15:17:59

字體：大中小

來源：轉載

供稿：網友

前面講了很多關于緩存清理和編碼設置的整合，今天我們說說web性能優化Web性能優化分為服務器端和瀏覽器端兩個方面。一、瀏覽器端，關于瀏覽器端優化，分很多個方面1、壓縮源碼和圖片javaScript文件源代碼可以采用混淆壓縮的方式，CSS文件源代碼進行普通壓縮，JPG圖片可以根據具體質量來壓縮為50%到70%，PNG可以使用一些開源壓縮軟件來壓縮，比如24色變成8色、去掉一些PNG格式信息等。2、選擇合適的圖片格式如果圖片顏色數較多就使用JPG格式，如果圖片顏色數較少就使用PNG格式，如果能夠通過服務器端判斷瀏覽器支持WebP，那么就使用WebP格式和SVG格式。3、合并靜態資源包括CSS、Javascript和小圖片，減少HTTP請求。有很大一部分用戶訪問會因為這一條而取得最大受益4、開啟服務器端的Gzip壓縮這對文本資源非常有效，對圖片資源則沒那么大的壓縮比率。5、使用CDN或者一些公開庫使用第三方提供的靜態資源地址（比如jQuery、normalize.css）。一方面增加并發下載量，另一方面能夠和其他網站共享緩存。6、延長靜態資源緩存時間這樣，頻繁訪問網站的訪客就能夠更快地訪問。不過，這里要通過修改文件名的方式，確保在資源更新的時候，用戶會拉取到最新的內容。7、把CSS放在頁面頭部，把JavaScript放在頁面底部這樣就不會阻塞頁面渲染，讓頁面出現長時間的空白。具體參考：野馬程序員：web性能優化另，其他具體詳解：1、Web 前端優化最佳實踐之內容篇2、Web 前端優化最佳實踐之 Server 篇3、Web 前端優化最佳實踐之 Cookie 篇4、Web 前端優化最佳實踐之 CSS 篇5、Web 前端優化最佳實踐之 JavaScript 篇6、Web 前端優化最佳實踐之圖象篇7、Web 前端優化最佳實踐之 Mobile(iPhone) 篇如何提高網頁效率的14條建議如何提高網頁的效率（下篇）——Use YSlow to know why your web Slow二、服務器端優化這里就不詳解了，直接看專欄吧Web項目開發性能優化解決方案——服務端

上一篇：如何上傳base64圖片到七牛云存儲，然后返回圖片url呢？？

下一篇：（11）AngularJS 1.X 之自定義服務

學習交流

硬盤分區如何設置準確的分區空間

硬盤分區如何設置準確的分區空間...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注