从开发&运维角度方面来看，总体来说分为以下几个过程：

  • DNS 解析:将域名解析成 IP 地址
  • TCP 连贯：TCP 三次握手
  • 发送 HTTP 申请
  • 服务器解决申请并返回 HTTP 报文
  • 浏览器解析渲染页面
  • 断开连接：TCP 四次挥手

一、什么是URL？

URL（Uniform Resource Locator），对立资源定位符，用于定位互联网上资源，俗称网址。

scheme: // host.domain:port / path / filename ? abc = 123 # 456789

scheme       - 定义因特网服务的类型。常见的协定有 http、https、ftp、file，               其中最常见的类型是 http，而 https 则是进行加密的网络传输。host         - 定义域主机（http 的默认主机是 www）domain       - 定义因特网域名，比方 baidu.comport         - 定义主机上的端口号（http 的默认端口号是 80）path         - 定义服务器上的门路（如果省略，则文档必须位于网站的根目录中）。filename     - 定义文档/资源的名称query        - 即查问参数fragment     - 即 # 后的hash值，个别用来定位到某个地位

二、DNS域名解析

在浏览器输出网址后，首先要通过域名解析，因为浏览器并不能间接通过域名找到对应的服务器，而是要通过 IP 地址。

  1. IP 地址
IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协定提供的一种对立的地址格局，它为互联网上的每一个网络和每一台主机调配一个逻辑地址，以此来屏蔽物理地址的差别。
  1. 什么是域名解析
DNS 协定提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器，咱们的域名解析简略来说就是在 DNS 上记录一条信息记录。
  1. 浏览器如何通过域名去查问 URL 对应的 IP 呢？
DNS域名解析分为递归查问和迭代查问两种形式，现个别为迭代查问。

DNS的优化与利用

  1. DNS缓存 DNS存在着多级缓存，从离浏览器的间隔排序的话，有以下几种: 浏览器缓存，零碎缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。
  2. DNS负载平衡(DNS重定向) DNS负载平衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查问时， DNS服务器对每个查问将以DNS文件中主机记录的IP地址按程序返回不同的解析后果，将客户端的拜访 疏导到不同的机器下来，使得不同的客户端拜访不同的服务器，从而达到负载平衡的目标。
  3. 大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟
    用户最靠近的点的IP地址给用户，CDN节点的服务器负责响应用户的申请，提供所需的内容。
  4. dns-prefetch DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击以后网页中的连贯时就无需进行 DNS 的解析，缩小用户等待时间，进步用户体验。

OSI参考模型与TCP/IP四层模型

三、TCP三次握手

  • 客户端发送一个带 SYN=1，Seq=X 的数据包到服务器端口（第一次握手，由浏览器发动，通知服务器我要发送申请了）
  • 服务器发回一个带 SYN=1， ACK=X+1， Seq=Y 的响应包以示传播确认信息（第二次握手，由服务器发动，通知浏览器我筹备承受了，你连忙发送吧）
  • 客户端再回传一个带 ACK=Y+1， Seq=Z 的数据包，代表“握手完结”（第三次握手，由浏览器发送，通知服务器，我马上就发了，筹备承受吧）

四、发送 HTTP 申请

TCP 三次握手完结后，开始发送 HTTP 申请报文。

为防止篇幅过长，http协定、缓存等相干内容请参阅： 从HTTP到WEB缓存

五、服务器解决申请并返回 HTTP 报文

每台服务器上都会装置解决申请的利用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。

伪装我是一个传统的MVC模型，RD同学请忽视

参考 前端进阶面试题具体解答

六、浏览器解析渲染页面

浏览器的次要形成

用户界面    (User Interface)    － 包含地址栏、后退/后退按钮、书签目录等，也就是你所看到的除了用来显示你所申请页面的主窗口之外的其余局部浏览器引擎  (Browser Engine)    － 用来查问及操作渲染引擎的接口渲染引擎    (Rendering Engine)  － 用来显示申请的内容，例如，如果申请内容为html，它负责解析html及css，并将解析后的结果显示进去网络        (Networking)        － 用来实现网络调用，例如http申请，它具备平台无关的接口，能够在不同平台上工作JS解释器    (JS Interpreter)    － 用来解释执行JS代码UI后端      (UI Backend)        － 用来绘制相似组合抉择框及对话框等根本组件，具备不特定于某个平台的通用接口，底层应用操作系统的用户接口数据存储    (DB Persistence)    － 属于长久层，浏览器须要在硬盘中保留相似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级残缺的客户端存储技术

1.多过程的浏览器

浏览器是多过程的，有一个主控过程，以及每一个tab页面都会新开一个过程（某些状况下多个tab会合并过程）,

过程可能包含主控过程，插件过程，GPU，tab页（浏览器内核）等等

  • Browser过程：浏览器的主过程（负责协调、主控），只有一个
  • 第三方插件过程：每种类型的插件对应一个过程，仅当应用该插件时才创立
  • GPU过程：最多一个，用于3D绘制
  • 浏览器渲染过程（内核）：默认每个Tab页面一个过程，互不影响，管制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个过程）

2.多线程的浏览器内核

每一个tab页面能够看作是浏览器内核过程，而后这个过程是多线程的，它有几大类子线程：

  1. GUI线程
  2. JS引擎线程
  3. 事件触发线程
  4. 定时器线程
  5. 网络申请线程

浏览器内核拿到内容后，渲染步骤大抵能够分为以下几步：

1. 解析HTML，构建DOM树2. 解析CSS，生成CSS规定树3. 合并DOM树和CSS规定，生成render树4. 布局render树（Layout/reflow），负责各元素尺寸、地位的计算5. 绘制render树（paint），绘制页面像素信息

以webkit内核为例

1. HTML解析，构建DOM

简略的了解，这一步的流程是这样的：浏览器解析HTML，构建DOM树。
解析HTML到构建出DOM当然过程能够简述如下：

Bytes → characters → tokens → nodes → DOM

其中比拟要害的几个步骤

1. Conversion转换：浏览器将取得的HTML内容（Bytes）基于他的编码转换为单个字符2. Tokenizing分词：浏览器依照HTML标准规范将这些字符转换为不同的标记token。每个token都有本人独特的含意以及规定集3. Lexing词法剖析：分词的后果是失去一堆的token，此时把他们转换为对象，这些对象别离定义他们的属性和规定4. DOM构建：因为HTML标记定义的就是不同标签之间的关系，这个关系就像是一个树形构造一样例如：body对象的父节点就是HTML对象，而后段略p对象的父节点就是body对象

2. 解析CSS，生成CSS规定树

同理，CSS规定树的生成也是相似。

Bytes → characters → tokens → nodes → CSSOM

3. 合并DOM树和CSS规定，生成render树

当DOM树和CSSOM都有了后，就要开始构建渲染树了

一般来说，渲染树和DOM树绝对应的，但不是严格意义上的一一对应,因为有一些不可见的DOM元素不会插入到渲染树中，如head这种不可见的标签或者display: none等

4. 布局render树（Layout/Reflow），负责各元素尺寸、地位的计算

布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的地位和尺寸。

5. 绘制render树（Paint），绘制页面像素信息

绘制阶段，零碎会遍历出现树，并调用出现器的“paint”办法，将出现器的内容显示在屏幕上。

这张图片中重要的四个步骤1. 计算CSS款式2. 构建渲染树3. 布局，次要定位坐标和大小，是否换行，各种position overflow z-index属性4. 绘制，将图像绘制进去
  • Layout，也称为Reflow，即回流。个别意味着元素的内容、构造、地位或尺寸产生了变动，须要从新计算款式和渲染树
  • Repaint，即重绘。意味着元素产生的扭转只是影响了元素的一些外观之类的时候（例如，背景色，边框色彩，文字色彩等），此时只须要利用新款式绘制这个元素就能够了

七、断开连接

当数据传送结束，须要断开 tcp 连贯，此时发动 tcp 四次挥手。

  • 发动方向被动方发送报文，Fin、Ack、Seq，示意曾经没有数据传输了。并进入 FIN_WAIT_1 状态。 (第一次挥手：由浏览器发动的，发送给服务器，我申请报文发送完了，你筹备敞开吧)
  • 被动方发送报文，Ack、Seq，表示同意敞开申请。此时主机发起方进入 FIN_WAIT_2 状态。 (第二次挥手：由服务器发动的，通知浏览器，我申请报文承受完了，我筹备敞开了，你也筹备吧)
  • 被动方向发起方发送报文段，Fin、Ack、Seq，申请敞开连贯。并进入 LAST_ACK 状态。 (第三次挥手：由服务器发动，通知浏览器，我响应报文发送完了，你筹备敞开吧)
  • 发动方向被动方发送报文段，Ack、Seq。而后进入期待 TIME_WAIT 状态。被动方收到发起方的报文段当前敞开连贯。发起方期待肯定工夫未收到回复，则失常敞开。 (第四次挥手：由浏览器发动，通知服务器，我响应报文承受完了，我筹备敞开了，你也筹备吧)