一. 流程

url-parse.png

二. 解析

  • 从耗时过程来看，可以分为DNS解析、TCP连接、HTTP请求与响应、客户端浏览器解析渲染、连接结束。
  • 其中浏览器解析渲染包含HTML词法、语法的解析、CSS解析、DOM树生成、渲染树建立、屏幕绘制.

    1. HTTP缓存

    2. DNS解析: 域名到IP地址的转换过程

    DNS服务器一般都是你的网络接入服务商提供,eg: 中国电信, 中国移动
    dns-parse.png

    3. TCP连接

    1. 3次握手

2. 4次挥手

4. 浏览器渲染

  • 在绘制的过程中，会遍历渲染树，调用由浏览器的UI组件的paint()方法在屏幕上显示对应的内容，并根据渲染树布局，计算CSS样式(即每个节点在页面中的大小和位置等几何信息)。
  • HTML默认是从上到下流式布局的，CSS和JS的加入会打破这种布局，改变DOM的外观样式以及大小和位置。这就引出两个非常重要的概念：replaint重绘和reflow重排。
  • reflow重排(回流, 是计算)： 意味着元素的几何尺寸变了，我们需要重新验证并计算渲染树。
  • replaint重绘(是画)，屏幕的一部分重新绘制，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。无论是重绘还是重排，对浏览器而言都是一种「消耗」，所以我们应该尽量减少这两种状态的触发

html-paint.png

参考

阿里工程师写的面试答案

1）浏览器接收到 URL，到网络请求线程的开启。（2）一个完整的 HTTP 请求并的发出。（3）服务器接收到请求并

转到具体的处理后台。（4）前后台之间的 HTTP 交互和涉及的缓存机制。（5）浏览器接收到数据包后的关键渲染路径。（6）JS 引擎的解析过程。1）浏览器接收到 URL，到网络请求线程的开启。（2）一个完整的 HTTP 请求并的发出。（3）服务器接收到请求并转到具体的处理后台。（4）前后台之间的 HTTP 交互和涉及的缓存机制。（5）浏览器接收到数据包后的关键渲染路径。（6）JS 引擎的解析过程。
（1）浏览器接收到 URL，到网络请求线程的开启。（2）一个完整的 HTTP 请求并的发出。（3）服务器接收到请求并转到具体的处理后台。（4）前后台之间的 HTTP 交互和涉及的缓存机制。（5）浏览器接收到数据包后的关键渲染路径。（6）JS 引擎的解析过程。
（1）浏览器接收到 URL，到网络请求线程的开启。（2）一个完整的 HTTP 请求并的发出。（3）服务器接收到请求并转到具体的处理后台。（4）前后台之间的 HTTP 交互和涉及的缓存机制。（5）浏览器接收到数据包后的关键渲染路径。（6）JS 引擎的解析过程。