如何最大化的减少延迟带来的性能影响

此处输入图片的描述

至少在过去的 HTTP 1.x 时代,网页性能优化的关键大部分的因素并不在于高带宽,而是低延迟(Low latency)。而如何去优化延迟,就显得格外重要。

如果把时间开销分为两部分,那么一部分和带宽成反比,而一部分和延迟成正比。很多时候人会想当然地以为带宽一定是瓶颈。其实不然,而绝大多数用户基本上只有在等待下载大文件时才对时间开销有感觉,而这时候瓶颈必然是带宽。但实际上如果你做一些分析(profiling)的话,你才能知道你手头上的问题瓶颈在带宽还是延迟。
关于 HTTP 请求的瓶颈分析,这里就不谈太多了,具体推荐参考这篇HTTP 请求的 TCP 瓶颈分析,文笔不错、思路也是清晰透彻,实乃分析之典范。如果你会用 Chrome 的来分析 Network 的话,你就会发现小文件如 JS/CSS 的瓶颈其实在延迟。

##问题是如何最大化的减少延迟带来的影响?

  • DNS 缓存
  • DNS 预获取(DNS-Prefectch)

DNS prefetching is an attempt to resolve domain names before a user
tries to follow a link. This is done using the computer’s normal DNS
resolution mechanism; no connection to Google is used. Once a domain
name has been resolved, if the user does navigate to that domain,
there will be no effective delay due to DNS resolution time. The most
obvious example where DNS prefetching can help is when a user is
looking at a page with many links to various domains, such as a search
results page.
— From The Chromium Projects

DNS 预缓存需要浏览器的支持,而大部分现代浏览器都已提供对 DNS 预缓存的支持

此处输入图片的描述
(图片来源: Can I Use)

你可以通过在 HTML 文档的

标签中加入如下代码来使用 DNS 预缓存:

<link rel="dns-prefetch" href="//www.domain1.com">
<link rel="dns-prefetch" href="//www.domain2.com">

通过如下代码来关闭 DNS 预缓存:

<meta http-equiv="x-dns-prefetch-control" content="off">

A “meta http-equiv” tag of the same name can be used to make policy
changes within a page

不得不说, 通过利用 DNS 缓存以及预获取对于一些拥有大量资源域名的站点来说能够有效的降低延迟。
对于经常把玩 Chrome 的人来说,对 chrome://chrome-urls/ 相信都不会陌生。谈到 net-internalsflagsdns 则更是耳熟能详。
你可以通过 chrome://dns/中查看浏览器 prefetch DNS 的相关内容。

To be continued……

无「民事行为能力」人慎点