前端性能优化

独孤九溅

已于 2024-02-23 15:53:38 修改

阅读量123

点赞数

分类专栏： JavaScript 文章标签：前端性能优化

于 2019-08-20 23:07:33 首次发布

本文链接：https://blog.csdn.net/weixin_43169949/article/details/99892927

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

常用的前端性能优化手段

1.利用好http缓存。

http缓存分为强制缓存跟协商缓存。
①强制缓存：
A.Cache-Control，有如下几个值设置：

no-cache: 数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age, 则缓存期间不访问服务器.
no-store: 不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源).
private(默认): 只能在浏览器中缓存, 只有在第一次请求的时候才访问服务器, 若有max-age, 则缓存期间不访问服务器.
public: 可以被任何缓存区缓存, 如: 浏览器、服务器、代理服务器等.
max-age: 相对过期时间, 即以秒为单位的缓存时间.
no-cache, private: 打开新窗口时候重新访问服务器, 若设置max-age, 则缓存期间不访问服务器.
private, 正数的max-age: 后退时候不会访问服务器.
no-cache, 正数的max-age: 后退时会访问服务器.

B. Expires

以分钟为单位的绝对过期时间, 优先级比Cache-Control低

②协商缓存
A.Etag
B.Last-Modified
备注：通常我们都是在ngnix的location 中设置静态资源的缓存，只需添加add_header Cache-Control no-store，
一般不会不建议使用强制缓存，所以直接设置Cache-Control no-store，这样的话就可以利用协商缓存的etag跟Last-Modified这2个缓存便能满足缓存上的优化

2.升级http版本。

我们常用的htto版本是http1.1，但是我们可以把http升到2，http2比http1.1的优势在于：
①http1.1使用的是文本协议,http2使用的是流，并且还有流ID
②http2请求头使用流ID，所以可以实现多路复用
③http2header进行了压缩，同时客户端和服务器端同时维护一张头信息表，所有字段都记录在这张表中，这样后面每次传输只需要传输表里面的索引Id就行，通过索引ID查询表头的值。