浏览器从加载页面到渲染页面的过程

加载页面和渲染过程

加载过程

要点如下：

• 浏览器根据 DNS 服务器得到域名的 IP 地址
• 向这个 IP 的机器发送 HTTP 请求
• 服务器收到、处理并返回 HTTP 请求
• 浏览器得到返回内容

例如在浏览器输入https://juejin.cn/timeline，然后经过 DNS 解析，juejin.cn对应的 IP 是36.248.217.149（不同时间、地点对应的 IP 可能会不同）。然后浏览器向该 IP 发送 HTTP 请求。

server 端接收到 HTTP 请求，然后经过计算（向不同的用户推送不同的内容），返回 HTTP 请求，返回的内容如下：

渲染过程

要点如下：

• 根据 HTML 结构生成 DOM 树
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到script时，会执行并阻塞渲染

参考资料

• http://fex.baidu.com/blog/2014/05/what-happen/