老生常谈,也有可能在面试里遇到~

 

  1. 从 URL 输入到页面展现背后发生了什么事?

  2. 一次完整的 HTTP 事务是怎么一个过程?

  3. 浏览器是如何渲染页面的?

  4. 浏览器的内核有哪些?分别有什么代表的浏览器?

  5. 刷新页面,js 请求一般会有哪些地方有缓存处理?

 

首先,打开你最常浏览的一个网站,在最上方的地址栏里,你将会看到一连串的字符。例如知乎:

上边这一连串的字符,就叫做 URL(Uniform Resource Locator 统一资源定位符),实际上就是我们通常叫的“网址”。

1.1 URL 的作用

在茫茫网络世界中,我们的浏览器是靠一个个 URL 来查找资源的具体位置的。

1.2 URL 的组成部分(用以下例子说明)

1.2.1 协议部分

它是浏览器和 www 万维网之间的沟通方式,它会告诉浏览器在网络世界中找到资源的正确位置。 常见的协议有:http(最常见的网络传输协议)、https(进行加密的网络传输协议)、file(本地文件夹协议)、ftp、telnet 等。

1.2.2 网络地址部分

即我们常说的“域名”(Domain Name),为了方便记忆,人们用可以语义化的域名来登录网站。 但我们必须知道,每一个域名背后都有其对应的 IP 地址。
IP 是网络世界中每台联网的计算机为实现相互通信而遵循的规则协议,IP 可以具体分为:
1️⃣局域网 IP:

  • 例如一个合租的房子,大家共用一个路由的 wifi,那实际上所有连接上这个 wifi 的电脑都处于同样一个局域网,这里的 IP 就是局域网 IP;
  • 在同样的局域网里,可以直接通过这个 IP 地址访问这个局域网里的其他机器;
  • 但陌生人是不可以通过这个 IP 找到你的,因为这个 IP 是假的,只在这个小圈子里可以用。

2️⃣公网 IP:

  • 假如你做了一个网站要放在公网上,就要申请公网 IP,公网 IP 是需要申请的。

3️⃣本机 IP:

  • 当前电脑的 IP 是 127.0.0.1 ,就是代表自己。

1.3 DNS

提到域名和 IP 关系后,就必须理解 DNS(Domain Name System 域名系统)——用来记录域名和 IP 地址相互映射的信息。

  • DNS 作用:可以让人们免于记住那些繁琐的数串;
  • 全国 DNS 信息可以在网上查找到,各省都有对应分配的 IP 网段;
  • 大型企业都有自己的 DNS 服务器,专门用来存储域名和 IP 的映射关系;
  • 如谷歌的 DNS 服务器地址 8.8.8.8 ;国内知名 DNS 服务器地址 114.114.114.114 。

2 大致流程概述

从 URL 输入到页面展现经过以下过程:

  1. 在浏览器输入 URL;
  2. 浏览器查找域名对应的 IP 地址;
  3. 浏览器根据 IP 地址与服务器建立联系;
  4. 浏览器与服务器通信:浏览器请求,服务器处理请求并呈现页面。

3 具体流程概述

3.1 第一步,在浏览器输入 URL

在地址栏输入相应的 URL 。

3.2 第二步,浏览器查找域名对应的 IP 地址

第一步中,我们已经输入了相应的 URL,但浏览器本身并不能识别 URL 是什么,因此从我们输入 URL 开始,浏览器就要进行域名解析来找到对应 IP——DNS 解析是浏览器的实际寻址方式:

  • 查找浏览器缓存——近期浏览过的网站,浏览器会缓存 DNS 记录一段时间 (如果没有则往下) ;
  • 查找系统缓存——从 C 盘的 hosts 文件查找是否有存储的 DNS 信息,查找是否有目标域名和对应的 IP 地址 (如果没有则往下);
  • 查找路由器缓存 (如果没有则往下);
  • 查找 ISP DNS 缓存——从网络服务商(比如电信)的 DNS 缓存信息中查找(如果没有则往下);
  • 经由以上方式都没找到对应 IP 的话,就会向根域名服务器查找目标 URL 对应的 IP,根域名服务器会向下级服务器转达请求,层层下发,直到找到对应的 IP 为止。

3.3 第三步,浏览器根据 IP 地址与服务器建立联系

第2步中,浏览器通过 IP 寻址找到了对应的服务器,浏览器就将用户发起的 http 请求发送给服务器。服务器开始处理用户请求:

  • 每台服务器上都会安装处理请求的应用——web sever;
  • 常见的 web sever 产品有:apache 、nginx 、IIS 和 Lighttpd 等;
  • web sever 可以理解为一个管理者,它不做具体的请求处理,而是会结合配置文件,把不同用户发来的请求委托给服务器上专门处理相应请求的程序(服务器上的相应程序开始处理请求的这一部分,通俗说就是实际后台处理的工作):

后台开发现在有很多框架,但大部分都是按照 MVC(model view controller)设计模式搭建的,它将服务器上的应用程序分成3个核心部件且分别处理自己的任务,实现输入、处理、输出的分离:

3.3.1 模型(model)

  • 模型,是将实际开发过程中的业务规则和所涉及的数据格式进行模型化;
  • 应用于模型的代码只需写一次就可以被多个视图重用;
  • 在 MVC 三个部件中,模型拥有最多的处理任务;
  • 一个模型能为多个视图提供数据。

3.3.2 视图(view)

  • 视图是用户看到并与之交互的界面;
  • 这一部分,也就是我们前端工作的主力所在。

3.3.3 控制器(controller)

  • 作用:接受用户的输入并调用模型(M)和视图(V)去完成用户的需求;
  • 地位:控制器也是处于一个管理者的地位——从视图(V)接收请求并决定调用哪一个模型构件(M)来处理请求,然后再确定用哪个视图(V)来显示模型(M)处理返回的数据。

????总而言之:

  • 首先,控制器(C)接收用户的请求,并决定应该调用哪个模型(M)来进行处理;
  • 然后,模型(M)用业务逻辑来处理用户的请求并返回数据;
  • 最后,控制器(C)再用相应的视图(V)来格式化模型(M),进而返回 html 字符串给浏览器。

3.4 第四步,浏览器与服务器通信

在上边的第 3 步中,服务器返回了 html 字符串给浏览器,此时,浏览器将会对其进行解析、渲染并最终绘制网页:

3.4.1 加载

  • 浏览器对一个 html 页面的加载顺序是从上而下的;
  • 浏览器在加载的过程中,同时进行解析、渲染处理;
  • 在这个过程中,遇到 link 标签、image 标签、script 标签时,浏览器会再次向服务器发送请求以获取相应的 css 文件、图片资源、js 文件,并执行 js 代码,同步进行加载、解析。

3.4.2 解析、渲染

  • 解析的过程,其实就是生成 dom 树(Document Object Model 文档对象模型);
  • dom 树是由 dom 元素及属性节点组成,并且加上 css 解析的样式对象和 js解析后的动作实现;
  • 渲染:就是将 dom 树进行可视化表示。

3.4.3 绘制网页

  • 浏览器通过渲染,将 dom 树可视化,得到渲染树;
  • 构建渲染树使页面以正确的顺序绘制出来,浏览器遵循一定的渲染规则,实现网站页面的绘制,并最终完成页面的展示。


作者:itsOli
链接:https://juejin.im/post/5ca217a051882543f252dc1e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

分类:

技术点:

相关文章: