性能优化
一、网络篇(http)
1. 减少请求次数
- 控制最大并发数
- 图片:雪碧图，图标字体文件
JPEG/JPG（有损压缩、体积小、加载快、不支持透明，适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。）
png（无损压缩、质量高、体积大、支持透明 唯一的 BUG 就是体积太大 适用于：在处理线条和颜色对比度方面的优势，我们主要用它来呈现小的 Logo、颜色简单且对比强烈的图片或背景等）
SVG（文本文件、体积小、不失真、兼容性好 可以写入 HTML或者写入独立文件后引入 HTML）
Base64（文本文件、依赖编码、小图标解决方案 图片的更新频率非常低）
WebP（是 Google 专为 Web 开发的一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩。但是兼容性不是很友好）
- 合并JS和CSS文件（可以使用webpack）
- 浏览器缓存
2. 减少单次请求所花费的时间
二、存储篇（浏览器缓存|本地缓存）
cookie
- 给Cookie减肥
- 清除不必要的cookie
- 保证cookie尽可能小，以最小化对用户响应时间的影响
- 注意给cookie设置合适的域级别，以免影响其它子域
- 设置合适的有效期，更早的有效期或者none可以更快的删除cookie，提高用户响应时间
- 把组件放在不含cookie的域下
当浏览器发送对静态图像的请求时，cookie也会一起发送，而服务器根本不需要这些cookie。所以它们只会造成没有意义的网络通信量，应该确保对静态组件的请求不含cookie。可以创建一个子域，把所有的静态组件都部署在那儿。
三、渲染篇（服务端渲染）
服务端渲染解决了什么性能问题
服务端渲染解决了一个非常关键的性能问题——首屏加载速度过慢。在客户端渲染模式下，我们除了加载 HTML，还要等渲染所需的这部分 JS 加载完，之后还得把这部分 JS 在浏览器上再跑一遍。
四、其他
- 防抖节流
- 性能监控
- 延迟加载组件
- 预加载组件
- 避免重定向（状态码为301和302
因为重定向需要的所有信息都在HTTP头部，而响应体一般是空的。重定向会拖慢用户体验，在用户和HTML文档之间插入重定向会延迟页面上的所有东西，页面无法渲染，组件也无法开始下载，直到HTML文档被送达浏览器。最常见的用途是把旧站点连接到新的站点，还可以连接同一站点的不同部分，针对用户的不同情况（浏览器类型，用户帐号类型等等）做一些处理。用重定向来连接两个网站是最简单的，只需要少量的额外代码。虽
五、js部分
- 去除重复脚本
重复脚本会创建不必要的HTTP请求，执行无用的JavaScript代码，而影响页面性能。IE会产生不必要的HTTP请求，而Firefox不会。在IE中，如果一个不可缓存的外部脚本被页面引入了两次，它会在页面加载时产生两个HTTP请求。即使脚本是可缓存的，在用户重新加载页面时也会产生额外的HTTP请求。
- 尽量减少DOM访问
用JavaScript访问DOM元素是很慢的，所以，为了让页面反应更迅速，应该：
- 缓存已访问过的元素的索引
- 先“离线”更新节点，再把它们添到DOM树上
- 避免用JavaScript修复布局问题
六、移动端
- 保证所有组件都小于25K（是因为iPhone不能缓存大于25K的组件）
- 把组件打包到一个复合文档里（把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个HTTP请求获取多个组件（记住一点：HTTP请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持（iPhone就不支持））
59.影响页面加载性能的主要因素 ？
- js性能太差，阻塞页面
- 某个请求慢阻塞页面的加载
- 同域名下的请求数过多导致Queueing
- 如果有图片的话，对图片的处理
- CSS/JS的 代码量和引入方式
https://csspod.com/frontend-performance-best-practices/
解决方案：
- 采用背景图
- 减少HTTP请求
- 压缩组件
- 设置缓存
- 外部引入CSS样式
- 删除冗余代码
- 使用对系统压力较小的算法。
