浏览器性能优化

1.静态资源的压缩和合并
（1） 打包时对文件进行压缩 config/index.js文件 productionGzip: true,
（2） css压缩：1.无效代码删除 2.css语义合并
（3） js压缩于混乱: 1.无效字符的删除 2.剔除注释 3.代码语义的缩减和优化
2.静态资源缓存（通过连接名称控制缓存，只有内容改变的时候，连接名称才会改变）
vue缓存机制
3.第三方库使用CDN的方式引入
4.使用SSR后端渲染，数据直接输出到HTML中（server side render服务器端渲染）
①CSS放前面，JS放后面
②懒加载（路由懒加载，图片懒加载）
③给引用的js文件加defer=“defer”

 <script defer="defer" src="${ctx}/js/echarts.min.js"></script>

   
   

   
   

defer属性相当于告诉浏览器立即下载脚本，但延迟执行，脚本会在整个页面元素解析完成后再运行
④加async属性
在<script>标签中加async属性，该属性与defer属性类似，相当于告诉浏览器立即下载脚本，但是是异步加载，下载速度不确定，执行速度也不确定。

<script defer="defer" async="async" type="text/javascript">  document.write("<scr" + "ipt src=\"./static/js/Convert.js\"></sc" + "ript>");
</script>

   
   

   
   

转载至fdyputi，原文链接：https://blog.csdn.net/fdyputi/article/details/111912289