性能优化总结

工作和学习中，不能避免的一个话题就是怎么做性能优化。PC和移动端在性能优化上的互通点和差异点都有哪些呢？ 学习记录中…

加载优化

主要目的是减少 https的请求。

图片优化

• 合并图片：当图片较多的时候，可以利用像精灵图合成一张大图。从而减少http请求数。

精灵图 主要是利用 background-position 实现。当图片放大或者缩小的时候可能会失真，图片制成若发生变更就很难替换。

• 图片格式选择：经历使用 PNG 格式，相对体积较小；
• 懒加载
• 使用CDN： 利用内容分发网络，提高图片响应速度。

首屏加载优化

首屏加载速度会直观影响用户体验。后面会单独详解优化方案。

利用缓存减少请求

缓存就是保存资源副本，在下次请求的时候直接使用该副本，减少资源等待的时间，从而提升性能。
浏览器缓存

• Memory Cache

Service Worker Cache

Service Worker（离线缓存） 可以看作是一个独立于浏览器的 JS 代理脚本，通过 JS 控制，能够使应用先获取本地缓存资源，在离线状态下也能提供基本的功能。
Service Worker 的生命周期包含 install、active、working 三个阶段

Http Cache

根据缓存处理的方式不同，浏览器缓存可以分为 强制缓存 和 协商缓存

• 强制缓存： 根据 Expires （ 绝对过期时间）和 Cache- Control（最大使用期限） 两个响应头字段控制。当两个字段同时存在的时候， Cache- Control的优先级更高。客户端都会通过对比蹦迪时间和服务器生存时间来判断缓存是否过期，以此来更新缓存；
• 协商缓存： 浏览器在第一次获取请求的时候，就会在响应请求头中携带上资源的服务器上次修改日期（last-modified）或者 Modified 和 if-None_Match 字段来判断资源是否失效，一旦失效服务器会重新发送新的资源到客户端上，保证资源到有效性。 Etag的优先级比 Last-modified 高

Push Cache

是针对 HTTP/2 标准下的推送资源设定的。是浏览器缓存的最后一道缓存机制，是在设置了 Last-Modified 但没有设置 Cache-Control 或者 Expires 时出发，也就是拿到最后更新的时间，但是没有设置过期时间，这种情况下浏览器会有一个默认缓存策略 push cache。

• 会话阶段的缓存，seesion终止的时候缓存也终止。

预加载

将所有需要的资源全部提前进行请求，把资源先加载到本地上，这样用的时候直接从本地获取就好。
在也埋呢全部加在之前，对一内容进行一些加载，可以提供更好的用户体验，减少等待时间。