从一道面试题来了解浏览器渲染过程

2019-10-10 admin

前言

作为前端工程师,几乎是每天都要与各种浏览器打交道。

理解浏览器是如何工作的,对我们做业务的技术选型、架构设计等都有非常重要的作用,可以让我们准确的评估web开的项目的可行性,站在更高维度审视页面,以及在快节奏的技术迭代中把握住问题的本质。

那么我们就从一道面试题在浏览器里面,从输入URL到展示页面,这过程发生了什么?来解开浏览器神秘的面纱

在了解流程之前我们先来看一下浏览器的架构:

浏览器架构

当代现有的浏览器主要由:

  • 用户界面(The user interface)、
  • 浏览器引擎(The browser engine)、
  • 呈现引擎(The rendering engine)、
  • 网络(Networking)、
  • JavasScript 解释器(JavaScript interpreter)、
  • 用户界面后端(UI backend)、
  • 数据存储组成(Data storage)。

image-20191010144108447

  1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
  2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
  3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  4. 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
  5. 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
  6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
  7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

那么在了解完浏览器的架构之后,再来看一下URL的解析过程

浏览器解析过程

  • DNS解析
  • TCP连接
  • 发送HTTP请求
  • 服务器处理请求并返回HTTP报文
  • 浏览器解析渲染过程

DNS解析解析过程

当发送一个url请求时,不管这个url是web页面的url还是web页面上的每个资源的url,浏览器都会开启一个线程处理该请求,同时在远程DNS服务器上启动一个DNS查询,这能使浏览器获得请求对应的IP地址

  • 本地DNS服务器拿到请求后会首先查询它的缓存记录,如果缓存有这条记录的话就直接返回。这个时候拿到的ip地址,会被标记为非权威服务器的应答。
  • 如果没有,本地DNS服务器还要向DNS根服务器进行查询(会从配置文件里面读取13个根域名服务器的地址,然后向其中一台发起请求。)
  • 根DNS服务器拿到这个请求后,告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址。这种过程是迭代的过程,(比如知道他是com.这个顶级域名下的,所以就会返回com域中的NS记录。)
  • 然后本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址,(比如,com域的服务器发现你这请求是baidu.com这个域的,一查发现了这个域的NS,那我就返回给你,你再去查。)
  • 最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器把IP地址返回给用户电脑,并把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。(比如,向baidu.com这个域的权威服务器发起请求,baidu.com收到之后,查了下有www的这台主机,就把这个IP返回给你了,然后ISPDNS拿到了之后,将其返回给了客户端,并且把这个保存在高速缓存中。)

网址的解析是一个从右向左的过程: com -> google.com -> www.google.com;

事实上,真正的网址是www.google.com.,这个.对应的就是根域名服务器,默认情况下所有的网址的最后一位都是.,既然是默认情况下,为了方便用户,通常都会省略,浏览器在请求DNS的时候会自动加上,所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.。

DNS域名类别

名称 说明 示例
根域 DNS域名使用时,规定由尾部局点(.)来指定名称位于根或者更高级的域层次结构 单个句点(.)或者句点用于末尾的名称
顶级域 用于指示某个国家/地区或者组织使用的名称类 .com
第二层域 个人或者组织在Internet上使用的注册名称 baidu.com
子域 已注册的二级域名派生的域名,同属的讲就是网站名 www.baidu.com
主机名 通常情况下,DNS域名的最左侧的标签标示网络上的特定计算机,如h1 h1.www.baidu.com

TCP建立连接

在http消息发送前,需要建立客户端与服务器的TCP链接,也就是进行所谓的三次握手。 TCP是因特网中的传输层协议,使用三次握手协议)建立连接。当主动方发出SYN连接请求后,等待对方回答SYN+ACK,并最终对对方的 SYN 执行 ACK 确认。这种建立连接的方法可以防止产生错误的连接,TCP使用的流量控制协议是可变大小的滑动窗口协议。

TCP三次握手的过程如下:

  1. 客户端发送SYN(SEQ=x)报文给服务器端,进入SYN_SEND状态。
  2. 服务器端收到SYN报文,回应一个SYN (SEQ=y)ACK(ACK=x+1)报文,进入SYN_RECV状态。
  3. 客户端收到服务器端的SYN报文,回应一个ACK(ACK=y+1)报文,进入Established状态。

三次握手完成,TCP客户端和服务器端成功地建立连接,可以开始传输数据了。

发起HTTP请求

进过TCP3次握手之后,浏览器发起了http的请求;

chrome浏览器查看报文首部信息:

服务器请求处理

现在请求只是成功达到了服务器,接下来服务器需要响应浏览器的请求。 服务器端收到请求后的由web服务器(准确说应该是http服务器)处理请求,诸如Apache、Ngnix、IIS等。web服务器解析用户请求,知道了需要调度哪些资源文件,再通过相应的这些资源文件处理用户请求和参数,并调用数据库信息,最后将结果通过web服务器返回给浏览器客户端。

在HTTP里,有请求就会有响应,哪怕是错误信息。这里我们同样看下响应报文的组成结构:

在响应结果中都会有个一个HTTP状态码,比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常,并能了解具体的错误。 状态码由3位数字和原因短语组成。根据首位数字,状态码可以分为五类:

状态码 类别 说明
1– 信息性状态码 接收的请求正在处理
2– 成功状态码 请求正常处理完毕
3– 重定向状态码 需要进行附加操作已完成请求
4– 客户端错误状态码 服务器无法处理请求
5– 服务器错误状态码 服务器处理请求出错

从上面的URL请求我们能看到headers里面的Accept是text/html类型,这部分头部说明了浏览器将响应内容作为HTML渲染,而不是作为文件下载。浏览器将使用头部决定如何解释响应结果,当然也会考虑其他因素,比如URL的扩展情况。

浏览器渲染解析

当浏览器获得一个html文件时,会“自上而下”加载,并在加载过程中进行解析渲染。 解析:

  1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
  2. 将CSS解析成 CSS Rule Tree 。
  3. 根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

[转载]原文链接:https://segmentfault.com/a/1190000020640587

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77061.html

文章标题:从一道面试题来了解浏览器渲染过程

相关文章
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
H5即将迎来黄金时代 轻应用再成行业焦点
鎽樿�侊細浠庣伀閫熻交搴旂敤鑾峰緱鎶曡祫绛変腑涓嶉毦鐪嬪嚭锛孒TML5鍗冲皢杩庢潵榛勯噾鏃朵唬銆傝秺鏉ヨ秺澶氱殑浼佷笟鎴栧垱涓氳€呭紑濮嬫秹瓒矵5锛岃�╄交搴旂敤鍐嶆�℃垚涓鸿�屼笟鐨勭劍鐐癸紝鎺ヤ笅鏉ュ皢鏈夋洿澶欻5寮曟搸浠ュ強鏇村�欻5...
2015-11-12
面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)
题目:谈谈你对 CSS 盒模型的认识 涉及知识点(层层递进): 基本概念:标准模型+ IE模型(区别) CSS如何设置这两种模型 JS如何设置获取盒子模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 1...
2018-06-09
javascript字面量
你在JavaScript中使用文字代表值。 这些都是固定的值,而不是变量 从字面上 提供在你的脚本。 本节描述以下类型的文字: 数组 布尔 浮点型 整数 对象 字符串字面值 数组字面量 数组文字是零个或多个表达式的列表,每个代表一个数组元素...
2015-11-12
游戏机遇到来 非主流HTML5能否成器?
2014年第四季度以来,有60%的游戏行业从业者已经投入或准备投入开发HTML5为基础的游戏,并对其前景表示乐观的态度。   对HTML 5这项诞生于2008年的标准来说,其正在经历最好的时代。 游戏机遇到来 非主流HTML5能否成器?  ...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
HTML5:未来不可阻挡的力量
HTML5像是互联网行业扔下的一颗炸弹,有些人还未反应过来,原先专注的领域也许就将面临彻底的革新。比如像前几年疯狂甚至有点野蛮成长的App。虽然HTML5从出现到去年标准尘埃落定,一直在争议中曲折发展,但是各种H5页面的推广以及H5小游戏在...
2015-11-12
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板
A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI Features Vue2 Webpack3 ElementUI Eslint(e...
2018-01-12
HTML5即将迎来黄金时代 格局已成
大众能看到的H5效果拜“微信”所赐,几乎每天都有H5页面的推广以及H5小游戏在微信上传播。其实,H5的大热与百度不无关系,2012年开始,百度推广轻应用,因为技术门槛等因素最终没有实现其轻应用的理想,2年之后,推出了百度直达号,仍旧以H5为...
2015-11-12
回到顶部