从输入一个网址/URL回车后到页面呈现发生了什么

之前在知乎上看到一个很有意思的问题:知乎:在浏览器中输入一个 URL 至页面呈现,网络上都发生了什么事?听说这个还是前端面试常问的问题之一,今天我想用这个问题入手,归纳一下其中涉及到前端的一些基础知识,主要包括:http协议、web标准、w3c标准等。
       这个问题虽然只有两个2个动作:输入URL和呈现页面,但这背后发生了很多”有趣”的事情,这个过程也涉及到很多方面的技术,包括像浏览器、DNS、http、html、服务器等。如果让我来回答,它大致的过程应该是这样的:DNS解析–>建立连接,发送数据包 –>服务器响应请求,返回给浏览器–>浏览器渲染程序页面。

也可以以下几个过程:

  1. DNS解析

  2. TCP连接

  3. 发送HTTP请求

  4. 服务器处理请求并返回HTTP报文

  5. 浏览器解析渲染页面

  6. 连接结束

~~~

交互过程 #

  1. 用户请求服务器资源
  2. 浏览器作为代理查找远程资源,封装用户请求并发送给服务器
  3. 服务器根据用户请求的资源路径及其它参数,进行业务处理把生成的结果发送给浏览器
  4. 浏览器解析结果并呈现给用户

具体步骤 #

  1. 把URL地址通过DNS解析为具体的服务器主机
  2. 浏览器封装HTTP请求 (window.navigator.userAgent)
  3. 浏览器创建与服务器的TCP连接
  4. 浏览器发出HTTP请求
  5. 服务器收到请求后交给相应的进程处理
  6. 服务器把处理后的结果发送给浏览器
  7. 浏览器生成渲染树和DOM树渲染页面
  8. 浏览器处理页面中嵌入的资源和异步请求

域名解析 #

  • 域名要比IP好记忆
  • 域名通过DNS(Domain Name System)转成IP地址

DNS解析 #

  1. 浏览器缓存
  2. 系统缓存
  3. 路由器缓存
  4. ISP(Internet Service Provider)DNS缓存
  5. 从顶级域名服务器的根域名服务器开始递递归查询

HTTP请求 #

request

GET / HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Host: www.google.cn
Connection: Keep-Alive

创建TCP连接 #

  • 浏览器和服务器之前传输协议用的是TCP协议,TCP协议比较可靠,所以响应是完整的
  • 浏览器封装的请求是HTTP报文
  • 页面如果加载内嵌资源失败会出现页面残缺不全的情况

请求的方式 #

  • GET 获取服务器上的资源
  • POST 增加服务器上的资源
  • DELETE 删除服务器上的资源
  • HEAD 只要响应头
  • OPTIONS 询问服务器支持的方法和请求头
  • PUT 更新服务器上的资源

服务器 #

  • 物理服务器 IBM Legend
  • 服务器程序 nginx apache resin

处理客户端请求的程序 #

每个进程会占用监听一个端口,请求这个端口就可以把请求发给相应的服务

  • HTTP 80 nginx apache resin
  • HTTPS 443 nginx node
  • FTP 21
  • SSH 22

服务器进行处理 #

  • 请求方法
  • 路径
  • query string
  • 请求头(cookie)
  • 请求体
  • 服务器配置
  • 业务逻辑

响应体 #

response

渲染页面 #

  • 浏览器下载的顺序是至上而下,渲染的顺序也是至上到下,下载和渲染同时进行
  • 解析HTML生成DOM树
  • 解析HTML中的CSS,生成渲染树
  • 解析Javascript,解析到的时候执行

DOM树和渲染树 #

DOM树和渲染树都是边解析边生成页面的,所以会随着下面的页面内容不断调整

内嵌资源处理 #

  • 在渲染到页面的某一部分时,上面的所有部分都已经下载完成
  • 图片和视频等元素需要另外下载
  • 同一个域名下并行下载数量有限制

JS和Ajax #

  • JS不能并行下载和解析,采用阻塞的方式,当页面引用了JS的时候浏览器发出请求会一直阻塞直到得到响应
  • 因为浏览器需要一个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其它 下载和呈现
  • 遇到ajax后执行,然后执行下面的步骤,直到ajax返回后再重新执行回调函数

CSS #

  • 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有的元素(包含以前渲染过的)重新渲染
  • JS和CSS如果有重定义,后定义的将覆盖之前定义不会报错

为何CSS放上面,JS放下面 #

  1. CSS放在下面会新渲染
  2. JS放在上面一方面会阻塞渲染执行,出现白页面,一方面得到的DOM树不完整

状态码 #

  • 200 OK
  • 301 Moved Permanently
  • 304 Not Modified
  • 403 Forbidden
  • 404 Not Found
  • 500 Internal Server Error
  • 502 Bad Gateway

~

状态码主要包括以下部分

1xx:指示信息–表示请求已接收,继续处理。

2xx:成功–表示请求已被成功接收、理解、接受。

3xx:重定向–要完成请求必须进行更进一步的操作。

4xx:客户端错误–请求有语法错误或请求无法实现。

5xx:服务器端错误–服务器未能实现合法的请求。

响应头主要由Cache-Control、 Connection、Date、Pragma等组成。

响应体为服务器返回给浏览器的信息,主要由HTML,css,js,图片文件组成。

扩展:

浏览器渲染呈现
         浏览器拿到响应的页面代码,将其解析呈现在用户面前,至于为什么会是看到的这个样子,有时又是另外的一些页面效果,这里就涉及到web标准了,也就是我们经常提到的w3c标准。根据资源的类型,在网页上呈现给用户,这个过程叫网页渲染。解析和呈现的过程主要由浏览器的渲染引擎实现,浏览器的渲染引擎质量就决定了浏览器的好坏(引擎这一块已经超出了我的理解范围了)。
W3c标准:
web标准不是某一个标准,而是一系列标准的集合。
        网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
        对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由万维网联盟(外语缩写:W3C)起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
HTML、XHTML、XML三者有什么区别?
        从名字上基本可以看出点端倪,HTML是超文本标记语言,XHTML是可扩展超文本标记语言,XHTML比HTML更加规范、严格。其实是用xml语意重新定义了html,XHTML是扮演者html角色的可扩展标记语言(就是XML)。XHTML是一个过渡技术,结合了XML的强大功能,及大多数html的基本特性。可以这么认为:XHTML=XML+HTML,XHTML被创造出来的目的是取代HTML,显然它并没有完成历史使命。
为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?
HTML5使用最新的HTML标准,它并没有使用SGML或者XHTML,但是你仍然需要使用<! DOCTYPE html>让浏览器识别这是HTML文档。
顺便带一下SGML
SGML(标准通用标记语言)是一个标准,告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言,HTML是被用SGML描述的标记语言。
因此利用SGML创建了HTML参照和必须共同遵守的DTD,你会经常在HTML页面的头部发现“DOCTYPE”属性,用来定义用于解析目标DTD;

大致内容如下:

  1. 输入地址
  2. 浏览器查找域名的 IP 地址
    这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存…
  3. 浏览器向 web 服务器发送一个 HTTP 请求
  4. 服务器的永久重定向响应(从 http://example.comhttp://www.example.com
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器返回一个 HTTP 响应
  8. 浏览器显示 HTML
  9. 浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSSJS等等)
  10. 浏览器发送异步请求

~~~

未经允许不得转载:WEB前端开发 » 从输入一个网址/URL回车后到页面呈现发生了什么

赞 (1)