在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

1、浏览器的渲染过程

在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

简化过程：

1、DNS 解析
2、TCP 连接
3、发送 HTTP 请求
4、服务器处理请求并返回 HTTP报文
5、浏览器解析渲染页面
6、连接结束

详细过程

• 1、获取服务器ip地址( DNS 解析 )
  输入 url 后，首先需要找到这个 url 域名的服务器 ip，为了寻找这个 ip，浏览器首先会寻 找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的 hosts文件中是否有记录，如果没有则查询 DNS服务器，最终获取服务器ip地址；

• 2、构造一个 http 请求，并将请求封装在一个 tcp 包中
  获取到 ip 地址后，浏览器根据这个 ip 以及相应的端口号，构造一个 http 请求，主要包括请求方法，请求header头部信息和请求参数，并将这个 http 请求封装在一个 TCP 包中 ；

• 3、tcp包发送给服务器
  这个 tcp 包会依次经过传输层，网络层， 数据链路层，物理层到达服务器；

• 4、服务器返回html
  服务器解析这个请求来作出响应，返回相应的 html 给浏览器

• 5、浏览器构建 DOM 树
  浏览器根据这个 html 来构建 DOM 树，在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面;

• 6、浏览器构建CSS对象模型
  之后根据外部样式，内部样式，内联样式构建一个 CSS 对象模型，

• 7、将DOM 树与CSS对象模型合并为渲染树，再进行布局
  将DOM 树与CSS对象模型合并为渲染树（这里主要做的是排除不需要显示的节点，比如 script，meta 标签和 排除 display 为 none 的节点），之后进行布局，布局主要是确定各个元素的位置和尺寸。

• 8、布局之后就是渲染页面，并行下载资源
  布局之后就是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会进行并行下载 ( 注意：浏览器对每个域的并行下载数量有一定的限制，一 般是 4-6 个)，

  当然请求并下载相应数据时，我们首先查看缓存中是否存在，如果缓存中不存在，则请求进行下载，如果存在，则读取缓存中的数据。

2、渲染过程中遇到 JS 文件如何处理？

JavaScript 的加载、解析与执行会阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果想要首屏渲染的越快，就不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。

当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加defer 或者 async 属性。