性能优化,主要是为了提高用户体验。
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
优化前:
优化后