前端性能优化大全

原创已于 2022-03-27 16:45:29 修改 · 700 阅读

CC 4.0 BY-SA版权

文章标签：

于 2019-06-20 18:44:29 首次发布

4 篇文章

订阅专栏

前端优化对用户体验至关重要，多数优化利用缓存以空间换时间。介绍了HTTP Cache的多种方案及缓存头优先级，还提及本地存储、请求包优化、减少请求、懒加载、预解析与预加载、CDN加速等策略，资源缓存方案需依项目需求设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

为什么要进行前端优化呢，因为这决定了用户体验，有数据表明，用户的延迟感知阈值在34ms-137ms,平均值为65ms(中值=54ms)，也就是说如果你的网页打开速度超过这个时间，用户大几率会默默的点x号，所以对于前端而已，性能优化特别重要，那么，大部分优化都是利用缓存，空间换时间。

基于http缓存，有以下解决方案

设置对象的有效期,如果在设置的这个时间之前请求，那么将去读本地缓存，设置在请求头
缺点：
和本地时间做的比较，如果改了本地时间的话，那么永远读的都是缓存。

以下是五种常用形式，设置在请求头

缺点：

设置对象最后修改时间，第一次请求的时候，设置last-modified响应头，然后在第二次请求的时候，浏览器会带上这个时间，由If-Modified-Since携带,然后服务端会进行比较，如果一致就返回304。
缺点：

根据内容判断，保存的可以是文件的hash或者md5。
在第一次请求时，设置响应头e-tag，那么在第二次请求的时候，该e-tag的信息会由请求头If-None-Match携带，然后服务端会做出比较，如果相等返回304.
缺点：

这里需要注意的是，协商缓存每次都需要访问服务器，但是它返回的资源大小是不一样的。

强缓存和对比缓存同时存在，如果强缓存还在生效期则强制缓存覆盖对比缓存，对比缓存不生效；如果强缓存不在有效期，对比缓存生效。即：强缓存优先级 > 对比缓存优先级
强缓存expires和cache-control同时存在时，则cache-control会覆盖expires，expires无论有没有过期，都无效。即：cache-control优先级 > expires优先级。
对比缓存Etag和Last-Modified同时存在时，则Etag会覆盖Last-Modified，Last-Modified不会生效。即：ETag优先级 > Last-Modified优先级。
总结：Cache-Control>Expires>Etag>Last-Modified

在这里插入图片描述