前端优化
概述
前端优化是提高网页加载速度和用户体验的重要手段。以下是一些常见的前端优化方法：
页面内容方面
通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况；
通过 DNS 缓存等机制来减少 DNS 的查询次数；
通过设置缓存策略，对常用不变的资源进行缓存；
通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载；
通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度；
服务器方面
- 使用 CDN 服务，来提高用户对于资源请求时的响应速度；
- 服务器端自用 Gzip、Deflate 等方式对于传输的资源进行压缩，减少传输文件的体积；
- 尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie；
浏览器缓存读取规则
浏览器缓存可以优化性能，比如直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，则使用缓存从而减少响应数据。
缓存位置
Service Worker
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker 的话，传输协议必须为 HTTPS。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由缓存哪些文件、如何匹配缓存、如何读取缓存，而缓存是可持续性的。Service Worker 也是 PWA 的核心技术。
Memory Cache
Memory Cache 也就是内存中的缓存，主要包含的是当前页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。读取内存中的数据很高效，但是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
Disk Cache
Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
在所有浏览器缓存中，Disk Cache 覆盖面基本上是最大的。它会根据 HTTP Header 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache。
Push Cache
Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被时候用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂（大约 5 分钟）。
缓存过程分析
浏览器与服务器通信的方式为应答模式，即是：浏览器发起 HTTP 请求 - 服务器响应该请求。浏览器第一次向服务器发起该请求后拿到请求结果后，将请求结果和缓存表示存入浏览器缓存，浏览器对于缓存的处理是根据第一次请求资源返回的响应头来确定的。
- 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识；
- 浏览器每次拿到返回的请求结果都会将该结果和缓存表示存入浏览器缓存中；
跨域问题如何解决
JSONP
CORS（Cross-Origin-Resource-Share，跨域资源共享），由服务端设置响应头通过浏览器的同源策略限制
- Access-Control-Allow-Origin: *;
- Access-Control-Allow-Methods: *;
- Access-Control-Allow-Headers: *;
- Access-Control-Allow-Credentials: true;