前面若不優化處理，則會出現加載耗時好久，用戶懶得等待就切換到其餘網站，從而網站流量丟失javascript
目錄css
一、前端優化規則html
二、前端優化工具前端
一、前端優化規則java
通常來講提升網頁效率依照下面14條準則web
第一條：Make Fewer HTTP Requests 儘量的減小HTTP的Request請求數。後端
1：用一個大圖片代替多個小圖片。瀏覽器
2：合併你的css文件。緩存
3：合併你的javascript文件。服務器
第二條：Use a Content Delivery Network 使用CDN
第三條：Add an Expires Header 添加週期頭
第四條：Gzip Components 啓用Gzip壓縮(Gzip的思想就是把文件先在服務器端進行壓縮，而後再傳輸)
第五條：Put CSS at the Top 把CSS樣式放在頁面的上方。(因此CSS到上方的話，那麼瀏覽器解析結構的時候，就已經能夠對頁面進行渲染)
第六條：Move Scripts to the Bottom 將腳本放在底部(腳本和CSS正好相反，腳本應該放在頁面的底部)
第七條：Avoid CSS Expressions 避免使用CSS中的Expressions(第七條：Avoid CSS Expressions 避免使用CSS中的Expressions)
第八條：Make JavaScript and CSS External 將javascript和css獨立成外部文件(由於外部的引用文件會被瀏覽器緩存)
第九條：Reduce DNS Lookups 減小DNS查詢(DNS域名解析系統)
第十條：Minify JavaScript and CSS 減小JavaScript和CSS文件的體積(在你的最終發佈版本中把沒有必要的空行、空格和註釋所有去掉)
第十一條：Avoid Redirects 避免跳轉(可是顯然，中間多浪費了一些時間)
第十二條 Remove Duplicate Scripts 移除重複的腳本
第十三條：Configure ETags 配置你的實體標籤(經過Etag，瀏覽器就能夠知道如今的緩存中的內容是否是最新的，需不須要從新從服務器上從新下載)
第十四條：Make Ajax Cacheable 上面的準則也適用Ajax(拙劣的使用Ajax不會讓你的網頁效率更高，反而會下降你的網頁效率)
二、前端優化工具
早期能夠使用yslow查看前端可優化項目，可是yslow已經不更新了，不過還能夠經過其餘網站
第一種：免費測試網址
https://www.webpagetest.org/
主要的指標數據
適用對象：訪問頁面的第一字節時間(後端處理+重定向)
檢查內容：目標時間包括DNS尋址時間+創建鏈接時間(Socket) + SSL認證時間 + 100ms。當超過目標時間每100ms時， 性能評定將下降一個等級
適用對象：同一個域名下多個頁面對象使用了同一個鏈接(Socket)
檢查內容：響應頭文件包含"Keep-Alive"的指令或者在給定的主機中多個對象中使用同一個鏈接
適用對象：工具會將MIME 類型爲"text/*" 或"*java*"的全部對象
檢查內容：檢查Transfer-encoding來看是否爲GZIP，若是不是則結果中會提供說明該文件是壓縮過以及提供壓縮比率(所以一個文件能夠節省30%的大小，經過壓縮即產生了源文件70%大小的文件)
適用對象：JPEG圖片
檢查內容：對比使用photoshop質量選擇爲50後的文件大小，尺寸超出10%爲達標，10%~50%爲警告，超出50%爲不達標，整體評分爲圖片重壓縮後佔原文件的百分比
適用對象：全部JPEG圖片
檢查內容：檢查每一個JPEG圖片文件並計算分數，分數爲圖片的壓縮比(壓縮文件大小/原文件大小)
適用對象： 符合如下的狀況的任意的非html對象數據，這個工具會將MIME類型爲"text/*","*java*"或者"image/*"，此類沒有明確標明過時時間(0或者-1），cache-controlheader設置爲private,non-store 或者non-cachepragma header 設置爲no-cache
檢查內容：存在一個」Expires「 header(而不是0或者-1),或者設置cache-control: max-age並設置爲一個小時或超過一個小時。當過時時間設置小於30天，將評定爲警告
適用對象：全部靜態的非HTML內容(css, js 以及圖片)
檢查內容：檢查是否託管在一個已知的CDN上(CName映射到一個已知的CDN網絡上).超過總體頁面80%爲靜態資源時，則須要考慮使用CDN，將靜態資源託管在CDN上，你能夠從這裏知道當前已知的CDN
第二種：
免費測試網址二：https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN
