根链接 (/) VS 绝对链接(例如 http://www.)
Root-linking (/) VS absolute-linking (eg. http://www.)
我目前正在我的网站上使用根链接,例如。 <a href="/">Home</a>
和 <a href="/contact">Contact</a>
。我喜欢这个,因为它使代码更简洁。
虽然我想知道使用这种方法是否有任何缺点,例如。如果它会降低页面速度或对 SEO 不利?
编辑:
我也想知道图像:
例如“http://www.domain.com/img/image1.jpg”是否会比“/img/image1.jpg”加载得更快?如果是,是否超过50毫秒?
我知道绝对链接很难维护,例如。 localhost 或者如果你想更改为 "https://"。但我还是想知道速度...
对SEO来说绝对不错。 GoogleBot 和浏览器会自动将域添加到 root-relative 链接。聪明到足以弄清楚这一点。
我很想知道是否有人做过页面加载测试来比较加载资产。我的猜测是差异可以忽略不计。
您可以使用开发人员工具 (Chrome) 中的 Timeline
选项卡来评估页面加载性能。
从技术角度来看,这没有什么区别。浏览器需要在发出任何 HTTP 请求之前构造一个绝对 URL。 Section 2.5 of the HTML5 specification 包含如何解析 URL 的精确说明,例如对于 href
属性。第四步相关:
If the algorithm was invoked with an absolute URL to use as the base URL, let base
be that absolute URL.
Otherwise, let base
be the element's base URL.
"element's base URL" 通常与文档的基础 URL 相同,除非您明确更改它。
这是唯一点URL的符号有所不同。参数 base
和 URL 将被传递给解析器,解析器然后根据这些值构造一个绝对值 URL。如果文档 URL 是 https://example.com/foo/bar.html
,那么解析 /Whosebug
和 https://example.com/Whosebug
将产生相同的 URL (https://example.com/Whosebug
).
解析URL后,浏览器通常会向服务器发出HTTP请求。这很可能不包括 DNS 请求,因为 DNS 缓存很可能包含该主机的条目。
HTTP 请求本身看起来也是一样的(主机名和路径分别传输)。
谈到性能,实际上没有区别。 (除非您考虑在 DOM 中找到基数 URL 所需的那几纳秒。)
这只是一个符号问题,写相对 URLs 通常更简单(相对于文档或相对于根目录),但是如果你做的不仅仅是静态的网站,您应该考虑在服务器上生成绝对 URLs。例如,用户可能决定不在根目录中使用您的应用程序,而是在子目录中,因此所有 root-relative URLs 都会中断。
这同样适用于 SEO,搜索引擎和爬虫构建绝对 URLs 与浏览器完全一样。
我目前正在我的网站上使用根链接,例如。 <a href="/">Home</a>
和 <a href="/contact">Contact</a>
。我喜欢这个,因为它使代码更简洁。
虽然我想知道使用这种方法是否有任何缺点,例如。如果它会降低页面速度或对 SEO 不利?
编辑:
我也想知道图像:
例如“http://www.domain.com/img/image1.jpg”是否会比“/img/image1.jpg”加载得更快?如果是,是否超过50毫秒?
我知道绝对链接很难维护,例如。 localhost 或者如果你想更改为 "https://"。但我还是想知道速度...
对SEO来说绝对不错。 GoogleBot 和浏览器会自动将域添加到 root-relative 链接。聪明到足以弄清楚这一点。
我很想知道是否有人做过页面加载测试来比较加载资产。我的猜测是差异可以忽略不计。
您可以使用开发人员工具 (Chrome) 中的 Timeline
选项卡来评估页面加载性能。
从技术角度来看,这没有什么区别。浏览器需要在发出任何 HTTP 请求之前构造一个绝对 URL。 Section 2.5 of the HTML5 specification 包含如何解析 URL 的精确说明,例如对于 href
属性。第四步相关:
If the algorithm was invoked with an absolute URL to use as the base URL, let
base
be that absolute URL.Otherwise, let
base
be the element's base URL.
"element's base URL" 通常与文档的基础 URL 相同,除非您明确更改它。
这是唯一点URL的符号有所不同。参数 base
和 URL 将被传递给解析器,解析器然后根据这些值构造一个绝对值 URL。如果文档 URL 是 https://example.com/foo/bar.html
,那么解析 /Whosebug
和 https://example.com/Whosebug
将产生相同的 URL (https://example.com/Whosebug
).
解析URL后,浏览器通常会向服务器发出HTTP请求。这很可能不包括 DNS 请求,因为 DNS 缓存很可能包含该主机的条目。
HTTP 请求本身看起来也是一样的(主机名和路径分别传输)。
谈到性能,实际上没有区别。 (除非您考虑在 DOM 中找到基数 URL 所需的那几纳秒。)
这只是一个符号问题,写相对 URLs 通常更简单(相对于文档或相对于根目录),但是如果你做的不仅仅是静态的网站,您应该考虑在服务器上生成绝对 URLs。例如,用户可能决定不在根目录中使用您的应用程序,而是在子目录中,因此所有 root-relative URLs 都会中断。
这同样适用于 SEO,搜索引擎和爬虫构建绝对 URLs 与浏览器完全一样。