『壹』 如何進行web前端性能優化
1，css精靈！
2，代碼壓縮
3，高質量的JS代碼肯定能省很多事！封裝JS，重復調用方法！這樣會減少很多操作
4，請減少對DOM的操作
5，使用JSON格式來進行數據交換
6，高效使用HTML標簽和CSS樣式
7，使用CDN加速（內容分發網路）
8，精簡CSS和JS文件
9，注意控制Cookie大小和污染
『貳』 前端性能分析與優化
由於公司項目的前端處理邏輯及其多，導致頁面渲染卡頓，為了解決這個問題，故從網上找了好多資料，在這里統一整理一下。
主要從以下幾點展開描述。
常用的主要是 Chrome Dev Tools 和 Audits 。
頁面各項性能指標的火焰圖，這里能看到白屏時間、FPS、資源載入時間線、longtask、內存變化曲線等等信息。
『叄』 前端開發，頁面優化，性能優化有哪些方面
常用的優化有兩部分
第一：面向內容的優化
1. 減少 HTTP 請求
2. 減少 DNS 查找
3. 避免重定向
4. 使用 Ajax 緩存
5. 延遲載入組件
6. 預先載入組件
7. 減少 DOM 元素數量
8. 切分組件到多個域
9. 最小化 iframe 的數量
10. 不要出現http 404 錯誤
第二：面向 Server
1. 縮小 Cookie
2. 針對 Web 組件使用域名無關性的
『肆』 前端性能優化（總結）
即在js，css、圖片等資源已經壓縮的基礎上，在HTTP傳輸過程中的再次壓縮。
https://www.ico.la/ 提供的在線免費創建favicon.ico文件服務.
-循環引用
如果循環引用中包含DOM對象或者ActiveX對象，那麼就會發生內存泄露。內存泄露的後果是在瀏覽器關閉前，即使是刷新頁面，這部分內存不會被瀏覽器釋放。
『伍』 前端性能優化--圖片篇
有損壓縮，高品質的壓縮方式。圖片體積壓縮至原有體積的50%以下時，jpg仍然可以保持60%的品質。原理為以24位存儲單個圖，可以呈現多達1600萬種顏色，足以滿足大多數場景下對色彩的要求，這一點決定了它壓縮前後的質量損耗並不容易被肉眼察覺。
優點：
缺點：
使用場景：
無損壓縮，高保真的圖片格式。同時支持8位和24位二進制的位數，八位的png最多指出256種顏色，24位可以呈現約1600萬種。
優點：
缺點：
使用場景：
最多支持256種顏色的8位無損圖片格式。
優點：
缺點：
使用場景：
同時提供了有損壓縮和無損壓縮（可逆壓縮）的圖片文件格式。像JPEG一樣對細接豐富的圖片信手拈來，像PNG一樣支持透明，像GIF一樣可以顯示動態圖片。
優點：
缺點：
在壓縮文件大小的過程中，損失了一部分圖片的信息，也降低了圖片的質量，並且這種損失是不可逆的。常見的壓縮手段是按照一定的演算法將鄰近的像素點進行合並，去除了人肉眼無法識別的圖片細節。jpg圖片使用的就是有損壓縮。
在壓縮的過程中，圖片的質量沒有任何損傷。任何時候都可以從無損壓縮過的圖片中恢復出原來的信息。壓縮演算法是對圖片的所有的數據進行編碼壓縮，能在保證圖片的質量的同時降低圖片的體積。例如png、gif使用的就是無損壓縮。
https://tinypng.com/
https://tu.isux.us/
https://compressor.io/
webpack配置imge-webpack-loader進行圖片壓縮
1.安裝依賴
2.配置webpack
雪碧圖，CSS Sprites，國內也叫 CSS 精靈，是一種 CSS 圖像合成技術，主要用於小圖片顯示。
瀏覽器請求資源的時候，同源域名請求資源的時候有最大並發限制，chrome 為 6 個，就比如你的頁面上有 10 個相同 CDN 域名小圖片，那麼需要發起 10 次請求去拉取，分兩次並發。第一次並發請求回來後，發起第二次並發。如果你把 10 個小圖片合並為一張大圖片的畫，那麼只用一次請求即可拉取下來 10 個小圖片的資源。減少伺服器壓力，減少並發，減少請求次數。
優點：
缺點：
有相應的插件提供了自動合成雪碧圖的功能並且可以自動生成對應的樣式文件webpack-spritesmith
將src/ico目錄下的所有png文件合成雪碧圖，並且輸出到對應目錄，同時還可以生成對應的樣式文件，樣式文件的語法會根據你配置的樣式文件的後綴動態生成。
將圖片轉換為base64編碼字元串inline到頁面或css中。
優點：
缺點：
圖片懶載入的原理就是暫時不設置圖片的 src 屬性，而是將圖片的 url 隱藏起來，比如先寫在 data-src 裡面，等當前圖片是否到了可視區域再將圖片真實的 url 放進 src 屬性裡面，從而實現圖片的延遲載入。
優點：
將圖片提前載入到本地緩存中，從而提升用戶體驗。
高品質圖像載入完之前會先顯示低畫質版本。低畫質版本由於畫質低、壓縮率高、尺寸小、載入很快。
註：
很多工具和庫都支持導出漸進式JPEG，比如 ImageMagick, libjpeg, jpegtran, jpeg-recompress以及imagemin。 也可以使用 gulp-imagemin 進行批量轉換。
Photoshop導出漸進式圖片，保存為JPEG格式，勾選連續。
『陸』 如何對前端性能進行優化
前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發，最常遇見的前端優化問題。前端性能進行優化規則，基本可以涵蓋現在前端大部分的性能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。
前端性能進行優化都有哪些規則
減少HTTP請求次數
盡量合並圖片、CSS、JS。比如載入一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
2. 使用CDN
網站上靜態資源即css、js全都使用cdn分發，包括圖片
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取，不需要再發出http請求。如下例子：
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。
6. 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓用戶感覺頁面載入很快。
7. 把JS放到底部
載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的文件 ，所以就把js放在頁面底部最後載入。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式，影響頁面的性能。並且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉
有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問http:// .com時，實際上返回的是一個包含301代碼的跳轉，它指向的是http:// .com/（注意末尾的斜杠）。在nginx伺服器可以使用rewrite；Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。
13. 刪除重復的JS和CSS
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
非同步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
這是一門大學問，這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。
18. 避免404
比如外鏈的css、js文件出現問題返回404時，會破壞瀏覽器的並行載入。
19. 減少Cookie的大小
Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。
20. 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響載入
23. 縮小favicon.ico並緩存
『柒』 前端性能優化-傳輸載入優化
Nginx開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度, 進而優化Nginx性能! Web網站上的圖片，視頻等其它多媒體文件以及大文件，因為壓縮效果不好，所以對於圖片沒有必要支壓縮，如果想要優化，可以圖片的生命周期設置長一點，讓客戶端來緩存。 開啟Gzip功能後，Nginx伺服器會根據配置的策略對發送的內容, 如css、js、xml、html等靜態資源進行壓縮, 使得這些內容大小減少，在用戶接收到返回內容之前對其進行處理，以壓縮後的數據展現給客戶。這樣不僅可以節約大量的出口帶寬，提高傳輸效率，還能提升用戶快的感知體驗, 一舉兩得; 盡管會消耗一定的cpu資源，但是為了給用戶更好的體驗還是值得的。
Nginx關於keepalive連接保持的特性，實際上就是在一次TCP連接中，可以持續處理多個客戶請求，而不斷開連接。通過該機制可以減少TCP連接的建立次數，減少TIME_WAIT的狀態連接。從而增加服務的吞吐量和整體服務質量。
強制緩存和協商緩存
推薦閱讀： https://www.jianshu.com/p/037a4478c504
Service worker 提供了很多新的能力，使得 web app 擁有與 nativeapp 相同的離線體驗、消息推送體驗。
推薦閱讀: https://www.jianshu.com/p/768be2733872
HTTP2優勢
多路復用
二進制分幀
首部壓縮
服務推送
推薦閱讀: https://www.jianshu.com/p/8ac6baf4728c
SSR是Server Side Render簡稱；頁面上的內容是通過服務端渲染生成的，瀏覽器直接顯示服務端返回的html就可以了。
推薦閱讀: https://www.jianshu.com/p/10b6074d772c