网络相关笔记

用户输入URL看到页面，中间发生了什么

1. 通过url解析，拿到域名，协议，端口号
   (url组成部分：协议：//域名：端口号/stu/index.html?lx=1&name=xxx)

2. 到DNS服务器(本地和网络DNS解析)，通过域名找到域名解析期间绑定的主机ip地址，

3. 通过服务器官网ip 找到服务器，建立TCP链接，TCP三次握手

4. 发送http请求 （HTTP:请求报文，响应报文）

5. 服务器进行处理，基于HTTP响应客户端，把客户端所需要的东西返回过去

6. 关闭TCP链接通道

7. 客户端把获取的结果进行渲染

8. 

js中的编码和解码

1. encodeURL/decodeURL 对中文和特殊字符进行编码解码
2. encodeURLComponent/decodeURLComponent 编码字符和汉字
3. escape 对中文进行编码解码

基于网络层面的优化技巧

1. 减少DNS解析，dns-prefetch
2. 减少HTTP请求次数和请求大小
   – 资源合并压缩，字体图标，Base64(base64转化网站)，GZip（服务器端开启），图片懒加载（前端骨架屏），网络延迟分批加载，CSN资源
3. 缓存机制
   – 资源缓存：强缓存和协商缓存（服务器处理）
   – 数据缓存：
   GET请求缓存（一般不要，因为是不可控的）
   第一次获取数据后，缓存到本地，在一定时效内，再次请求，直接从本地中获取数据

浏览器缓存

1. 强缓存 Expires / cache-control

浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，本地有缓存就拿本地的，没有就拿缓存的

• cache-control: max-age = 2592000 (指定缓存周期30天) HTTP/1.1版本支持 第一次拿到资源后的2592000秒内再次发送请求读取缓存中的信息
• Expires: 指定时间 HTTP/1.0版本支持 两个都设置以cache-control为主
• 如果以上两种缓存表示标识都没有，就走以下步骤
  

---

2. 协商缓存 last-modified / ETag (1.0/1.1 协商缓存是存在HTTP请求的)

   协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起资源校验，由服务器根据缓存标识决定资源是否更新过，如果没更新就返回304，如果更新就返回最新资源。主要有以下两种情况：

• last-modified

1. 浏览器首先发送一个请求，让服务端在response header中返回请求的资源上次更新时间，就是last-modified，浏览器会缓存下这个时间。
2. 然后浏览器再下次请求中，request header中带上if-modified-since:[ 保存的last-modified的值 ]。根据浏览器发送的修改时间和服务端的修改时间进行比对，一致的话代表资源没有改变，服务端返回正文为空的响应，让浏览器中缓存中读取资源，这就大大减小了请求的消耗。

• ETag和If-None-Match

1. 浏览器会先发送一个请求得到etag的值，然后再下一次请求在request header中带上if-none-match:[保存的etag的值]。
2. 通过发送的etag的值和服务端重新生成的etag的值进行比对，如果一致代表资源没有改变，服务端返回正文为空的响应，告诉浏览器从缓存中读取资源。

二者对比

• 精确度上：Etag要优于Last-Modified。
• 优先级上：服务器校验优先考虑Etag。
• 性能上：Etag要逊于Last-Modified