浏览器解析url过程

ggbond
140 阅读7分钟

Brief

减短来说：url解析-》dns查询=》tcp握手=》发送http请求=》接收响应=》页面渲染 ​

  1. 输入地址
  2. 浏览器查找域名的ip地址（DNS查询：包括浏览器搜索自身的DNS缓存、搜索操作系统的DNS缓存，读取本地HOST文件和向本地DNS服务器进行查询等）
  3. 浏览器获得域名对应的ip地址后，向ip服务器请求建立连接，发起三次握手
  4. TCP/IP链接建立后，浏览器向服务器发送http请求
  5. 服务器的永久重定向相应（301，2）
  6. 浏览器跟踪重定向地址
  7. 服务器处理请求
  8. 服务器返回http响应
  9. 页面渲染
  10. 解析html，形成dom树；
  11. 解析css，形成css规则树；
  12. 合并 DOM 树和 CSS 规则，生成 render 树；
  13. 布局render 树（ Layout / reflow ），负责各元素尺寸、位置的计算；
  14. (绘制阶段)浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上# Detail

DNS->IP

这个映射的来源很多，但是第一次过后都会进行缓存，以备下一次使用，DNS也就是Domain Name System，域名系统，属于映射的分布式数据库。 DNS的查询可以分为迭代查询和递归查询，太细了，不管，这个以后学学。

得到IP的三次握手

得到ip后，浏览器随机端口向服务器web程序(httpd，nginx)80(443)端口发起TCP链接请求。请求到服务器端后（中间会经过各种路由设备，网关等），进入网卡，然后进入内核的TCP/IP协议栈（用于识别链接请求，解封包，一层层剥开），可能还要经过netfilter防火墙(内核的一个模块)的过滤，最终达到web程序，最终建立TCP/IP连接(https的情况下还需要建立TLS链接)，握手细节看这里

TCP/IP建立后，浏览器向服务器发送http请求

http请求一般就包括那几种，需要注意的是head和trace方式，更多报文内容在这里

服务器永久重定向

有益于seo

301，302区别

都是重定向，但是301表示旧地址A资源永久移除了，搜索引擎抓取内容的时候也会把旧网址替换为新网址，302则没有，所以301SEO更好。

浏览器跟踪重定向地址，发送另一个http请求

服务器处理请求

处理TCP报文，解析http协议，按照报文格式进一步封装成http request对象，供上层使用。一般大型项目都是部署在多台机器，用户访问nginx代理服务器，再均衡负载到其他机器。

服务器返回http response对象

和http请求对象类似，由：

  • 状态行
  • 响应头
  • 响应正文## 浏览器渲染 解析 html 以构建 dom 树（同时解析 CSS 构建 style Rules） -> 构建render 树(2016删除) -> 布局 render 树 -> 构建图层树 -> 绘制渲染 image.png

​

优化空间

DNS查询优化，适当减少域名个数

TCP链接优化

对握手耗时进行优化，有以下因素：

  1. 数据往返延迟：受地理位置影响，所以需要CDN，尽量请求最近的服务器（可能在DNS解析阶段就完成了）

  2. 证书链：是服务器向客户端发送的证书内的信息，由站点证书，中间征税颁发机构的证书耗时的原因也就是：

  3. TCP慢启动：由于他需要避免拥堵，TCP连接初始只发送较少的分组，然后等待客户端确认，然后翻倍，经过几次往返直至阈值，所以TCP慢启动；由于此，它和TLS/SSL握手数据一般位于TCP连接慢启动阶段的关系。证书数据过多会超过TCP连接初始值，会造成数据往返次数的成倍增加。

  4. 证书链验证过长：要递归链条中每个节点至根证书，也会增加握手时间解决方法：

  5. 减少中间证书颁发机构数据量

  6. 不要添加根证书信息，浏览器内置信任名单中有根证书

  7. 握手次数：前两点优化都是针对握手时间的优化，握手次数的优化也行的，如3-》2

  8. 初始拥堵窗口：适当增大初始窗口大小，减少往返次数## 获取页面优化：避免重定向

解析渲染页面优化：

浏览器现在多用http1.1和2，底层都是使用tcp进行数据创术，由于tcp握手耗时，合同ssl/tls更耗时， 减少方案：

  1. 复用：针对1.1最好的方法就是启用长链接：1.1提供了默认开启长连接功能，相对于短连接来说，同一个客户端socket针对同一socket（域名+后续）后续请求都会复用一个TCP连接进行传输，直到关闭这个TCP连接
  2. 加速：针对ssl/tls握手有会话恢复机制，验证通过后，可以直接使用之前的对话秘钥，减少握手往返## 加载优化

加载前

  1. 增加带宽
  2. 智能DNS解析：根据客户端ip地址将域名解析为最近的服务器ip地址
  3. CDN：使用某种分析方式根据节点服务器的地址位置、负载情况、资源匹配情况从遍布各地的节点服务器找到最合适的静态资源服务器
  4. 负载均衡：DNS负载均衡，IP负载均衡（nginx）
  5. 结合几种技术，比如CDN会用到DNS智能解析和负载均衡等
  6. 其中使用了跳转重定向方式的会重新进行DNS解析和握手，其中一部分优化实际是在域名的DNS解析部分完成的### 开始加载

http1.1

  1. 减少页面中需要发起的请求总数，如雪碧图，代码合并，图片转为base64等

  2. 切割拆分数据，让首屏数据优先加载

  3. 增加：增加资源的分布域名，也就是多服务器，部署在不同域名，突破浏览器并行连接限制#### http2

  4. GZip：嗯，减70%体积，用nginx就行

  5. 减少或者舍弃cookie

  6. 首部压缩：http2提供了首部压缩功能，即通过双方共有的一些字段，将首部信息(状态行、请求/响应头)映射为更剪短的数据

  7. 图片：就优化图片，s

  8. 合理缓存## 页面解析渲染优化 有一些问题：

资源下载：

  1. css下载会阻塞渲染

  2. 遇到script标签时，dom构建会停止，此时线程会交给js，直至js（下载）执行完毕，此时浏览器有优化一般会下载其他资源，但是不会解析。如果js中对CSSOM的操作，还会先确保CSSOM已经被下载并构建### 重绘重排：

  3. 重排（回流）：会重新计算布局，通常由元素结构，增删，位置，尺寸变化引起

  4. 重绘：颜色变化，简单外观变化

  5. 重排一定重绘### 优化

dom

  1. 简化dom结构#### js

  2. js放在body底部，减少对其他过程阻塞

  3. 延迟执行：不重要scrit使用defer，不阻塞

  4. 减少和合并不必要的dom相关操作，如DocumentFragment、修改classname而不是各项style等，减少重绘和重排#### css

  5. css放head，提前加载，方式html渲染后css再来闪烁

  6. 减少css层级和复杂度，提高解析速度

  7. 使用更好的css样式，如flex

  8. 开启复合层

  9. 合理合理文档流，减少对外部重排影响#### 文件数量：突出一个合理

其他优化：

  1. pwa
  2. 缓存
  3. 骨盆架，占位图
  4. 预渲染（如chrome，你输入url，下面的联想，chrome已经帮你请求了）
  5. 优化资源加载顺序
avatar
文章
阅读
粉丝