页面优化 ​

基本优化 ​

1. 减少http请求
   • 根据页面情况，后台尽量将数据量小的几个接口，合并成一个
2. 使用浏览器http缓存 常规http缓存只缓存get方式
   • 不常变资源使用强缓存，后台可以设置prama（http1.0产物）、cache-control、expires
     1. 破强缓存，资源带上hash值，更新index.html的引用路径
     2. 请求带上类似时间戳参数
   • 较常变的资源使用协商缓存，后台设置请响应头last-modified，前端请求浏览器会带上if-modified-since，或者使用请求头 if-none-match 和响应头 etag
     1. 每次请求带上if-modified-since或者if-none-match。后台判断是否最新的。有就返回新的，没就返回304用缓存的
     2. 优先级 if-none-match > if-modified-since
     3. 会多一次协商请求，带上和协商缓存相关的请求头
3. 浏览器Service Worker缓存
   • 只能在https环境下部署，本地服务可以用来测试。国内谷歌浏览器的支持并不完整
4. 浏览器indexDB数据库
   • 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
   • 源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库
   • 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）
5. gzip压缩，静态资源最好本地打包时压好，不要让服务器响应时去压
6. 静态资源压缩、合并
7. Sprites图片
8. 资源懒加载，按需加载
9. 合理搭配js，css加载的位置
10. 减少dom操作，避免频繁重排
11. 起本地服务，资源放本地
12. 避免页面重定向

首次进入页面 ​

5. gzip压缩，静态资源最好本地打包时压好，不要让服务器响应时去压
6. 静态资源压缩、合并
7. Sprites图片
8. 资源懒加载，按需加载
9. 合理搭配js，css加载的位置
10. 起本地服务，资源放本地
11. 避免页面重定向

再次进入页面 ​

2. 使用浏览器http缓存 常规http缓存只缓存get方式
   • 不常变资源使用强缓存，后台可以设置prama（http1.0产物）、cache-control、expires
     1. 破强缓存，资源带上hash值，更新index.html的引用路径
     2. 请求带上类似时间戳参数
   • 较常变的资源使用协商缓存，后台设置请响应头last-modified，前端请求浏览器会带上if-modified-since，或者使用请求头 if-none-match 和响应头 etag
     1. 每次请求带上if-modified-since或者if-none-match。后台判断是否最新的。有就返回新的，没就返回304用缓存的
     2. 优先级 if-none-match > if-modified-since
     3. 会多一次协商请求，带上和协商缓存相关的请求头
3. 浏览器Service Worker缓存
   • 只能在https环境下部署，本地服务可以用来测试。国内谷歌浏览器的支持并不完整
4. 浏览器indexDB数据库
   • 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
   • 源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库
   • 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）