从输入一个url 到页面加载完成，这个过程发生了什么

1. 输入地址
2. 浏览器查找域名的 IP 地址 （解析地址）
3. 浏览器向 web 服务器构造并发送一个 http 请求
4. http 报文传输过程
5. 服务器接收并处理 HTTP 报文
6. 服务器构造并发送一个相应报文
7. 浏览器接收报文，并开始渲染页面
8. 浏览器发送静态资源请求(如图片、视频、音频、css、js 等等)（可选）
9. 浏览器发送异步请求（可选）
10. 页面构造完成

其中浏览器渲染过程

1. 解析 html 构建 dom 树
2. 构建 render 树
3. 布局 render 树
4. 绘制 render 树

CSSOM 树和 DOM 树连接在一起行程 render 树，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程

为了形成渲染树，浏览器大致做的事情有:

1. 从DOM 树根节点开始，遍历每一个可见的节点
   
   • 一些节点是完全不可见的（比如 script 标签，meta 标签等），这些节点会被忽略，因为他们不会影响渲染的输出
   • 一些节点是通过 CSS 样式隐藏了，这些节点同样被忽略
2. 对每一个可见的节点，找到合适的匹配的 CSSOM 规则，并且应用样式
3. 显示可见节点（节点包括内容和被计算的样式）

注意: visibility:hidden 和 display：none 之间的不同， visibility:hidden 将元素设置为不可见，但是同样在布局上占领一定空间（例如，它会被渲染成为空盒子），但是 display:none 的元素是将节点从整个 render tree 中移除，所以不是布局中的一部分 。

部分内容参考