网络层面优化

这里其实可以以笔者之前写过一篇文章切入：网红面试题：从输入 url 到看到页面发生了什么，我们就能一个资源从发起请求到页面渲染网络层面需要关心的路径是：

• HTTP缓存 —— DNS/IP解析 —— 建立 TCP 连接 —— HTTP 请求 —— 服务器返回资源 —— 断开 TCP 连接

所以这一节我们着重讲三个部分

• HTTP 缓存
• DNS 与 TCP
• 服务器优化

其中内容和 HTTP 中的内容有重合，可两两结合起来看

HTTP缓存

HTTP缓存分为缓存和内容协商，也有强缓存和弱缓存之说

如何使资源缓存

• 将资源放在 CND 或者 OSS 上，CDN 会加上Cache-Control: public, max-age=3600,must-revalidate
• 放服务器上，在 Nginx 中 加上 addheader Cache-Control public, max-age=3600,must-revalidate

客户端不使用缓存的办法

• 强制刷新（Shift + F5）
• 浏览器设置清除缓存

服务器不使用缓存的办法

index.html 引用的 js、css文件改变即可，一般来说，我们会通过webpack 打包前端代码，在每个 js 、css 等资源上加上 hash 值，每次打包生成 hash 值不同，就需要重新请求资源

Cache-Control 解释

以上例子中写到了Cache-Control: public, max-age=3600,must-revalidate，这意味着什么

public，公开内容

• 相对应的是 private，指定中间设备能否对其进行缓存

max-age = 3600，缓存时间

• 如果过期了，就要走下一个指令（must-revalidate）

must-revalidate，必须重新校验

• 如果可以，就继续用
• 如果删掉了，就重新请求

内容协商

缓存中的缓存过期了还能否重用

禁用缓存（服务器发起）

问：不加 Cache-Control，浏览器还会缓存吗？

会

get 请求

200、203（非权威信息）、206（部分内容）

300（多选）、301（永久重定向）、401（已迁移）

301 永久重定向

302 临时重定向，不会缓存

禁用缓存（服务器发起）

Cache-Control:max-age=0,must-revalidate

这种写法等同于 Cache-Control:no-cache

不走缓存，但是可以内容协商

Cache-Control:no-store 不能强缓存，也不能内容协商

禁用缓存（浏览器发起）

1.加随机数（打Hash）

2.请求头里加xhr.setRequestHeader("Cache-Control",“no-cache,no-store,max-age=0");

DNS 与 TCP

DNS

DNS：domain name ststem 域名系统

你给我一个域名，我给你一个 ip

TCP

三次握手和四次挥手

TCP连接：Transmission control protpcal

传输控制协议

四次挥手

为什么不和三次握手那样，把B说的知道和我也说完了合并在一起

因为在第二、第三次中间还可能会说其他内容

服务器优化

目前

ngnix 开启 gzip 压缩

http {
.......
    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;
 
}