前端性能优化-汇总记录（2021-12-30）

[yaogengzhu]

方式1 上传资源至cdn （前提公司有这个资源）

具体方案可以看ali-oss， 不做代码演示！公司资源 内网速度

优化前

优化后

[yaogengzhu]

方式2

异步加载script

地图采用异步加载，不阻止html解析

<script defer src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script async crossorigin src="//gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2-all.min.js"></script>

1.defer和async在网络加载过程是一致的，都是异步执行的；

2.两者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求；

3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。

优化参考文档