一道老掉牙的题目:在浏览器输入url回车后发生了什么?

33 阅读3分钟

在解答这道题之前,我们先查阅一下什么是浏览器?

浏览器

定义

浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符( Uniform Resource Identifier,URI)所标记,它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks),通过浏览器浏览互相关联的信息

上面的定义有点拗口,但是我们基本可以找到对应的点,比如:

  • 检索 -----------> 输入关键词生成url或直接输入url
  • web信息资源 ----> 由服务器返回给浏览器的数据
  • 展示 -----------> 浏览器对web信息资源的渲染和解析

接下来,我们就来探索一下,浏览器是由哪些部分组成的才可以完成上面的事情。

浏览器的组成

浏览器的主要组件

  1. User Interface(用户界面)

    包括地址栏,前进/后退按钮,书签菜单等。除了显示你请求的页面外,其他显示的各个部分都属于用户页面

  2. Browser engine(浏览器引擎)

    在用户界面和渲染引擎之间传送数据,用来查询和操作渲染引擎的接口

  3. Rending engine(渲染引擎)

    负责显示请求的内容,对于html,负责解析html和css内容,并将解析后的内容显示在屏幕上,即我们所说的浏览器内核。

    说明:最开始浏览器内核指的是渲染引擎和js引擎,这里以 Webkit 内核为例:Webkit事实上有两部分组成:- WebCore: 负责HTML解析、布局、渲染等等事情。- JavaScriptCore: 解析、执行 JavaScript 代码。后面js引擎越来越独立,浏览器内核倾向于单指渲染引擎

  4. Networking(网络)

    用于网络调用,比如http请求,接口与平台无关,并为所有平台提供底层实现

  5. JavaScript Interpreter(javascript解释器)

    用于解析和执行javascript代码

  6. UI Backend(UI后端)

    用于绘制基本的窗口小部件,比如组合框和窗口,其公开了与平台无关的通用接口,底层使用用户的操作系统接口

  7. Data Persistence(数据持久性)

    这是持久层。浏览器需要在硬盘上保存各种数据,例如Cookie。新的HTML规范(HTML5)定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

解答

我们了解了浏览器的定义和组成以及各个组成的作用后,接下来就可以开始尝试解答这道题了。像我们以往背诵下来的答案,浏览器输入url回车后主要发生了以下事情:

  1. 发起请求(DNS解析url,建立TCP连接)
  2. 服务器响应请求,返回数据
  3. 浏览器加载/渲染页面
  4. 关闭连接

DNS解析过程

浏览器在输入url回车后,发起网络请求,

TCP连接

浏览器解析和渲染

渲染引擎: html/css的解析和渲染

image.png

js引擎: js代码的编译和执行(以V8为例)

回流和重绘

参考:www.kaotop.com/it/771369.h… www.likecs.com/show-306282…