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 之自定義服務