之前看过很多讲的很多文章，不过他们都是根据这个路径来梳理知识，不算回答问题。winter这个回答还可以，我根据他说的整理了一下，我会重点整理浏览器的角度。之前我也认为这个问题要回答地越全越好，现在同意winter的观点，从某个角度去说比较好

点击查看【bilibili】

从浏览器角度

  1. HTTP 请求，根据 HTTP 或者 HTTPS 协议，从 url 变成 http response，至少要讲清楚 http request 和 response 的结构，可以展开 http 的各种缓存机制、状态码、续传处理等。从HTTP请求回来，后续的步骤都是不需要等到上一步完全结束，就开始处理上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面
  2. DOM 树构建，从 response body 里面解析出 html 代码，以状态机和栈来做html语言的语法分析，得到DOM树（可以展开语法分析的算法、状态机的设计等）
  3. CSS 属性的计算，从DOM树中取出CSS代码，再根据CSS选择器和优先级，为DOM树上的节点添加CSS属性（此处可以展开CSS语法分析、选择器和优先级）
  4. 排版，针对已经带CSS的DOM树，获取其中用于排版的CSS属性，根据盒模型和格式化上下文计算元素产生的盒模型的位置，此处可以展开正常流、table、flex、grid等具体的排版算法

  5. 渲染，针对算好位置的盒获取其中用于渲染的CSS属性，渲染元素并且绘制到显示设备，此处可以展开合成层、图形学、shader等相关的知识

    从设备角度

  6. 发起请求，由客户端来完成

  7. 网络传输，OSI 七层协议、物理层传输协议、调制解调、mac地址、路由、三次握手、流量窗口控制、DNS等都可以展开
  8. 服务端处理阶段，负载均衡、连接保持、网关、计算型集群、存储型集群、分库、分表、消息队列等可以展开
  9. 网络传输，和第二个阶段大致一样，只是方向走的不一样，比如之前是三次握手建立连接，这里就应该四次握手断开连接了

  10. 客户端处理数据

    从性能角度

  11. 开始传输html之前，这个阶段主要是网络相关，主要是DNS请求和传输回应的http头，这个阶段，用户看到的就是白屏，这个阶段优化的空间也最大，包括各种缓存——http、dns连接复用、tcp流量窗口控制、cdn、quick协议等

  12. 第二个部分就是html的head标签，html中head标签全部完成之前，浏览器是不会对body进行任何的解析和渲染的。这个阶段用户看到的只有html元素，css加载完成之后，用户可以看到html元素的背景，这个阶段优化手段主要是调度，把一些优先级不高，跟首屏不相干的资源延后下载，
  13. 第三个阶段就是html中的body，body解析到渲染，是流水线建出式的，body中除了script之外的请求，比如image、video，一般都不会阻碍渲染。如果采用了服务端渲染，此时用户就可以逐渐看到页面的内容了；如果采用JS代码来渲染，这个阶段就非常的短，这个阶段的优化手段主要是避免同步执行的JavaScript、使用合适清晰度和大小的图片，给图片确定的尺寸以避免重排等等这些技术
  14. domContentLoaded 之后的阶段，这个时候框架通常会在这个事件触发的时候才开始真正意义上的工作，可能此时才开始向服务端请求一些关键数据，这个阶段的工作完全由JS控制，优化手段也就是JS代码的调度