OKR 第一階段

性能優化，主要是爲了提升用戶體驗。

1. 

根據瀏覽器的工做原理，dom樹解析時，遇到css 以及js 會出現阻塞，爲了縮短dom樹解析時間，進行了js  增長 async 的異步加載過程 。

原有代碼

<script src="xxxxx"></script>

當在渲染DOM樹的時候，遇到js 加載時，會阻塞dom 解析，先加載js 文件，這樣會致使整個dom 樹的解析時間過長

優化方案：

<script src="xxxxx" async ></script>   或  <script src="xxxxx" defer ></script>

其中 async、defer 的區別： 

 async  是指 加載和渲染後續文檔元素的過程將和script.js的加載與執行並行進行（異步）

 defer 加載後續文檔的過程和script.js加載並行進行（異步 ），可是script的執行要在全部元素解析完成以後，DOMContentloaded 事件觸發以前完成

2. 優化使用不到的css 文件

根據  chrom devTools   ----  More tools  --- Coverage 

監聽分析

一些不用的css 文件以及 bootstrap.min.css 中不少樣式用不上

 

對css 文件進行了優化以及刪減

3. 優化echarts.min.js

優化前：

 

優化後

 

來自爲知筆記(Wiz)