客户端容器-输入url之后在浏览器发生什么|青训营笔记

这节课相关知识点如下：

1. 浏览器中输入url之后的执行过程：
   • 先来浅显的说一下基本步骤：
     1. 浏览器地址栏输入url之后按下回车
     2. 浏览器查找本地是否存有相关缓存，并比较缓存是否过期
     3. DNS解析URL对应的IP
     4. 根据IP建立起TCP三次握手
     5. HTTP发起请求
     6. 服务器处理请求数据，浏览器接受响应
     7. TCP四次挥手，断开连接
     8. 进行相关的页面渲染
2. 下面根据几个点展开详细说说：
   • 在地址栏输入的话肯定要先判断一下是不是url还是该搜索的关键字，之后在进行判断；
   • 关于缓存部分，会用到强缓存和协商缓存的知识点；同时记住需要判断是否有缓存以及缓存是否过期的问题。下面这张图是响应缓存的解决过程；
     • 这里浅显补充一下：强缓存就是不请求服务器，直接获取本地数据；协商缓存是要与服务器进行交互；
     • 如果缓存存在并且没有过期的话，那么就是用强缓存，如果发生更改就要判断一下是否过期：可以用etag以及Last-Modified来进行相关对比；若缓存失效则返回200，没有失效则返回304；
   • 之后进行的DNS解析，也就是本地没有缓存的情况下进行；本地DNS服务器会将请求转发到互联网的根域；具体如下图：

图片来源于知乎博主4Ark

   - 关于TCP三次握手，四次挥手就不说了；外面文章很多，需要注意的细节也很多：
           - 注意一下SYN泛洪攻击
           
           

• 关于渲染页面
  • 首先我们知道浏览器解析是从上到下一行一行解析
    • 解析分为四步：
    • 解码：将指定文件转化为字符串
    • 预解析：要做的事情就是提前加载
    • 符号化：是词法分析的过程，将输入解析成符号
    • 构建树：解析器获得标记后，用合适的方法创建DOM对象把符号插入到DOM对象中
  • CSS解析：在匹配一个节点对应的CSS规则时，按照从右到左顺序
  • 渲染树：就是一个DOM树和CSS规则树的合并过程
  • 布局与绘制：确定渲染树所有节点的几何属性，然后遍历渲染树
  • 合并渲染层： 将以上绘制的图片合并，最终输出一张图片
  • 回流和重绘：李安澜起发现某个部分变化是皇后，会从标签开始递归往下，重新计算位置和大小
  • js编译执行