综合服务的优化

缓存

缓存 Cache-Control，服务器对 Cache-Control 的配置

请点击 这里 进行阅读

Expires

• 缓存过期时间，用来指定资源到期的时间，是服务端的具体的时间点
• 告诉浏览器在过期时间前，浏览器可以直接从浏览器缓存取数据，而无需再次请求

基于客户端和服务端协商的缓存机制

使用 last-modified

• last-modified——response header
• last-modified-since——request header
• 需要与 cache-control 共同使用
• 使用 last-modified 的缺点
  • 某些服务端不能获取精确的修改时间
  • 文件修改时间改了，但文件内容却没有变

使用 etag

• 文件内容的 hash 值
• etag—— response header
• if-none-match—— request header
• 需要与 cache-control 共同使用

分级缓存策略

200 状态

当浏览器本地没有缓存或者下一层失效时，或者用户点击了 CTRL+F5 时，浏览器直接去服务器下载最新数据

304 状态

• 这一层由 last-modified/etag 控制。
• 当下一层失效时或者用户点击了 CTRL+F5 时，浏览器直接去服务器下载最新数据，如果服务端没有变化，则返回 304 给浏览器

200 状态（from cache）

• 这一次由 expires/cache-control 控制
• 1.expires（http1.0 版有效）是绝对时间
• 2.cache-control（http1.1 版有效），相对时间
• 两者都存在时，cache-control 覆盖 expires，只要没有失效，浏览器只访问自己的缓存

服务端性能优化

多层次的优化方案

• 构建层模板编译
• 数据无关的 prerender 的方式
• 服务端渲染

使用 vue-ssr（server side rendering）

使用原因

• 以前没有前端框架时，用 jsp/php 在服务端进行数据的填充，发送到客户端就是已经填充好数据的 html
• 随着现代化前端框架的发展所带来的开发体验和可维护性的加强，加块开发过程，但是在使用上就会有性能代价
• 所以，需要在现有的前端框架上对性能进行提升，主要核心是解决首屏加载问题还有 seo 优化问题