前言
說到前端性能優化，絕對是對一個前端攻城獅的綜合考量 ~ 作爲一個前端，在功能ok的前提下，最重要的應該就是體驗了，有人說：
- 正常打開一個頁面超過3 ~ 5秒等待，還沒有打開，我就不會等了
- 這個活動也太low了，體驗一點都不好
- 每次新打開同一個頁面都好慢
- 還有 x x x … …
通過上邊的一個簡單場景，可以想到，在前端中，性能優化，體驗優化是多麼重要的一件事兒，大家在日常使用各大產品中一定也有遇到體驗效果不佳的杯具吧。好，接下來讓我們從以下幾點來分析一下。
- 網絡請求
重要 - 編碼規範與方式方法
賊重要 - 從輸入URL到頁面渲染經歷了什麼
附加擴展
網絡請求
網絡請求是web性能優化的一大重要知識點，不管是請求靜態資源Img ，Js文件，Css文件 還是請求文檔數據，HTTP響應報文，我們都需要考慮以下幾種優化
- 請求靜態資源文件，
打包，合併多個資源文件，壓縮，減少請求次數，複雜情況可追加按需加載 - 請求圖片文件，
做到懶加載，預加載，圖片壓縮 - 其它網絡請求，
按需加載，合併多個接口，減少請求次數 - 瀏覽器緩存，
利用HTTP緩存機制對圖片及靜態資源合理緩存，提升渲染效率
日常編碼
說到編碼，可能就比較抽象了，每個人的 編碼方式都不一樣，在這裏列舉幾種常見的
Js方面
1，減少DOM頻繁操作，儘量合併批量操作
2，理性使用閉包，做到及時釋放私有作用域變量
3，避免動態註冊事件 addeventlistener，做到及時銷燬事件
4，合理使用定時器和全局變量，做到及時清除與銷燬
5，頻繁高併發的事件使用函數防抖和節流
Css方面
1，避免使用通配符 *
2，選擇器儘量不超過兩層的嵌套，便於CSSParser 解析，可採用最大父級不同類，
3，避免頻繁使用可繼承屬性，最好做到依賴父級，類似 color ，font-size
Html 方面
1，引入資源文件的順序，做到不必要的放置在文檔後邊
2，HTML加載Js會堵塞，因此所有的Js儘量放在HTML文檔主體結束標籤 上邊
3，HTML加載Css不會堵塞，因此可以放在標籤內
從輸入URL到頁面渲染經歷了什麼
在瀏覽器輸入 URL 首先會對 URL 地址進行域名解析，然後 TCP 傳輸， 中間夾雜着 HTTP 請求，最後瀏覽器解析 HTTP 響應報文進行文檔渲染；這裏針對DNS域名解析，TCP三次握手四次揮手，HTTP請求報文與響應報文，我們不做深度探索，後續深究；就拿最後一步瀏覽器針對文檔渲染來說說 。
瀏覽器解析文檔資源並渲染頁面是個怎樣的過程呢
1，瀏覽器通過 HTMLParser 把 HTML 解析成 DOM Tree （俗稱DOM樹）。
2，瀏覽器通過 CSSParser 把 CSS 解析成 CSS Rule Tree（俗稱CSSOM樹）。
3，瀏覽器將 JavaScript 通過 DOM API 或者 CSSOM API 將 JS 代碼解析並應用到佈局中，按要求呈現響應的結果。根據 DOM 樹和 CSSOM 樹來構造 render Tree（RANDER樹）。
這三步遍是瀏覽器解析文檔渲染頁面的大概過程了，最終的 rander 樹就是整個頁面的文檔結構抽象表示，顯然這些都是瀏覽器自己做的事情，那我們要如何針對URL渲染來做優化呢 ? 不要急，接着看
layout：重排（俗稱迴流），當 render tree 中任一節點發生位置改變，就會重新佈局，重新來計算所有節點在屏幕的位置。
repaint：重繪，當 render tree 中任一元素樣式屬性發生變化時，都會重新繪製，比如字體大小，顏色等。
通過上邊的兩種情況，我們可以聯想到，減少頁面的重排與重繪j就可以大大提升渲染的效率和體驗性能 。所以從側面推敲一下
1，減少動態操作DOM增加減少元素以及修改DOM節點位置大小，避免重排（迴流）
2，減少動態設置DOM元素樣式屬性，避免重繪
結論：減少零碎的DOM操作，儘量做到批量更新操作（不分節點還是樣式屬性）
注：目前比較主流技術棧Vue，React 等，在不操作DOM的同時，如何使用 webpack 優化，後期補充到對應文章 。