# 性能优化
# 提升页面性能的方法有哪些?
1.资源压缩合并,减少http请求(开启gzip压缩,减小传输过程中的资源文件大小)
2.图片优化
- 雪碧图 图片压缩 svg base64
3.非核心代码异步加载
- 1)异步加载的方式
- 动态脚本加载(动态创建script标签)
- defer
- async
- 2)异步加载的区别
- defer 是在html解析完之后执行,如果是多个,按照加载顺序依次执行,defer如果加载完之后,html还没有解析完也不会执行
- async 是在加载完之后立即执行,如果是多个,执行顺序与加载顺序无关,哪个先加载完,哪个先执行
- 1)异步加载的方式
3.利用浏览器缓存(提升浏览器性能最重要的一步)
- 1)缓存的分类
- 强缓存 Expires: 响应头中的 过期时间,绝对时间,从服务器下发的服务器的绝对时间,这个时间有可能与客户端的时间不一致, 判断客户端的时间是不是这个时间,所以会有偏差 Cache-control: 相对时间,秒, 以客户端相对时间为准
- 协商缓存 Last-Modified If-Modified-Since Etag If-None-Match
- 2)缓存的原理
- 浏览器缓存机制全攻略 https://mp.weixin.qq.com/s/MqALe2790ucf-7U9RrRlMw
- https://mp.weixin.qq.com/s/Oc-JBHO9Wux27pU9hWV8rw
- 参考链接:https://www.jianshu.com/p/54cc04190252
- 4.使用CDN(网络优化,用最快的时间把资源请求过来,让网络快速到达服务端,把资源下载下来,尤其是在页面第一次打开的时候,浏览器缓存起不了任何作用,这时使用CDN效果是非常明显的)
- 5.预解析DNS
- 6.尽量减少DOM操作
- 7.减少css重绘和回流
<meta http-equiv="x-dns-prefetch-control" content="on"> // 在很多高级浏览器中的a标签是默认打开dns预解析的,但如果协议是https,就会被关闭,这句就是强制打开a标签的dns预解析 <link rel="dns-prefetch" href="//host_name_to_prefetch.com"> // 优化的点,去预解析dns,放入head中就可以做到预解析
- 当页面中涉及多个域名时,dns预解析是非常有效果的,
- 1)缓存的分类
以下均不是性能优化,只是一个执行效率的问题
- while循环快还是for循环快?
- |0是不是比Math.floor性能好?
- if else与三元运算符哪个快?
# 性能分析
- 页面加载性能(加载的时间)如vue单页的加载需要多长时间,秒开率
- 动画与操作性能(是否流畅无卡顿)如在浏览一个网页时,它里面的动画运行是否流畅,它里面的按钮或着一些操坐,当我们去点击时,是否是没有卡顿的
- 内存,电量消耗(内存占用,耗电量)如做游戏时,如何减少它的耗电量
# 性能体系与性能指标
- 性能体系
- 性能评估和建立指标 -> 技术方案 -> 执行 -> 结果分析
- 加载太慢 -> cnd库 -> 搭建cdn -> 果然快了
# 技术方案
- 缓存(对于需要频繁从接口中获取的资源)
- 客户端控制的强缓存策略
- 降低请求成本
- HTTP DNS:由客户端控制,隔一段时间主动请求DNS获取请求域名IP,不走系统的DNS
- TCP/TLS连接复用,服务端升级到HTTP2.0,尽量合并域名
- 减少请求数
- JS,CSS打包到html
- 用js控制图片异步加载和懒加载
- 小型图片使用data URI
- 减少传输体积
- 尽量使用SVG/gradient等代替图片
- 根据机型和网络状况控制图片清晰度
- 对低清晰度图片使用锐化来提升体验
- 设计上避免大型背景图
# 性能优化点
- 防抖与截流
# 优化vue打包慢的问题
- 抽取公共组件
- UI组件的按需引入(elementUI),不要全局引入
- css,js抽取公共部分
#
- 图片
- 利用url判断图片格式
- 图片懒加载, 渐进式渲染,根据不同浏览器, 渲染不同图片格式,webp
# 首屏优化
- https://blog.csdn.net/weixin_41697143/article/details/81049804
← 渲染机制 前端错误监控以及上报 →