菜单

Web性能优化系列 – 通过提前获取DNS来提升网页加载速度

2019年3月5日 - 计算机教程

关于作者:刘健超-J.c

图片 1

前端,在路上…http://jchehe.github.io
个人主页
·
我的文章
·
19
·
    

图片 2

加速网站访问的最佳实践

卓越的绩效团队已经确定了一些使网页快速的最佳做法。该清单包括分为7个类别的35个最佳做法。


Web性能优化系列 – 通过提前获取DNS来提升网页加载速度

2015/04/23 · HTML5 ·
DNS,
性能优化

本文由 伯乐在线
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁止转载!
英文出处:www.deanhume.com。欢迎加入翻译组

我时常寻找方法改善网站性能,为的就是能提供更佳的用户体验。也许你经常会发现你的网站运行高效且性能优异。你也可能曾让你的应用程序在Google
PageSpeed
Yahoo!
YSlow
进行测试,并得到高分。然而,有一样东西一直影响页面加载时间。它在一个页面上,花费很多时间去查找不同组件的DNS。例如,下面这幅图片展示了我的博客首页所需资源的加载瀑布图。

图片 3

请注意条形图的灰蓝色部分,它出现在瀑布图中的大部分组件前。这灰蓝色代表下载资源前查找DNS所需时间。这竟然占了组件下载时间的很大部分!即使组件进行了优化,并已经最小化/合并/压缩处理,你仍然需要等待查找DNS时间。我利用webpagetest.org做了一个关于该网站DNS查找时间的表格。

图片 4

从上图可看到,DNS查找时间都很高,
如果能减少该时间并提速,便会让资源加载变得更加高效。幸运的是,有个很棒的技巧能让网站的加载时间变得更快。它被称为DNS预取,并且很容易实现。你所需做的是,在网页顶部添加以下属性作为链接(link)。

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

DNS预取是在用户尝试点击链接前试图解析域名。一旦域名被解析,且用户导航到该域名,则不会因DNS查找而导致加载时间变长。在这个博客主页里,有很多跳转到不同帖子的链接。如果能在用户导航到下一个页面前,预取一些外部链接的DNS,这将会大大减少下一个页面的DNS查找时间。根据Chromium
documentation
所说,如果用户能将域名解析成IP地址并且缓存之,则DNS查找时间能低至0-1毫秒(千分之一秒)。这是相当令人印象深刻的!

我在网站添加DNS预取功能后,确实能显著改善页面加载时间。目前,这项技术被大多数主流浏览器所支持(除了IE),所以,当前没有任何理由不在你的web应用上使用这项技术!DNS预取是一个安全的HTML5特性,它会被那些不支持该技术的老旧浏览器简单忽略掉。如果你的网页内容是来自多个域名,那么这绝对是一个聪明的,能加快页面加载速度的方法。

打赏支持我翻译更多好文章,谢谢!


打赏译者

Content

  1. 最小化 HTTP 请求
    最终用户响应时间的80%用于前端。大部分时间都是下载页面中的所有组件:图像,样式表,脚本,Flash等。减少组件数量又减少了呈现页面所需的HTTP请求数量。这是更快页面的关键。

减少页面中组件数量的一种方法是简化页面的设计。但是,有没有办法构建更丰富内容的页面,同时也能实现快速的响应时间?以下是减少HTTP请求数量的一些技术,同时仍然支持丰富的页面设计。

组合文件
是通过将所有脚本组合到单个脚本中以及将所有CSS组合到单个样式表中的方式来减少HTTP请求的数量。当脚本和样式表从页到页不同时,组合文件更具挑战性,但使这部分版本过程能够改善响应时间。

CSS
Sprites
是减少图像请求数量的首选方法。将您的背景图像合并为一个图像,并使用CSS
background-imagebackground-position 属性来显示所需的图像段。

图像映像将多个图像组合成单个图像。总体大小大致相同,但减少HTTP请求数量会加快页面速度。如果图像在页面中是连续的,则图像映射只能工作,例如导航栏。定义图像映射的坐标可能很繁琐,容易出错。

使用导航图像映射也不可访问,因此不推荐使用。
内联图像
使用data:URL方案将图像数据嵌入到实际页面中。这可以增加HTML文档的大小。将内联图像组合到(缓存)样式表中是减少HTTP请求并避免增加页面大小的一种方法。所有主流浏览器都不支持内联图片。

减少页面中HTTP请求的数量是开始的地方。这是提高首次访问者效能的最重要的指导方针。如Tenni
Theurer的博客文章中所述浏览器缓存使用 –
暴露!
,您网站的每日访问者中有40-60%的空白缓存。

使您的页面快速为这些第一次访问者是更好的用户体验的关键。

  1. 减少DNS查询
    域名系统(DNS)将主机名映射到IP地址,就像电话簿将人员姓名映射到他们的电话号码一样。当您在浏览器中输入www.yahoo.com时,浏览器联系的DNS解析器会返回该服务器的IP地址。DNS有一个成本。DNS通常需要20-120毫秒来查找给定主机名的IP地址。在完成DNS查找之前,浏览器无法从此主机名下载任何内容。
    缓存DNS查找以获得更好的性能。这种缓存可以在由用户的ISP或局域网维护的特殊缓存服务器上发生,但是也存在在个人用户的计算机上发生的缓存。DNS信息保留在操作系统的DNS缓存(Microsoft
    Windows中的“DNS客户端服务”)中。大多数浏览器都有自己的缓存,与操作系统的缓存分开。只要浏览器将DNS记录保存在自己的缓存中,就不会对操作系统造成记录请求的麻烦。
    默认情况下,Internet Explorer会缓存DNS查找30分钟,由
    DnsCacheTimeout注册表设置指定。Firefox缓存DNS查找1分钟,由network.dnsCacheExpiration配置设置控制。(Fasterfox将其更改为1小时。)
    当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数量等于网页中唯一主机名的数量。这包括在页面的URL,图像,脚本文件,样式表,Flash对象等中使用的主机名。减少唯一主机名的数量减少了DNS查找的数量。
    减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找减少响应时间,但减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这导致减少DNS查找并允许高度并行下载之间的良好折中。

  2. 避免重定向
    使用301和302状态代码完成重定向。以下是301响应中HTTP头的示例:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏览器自动将用户带到该Location字段中指定的URL。重定向所需的所有信息都在头文件中。响应的身体通常是空的。尽管他们的名字,在实践中也不会缓存301和302的响应,除非额外的标题,例如
Expires或者Cache-Control表明它应该是。元刷新标签和JavaScript是将用户引导到其他URL的其他方法,但如果必须执行重定向,首选技术是使用标准的3xx
HTTP状态代码,主要是为了确保后退按钮正常工作。

要记住的是重定向会减慢用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容,因为页面中的任何内容都不能被渲染,并且在HTML文档到达之前不会开始下载任何组件。

最浪费的重定向之一是频繁发生的,Web开发人员通常不会意识到这一点。当URL中缺少尾部斜线(/)时,会发生这种情况,否则应该有一个。
例如,去
http://astrology.yahoo.com/astrology
得到一个包含重定向到
http://astrology.yahoo.com/astrology/
(注意添加的尾部斜杠)的301响应。如果您使用Apache处理程序,则使用Aliasormod_rewriteor
DirectorySlash指令在Apache中进行修复。

将旧网站连接到新的网站是重定向的另一个常见用途。其他包括连接网站的不同部分,并根据某些条件(浏览器类型,用户帐户类型等)指导用户。使用重定向连接两个网站很简单,只需要很少的附加编码。尽管在这些情况下使用重定向会降低开发人员的复杂性,但会降低用户体验。这种使用重定向的替代方案包括使用Aliasmod_rewrite如果两个代码路径托管在同一台服务器上。如果域名变化是使用重定向的原因,一种替代方法是创建一个CNAME与组合(即建立了一个从域名指向另一个别名DNS记录)Aliasmod_rewrite

  1. 使用 Ajax Cacheable
    Ajax的一个引人注意的好处是它为用户提供即时反馈,因为它从后端Web服务器异步请求信息。但是,使用Ajax不能保证用户不会等待他们等待异步JavaScript和XML响应返回的大拇指。在许多应用中,用户是否保持等待取决于Ajax的使用方式。例如,在基于Web的电子邮件客户端中,用户将不断等待Ajax请求的结果来查找与其搜索条件匹配的所有电子邮件。重要的是要记住,“异步”并不意味着“瞬时”。

为了提高性能,重要的是优化这些Ajax响应。提高Ajax性能的最重要的方法是使响应可缓存,如添加到期或缓存控制头
一些其他规则也适用于Ajax:

我们来看一个例子。
Web 2.0电子邮件客户端可能会使用Ajax下载用户的自动完成地址簿。
如果用户上次使用电子邮件网络应用程序后用户没有修改她的地址簿,如果Ajax响应可以使用未来的Expires或Cache-Control标头进行缓存,则可以从缓存读取以前的地址簿响应。必须通知浏览器何时使用先前缓存的地址簿响应,而不是请求新的地址簿响应。这可以通过向地址簿Ajax
URL添加一个时间戳来表示,例如,用户最后一次修改她的地址簿&t=1190241612。如果地址簿自上次下载以来没有被修改,则时间戳将是相同的,并且地址簿将从浏览器的缓存中读取,从而消除额外的HTTP往返。

即使您的Ajax响应是动态创建的,并且可能仅适用于单个用户,但仍可缓存它们。这样做会使您的Web
2.0应用程序更快。

  1. 后负载组件
    你可以仔细看看你的页面,问问自己:“为了最初渲染页面绝对需要什么?”
    其余的内容和组件可以等待。

JavaScript是在onload事件之前和之后拆分的理想候选者。
例如,如果您有JavaScript代码和库进行拖放和动画,那么可以等待,因为在初始呈现之后拖动页面上的元素。
其他寻找候选人进行后期加载的地方包括隐藏的内容(用户操作后出现的内容)以及下方的图像。

帮助您解决问题的工具:YUI Image
Loader
允许您将图像延迟到折叠位置,YUI
Get实用程序
是一个简单的方法,可以即时包括JS和CSS。举个例子,在野外看看
Yahoo!主页与Firebug的网络面板打开了。

当性能目标与其他Web开发最佳实践相一致时,这是很好的。
在这种情况下,渐进增强的想法告诉我们,当JavaScript被支持时,可以改善用户体验,但是您必须确保页面的工作即使没有JavaScript。
所以在确定页面工作正常之后,您可以使用一些后加载脚本来增强它,从而为您提供更多铃声和口哨,如拖放和动画。

  1. 预加载组件
    预加载可能看起来与后期加载相反,但实际上具有不同的目标。通过预加载组件,您可以利用浏览器空闲的时间,并请求将来需要的组件(如图像,样式和脚本)。这样当用户访问下一页时,您可以将大部分组件放在缓存中,并且您的页面将为用户加载更快。

实际上有几种类型的预加载:

  1. 减少DOM元素的数量
    复杂的页面意味着更多的字节下载,也意味着JavaScript中的DOM访问速度较慢。如果您想要添加事件处理程序,例如,如果循环访问500或5000个页面上的DOM元素,这将有所作为。

大量的DOM元素可能是一些症状,应该使用页面的标记进行改进,而不必删除内容。您是否使用嵌套表进行布局?你是否<div>只投入更多的东西来解决布局问题?也许有更好的和更语义上正确的方式来做你的标记。

对于布局来说,很大的帮助是YUI
CSS实用程序
:grids.css可以帮助您整体布局,fonts.css和reset.css可以帮助您剥离浏览器的默认格式。这是一个机会,开始新鲜和思考你的标记,例如,<div>只有当它有意义的语义,而不是因为它呈现一个新的行。

DOM元素的数量很容易测试,只需输入Firebug的控制台:

 document.getElementsByTagName('*').length

DOM元素有多少?检查其他具有良好标记的类似页面。例如,Yahoo!主页是一个非常繁忙的页面,仍然低于700个元素(HTML标签)。

  1. 分割跨域的组件
    分割组件允许您最大程度地并行下载。由于DNS查询损失,请确保您使用的不超过2-4个域。例如,您可以承载你的HTML和动态内容www.example.org之间分裂静电元件static1.example.orgstatic2.example.org

有关更多信息,请参阅Tenni Theurer和Patty
Chi的“最大化拼车车道中的并行下载
”。

  1. 最小化iframe的数量
    iframe允许在父文档中插入一个HTML文档。了解iframe的工作原理,以便有效的使用非常重要。
  1. 没有404s
    HTTP请求是昂贵的,所以发出HTTP请求并获得无用的响应(即404 Not
    Found)是完全不必要的,并且会减慢用户体验,没有任何好处。

一些网站有帮助404s“你的意思是X?”,这对用户体验非常好,但也会浪费服务器资源(如数据库等)。特别糟糕的是当链接到外部JavaScript是错误的,结果是404.首先,这个下载将阻止并行下载。接下来,浏览器可能会尝试解析404响应体,就像它是JavaScript代码,试图找到可用的东西。


打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 5
图片 6

赞 1 收藏
评论

以下为译文:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图