说明使用前连接和DNS-prefetch资源提示的使用。
预处理和DNS-prefetch是Web开发人员用来优化其网站加载速度的两种类型的资源提示。这些提示为浏览器提供了有关如何处理与外部资源的连接的说明,从而减少了延迟并改善用户体验。
-
预连接:
preconnect
提示指示浏览器尽早启动与特定原点的连接。这包括DNS分辨率,TCP握手以及可选的TLS谈判。通过提前启动这些步骤,在时间到来时,可以更快地从该来源提出资源的实际请求。前连接对于很快需要的重要资源特别有用,例如连接到第三方API或CDN。 - dns-prefetch:
dns-prefetch
提示告诉浏览器预先对指定域执行DNS分辨率。 DNS分辨率是将域名转换为IP地址的过程,这可能需要一些时间。通过较早解决DNS,随着IP地址已经知道,稍后从该域中获取资源所需的时间就会减少。
这两个提示均使用HTML <link>
标签实现, rel
属性分别设置为“前连接”或“ DNS-Prefetch”,并将href
属性设置为目标域。
使用前连接和DNS-prefetch有哪些性能好处?
使用前连接和DNS-prefetch资源提示提供了几种性能好处:
- 延迟减少:通过启动DNS解决方案,TCP握手和TLS协商,以前连续连接或仅通过DNS-Prefetch进行DNS解决方案,建立联系和Fetch资源所花费的时间大大减少。这可能会导致页面加载时间更快,尤其是对于拥有许多外部资源的网站。
- 改进的用户体验:加载时间更快意味着用户的等待时间较小,这可能会导致跳出率较低和参与度更高。内容的无缝负载对于保持用户的兴趣和满意度至关重要。
- 有效的资源加载:前连接有助于更快地加载关键资源,以确保在请求资源时已经建立连接。 DNS-Prefetch确保浏览器知道要去哪里获取其他资源,从而减少了初始等待时间。
- 更好的移动性能:由于网络连接较慢,移动设备通常具有较高的延迟。预处理和DNS-prefetch可以通过较早开始连接过程来帮助减轻这种情况,从而在移动设备上的性能有明显的影响。
前连接和DNS-prefetch的功能有何不同?
虽然预处理和DNS-prefetch均旨在优化外部资源的负载,但它们的范围和功能不同:
-
操作范围:
- 预连接:超越DNS的分辨率,包括启动TCP握手,如果资源为HTTPS,则TLS谈判。当您知道需要资源并希望准备好连接时,就会使用此提示。
- dns-prefetch:仅执行DNS分辨率。这对于暗示您可能需要资源的域很有用,但是您不确定何时或是否要求它们。这不如前固定连接侵略性,并且需要更少的网络开销。
-
用法方案:
- 预连接:绝对需要的关键资源的理想选择,例如CDN的图像或第三方服务的脚本。
- DNS-prefetch:最适合在页面加载过程中可能需要的域,例如指向外部页面的链接或可能在用户交互中加载的资源。
-
网络开销:
- 预连续连接:具有较高的网络开销,因为它在连接过程中遵循了更多步骤。应明智地使用它以避免不必要的联系。
- DNS-Prefetch:由于仅解决DNS,因此网络开销较低。它可以更自由地用于可能需要的域。
可以将前连接和DNS合并用于优化网站加载时间吗?
是的,可以将前连接和DNS-Prefetch一起使用,以进一步优化网站加载时间。结合使用它们来利用每种方法的优势:
- 战略用途:使用前连接进行关键资源,这些资源肯定会很快需要,而DNS-Prefetch以减少关键或有条件的资源。例如,在使用DNS-prefetch进行次级或后备域时,您可以预先连接到主CDN。
- 分层优化:从您预计需要的域的DNS-prefetch开始,然后在实际需要资源时更接近前连接。这种分层方法可以通过DNS分辨率提早开始,然后进行更彻底的连接准备,从而节省时间。
- 平衡资源使用情况:虽然预连接可以大大加快资源加载,但它的开销比DNS-Prefetch更具开销。在适当的情况下,通过使用DNS-Prefetch,您可以平衡资源使用量,同时仍然获得一些绩效好处。
-
示例实现:您可以在HTML中实现这两个:
<code class="html"> <!-- Preconnect for critical resources --> <link rel="preconnect" href="https://cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <!-- DNS-Prefetch for potential resources --> <link rel="dns-prefetch" href="https://secondarycdn.example.com"> <link rel="dns-prefetch" href="https://fallbackapi.example.com"> </code>
通过结合前连接和DNS-Prefetch,开发人员可以创建更有效的加载策略,以满足某些和潜在的资源需求,最终改善其网站的性能和用户体验。
以上是说明使用前连接和DNS-prefetch资源提示的使用。的详细内容。更多信息请关注PHP中文网其他相关文章!

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载
最流行的的开源编辑器

Dreamweaver Mac版
视觉化网页开发工具

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。