網絡加載
減少HTTP請求次數(shù)
建議盡可能的根據(jù)需要去合并靜態(tài)資源圖片、JavaScript代碼和CSS文件睛低，減少頁面請求數(shù)案狠，這樣可以縮短頁面首次訪問的等待時間，另外也要盡量的避免重復資源暇昂，防止增加多余的請求減少HTTP請求大小
除了減少請求資源數(shù)莺戒，也要減少每個http請求的大小。比如減少沒必要的圖片急波，JS从铲，CSS以及HTML等，對文件進行壓縮優(yōu)化澄暮，開啟GZIP壓縮傳輸內容名段，縮短網絡傳輸?shù)却舆t將CSS和JS放到外部文件中，避免使用style和script標簽引入
在HTML文件中引入外部的資源可以有效利用瀏覽器的靜態(tài)資源緩存泣懊。有時候在移動端對請求數(shù)比較在意的會為了減少請求把CSS和JS文件直接寫到HTML里邊伸辟，具體根據(jù)CSS和JS文件大小和業(yè)務場景來分析。如果CSS和JS文件內容較多馍刮，邏輯比較復雜信夫，建議放到外部引入<link rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>避免頁面中空的href和src
當link標簽的href屬性為空，或者script卡啰、img静稻、iframe標簽的src屬性為空的時候，瀏覽器在渲染的過程中還是會把href和src的空內容進行加載匈辱，直到加載失敗振湾。這樣就阻塞了頁面中其他資源的下載進程，并且最后加載的內容是無效的亡脸，因此要盡量避免押搪。
<img src="" alt="占位圖"/>為HTML指定Cache-Control或者Expires
為HTML指定Cache-Control或者Expires可以將HTML內容緩存起來树酪，避免頻繁向服務器發(fā)送請求。在頁面Cache-Control或Expires頭部又消失大州，瀏覽器會直接從緩存讀取內容续语，不向服務器發(fā)送請求
<meta http-equiv="Cache-Control" content="max-age=7200" /><meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT"＞合理設置Etag和Last-Modified
對于未修改的文件，靜態(tài)資源服務器會向瀏覽器端返回304摧茴，讓瀏覽器從緩存中讀取文件绵载，減少下載的帶寬消耗并能減少服務器的負載<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">減少頁面重定向
一次重定向大概600毫秒的時間開銷，為了保證用戶能盡快看到頁面內容苛白，盡量避免頁面的重定向靜態(tài)資源不同域名存放
瀏覽器在同一時刻向同一個域名請求文件的并行下載數(shù)是有限的娃豹，因此可以理由多個域名的主機來存放不同的靜態(tài)資源，增大頁面加載時資源的并行下載數(shù)购裙。使用靜態(tài)資源CDN來存儲文件
詳情搜索CDN空間使用CDN Combo下載傳輸內容
CDN的combo技術能把多個資源文件合并引用懂版，減少請求次數(shù)。這樣可以減少瀏覽器HTTP請求數(shù)躏率，加快資源下載速度躯畴。比如淘寶的寫法：
<link rel="stylesheet" ><script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
參考: http://www.cnblogs.com/zhengyun_ustc/archive/2012/07/18/combo.html
使用可緩存的AJAX
對于內容相同的請求，有時候沒必要每次都從服務器拉取薇芝，合理的使用ajax緩存能加快ajax響應速度并減少服務器的壓力
$.ajax({ url : url, dataType : "json", cache: true, success: function(data){ // to do something... }});使用get請求
POST請求會首先發(fā)送文件頭蓬抄，然后發(fā)送HTTP正文的數(shù)據(jù)。而使用GET只發(fā)送頭部夯到，所以在拉取數(shù)據(jù)時使用GET請求效率更高減少Cookie的大小并進行Cookie隔離
HTTP請求默認是會帶上瀏覽器端的Cookie一起發(fā)送給服務器端的嚷缭，所以在非必要的情況下要盡量減少Cookie。對于靜態(tài)的資源耍贾，盡量使用不同的域名存放阅爽，因為Cookie默認也是不能跨域的，這就做到了不同域名下靜態(tài)資源請求的Cookie隔離減少favicon.ico 并緩存
一般一個web應用的favicon.ico是很少改變的荐开，付翁。有利于favicon.ico的重復加載異步的加載JavaScript資源
異步的JavaScript資源不會阻塞文檔解析，所以瀏覽器會優(yōu)先渲染頁面晃听，延遲加載腳本執(zhí)行百侧。
<script src="main.js" defer></script><script src="main.js" async></script>消除阻塞頁面的CSS和JS
對于頁面中加載時間過長的CSS或JS文件，需要進行合理的拆分或者延后加載能扒，保證關鍵的資源能快速加載完成避免使用CSS import 引用加載CSS
使用prefetch來完成網站預加載
讓瀏覽器預先加載用戶訪問當前頁后極有可能訪問的其他資源(頁面佣渴，圖片，視頻等)赫粥，從而讓用戶有更好的體驗按需加載
這個跟第二條差不多观话，特別做單頁應用的時候要注意（移動端部分會著重說明）
頁面渲染類
- 把CSS資源引用放到HTML文件頂部
這樣瀏覽器可以優(yōu)先下載CSS并盡快完成頁面渲染 - JavaScript文件引用放到HTML文件底部
可以防止JavaScript的加載和解析執(zhí)行對頁面渲染造成阻塞予借。由于JavaScript資源默認是解析阻塞的越平，除非被標記為異步或者通過其他的方式異步加載频蛔，否則會阻塞HTML DOM解析和CSS渲染過程 - 不要在HTML中直接縮放圖片
在HTML中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓秦叛，因此要盡量減少在頁面中直接進行圖片縮放 - 減少DOM元素數(shù)量和深度
HTML中標簽元素約的晦溪，標簽的層級越深，瀏覽器解析DOM并繪制到瀏覽器中說花的時間就越長挣跋。 - 盡量避免使用table三圆、iframe等慢元素
<table>內容的渲染是講table的DOM渲染樹全部生成完并一次性繪制到頁面上，所以在長表格渲染時很耗性能避咆，應該盡量避免使用舟肉，可以考慮用ul代替。盡量使用異步的方式動態(tài)的加載iframe查库，因為iframe內資源的下載進程會阻塞父頁面靜態(tài)資源的下載以及HTML DOM的解析 - 避免運行耗時的JavaScript
長時間運行的JavaScript會阻塞瀏覽器構建DOM樹路媚、DOM渲染樹、渲染頁面樊销。所以任何與頁面初次渲染無關的邏輯功能都應該延遲加載執(zhí)行整慎，這和JavaScript資源的異步加載思路一致 - 避免使用CSS表達式和CSS濾鏡
CSS表達式和濾鏡的解析渲染速度是很慢的，再有其他解決方案的情況下應該盡量避免使用
// 不推薦.opacity{ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)}
至此围苫，PC部分的性能優(yōu)化點介紹完了裤园。有一些沒有講到的諸如DNS預解析，離線緩存剂府，HTTP2協(xié)議拧揽，GPU加速等，想著移動端的優(yōu)化更細周循，這些內容放到移動端再講會好一點强法。因為PC端由于兼容性的問題，很多的優(yōu)化策略也不能很好的向下降級湾笛。盡管列舉了很多饮怯，但還有少部分遺漏的，歡迎大家補充嚎研。前端優(yōu)化不是一件簡簡單單的事情蓖墅，其涉及的內容很多，大家可以根據(jù)實際情況將這些方法應用到自己的項目當中去临扮。
