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)