网页性能优化心得

网页性能优化心得

改文章是基于已经实施的优化方案进行的总结和拓展

优化方案：
1 避免巨大的网络负载
解决方案： 推迟非关键资源 例如：某些js资源放在html结构后面
2 最小化资源的大小
解决方案：1 将图片放在阿里云的OSS中利用阿里云提供的数据处理图片处理能力减小大部分的图片大小建议某些具大图片进行处理时可以接受一些失真
2 将所有的css和js文件进行压缩 改项目直接使用vscode中提供的插件minify 也可以考虑使用其他的方法 注意：当使用minify 大部分压缩js的原理为混淆压缩 会改变部分业务逻辑比如if-else语句会改为||逻辑或者三元表达的方式 会删除所有的注释 会改变命名的规则长串的命名会采用首字母。压缩是切记备份
3 缓存相关请求 大部分为后端设置，前端不考虑
3 消除渲染阻塞资源
大部分是由于css和js的加载或者是图片的加载导致的
解决方案 内嵌自己写的js和css代码（经过压缩后进行内嵌），使用懒加载的方式处理图片
4 使用CSS分割组合图像
对较小图片使用精灵图
5 对所有资源使用HTTP/2
需要ssl证书使用https协议
6有效地编码图像
修改图片格式比如使用webp的格式代替通用的jpg png图片，进行图片的压缩