从浏览器地址栏输入 url 到显示页面的步骤(以 HTTP 为例)
1.在浏览器地址栏输入 URL。
2.浏览器解析URL获取协议,主机,端口,请求资源的路径。地址栏会判断输入的关键字是搜索内容还是请求的 URL。如果输入的 URL 中的协议或者主机名不合法,将会把地址栏中输入的内容传递给搜索引擎。如果没有问题,浏览器会检查 URL 中是否出现了非法字符,如果存在非法字符,则对非法字符进行转义。
2.1 为什么url要解析(也就是编码)?
答:因为网络标准规定了URL只能是字母和数字,还有一些其它特殊符号(-_.~ ! * ' ( ) ; : @ & = + $ , / ? # [ ],比较常见的就是不包括百分号和双引号),而且如果不转义会出现歧义,比如http:www.baidu.com?key=value, 假如我的key本身就包括等于=符号,比如ke=y=value,就会出现歧义,你不知道=到底是连接key和value的符号,还是说本身key里面就有=。
问:url编码的规则?
答:不同的操作系统、不同的浏览器、不同的网页字符集,将导致完全不同的编码结果。
情况1:网址路径中包含汉字(http://zh.wikipedia.org/wiki/春节)
"春"和"节"的utf-8编码分别是"E6 98 A5"和"E8 8A 82",IE上发现实际查询的网址是"http://zh.wikipedia.org/wiki/%E6%98%A5%E8%8A%82" ,即按照顺序,在每个字节前加上%。
情况2:查询字符串包含汉字。
查询字符串的编码,用的是操作系统的默认编码。"春节"被转成了GB2312编码"B4 BA BD DA"。IE上发现实际查询的网址是"http://zh.wikipedia.org/wiki/B4 BA BD DA",Firefox是"%B4%BA%BD%DA",采用的也是GB2312编码,但是在每个字节前加上了%。
情况3:Get方法生成的URL包含汉字。
GET和POST方法的编码,用的是网页的编码。
情况四:Ajax调用的URL包含汉字。
在Ajax调用中,IE总是采用GB2312编码(操作系统的默认编码),而Firefox总是采用utf-8编码。
2.2 解决不同URL编码规则的方法?或者encodeURI、encodeURIComponent、escape的不同(②p93)
答:使用Javascript先对URL编码,然后再向服务器提交。
encodeURI 是对整个 URI 进行转义,将 URI 中的非法字符转换为合法字符,所以对于一些在 URI 中有特殊意义的字符不会进行转义。
encodeURIComponent 是对 URI 的组成部分进行转义,所以一些特殊字符也会得到转义比如分隔URI组件的标点符号:;/?@&=+$,#
escape 和 encodeURI 的作用相同,不过它们对于 unicode 编码为 0xff 之外字符的时候会有区别,escape 是直接在字符的 unicode 编码前加上 %u,而 encodeURI 首先会将字符转换为 UTF-8 的格式,再在每个字节前加上 %。
3.浏览器会判断所请求的资源是否在缓存里,如果请求的资源在缓存里并且没有失效,那么就直接使用,否则向服务器发起新的请求。(浏览器的强缓存策略)
4.浏览器DNS解析获取目的主机ip地址,过程包括:
我们向本地DNS服务器的**递归查询**(命中,则返回目的主机IP,否者递归查询)
浏览器缓存 => 本地系统缓存(系统hosts文件是否有记录(注:此地被黑客入侵,称域名劫持)) => 路由器缓存 => ISP(互联网服务提供商(internet service provider))的DNS 缓存。
本地DNS服务器向其他域名服务器的**迭代查询**(可能存在负载均衡导致每次 IP 不一样)
向"根域名服务器"发起请求,"根域名服务器"返回"顶级域名服务器"的 IP 地址列表。
向其中一个"顶级域名服务器"发起请求,"顶级域名服务器"返回"次级域名服务器"的IP 地址列表。
向其中一个"次级域名服务器"发起请求,"次级域名服务器"返回对应"主机名"的 IP 地址列表。
5.ARP地址解析获得目的主机MAC地址。
6.浏览器组装一个 HTTP请求报文。
7.TCP建立连接的三次握手过程。 如果使用的是 HTTPS 协议,在通信前还存在 TLS 的四次握手过程。
8.TCP连接建立后发送 HTTP 请求。依次经过应用层(Http)、传输层(TCP三次握手连接)、网络层(IP、ARP协议)、数据链路层(网络),到达服务器。
9.服务器处理请求,首先检查HTTP请求头是否包含缓存验证信息,如果请求资源在缓存中并且足够新鲜,返回304等对应状态码HTTP 响应报文不包含资源。否则,处理完整请求后返回的 HTTP 响应报文包含了资源。
10.浏览器接收 HTTP 响应并检查响应状态码:是否为304,304直接使用资源。(浏览器的协商缓存策略)
11.如果是200且资源可缓存,则浏览器进行缓存。
12.随后进行浏览器渲染。
(1)构建DOM树(DOM tree):首先解析收到的文档,根据文档定义,从上到下解析HTML文档,构建 DOM 树,DOM 树是由 DOM 元素及属性节点组成的。
(2)构建CSSOM(CSS Object Model)树:加载解析CSS样式表,生成 CSSOM 规则树。
(3)解析过程中遇到图片、样式表、js 文件,启动下载。
(4)构建渲染树(render tree):根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象,渲染对象是一个包含有颜色和大小等视觉属性的矩形,渲染对象和 DOM 元素相对应,但这种对应关系不是一对一的,不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象,它们一般是一些具有复杂结构的元素,无法用一个矩形来描述。
(5)布局(layout):当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
(6)绘制(painting):遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上,使用 UI 基础组件绘制。
13.TCP断开连接的四次挥手过程。