阅读 122

【浏览器 URL】发生什么,有什么用

参考

1. URL输入

1.1 ctrl + e(或 ctrl + k) Chrome浏览器进入搜索

image.png

更多快捷键,如ctrl + enter可以自动补齐www..com

1.2 自动补全与候选栏

  • 匹配到网址就会自动补全(不可关闭,除非删除历史与关闭同步)
  • 匹配到搜索引擎地址就可以tab切换搜索引擎(出现tab切换提示时,输完整但没显示也不行)
  • ctrl e会进入搜索模式,输入是完整网址也会搜索
  • 候选栏中会匹配已经打开的窗口

image.png

1.3 判断搜索还是地址

输入时就已经判断,地址会有蓝色标记

2. DNS解析

输入地址(URL,Uniform Resource Locator)会进行DNS解析成IP,地址给人看,IP给机械看。

image.png

2.1 浏览器缓存

chrome chrome://net-internals/#dns,从这里可以清除浏览器dns缓存

2.2 系统hosts

  • windows位置: C:\Windows\System32\drivers\etc (系统把文件放这,就是让你去改的)
  • 不只是浏览器,其它软件使用这个
  • 以前DNS服务器反应慢,自己把服务器地址存进去,就可以直接访问了。现在已经用不着了,倒是用来搞其它的事情了。

2.3 路由器缓存

  • 都说有路由器缓存,但搜遍网络,并没有细说路由器关于dns缓存的。
  • 《计算机网络:自顶向下方法 7th》只提到本地服务器有DNS缓存。
  • 《计算机网络 谢希仁》提到域名服务器有高速缓存
  • 而路由器缓存更相近的是MAC表缓存,其余的就是写硬件信息了

2.4 本地服务器缓存

ISP cache 即是本地信息服务提供商的DNS缓存,缓存时间一般是1个小时

2.5 ISP发起查询:根、顶级、权威

一般只提供到二级域名,三级域名就在域名购买平台那配置

前端开发的你应该知道的浏览器知识提到,还需要获取端口号。但默认访问80、443端口号,可能有特殊环境吧。

image.png

3. TCP连接

3.1 服务端通过socket,bind和listen准备好接受外来的连接,此时服务端状态为Listen

image.png

3.2 TCP三次握手

image.png

  • SYN(synchronize)同步、ACK(acknowledge)告知已收到 、seq(sequence)序列号

image.png

3.3 SSL握手

image.png

  1. 客户发送它支持的密码算法的列表,连 一个客户的不重数。
  2. 从该列表中,服务器选择一种对称算法(例如 AES)、一种公钥算法(例如具有特定密钥长度的 RSA)和一种MAC算法 它把它的选择以及证书和一个服务器不重数返回给客户。
  3. 客户验证该证书,提取服务器的公钥,生成一个前主密钥 (Pre-Master Secret,PMS), 用服务器的公钥加密该 PMS, 并将加密的 PMS 发送给服务器。
  4. 使用相同的密钥导出函数(就像 SSL 标准定义的那样),客户和服务器独立地从 PMS 和不重数中计算出主密钥 (Master Secret, MS) 然后该 MS 被切片以生成两个密码和两个 MAC 密钥 此外,当选择的对称密码应用于 CBC (例如 3DES 或 AES), 则两个初始化向量(Initialization Vector, IV) 也从该 MS 获得,这两个 IV 分别用于该连接的两端。自此以后,客户和服务器之间发送的所有报文均被加密和鉴别(使用 MAC)。

4. HTTP请求

如果浏览器是 Google 出品的,它不会使用 HTTP 协议来获取页面信息,而是会与服务器端发送请求,商讨使用 SPDY 协议。

2015年9月,Google 宣布了计划,移除对SPDY的支持。HTTP/2标准于2015年5月以RFC 7540正式发表,HTTP/2的关键功能主要来自SPDY技术。多数主流浏览器已经在2015年底支持了该协议。

4.1 tcp建立后,立马就会发送一个get请求。

image.png

image.png (TTFP,Time To First Byte 耗时最长)

4.2 后续请求是根据第一个请求返回的html文件

大多数资源直接返回浏览器缓存。 image.png

5. 页面渲染

5.0 预加载扫描器

浏览器构建DOM树过程占用了主线程,预加载扫描仪将解析可用的内容并请求高优先级资源,如CSS、JavaScript和web字体,而不必等解析到资源时去请求。

  • JavaScript解析和执行顺序不重要时,可以添加async属性或defer属性

5.1 HTML渲染(DOM)

根据Content-Type: text/html; charset=UTF-8指定文本格式解析为DOM(Document Object Model)树(node组成的树状结构 tree-like structure of node objects),

image.png

  • 当遇到一个CSS文件时,解析也可以继续进行
  • <script>标签(特别是没有 async 或者 defer 属性)会阻塞渲染并停止HTML的解析

5.2 CSS渲染(CSSOM)

DOM构建完之后,浏览器读取所有css代码(外链、内嵌、行内、用户代理(浏览器)等),构建类似DOM的CSSOM(CSS Object Model)树。

  • CSSOM不包括DOM中的元信息等不显示的节点
  • CSS选择器的读取顺序是从右向左

5.3 渲染树(Render Tree)

DOM + CSSOM 再过滤一些不渲染的节点(display: none,或者 width: 0; height: 0;等等),就得到了渲染树。

image.png

  • visibility:hidden 或 opacity:0 依旧会出现在渲染树中

5.4 渲染图像序列(Rendering Sequence)

布局(Layout operation)

计算每个元素大小与位置。

回流(reflow or browser reflow)

当页面滚动、浏览器窗口调整、或是操作DOM就会触发回流,导致重新计算布局。

绘制(Paint operation)

元素布局的多样性,绘制会分层进行。每一层元素的填色称为光栅化(rasterization),每层分别使用一个线程(thread)。

  • Chrome开发工具中更多工具有个图层工具

image.png

  • 将内容提升到GPU上的层(而不是CPU上的主线程)可以提高绘制和重新绘制性能。
  • 有一些特定的属性和元素可以实例化一个层,包括和,任何CSS属性为opacity、3D转换、will-change的元素,还有一些其他元素。
  • 层确实可以提高性能,但是它以内存管理为代价,因此不应作为web性能优化策略的一部分过度使用。

合成(Compositing operation)

将不同的层合成。

  • 不是所有都会重新绘制与合成

image.png

浏览器还构建辅助设备用于分析和解释内容的辅助功能可访问性树(AOM Accessibility Object Model),类似于DOM的语义版本。屏幕阅读器(screen readers)无法访问内容。

文章分类
前端
文章标签