从输入URL到页面渲染完成,经历了什么

整体流程如下

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

什么是url

URL是统一资源定位符,用于定位互联网上的资源

URL规则: scheme://host.domain:post/path/filename

  • scheme - 定义因特网服务的类型。常见的协议有 http、https、ftp、file,其中最常见的类型是 http,而 https 则是进行加密的网络传输。
  • host - 定义域主机(http 的默认主机是 www)
  • domain - 定义因特网域名,比如 http://w3school.com.cn
  • port - 定义主机上的端口号(http 的默认端口号是 80)
  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename - 定义文档/资源的名称

在浏览器输入URL后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

为什么要通过DNS将域名解析成IP?

域名就相当于 IP 地址乔装打扮的伪装者,带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。用户通常使用主机名或域名来访问对方的计算机,而不是直接通过 IP 地址访问。因为与 IP 地址的一组纯数字相比,用字母配合数字的表示形式来指定计算机名更符合人类的记忆习惯。但要让计算机去理解名称,相对而言就变得困难了。因为计算机更擅长处理一长串数字。为了解决上述的问题,DNS 服务应运而生。

什么是DNS

域名系统(英文:Domain Name System,缩写:DNS)是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。DNS使用TCP和UDP端口53[1]。当前,对于每一级域名长度的限制是63个字符,域名总长度则不能超过253个字符

所以,通俗说:dns是一个全球性的大系统,它的数据库里存着 ip与域名的映射列表,所谓的dms解析,就是拿着域名去这个系统寻找对应的ip。

浏览器如何通过域名去查询 URL 对应的 IP 呢?

  • 浏览器缓存:浏览器会按照一定的频率缓存 DNS 记录。
  • 操作系统缓存:如果浏览器缓存中找不到需要的 DNS 记录,那就去操作系统中找。
  • 路由缓存:路由器也有 DNS 缓存。
  • ISP 的 DNS 服务器:ISP 是互联网服务提供商(Internet Service Provider)的简称,ISP 有专门的 DNS 服务器应对 DNS 查询请求。
  • 根服务器:ISP 的 DNS 服务器还找不到的话,它就会向根服务器发出请求,进行递归查询(DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址,然后再问.baidu 域名服务器,依次类推)

TCP/IP

它常被通称为TCP/IP协议族,简称TCP/IP。因为该协议家族的两个核心协议:TCP(传输控制协议)和IP(网际协议),为该家族中最早通过的标准。

TCP协议

TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。

TCP三次握手

  • TCP在三次握手之后才会创建连接,连接创建之后不会主动关闭。
  • 三次握手的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”
  • 三次握手是保证双方互相明确对方能发能收的最小次数

发送请求报文

  • TCP 三次握手结束后,开始发送 HTTP 请求报文。
  • HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能进行更高层协议的连接,因此,首先要建立TCP连接才能进行HTTP请求。

请求报文由请求行(request line)、请求头(header)、请求体三个部分组成。

http 响应报文

响应报文由响应行(request line)、响应头部(header)、响应主体三个部分组成。

响应行包含:协议版本,状态码,状态码描述

状态码规则如下:

  • 1xx:指示信息--表示请求已接收,继续处理。
  • 2xx:成功--表示请求已被成功接收、理解、接受。
  • 3xx:重定向--要完成请求必须进行更进一步的操作。
  • 4xx:客户端错误--请求有语法错误或请求无法实现。
  • 5xx:服务器端错误--服务器未能实现合法的请求。

响应头部包含响应报文的附加信息,由 名/值 对组成

响应主体包含回车符、换行符和响应返回数据,并不是所有响应报文都有响应数据

浏览器解析渲染页面(webkit渲染流程)

浏览器解析渲染页面分为一下五个步骤

  • 1.根据 HTML 解析出 DOM 树

    根据 HTML 的内容,将标签按照结构解析成为 DOM 树,DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点,再构建下一个兄弟节点。

    在读取 HTML 文档,构建 DOM 树的过程中,若遇到 script 标签,则 DOM 树的构建会暂停,直至脚本执行完毕。

  • 2.根据 CSS 解析生成 CSS 规则树

    解析 CSS 规则树时 js 执行将暂停,直至 CSS 规则树就绪。

    浏览器在 CSS 规则树生成之前不会进行渲染。

  • 3.结合 DOM 树和 CSS 规则树,生成渲染树

    DOM 树和 CSS 规则树全部准备好了以后,浏览器才会开始构建渲染树。

    display为none不会出现在渲染树中,visibility则不受影响,它只是被隐藏了

    精简 CSS 并可以加快 CSS 规则树的构建,从而加快页面相应速度。

  • 4.根据渲染树计算每一个节点的信息

    布局:通过渲染树中渲染对象的信息,计算出每一个渲染对象的位置和尺寸

    回流:在布局完成后,发现了某个部分发生了变化影响了布局,那就需要倒回去重新渲染。

  • 5. 根据计算好的信息绘制页面

    绘制阶段,系统会遍历呈现树,并调用呈现器的“paint”方法,将呈现器的内容显示在屏幕上。

    重绘(repaint):某个元素的背景颜色,文字颜色等,不影响元素周围或内部布局的属性,将只会引起浏览器的重绘。

    回流(reflow):某个元素的尺寸发生了变化,则需重新计算渲染树,重新渲染。

页面渲染

  • 用户输入网址(假设是个 HTML 页面,第一次访问,无缓存情况),浏览器向服务器发出HTTP请求,服务器返回 HTML 文件;
  • 浏览器载入 HTML 代码,发现 `head` 内有一个 `link` 引用外部 CSS 文件,则浏览器立即发送CSS文件请求,获取浏览器返回的CSS文件; (CSS文件合并,减少HTTP请求)
  • 浏览器继续载入 HTML 中 `body` 部分的代码,并且 CSS 文件已经拿到手了,可以开始渲染页面了;(CSS文件需要放置最上面,避免网页重新渲染)
  • 浏览器在代码中发现一个 `img` 标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;(图片文件合并,减少HTTP请求)
  • 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;(最好图片都设置尺寸,避免重新渲染)
  • 浏览器发现了一个包含一行 JavaScript 代码的script 标签,会立即运行该js代码;script最好放置页面最下面)
  • js脚本执行了语句,它令浏览器隐藏掉代码中的某个 `div`,突然就少了一个元素,浏览器不得不重新渲染这部分代码;(页面初始化样式不要使用js控制)
  • 终于等到了 `/html` 的到来,浏览器渲染完毕
  • 如果换肤的话,JavaScript 让浏览器换了一下 `link` 标签的 CSS 路径;
  • 浏览器向服务器请求了新的CSS文件,重新渲染页面。

随机浏览