从输出 URL 到浏览器显示页面产生了什么

• 输出网址

  当你开始输出网址比方 www.cnblogs.com 时游览器就能够在书签或者历史记录外面去搜寻相干的网址推荐给你。

• 浏览器查找域名的 IP 地址

  1. 申请发动后，游览器首先会解析这个域名，首先它会查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规定，如果有的话就间接应用 hosts 文件外面的 ip 地址。
  2. 如果在本地的 hosts 文件没有可能找到对应的 ip 地址，浏览器会收回一个 DNS 申请到本地 DNS(域名散布零碎) 服务器。本地 DNS 服务器个别都是你的网络接入服务器商提供，比方中国电信，中国移动。
  3. 查问你输出的网址的 DNS 申请达到本地 DNS 服务器之后，本地 DNS 服务器会首先查问它的缓存记录，如果缓存中有此条记录，就能够间接返回后果，此过程是递归的形式进行查问。如果没有，本地 DNS 服务器还要向 DNS 根服务器进行查问
  4. 根 DNS 服务器没有记录具体的域名和 IP 地址的对应关系，而是通知本地 DNS 服务器，你能够到域服务器下来持续查问，并给出域服务器的地址。这种过程是迭代的过程
  5. 本地 DNS 服务器持续向域服务器发出请求，在这个例子中，申请的对象是.com 域服务器。.com 域服务器收到申请之后，也不会间接返回域名和 IP 地址的对应关系，而是通知本地 DNS 服务器，你的域名的解析服务器的地址
  6. 最初，本地 DNS 服务器向域名的解析服务器发出请求，这时就能收到一个域名和 IP 地址对应关系，本地 DNS 服务器不仅要把 IP 地址返回给用户电脑，还要把这个对应关系保留在缓存中，以备下次别的用户查问时，能够间接返回后果，放慢网络拜访。

• 建设 TCP 链接

  1. 在拿到域名对应的 IP 地址后，会以随机端口（1024~~65535）向 WEB 服务器程序 80 端口发动 TCP 的连贯申请，这个连贯申请进入到内核的 TCP/IP 协定栈（用于辨认该连贯申请，解封包，一层一层的剥开），还有可能要通过 Netfilter 防火墙（属于内核的模块）的过滤，最终达到 WEB 程序，最终建设了 TCP/IP 的连贯，对于客户端与服务器的 TCP 链接，必然要说的就是『三次握手』。
     

  2. 客户端发送一个带有 SYN 标记的数据包给服务端，服务端收到后，回传一个带有 SYN/ACK 标记的数据包以示传播确认信息，最初客户端再回传一个带 ACK 标记的数据包，代表握手完结，连贯胜利。

     通俗化之后就是：

     客户端：老弟我要跟你链接

     服务端：好的，批准了

     客户端：好嘞

• 游览器向 WEB 服务器发动 Http 申请

  建设 TCP 连贯之后，发动 HTTP 申请，申请个别分为三局部

  申请办法 URI 协定 / 版本

  申请头 (Request Header)

  申请注释

• 服务器端解决

  服务器端收到申请后的由 web 服务器（精确说应该是 http 服务器）解决申请，诸如 Apache、Ngnix、IIS 等。web 服务器解析用户申请，晓得了须要调度哪些资源文件，再通过相应的这些资源文件解决用户申请和参数，并调用数据库信息，最初将后果通过 web 服务器返回给浏览器客户端。

• 敞开 TCP 链接

  为了防止服务器与客户端单方的资源占用和损耗，当单方没有申请或响应传递时，任意一方都能够发动敞开申请。与创立 TCP 连贯的 3 次握手相似，敞开 TCP 连贯，须要 4 次挥手。

  客户端：老弟，我这边没数据要传了，咱们敞开链接吧

  服务端：好的，接管到了，我看看我这边还有没有要传的

  服务端：我这边也没有了，敞开吧

  客户端：好嘞

• 游览器解析资源

  对于获取到的 HTML、CSS、JS、图片等等资源。

  浏览器通过解析 HTML，生成 DOM 树，解析 CSS，生成 CSS 规定树，而后通过 DOM 树和 CSS 规定树生成渲染树。渲染树与 DOM 树不同，渲染树中并没有 head、display 为 none 等不用显示的节点。

  在解析 CSS 的同时，能够持续加载解析 HTML，但在解析执行 JS 脚本时，会进行解析后续 HTML，这就会呈现阻塞问题

• 游览器布局渲染

  依据渲染树布局，计算 CSS 款式，即每个节点在页面中的大小和地位等几何信息。HTML 默认是流式布局的，CSS 和 js 会突破这种布局，扭转 DOM 的外观款式以及大小和地位。这时就要提到两个重要概念：repaint 和 reflow。

  repaint：屏幕的一部分重画，不影响整体布局，比方某个 CSS 的背景色变了，但元素的几何尺寸和地位不变。

  reflow：意味着元件的几何尺寸变了，咱们须要从新验证并计算渲染树。是渲染树的一部分或全副产生了变动。这就是 Reflow，或是 Layout。

  有些状况下，比方批改了元素的款式，浏览器并不会立即 reflow 或 repaint 一次，而是会把这样的操作积攒一批，而后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
  有些状况下，比方 resize 窗口，扭转了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。