1.第一步url解析
-
地址解析(http默认端口号:80,https默认端口号:443，FTP默认端口号:21，一个服务器可以存放多个项目，服务器根据端口号查找对应的项目服务.返回给客户端)
image.png - url编码(防止中文、或者地址出现乱码，可以进行字符编码，服务器解码).
//对整个URL编码：处理空格,中文字符可以,参数为url无效
encodeURL/decodeURL
//对传递的参数信息来编码，空格特殊字符都可以转码
encodeURLComponent/decodeURLComponent
- URI/URL/URN的区别
2.第二步浏览器查找当前url是否存在缓存，并比较缓存是否过期。缓存检查
1.两种情况
1-1.没有设置缓存，本地也没有缓存，需要向服务器进行请求.
1-2.本地设置缓存，去查看缓存是否过期，没有过期，向本地缓存读取.
*缓存有两种：强缓存、协商缓存.
先检查是否存在强缓存
有，且未失效，走强缓存.
如果没有，或者失效，检查是否存在协商缓存.
如果协商缓存有，直接拿协商缓存的数据
如果协商缓存没有，直接正常请求向服务器请求最新数据.
缓存位置（缓存是后台配置，浏览器帮助实现，前端不需要写代码）
1.Memary Cache :内存缓存.相当于内存条(缓存的存放位置)特点：浏览器关闭缓存清除.
2.Disk Cache:硬盘缓存.特点浏览器关闭，再打开依然可以读取到缓存.
打开网页：查找硬盘缓存是否有匹配，如果有则使用，没有则发送网络请求,
普通刷新:因tab没有关闭，此时内存缓存是可用的，会被优先使用。如果没有才是硬盘缓存.
强制刷新:浏览器不使用缓存哪怕本地有缓存也不管，因此发送的请求头部均带有Cache-control:no-cache,服务器直接返回200和最新内容.
页面第一次打开->内存缓存（Memary-Cache）->页面关闭->强制给硬盘缓存存放一份->页面再次打开->会从硬盘缓存(Disk-Cache)直接读取内容返回无需请求.
1.强缓存(html页面一般不做强缓存，返回的状态码:200(from memory cache))
- http1.0用expires用来设定缓存过期时间，用来指定资源到期时间.
- http1.1用的是Cache-Control（max-age=2592000,第一次拿到资源后的30天内，再次发送请求，读取缓存中的信息.）
- 两者同时存在的话 Cache-Control优先级大于expries
强缓存原理:
- 强缓存的问题
如果服务器文件更新了，但是本地还是有强缓存，拿不到最新的信息.
解决方案:
1.html页面一般不做强缓存.
2.webpack的hash值.服务器更新资源后让资源名称和之前不一样.这样页面导入全新资源.
旧:index.xxxxx.js（缓存）
新:index.cdcdc.js （未缓存从服务器读取最新的.）
3.当文件更新后，在html导入的时候，设置一个后缀名，后缀可以设置一个时间戳.
<script :src="xxxx.js?时间戳">
4.协商缓存也可以解决.
2.协商缓存（强缓存没有，或者失效后，不管你有没有缓存，浏览器都会携带缓存标识，向服务器端发送请求）。
- http1.0 Last-Modified(记录当前资源最后更新时间)
- http1.1 ETag(记录标识)
- Last-Nodified/ETag协商缓存就是在强缓存失效后，浏览器携带缓存标识，由服务器根据缓存标识决定使用缓存的过程.
没更新返回:304,通知客户端读取缓存信息，
更新过返回：200和最新资源，已经Last-Modified/ETag
强缓存与协商缓存区别
协商缓存总是发起请求与服务器沟通.不管有没有缓存.
强缓存性能比协商缓存性能好很多.
两种只针对于静态资源文件，而且不是经常更新的.
3.数据缓存，需要localStorage、vuex或者redux
3.DNS解析URL对应的IP(将服务器地址，转换成外网地址)域名解析 域名 外网IP
通过域名->找到外网IP->找到服务器地址.
DNS也是有缓存的,如果之前解析过会在本地有缓存(不一定,也是有周期的).
- 递归查找（本地查询）
- 迭代查找 （依次遍历每台服务器）
DNS优化：
1.减少DNS请求（一个页面少用不同的域名，资源尽量都放在相同的服务器上，项目中不会这么干，项目中会将不同的资源分布在不同的服务器上）控制台查看Source查看不同的域名.不同的资源服务器，要求不一样，一般公司用的是服务器分布式.同一个源http可以同时发送4-7个请求，可以提高并发性.
2.DNA预获取
//还没有加载DOM提前发送请求
<link rel="dns-prefetch herf="xxxx">
4.根据IP建立TCP连接(三次握手)
1.建立连接通道
5.HTTP发起请求（传输数据）
6.服务器处理请求，浏览器接收HTTP响应
7.渲染页面，构建DOM树.
8.关闭TCP连接(四次挥手)
9.产品性能优化方案
- http网络层优化
- 代码编译层优化webpack
- 代码运行层优化 html/css+javascript+vue/react(虚拟DOM)
- 安全优化xss+csrf
- 数据埋点及性能监控
10.CRP(关键渲染路径)
11.TCP/IP
- TCP建立客户端与服务器端的传输通道（相当于快递传送的路）
- IP主机地址，根据IP找到主机地址.
- HTTP传输协议（相当于快递员，http/https加密协议，需要证书/ftp传输大文件）
