前端面试题:从url到页面展现,这之中发生了什么?

输入网址

这里markdown格式跟简书不太一样,排版可能不是很好,可以转到我的简书上看

我们平常在地址栏里输入一些网址时,页面很快就会出现,但在这之中到底发生了什么事情呢?

大概是这样的流程:

  • 在浏览器的地址栏中敲入了url
  • 域名解析
  • 服务器处理请求
  • 浏览器处理
  • 绘制网页

一、在浏览器的地址栏中敲入了url

首先,我们要知道url是什么?

URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上的资源,实际上就是网站网址。url的格式一般为:

协议类型://<主机名>:<端口>/<路径>/文件名

其中协议类型可以是http(超文本传输协议)、https、ftp(文件传输协议)、telnet(远程登录协议)、file等等。而http是最常见的网络传输协议,https则是进行加密的网络传输。

例如,我的简书url为http://www.jianshu.com/u/b473784d730c,其中,“http”表示与web服务器通讯采用http协议,简书web服务器域名为www.jianshu.comu/b473784d730c表示所访问的文件存在于web服务器上的路径。

url格式中主机名冒号后面的数字是端口编号,因为一台计算机常常会同时作为Web,FTP等服务器,端口编号用来告诉web服务器所在的主机要将请求交给哪个服务。默认情况下http服务的端口为80,不需要在url中输入,如果web服务器采用的不是这一个默认端口,就需要写明服务所用的端口。常见的协议默认端口如下:

协议类型 默认端口
http 80
ftp 21
https 443
telnet 23
IP是什么

IP是因特网中的每台连接到网络的计算机为实现相互通信而遵循的规则协议。每个处于互联网中的设备都有IP 地址,形如 192.168.0.1,而127.0.0.1代表本机的 IP。IP又分为局域网IP和公网IP。而局域网 IP 和公网 IP 是有差别的。每个网站就是靠IP来定位的。

为了便于记忆或辨识,人们使用域名来登录网站,每个域名背后有对应的IP地址。

比如对于 http://www.jianshu.com的URL,浏览器实际上不知道 www.jianshu.com到底是什么东西,需要查找www.jianshu.com网站所在服务器的IP地址,才能找到目标,这就是下文要说的域名解析。

二、域名解析

当用户在浏览器中输入url后,你使用的电脑会发出一个DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动,DNS请求到达本地DNS服务器之后会有以下几个步骤:

  • 查找浏览器缓存

浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束。Chrome浏览器看本身的DNS缓存时间比较方便,在地址栏输入chrome://net-internals/#dns,就可以看到了

  • 查找操作系统缓存

如果用户的浏览器缓存中没有,浏览器会从hosts文件查找是否有存储DNS信息,查找是否有目标域名和对应的IP地址

  • 查找路由器缓存

如果系统缓存中也找不到,那么查询请求就会发向路由器,路由器一般会有自己的DNS缓存。

  • 查找ISP(Internet Service Provider) DNS 缓存

如果路由器缓存中也找不到,那么就查询ISP DNS 缓存服务器了。

我们都知道在我们的网络配置中都会有"DNS服务器地址"这一项,操作系统会把这个域名发送给这里设置的DNS,比如114.114.114.114,也就是本地区的域名服务器,通常是提供给你接入互联网的应用提供商。而114.114.114.114是国内移动、电信和联通通用的DNS。

  • 迭代查询

如果前面都找不到DNS缓存的话,会有以下几个步骤:

  • 本地 DNS服务器将该请求转发到互联网上的根域(根域没有名字,在DNS系统中就用一个空字符串来表示。例如www.baidu.com.现在的DNS系统都不会要求域名以.来结束,即www.baidu.com就可以解析了,但是现在很多DNS解析服务商还是会要求在填写DNS记录的时候以.来结尾域名。)
  • 根域将所要查询域名中的顶级域(比如要查询www.baidu,com,该域名的顶级域就是com)的服务器IP地址返回到本地DNS。
  • 本地DNS根据返回的IP地址,再向顶级域(就是com域)发送请求, com域服务器再将域名中的二级域(即www.baidu.com中的baidu.com)的IP地址返回给本地DNS。
  • 本地DNS再向二级域发送请求进行查询。
  • 之后不断重复这样的过程,直到本地DNS服务器得到最终的查询结果,并返回到主机。这时候主机才能通过域名访问该网站。
    下图能很好的说明这个迭代查询:

当查找到对应的IP地址之后,通过IP地址查找到对应的服务器,浏览器将用户发起的http请求发送给服务器。例如:GET http://www.baidu.com/ HTTP/1.1

三、服务器处理请求

每台服务器上都会安装处理请求的应用——Web server。常见的web server产品有apachenginxIISLighttpd等。

当web server接收到一个HTTP请求(request),会返回一个HTTP响应(response),例如送回一个HTML页面。对于不同用户发送的请求,会结合配置文件,把不同请求委托给服务器上处理对应请求的程序进行处理(例如CGI脚本,JSP脚本,servlets,ASP脚本,服务器端JavaScript,或者一些其它的服务器端技术等)。

无论它们(脚本)的目的如何,这些服务器端(server-side)的程序通常产生一个HTML的响应(response)来让浏览器可以浏览。

那么如何处理请求?实际上就是后台处理的工作。后台开发现在有很多框架,但大部分都还是按照MVC设计模式进行搭建的。

处理的过程如下图:


MVC的处理过程是这样的:对于每一个用户输入的请求,首先被控制器接收,控制器决定用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器确定用哪个视图模型,用相应的视图格式化模型返回html字符串给浏览器,并通过显示页面呈现给用户。

四、浏览器处理

接下来就是浏览器进行处理, 通过后台处理返回的HTML字符串被浏览器接受后被一句句读取解析,html页面经历加载、解析、渲染。

  • 加载

    浏览器对一个html页面的加载顺序是从上而下的。如果加载过程中遇到外部css文件,浏览器另外发出一个请求,来获取css文件。遇到图片资源,浏览器也会另外发出一个请求,来获取图片资源。但是当文档加载过程中遇到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。

  • 解析

    解析文档是指将文档转化成为有意义的结构,也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树,它称作解析树或者语法树,也就是DOM树。如下图:


css解析将css文件解析为样式表对象。如下图:

js解析文件在加载的同时也进行解析
如果想深入如何解析的话可以看浏览器的工作原理:新式网络浏览器幕后揭秘这篇文章

  • 渲染

    即为构建渲染树的过程,就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。

五、绘制网页

浏览器根据 HTML 和 CSS 计算得到渲染树,最终绘制到屏幕上


参考的文章:
前端经典面试题: 从输入URL到页面加载发生了什么?
What really happens when you navigate to a URL
从URL输入到页面展现
 MVC模型结构是什么
域名详解
浏览器~加载,解析,渲染


由于本人的能力有限,如果哪里写的不对的话,请指出!感谢您的观看?



前端分享
关于前端的一些知识

前端爱好者

1.5k 声望
88 粉丝
0 条评论
推荐阅读
React 16.8.6 版本存在内存泄露
发现这个React 内存泄露问题是某一天的晚上一直开着直播页,直播页用的 react 版本是 16.8.6,到了早上跳到这个页面的时候,控制台有点卡,怀疑是有内存泄露,于是就开始分析这个直播页面。

Moorez13阅读 4.3k评论 2

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

前端爱好者

1.5k 声望
88 粉丝
宣传栏