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

优化前:
 
优化后





 


















原文地址:https://www.cnblogs.com/zjx2011/p/8507606.html