此问题设计知识点多，先写简略版作为记录

导航阶段：输入URL到页面开始解析

• 解析URL，符合URL规则便发起请求，否则作为关键词拼上默认搜索引擎再请求

• 判断缓存，有缓存且未失效则直接使用跳到渲染阶段，否则继续往下走

  • 先判断强缓存Cache-Control与Expires，若已过期，则将Etag（文件指纹）或Last-Modified（最后修改时间）在请求头带上，后续服务器进行协商缓存的判断，返回304状态码则表示未修改可使用缓存

• DNS解析，查找域名对应的IP地址，先是找缓存，从浏览器→操作系统→路由器→网络运营商，都没有的话就发起请求，从根域名服务器→顶级域名服务器→权威域名服务器

  • 两种查询方式：递归查询（都由根域名服务器去查），与迭代查询（常见，由本地域名服务器一层层去查）

• 建立连接，先进行TCP三次握手，若是HTTPS还需SSL握手

• 发起请求，浏览器构建请求行、请求头等信息向服务器发送

• 返回数据，服务器处理请求并返回对应数据

• 接收数据，浏览器根据响应头状态码、数据类型等做出对应处理，如常见的html解析，或是字节流进行下载等

渲染阶段：页面解析到显示

• HTML生成DOM树

  • 由渲染引擎内部的HTML 解析器(HTMLParser)负责，流程为字节流→字符→分词 Token→节点 Node→DOM。

    • 首先是字节流解码，将从网络进程接收到的字节流(Bytes)基于编码方式解析为字符(characters)
    • 再就是标记化，通过分词器（词法分析）将字符转换为 Token，分为 Tag Token 和文本 Token
    • 再就是树构建，将 tokens 标签转换为 nodes 节点，随后将 nodes 节点添加至 DOM 树上

• CSS生成CSS规则树

  • 多个来源的css代码转化为样式表，之后再将值标准化，如em转px等，最后根据继承与层叠的规则计算每个dom节点的具体样式

  • 为什么css解析从右往左？

    • 先找最具体的规则，缩小搜索范围，减小无效匹配次数

• 两者结合生成渲染树，计算可见元素的几何位置

• 分层，生成分层树

  • 分层是为了实现一些复杂效果如3d变换、页面滚动等，以及提高后续重绘效率，用内存换性能，不可滥用。
  • 如设置了will-change、transform、opacity、filter等属性的元素

• 再为每个图层生成绘制指令列表，并将其提交到合成线程

• 再分块和栅格化，合成线程会将每个图层分割为大小固定的图块，然后优先绘制靠近视口的图块，并在光栅化线程池中将图块转换成图片

• 最后合成，将所有图层生成的图片，合成为一张图片，发送到显卡后缓存区，写入完成后让后缓冲区和前缓冲区互换，之后显示器读取前缓存区的图像显示到显示器上，如60hz的显示器则每秒读取60次。