好记性不如烂笔头，网上文章视频很多，但是还是自己记一下也可以加深知识印象和理解
一个网址例如 juejin.cn:443/editor/draf… 协议 http/https 域名 juejin 端口 443 路径 editor 参数 type=0&sort=2
3大流程
- 请求阶段 request
-
DNS解析 TCP协议的三次握手和四次挥手 http和https的区别 - 响应阶段 response
-
http状态码 304缓存 http报文 - 拿到资源做处理阶段
-
浏览器渲染机制 js的事件机制 event loop 页面的重绘和回流 资源性能优化
以上是列出大块流程引出的很多的知识点，以下根据每个小知识点做出的记录
缓存的由来： 很久很久以前浏览器还没有出生，服务器需要处理太多的数据，压力很大，快吃不消了，于是就呼叫http，赶紧设计一个缓存类的东西来做我的助手，因此我就诞生了，我的使命是使网页打开速度更快，使服务器的压力减小，服务器夸我是他的得力干将，可是好景不长出现了问题，当服务器资源更新后，我无法及时拿到服务器新的资源，于是我就提议：要不给我设置个过期时间吧，这样既不影响我的作用，又不影响我从服务器拿到新资源，于是
第一员大将expires就诞生了，expires它的值就是一个过期时间，浏览器拿到这个时间值以后，就可以决定缓存有没有过期，那以后的请求流程就变成了，浏览器发出请求，然后服务器在返回资源的时候，在响应头里增加expires这个字段，然后值呢就是这个过期时间，然后我就拿到这个值以后，就可以判断缓存有没有过期，如果没有过期，我就直接跟浏览器打交道，但是有一天我们接到用户的一个咨询，说expires的时期是服务器返回的，但比对的却是客户端时间，服务端与客户端时间不一致怎么办？的确发现了很多类似的问题，如果客户端时间与服务端时间不一致的话，那这个缓存就不准确了，会出现很多问题于是
第二员大将 Cache-Control 出现了，是在http1.1的时候引入的，它的作用和expires是一致的，但是不同的是，它采用的是过期时长（Cache-Control:max-age=3600）,那表达方式就是这样max-age指这个指令，然后值是多少秒，相比过期时间用过期时长就准确多了
max-age (单位是秒) no-cache (不使用强缓存) no-store (禁止缓存) private(只有浏览器可以缓存) public(浏览器，服务器，代码服务器都可以缓存)
于是流程是这样的--浏览器发送请求--服务器返回资源的时候，在响应头里增加Cache-Control 这个字段，然后值就包含了过期时长，然后我拿到这个时长以后，就可以决定缓存有没有过期，如果没有过期，我就直接跟浏览器打交道，某一天，服务器又扛不住了，很多请求又发往服务器，然后服务器感知到了缓存过期了，然后就把我叫来说兄弟想个办法吧，于是我就在内部做了一定的分割，把缓存分为了强缓存和协商缓存 强缓存就是在缓存没有过期的时候，浏览器可以直接决定使用缓存 协商缓存顾名思义是有个协商过程，就是当缓存过期以后，然后浏览器需要咨询服务器，是否可以继续使用缓存，继续使用缓存，那服务器就会返回可以使用或者不可以使用，因为有个协商的过程，所以叫做协商缓存
如何实现协商的过程呢？
第三员大将出现 Last-Modified 最后修改时间，那往后的请求流程就变成了：浏览器在请求的时候，服务器在返回资源的时候在响应头里增加last-modified的这个字段值，然后值呢就是服务器资源的最后修改时间，然后浏览器以后在每次请求的时候，都会带上上一次的返回的最后修改时间，然后交给服务器，去跟服务器当前的最后修改时间去做比对，如果比对的结果是没有变化，那就告诉浏览器，可以使用缓存返回304状态，比对的结果如果说资源已经更新了，那就给浏览器正常返回资源，返回200状态，后来浏览器接到很多用户投诉，然后就对服务器报怨说你太不靠谱了，有新的资源却说没有，还返回304状态，然后服务器说都怪last-modified，他是以秒级别记录的，那以秒级别记录就有问题，如果资源在1秒内发生改变的话，last-modified是无感知的，他认为没有变化，这样的话就出现问题了，意识到问题后，我们坐下来一起讨论下来该怎么办？我们的最终结论是换将，我们准备请来第四员大将叫Etag
第四员大将Etag,那往后的请求流程就变成了浏览器发出请求，然后服务器根据文件内容生成唯一标识，然后这个标识通过Etag,字段值传送给浏览器，然后浏览器以后在每次请求的时候都会增加一个字段值叫if-none-match,然后指就是Etag的值，然后服务器拿到这个值去跟服务器当前的ETag做比对，那比对的结果如果说是没有变化，那就是没有过时，告诉浏览器可以使用缓存返回304状态，或者比对的结果是资源已经更新了，那就会把新的资源返回浏览器，
- 第一步 浏览器先进行DNS域名解析 （dns域名解析的目的就是拿到域名对应的ip地址）
- 因为电脑不能直接理解网址，所以我需要帮电脑找到网址对应的ip地址！一个网址对应一个ip地址，就像一个人对应一个身份证号一样，我从事这份工作叫DNS域名解析，DNS域名解析分为两大类，首先呢会进行本地解析，如果找到了就直接返回ip地址，如果没有找到就进入互联网域名服务器解析阶段，然后返回ip地址，首先我们看本地解析，首先会去浏览器缓存里查找，如果找到了就直接返回ip地址，如果没有找到就去系统缓存里查找，如果找到了就直接返回ip地址，如果没有找到就去本地host文件里查找，如果找到了就直接返回，如果没有找到就进入下一阶段，互联网域名服务器解析阶段，在这个阶段，客户端会找来本地ds服务器，
- 第二步 当拿到ip地址后就开始TCP三次握手建立连接的过程
-
第三步 客户端发送HTTP请求（当建立连接后客户端发送http请求）
-
如果是HTTPS请求还涉及到https的加解密流程 -
第四步 服务器处理请求并返回HTTP资源
-
第五步 浏览器渲染页面（重绘和回流）
-
回流，重点在于“流”，倾向于结构调整，对性能影响更大
-
重绘，重点在于“绘”，倾向于样式调整，对性能影响较小
-
加载js时会有执行机制
js是单线程，为了解决一次做多件事情，出现了同步和异步，但是又出现了有些事情需要连贯处理，那就出现了宏任务和微任务
第六步 （TCP 四次挥手断开连接的过程）
