前端性能优化方案

资源加载顺序

js放到boby底部加载,先加载dom和css
异步加载js
defer:异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
async::异步加载,加载完成后立即执行

减少资源大小

1、压缩图片,移动端的单张图片最好不要超过50kb,遵循在保证图片质量的情况下图片大小最小的原则。图片压缩工具:免费的tinypng,价值69.9元的pp鸭
最好的办法,打包交给专业的UI压缩图片
2、压缩混淆并减少无用js,代码规范化
3、压缩并减少无用css

减少请求数量

绝大部分的主流浏览器(如chrome),支持的最大并发数为6个
1、合并当前页面引入的js和css文件
2、减少图片的请求

  • 雪碧图(css sprite),把小图标放到一张图片上,利用background-position显示对应的图片
  • 在无法使用雪碧图的情况下,小图标也可以转为base64,虽然会增加大小但无需发送请求
  • 可以使用字体图标
  • 能用css实现不要用图片
  • 使用延迟加载

3、避免重定向

  • 301和302都为重定向,重定向会延迟整个HTML文档的传输,并且增加请求次数,在这次要优化的项目中就发现了,存在很多的重定向。资源都已经迁移过来了,没有必要重定向
  • 避免使用空的src和href,a标签设置空的href,会重定向到当前的页面地址

4、使用浏览器缓存
服务端设置请求头的Cache-Control

静态资源CDN部署

Content Delivery Network,即内容分发网络,提高用户访问的响应速度

你可能感兴趣的:(前端性能优化方案)