减少DNS查询

第一部分 – 第15章

DNS

减少DNS查询的数量并启用keep-alive通常可以提升移动网站页面的加载速度。

DNS查询是什么

DNS（domain name system）查询可以将主机名映射到IP 地址中。例如：

  • 当用户在网络浏览器中输入m.example.com时， 网络浏览器便联系上一个DNS解析，这个DNS解析会返回服务器的IP地址。
  • DNS有一个缺点。对于网络浏览器为任意主机名查找IP地址，一个DNS查询可能消耗100-200毫秒。
  • 在DNS查询完成之前，网络浏览器将无法从该主机名处下载任何文件。
  • 响应时间取决于DNS解析器（一般由用户的网络服务商提供），其负载的请求量，用户与网站服务器的距离，以及带宽速度。

示例

例如，有一个网页，其URL为m.example.com/page-xyz.html。当加载这个页面时，相比较m.example.com，还需要从其他4个主机名处请求资源文件。

  • css.example.com
  • js.example.com
  • images.example.com
  • www.example-2.com 
<head>
<link rel="stylesheet" href="http://css.example.com/style.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2.css" />
<script src="http://js.example.com/script.js"></script>
<script src="http://www.example-2.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1.png"></div>
<div><img src="http://images.example.com/image-2.png"></div>
<div><img src="http://images.example.com/image-3.png"></div>
<div><img src="http://www.example-2.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

启用Keep-alive

当网络浏览器从同一个主机处请求多个资源文件时，Keep-alive是一个持续的连接，也是一个保持网站服务器与网络浏览器之间的连接处于活动状态的方法。

对于移动网站页面需要下载的任何资源文件，网络浏览器都必须对页面获取资源文件的每个域名至少查询一次。

当keep-alive对网络浏览器被禁用时，便要求进行如下的DNS查询。在这个例子中，由于keep-alive被禁用，请求8个资源文件需要进行8次DNS查询。

  • css.example.com (x 1 time)
  • js.example.com (x 1 time)
  • images.example.com (x 3 times)
  • www.example-2.com (x 3 times)

当keep-alive对网络浏览器被启用时，只需要更少的DNS查询。在这个例子中，由于keep-alive被启用，请求8个资源文件仅需要进行4次DNS查询。

  • css.example.com (x 1 time)
  • js.example.com (x 1 time)
  • images.example.com (x 1 time)
  • www.example-2.com (x 1 time)

启用keep-alive可以减少下载资源文件所需要的DNS的查询数量，并将提升页面的加载速度。

Keep-alive是网站服务器特性。根据你的移动网站选用的网站服务器，在Apache和Nginx上启用keep-alive需要设置不同的指令。

在Apache上启用Keep-alive

为了在Apache上启用keep-alive，需要添加如下代码到.htaccess文件。 

<ifModule mod_headers.c> 
Header set Connection keep-alive 
</ifModule>

在Nginx上启用Keep-alive

为了在Nginx上对所有网络浏览器启用keep-alive，使用HttpCoreModule并确保“keepalive_disable”指令被分配成none。例如： 

keepalive_disable none; # allow all web browsers to use keepalive

向更少的主机名请求

在之前m.example.com/page-xyz.html网页的示例中，使用了4个主机名来存储资源文件。

  • css.example.com
  • js.example.com
  • images.example.com
  • www.example-2.com

当keep-alive已打开时，你可以迁移所有的资源文件，使所有文件位于一个单一的主机名resources.example.com。这种设置将使DNS查询减少为1次。

如下是在变更为全部使用一个主机名存储资源文件后的网站页面代码。 

<head>
<link rel="stylesheet" href="http://resources.example.com/style.css" />
<link rel="stylesheet" href="http://resources.example.com/style2.css" />
<script src="http://resources.example.com/script.js"></script>
<script src="http://resources.example.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://resources.example.com/image-1.png"></div>
<div><img src="http://resources.example.com/image-2.png"></div>
<div><img src="http://resources.example.com/image-3.png"></div>
<div><img src="http://resources.example.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

示例

例如，移动网站页面（m.yhd.com）的加载要求2次DNS查询，每个都是从一个不同的主机名处查询。

DNS Lookups

  • 主机1: m.yhd.com
  • 主机2: image.yihaodian.com

在网络浏览器开始下载真正的资源文件之前，每个DNS查询都耗费了一定量的时间。

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Reduce DNS Lookups – 繁体中文版：减少DNS查询






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book