[移动开发]我不知道的URL解析规则

当浏览器加载一个HTML文档后，遇到link、script、img等资源时，会向后台通过HTTP/HTTPS协议请求资源。由于资源的请求路径的书写方式不同，则真正向后台发送的完整的URL也是不同的。同时因为<base>标签的存在，也会导致解析出URL不同。本文主要描述URI与web中资源URL的解析规则。

一、URI

HTTP 请求的目标是资源，可以是文档、图片或其它的东西。每一种资源都是由资源标识符（Uniform Resource Identifier）定位的。

URI 的两种形式：

• URL（Uniform Resource Locator），统一资源定位符，用于 web 地址。
• URN（Uniform Resource Name），在特定命名空间中按名称标识资源。

1.1、URL

语法格式：

<scheme or protocol><user>:<passwdor>@<domain>:<port><path><query><fragment>

示例：

https://developer.mozilla.org/en-US/docs/Learn
tel:+1-816-555-1212
git@github.com:mdn/browser-compat-data.git
ftp://example.org/resource.txt
urn:isbn:9780141036144
mailto:help@supercyberhelpdesk.info

1.2.1 scheme or protocol

web 中常用的协议由http,https,此外当遇到其它协议时，浏览器也是知道如何处理的，比如mailto:,ftp:等。常见的方案如下：

Data URLs

语法：

data:[<mdiatype>][;base64,]<data>

mdiatype 支持多种MIME types

示例：在页面上展示一个 svg 图片

<img
  src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogIDxwYXRoIGQ9Ik01MTEuMzMgNTEyLjU3bS00NDguNDcgMGE0NDguNDcgNDQ4LjQ3IDAgMSAwIDg5Ni45NCAwIDQ0OC40NyA0NDguNDcgMCAxIDAtODk2Ljk0IDBaIiBmaWxsPSIjRjk3RjQxIj48L3BhdGg+Cjwvc3ZnPg=="
  alt=""
  srcset=""
/>

主机上的文件名

语法:

file:<文件的绝对路径>

通畅直接打开计算机上的静态文件时，使用的是file:协议。

文件传输协议-FTP (File Transfer Protocol)

语法:

ftp:<username>@<ip>
加密版本
sftp:<username>@<ip>

因为安全问题，通常使用加密版本sftp

超文本传输协议-http、https

http 协议、https 协议

内嵌的 javascript 代码

示例：

<a href="javascript:alert(123)">alert</a>

邮件

语法：

mailto:<邮箱地址>

示例：

<a href="mailto:example@163.com">mail to</a>

ssh

连接到服务器

语法：

ssh:<username>@<ip>

示例：

<a href="ssh:root@192.168.1.2">ssh</a>

电话号码

语法：

tel:+<号码>

示例：

<a href="tel:+1-816-555-1212">tel</a>

查看源码

语法：

view-source:<url>

示例：

view-source:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#urls

The WebSocket API (WebSockets)

双工流通信协议

示例：

'ws://localhost:8080'

1.2.2 path

资源的路径，示例/a/b/c/index.html

1.2.3 query

查询参数，示例?key1=value1&key2=value2

1.2.4 fragment

常当作锚点，用于定位当前文档中的资源。

二、base 标签

HTML 文档中的<base>标签，会影响到相对资源请求路径的计算。

可以通过 Node/baseURI查看文档的baseURL,当<base>标签不存在时，baseURL的值为location.href.

一个文档中若出现多个<base>标签，则仅第一个生效.

baseURL 的值受location.href和<base>标签影响，计算规则如下：

三、资源的 URL 计算方式

当资源的path书写方式不同时，最终 URL 也是不同的。path的三种场景:

• 完整的 URL。http://a.com/1.png
• 相对路径. ./1.png
• 绝对路径 /1.png

解析规则如下：