html – 使用图像的绝对与相对路径

前端之家收集整理的这篇文章主要介绍了html – 使用图像的绝对与相对路径前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一位同事刚刚问我是否有任何理由为什么提到相对路径的图像会妨碍网站速度.

虽然为了清洁,最好使用相对路径中较少的字符,但想知道使用绝对/完整路径是否存在其他减速/后果?我认为通过拥有完整路径可能会涉及DNS查找.

如果有其他后果,会有什么后果?

解决方法

使用绝对路径会强制Web服务器建立连接,发送和接收HTTP请求.如果使用relative,则已建立连接,因此不必经过该逻辑(因此增加页面加载速度).你可能不会看到惊人的差异,但保存的每一点都是好事,对吧?

编辑:经过快速测试后,差异极其微不足道,并且似乎没有为我的答案产生那么好的案例.我创建了一个具有相同图像的测试页两次,一个是相对的,一个是绝对路径http://damonbauer.me/test/index.html.

测试一:首先是HTML代码中的绝对路径:(点击查看大图)
http://damonbauer.me/test/images/results1.jpg

加载绝对路径图像需要869ms,而HTML代码中列出第二个的相对路径图像加载635ms.

测试二:首先在HTML代码中使用相对路径的图像:(点击查看大图)
http://damonbauer.me/test/images/results1.jpg

绝对路径图像加载时间为303毫秒,而HTML代码中首先列出的相对路径图像加载时间为315毫秒.

我的看法?使用相对加载速度更快.即使在绝对路径图像之后列出,相对图像加载也只需要12ms.当第二次加载绝对路径图像时,加载时间长达234ms.在这两种情况下,它们都很接近,而且我认为它更重要的是首先加载什么.无论哪种方式,如果只是为了便携性,我会和亲戚一起去.

原文链接:https://www.f2er.com/html/224941.html

猜你在找的HTML相关文章