高性能的定義
首先我們要知道性能到底是什麼意思，下面是百度百科的答案!
so下面我們就按照性能影響力去介紹，也是我看《高性能網站建設指南》的一份筆記吧！
性能優化方式
1、減少http請求【文件大小、文件數量、請求路程】**
1、圖片地圖（圖片導航、多個導航需要請求多次http，優化方式之一就是使用圖片地圖）【感覺有點確定、css3不會淘汰？？】
圖片地圖要用到map和area標籤
map標籤用於客戶端的圖片映射；area標籤指定映射區域。兼容性良好，可放心使用
<map name="nav_test">
<area shape="rect" coords="0 0 300 110" href="https://www.so.com/" target="_blank" alt="360搜索">
<area shape="rect" coords="0 110 300 212" href="https://www.baidu.com/" target="_blank" alt="百度搜索">
</map>
2、CSS Sprites（就是雪碧圖）
減少圖片請求數量：將多張圖片弄成一張圖片，這樣多張圖片的請求就變成一張圖片的請求
3、內聯圖片（IE不支持）
使用base64的圖片
內聯圖片使用img不會緩存到瀏覽器，但是css可以
4、合併腳本和樣式表
2、使用內容發佈網絡（Content Delivery Networ====CDN
）
- CDN的關鍵技術主要有內容存儲和分發技術。
- 網站用戶分佈廣，cdn是分佈在不同地方的服務器，能有效的減少用戶請求時間
- 一般用於發佈靜態內容，比如圖片、腳本、樣式表、Flash、靜態文件更容易存儲且較少依賴性
- 如果應用程序web服務器離用戶更近，則一個HTTP請求的響應時間將縮短。另一方面，如果組件web服務器離用戶更近，則多個HTTP請求的響應時間將縮短。
- 缺點可能是它花費了錢，並且給你的部署過程增加了一些複雜性。
- 主要的優點是提高了向用戶發送內容的速度。
什麼時候使用CDN？ - 當你有一個有某種靜態內容(圖片、腳本、CSS等)的流行的公共網站時，它將是最有效的。
CDN是性能提升器嗎？ - 總的來說，是的。當用戶發出特定請求時，動態確定最接近該用戶的服務器(根據服務器和用戶之間節點的最小數目)。這優化了將內容傳遞給該用戶的速度。
3、添加Expires頭
- 如上圖可看出緩存有效期持續到2020年8月6日10點34
- 頁面中的組件，應設置長久Expires頭，這樣其會被緩存，在後續請求時，瀏覽器直接從硬盤上讀取
- Expires：緩存最後到期時間，在到期時間之前相對應緩存內容可以不再請求http，直接加載緩存即可，但是時間有限，必須和客戶的時間一致
- Max-age和mod_expires（瀏覽器支持http1.1纔可以） 上圖代表最長時間可存儲2592000秒
- Cache-Control Max-age可以替代exprise頭，但也可兩者並存，靜態文本等都可使用緩存去減少http請求，但也有可能緩存清空、刷掉、溢出等情況。
- 長久的expires頭會被緩存，後續內容直接從硬盤讀取 ，故通過使用expires頭避免額外的http請求，可以減少一半時間
4、壓縮組件（從文件大小方面去減少htpp的響應時間）
- Web服務器看到請求中有content-encoding這個頭就會使用客戶端列出的一種方法[gzip\deflate]去壓縮響應
- 壓縮通常能講響應的數據量減少將近70%
- 壓縮方式：gzip\deflate等，Gzip最理想的壓縮方式
- 壓縮成本：服務器花費額外的CPU週期去壓縮，客戶端對壓縮文件進行解壓縮
- 壓縮內容有：通常有腳本和樣式表，圖片和pdf文件不應該壓縮因爲已經壓縮了再壓縮只會浪費cpu資源，還會增加文件大小
- 當瀏覽器通過代理髮送請求：兩種情況【第一種情況：第一個瀏覽器不支持gzip，服務器就不壓縮響應，第二個瀏覽器支持，服務器返回的是緩存中未壓縮的，也OK；第二種情況：第一個瀏覽器支持壓縮，服務器的緩存裏面便是壓縮了的內容，第二個瀏覽器不支持壓縮，卻接受到了壓縮的內容不得完蛋】故解決在響應中添加上述圖片第二張vary頭，告訴代理緩存多個響應版本即可
5、將樣式表放在頂部
- 放在頂部會有較好的用戶體驗，頁面是逐步加載出來的【否則就有可能導致白屏和閃爍】
- html加載完畢，樣式仍在加載的話，頁面會需要重新繪製
- 通常使用外部引入有兩種方式，@import、link，推薦使用link引入
- @import會有兼容性問題需要處理，並且不能被js動態修改，而link引入則無兼容問題，而且link引入權重較大
6、將腳本放在底部
- 減少頁面呈現的時間，對頁面的影響較小
7、避免css表達式
頁面加載之後的性能問題
例如：background：expression(表達式),
現在應該很少使用css表達式了
表達式是動態設置css屬性的一種強大並且危險的方式
8、使用外部js、css
-
內聯速度更快些，但是html通常沒有被瀏覽器緩存，需要每次加載，外鏈的js、css則會被緩存不用每次加載
-
使用外部js、css提高組件重用率（例如公共的導航footer等）、方便操作
9、減少DNS【Domain Name System 】查找
- 網絡是通過ip地址查找服務器的
- Dns講主機名映射到ip地址，輸入地址時連接到瀏覽器的dns解析器會返回服務器的IP地址
- 瀏覽器查找ip需要20-120ms，dns查找完成錢瀏覽器不能有任何操作
- Dns查找可以被緩存起來以提高性能
10、精簡js
11、避免重定向
12、刪除重複腳本
13、配置ETag
14、使用ajax可緩存
總結：
提高網站性能最主要就是和http請求做鬥爭，減少請求時間【例如上面的2】、請求數量【例如1、3】，書還沒看完，本文章會繼續更新的，有空的精神小夥們還是很支持去多看看這本書的，畢竟自己的感悟還是最重要的