issues
search
yihan12
/
Frontend-interview
记录一些前端面试相关题目
2
stars
0
forks
source link
结合性能优化，聊聊浏览器缓存
#24
Open
yihan12
opened
10 months ago
yihan12
commented
10 months ago
性能优化 & 缓存
cdn,注意缓存问题
缓存实践（视项目而定，不要死板）
1、大公司静态资源优化方案
配置超长时间的本地缓存 —— 节省带宽，提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求 更资源发布路径实现非覆盖式发布 —— 平滑升级
2、利用浏览器缓存机制
对于某些不需要缓存的资源，可以使用 Cache-control: no-store ，表示该资源不需要缓存 对于频繁变动的资源（比如经常需要刷新的首页，资讯论坛新闻类），可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。 对于代码文件来说，通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进行指纹处理，一旦文件名变动就会立刻下载新的文件。
3、静态资源文件通过Service Worker进行缓存控制和离线化加载
性能优化 & 缓存
cdn,注意缓存问题
缓存实践（视项目而定，不要死板）
配置超长时间的本地缓存 —— 节省带宽，提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求 更资源发布路径实现非覆盖式发布 —— 平滑升级
对于某些不需要缓存的资源，可以使用 Cache-control: no-store ，表示该资源不需要缓存 对于频繁变动的资源（比如经常需要刷新的首页，资讯论坛新闻类），可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。 对于代码文件来说，通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进行指纹处理，一旦文件名变动就会立刻下载新的文件。