HTTP学习关于 URL 中协议的省略

Posted 2020-12-13 kunmomo

Google html/CSS 代码风格指南，里面有很多值得借鉴的地方

其中第一条说道，HTML 和 CSS 代码中引用的图片、媒体、CSS 和 JS 文件中的 URL 都可以去掉协议部分（http: 和 https:），比如

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>

<script src="https://www.google-analytics.com/ga.js" type="text/javascript"></script>

都可以换成：

<script src="//www.google-analytics.com/ga.js" type="text/javascript"></script>

只要是使用 http、https 这两种协议都可以省略。原因是可以节省一点文件体积（当然只是那么一点点），另外一个原因 Google 说是可以解决混合内容的问题。起初我对这个第二点不是很了解，所以特意搜索了下。最后从 Paul Irish 的一篇文章找到答案，链接在文后。文章是两三年前写的，老外研究问题总是比我们要早啊。

以 // 开头的叫做相对URL（protocol-relative URL），相关的标准可以看 RFC 3986 Section 4.2，内容不是一般的长估计大家也没耐心去看吧。总之浏览器遇到相对 URL，则会根据当前的网页协议，自动在 // 前面加上相同的协议。如当前网页是 http 访问，那么所有的相对引用 // 都会变成http://。https 同理。如果你在本地查看，协议就会变成 file://。

所以，如果省略协议，就需要保证引用的外部资源也采用和网页相同的协议，或者保证资源可以同时通过 http 和 https 访问。经过 StackOverflow 网友测试，这种用法几乎所有的浏览器都能支持，只有在 IE7/8 下会有一点小问题，就是通过相对 URL 引用的 CSS 文件（无论 <link> 或 @import）会被下载两遍。所以对性能有一点影响。

至于 Google 提到的混合内容问题，其实是指IE有时会弹出的一个警告框：

这个框想必大家也都见过。通常是在浏览 https 网页的时候出现，原因是网页里引用了 http 协议的外部资源，由于 http 被认为是不安全的，IE 才会给出提示。如果引用的时候写成相对 URL，浏览器就会自动采用 https 协议下载，这样就解决了问题。

所以，我们平时写代码还是可以放心使用相对 URL 的，写博客的大概很少开 https，当然做项目的就例外了。如果你引用的资源里有 https 协议的就特别处理一下，或者只要 http 也能访问到资源就可以。我看了下国内的站点这么用的还不多，有一次看到百度音乐这么用过。不过 Google 很多站点都已经是这样的写法了。

转自：关于 URL 中协议的省略