關於前端效能優化的總結，隨處都可以看到這方面的文章，而優化方法，也無外乎那些「固定」方面，當然，有些方面已經過時，所以，在這裡，我自己也總結一遍吧，加深理解，也希望是一種不同的總結形式。
-----------------------正文總這裡開始------------------------------------
一、什麼是前端效能優化（what）？
從使用者訪問資源到資源完整的展現在使用者面前的過程中，通過技術手段和優化策略，縮短每個步驟的處理時間從而提公升整個資源的訪問和呈現速度。
二、為什麼要做前端效能優化（why）？
在構建web站點的過程中，任何乙個細節都有可能影響**的訪問速度，如果不了解效能優化知識，很多不利**訪問速度的因素會形成累加，從而嚴重影響**的效能，導致**訪問速度變慢，使用者體驗低下，最終導致使用者流失。
三、前端效能優化的原則（rule）
1、不要按照準則照本宣科的做，需要根據實際情況因地制宜；
2、不出bug！
四、從瀏覽器發起請求到頁面能正常瀏覽都有哪些階段（process）？
預處理——>dns解析——>建立連線——>發起請求——>等待響應——>接受資料——>處理元素——>布局渲染
五、效能優化的具體方法（way）
一）內容層面
1、dns解析優化（dns快取、減少dns查詢、keep-alive、適當的主機網域名稱）
2、避免重定向（/還是需要的）
3、切分到多個網域名稱
4、杜絕404
二）網路傳輸階段
1、減少傳輸過程中實體的大小
1）快取
2）cookie優化
3）檔案壓縮（accept-encoding：g-zip）
2、減少請求的次數
1）檔案適當的合併
2）雪碧圖
3、非同步載入（併發,requirejs）
4、預載入、延後載入、按需載入
三）渲染階段
1、js放底部，css放頂部
2、減少重繪和回流
3、合理使用viewport等meta頭部
4、減少dom節點
5、bigpipe
四）指令碼執行階段
1、快取節點，儘量減少節點的查詢
2、減少節點的操作（innerhtml）
3、避免無謂的迴圈，break、continue、return的適當使用
4、事件委託
六、與效能優化相關的細節的探索
1、快取
1）expires cache-control last-modified etag if-modified-since if-none-match 這些請求頭部在瀏覽器快取中分別起什麼作用，如何起到快取的作用？
1.當某一檔案在瀏覽器中第一次被訪問的時候，這個時候瀏覽器是沒有快取的，直接從伺服器獲取檔案，返回給客戶端，並且存入瀏覽器快取；此時，返回狀態碼200，並且服務端可以設定響應頭部expires或者cache-control，last-modified或者etag。
2.如果設定了expires或者cache-control，那麼在指定時間內再次請求該檔案時，只要不強制重新整理快取(f5等)，瀏覽器會直接讀取快取而不再去請求伺服器。
3.如果沒有設定expires或者cache-control或者過期了，就需要再次請求伺服器了，瀏覽器會發起條件驗證，發起請求時在請求頭加上if-modified-sinse或者if-none-match，伺服器端判斷最新的檔案是否發生了更新，如果沒有，總則返回響應狀態碼304，並且不帶任何響應實體，也就是說，傳輸到客戶端的只有一些相應頭部，響應實體是空的，這樣就大大減少了傳輸的體積，瀏覽器接受到了304響應，就知道了要讀取瀏覽器快取了。
2）按回車、瀏覽器重新整理按鈕、f5、ctr+f5的區別？
1.按回車，瀏覽器會判斷是否有快取，並且根據expires或者cache-control判斷快取是否過期，如果沒有，就不會發起請求，直接使用快取。否則就需要像伺服器發起請求再驗證。
2.瀏覽器重新整理按鈕和f5效果相同，不管是否有expires或者cache-control，都會強制去請求伺服器，進行再驗證，根據if-modified-sinse或者if-none-match判斷是否要返回304，如果是，瀏覽器就會繼續使用快取。
3.按ctr+f5時，也是不管是否有expires或者cache-control，都會強制去請求伺服器，但是並不會進行再驗證，伺服器會直接把最新的內容返回給瀏覽器，壓根就不考慮快取的存在或者是否過期。
3）為什麼用last-modified還不夠，要用etag實體標籤驗證？
1.有些文件會被週期性的重寫，但實際包含的資料是一樣的。（儘管內容沒有變化，最後修改日期卻會發生變化）
2.有些文件可能被修改了，但是修改並不重要，沒必要更新快取。
3.有些伺服器無法準確判定頁面的最後修改日期。
4.文件在毫秒級間隙發生變化（如實時監控），以秒為顆粒度的last-modified就不夠用了。
4）post請求拉取大量資料的快取策略？
2、dns解析過程
1）所有常用狀態碼的含義？
2）301跳轉和302跳轉的區別？
3）http頭部資訊詳解？
4）併發連線數、請求數、併發使用者數分別是什麼意思？
4、瀏覽器
1）瀏覽器載入渲染網頁的過程
2）瀏覽器工作原理
前端效能優化總結
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...
前端效能優化總結
效能是前端開發乙個非常重要的組成部分，與應用不同，網頁的所有資源初始都需要通過網路傳輸，因此如何進行更好地進行網路傳輸對前端效能影響很大，此外還有瀏覽器渲染部分的優化。不管怎麼說如何進行前端效能優化是乙個永恆的話題。本文是閱讀小冊前端效能優化原理與實踐後加上部分自己以前的理解整理而成的，更詳細的原理...
前端效能優化總結
多使用記憶體，快取或者其他方法 減少cpu計算，減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中，js放body後 懶載入減少dom操作，對dom操作做快取 減少dom操作，多個操作盡量合併在一起執行 事件節流...