浏览器性能优化

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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值