性能优化
狐七 3/30/2022 render
# 1. 什么是防抖和节流有什么区别？如何实现？
查看答案
- 防抖 —— 触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。
- 节流 —— 高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
# 2. 优化方法有哪些？
查看答案
# 通络通信优化
- 使用CDN服务
- 全局负载均衡，用户可以选择最佳接入点
- 还有缓存系统，有命中率和回源率两个指标
- 请求消耗
- 资源合并，限制请求次数（雪碧图）
- 域名分片：多域名
- HTTP优化
- 头部压缩：HTTP2
- DNS缓存
- 原因：减少DNS查询，DNS查询完成之前浏览器不能从这个主机下载任何文件。
- 将资源分布到恰当数量的主机名，平衡并行下载和DNS查询。
- 避免重定向：避免多余的中间访问
- Cookie
- 减少Cookie的大小
- 对组件使用无Cookie的域名：对静态组件的Cookie读取是一种浪费
- 不要出现404页面：无意义的404页面会影响用户体验并且会消耗服务器资源。
# 数据传输优化
- 使用缓存（强缓存和协商缓存）
- 数据压缩
- 数据压缩：gzip
- 代码文件压缩：html/js/css、webpack框架
- 静态资源 + 字体图片换成字体图标 + 去除图片元数据exif + 缩小图片尺寸和分辨率 + 使用jpg和webP格式
- Flush Buffer Early（服务端先将数据放入缓冲区，再一次性返回浏览器，Flush会提前清空缓冲区流式输出）
- Ajax使用GET进行请求，AJAX可缓存
# js代码优化
- 慎用全局变量：查找时间长，内存空间占用率高，污染全局
- 缓存全局变量：无法避免要用全局变量时，可以提前缓存到变量中
- 通过原型新增方法：避免直接在Vue构造函数内部添加方法
- 避开闭包陷阱：防止使用不当造成的内存泄露
- 避免属性访问方法使用：在构造函数里面尽量不要额外添加访问某个属性的方法，在外部可以直接访问
- 声明变量的时候，如果可以直接用字面量，不要用new函数
- 多使用块级作用域，减少作用域查找
- 避免使用==，会有类型转换的额外开销
- 将脚本放到页面底部
- 将javascript和css从外部引入
- 合理设计事件监听器
# css优化
- 将样式表放到页面顶部
- 不使用CSS表达式
- 尽量不使用@import
- 不使用IE的Filter：它效率低下而且只对IE6及以下的版本适用
# 节点优化
- 节点操作要避免重绘和回流
document.createdocumentfragment()方法创建了一虚拟的节点对象，可以合并DOM操作- 相同的节点用cloneNode方法直接操作会比重新创建要性能好
- html要语义化，加强DOM解析
- 多使用伪元素，减少js多DOM的查找遍历
- 减少DOM元素数量
- 减少iframe数量
- 避免空src的img标签（空src的img标签依旧会发送HTTP请求）
- 不要在HTML中缩放图片，大图片要缩小使用，本身的KB大小不会改变
- 缩小favicon.ico的大小并缓存它，不大于1kB
# 框架语言优化
- 能用computed尽量不要用watch
- 可以使用keep-alive组件控制缓存组件的显示隐藏
- 非必须组件延迟加载
- 未来所需组件预加载
# 框架方案优化
- 服务端渲染方案可以解决首次白屏时间长，SEO不好的问题
- 静态网站可以使用静态站点生成方法：SSG、Gatsby、Gridsome
- 保证组件在25K以下，iPhone不能缓存25K以上的组件，并且这还是要在被压缩前
- 将组件打包进一个多部分的文档中，就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。