Web质量优化系列 &#821一; 通过提前获得DNS来提高网页加载速度

Web品质优化种类 – 通过提前获得DNS来进步网页加载速度

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

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

自个儿时时寻找办法改进网址质量,为的正是能提供更佳的用户体验。恐怕你平时会发觉你的网址运营高效且品质非凡。你也也许曾让你的应用程序在Google
PageSpeed或Yahoo!
YSlow进展测试,并得到高分。可是,有同1东西一贯影响页面加载时间。它在贰个页面上,成本很多时间去追寻区别组件的DNS。例如,上边这幅图片显示了自家的博客首页所需能源的加载瀑布图。

图片 1

请留心条形图的灰栗色部分,它出现在瀑布图中的超越33.33%零件前。那灰森林绿代表下载能源前查找DNS所需时日。那照旧占了组件下载时间的很一大半!就算组件进行了优化,并曾经最小化/合并/压缩处理,你依旧供给静观其变查找DNS时间。我利用webpagetest.org做了一个关于该网址DNS查找时间的表格。

图片 2

从上海教室可看到,DNS查找时间都很高,
固然能减小该时间并提速,便会让能源加载变得越发快捷。幸运的是,有个很棒的技能能让网址的加载时间变得更快。它被称为DNS预取,并且很简单落成。你所需做的是,在网页顶部添加以下属性作为链接(link)。

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

DNS预取是在用户尝试点击链接前试图解析域名。壹旦域名被分析,且用户导航到该域名,则不会因DNS搜索而招致加载时间变长。在那些博客主页里,有诸多跳转到差别帖子的链接。假如能在用户导航到下二个页前边,预取1些外部链接的DNS,这将会大大减少下贰个页面包车型大巴DNS查找时间。依据Chromium
documentation所说,假诺用户能将域名解析成IP地址并且缓存之,则DNS查找时间能低至0-一阿秒(千分之壹秒)。那是一定令人回想深刻的!

自己在网址添加DNS预取职能后,确实能肯定创新页面加载时间。方今,这项技艺被超越四分之贰主流浏览器所支撑(除了IE),所以,当前尚未任何理由不在你的web应用上选用那项技艺!DNS预取是多少个康宁的HTML5特征,它会被那些不支持该技能的老旧浏览器简单忽略掉。假使你的网页内容是出自多少个域名,那么那纯属是二个精明能干的,能加速页面加载速度的办法。

打赏援助自身翻译更加多好小说,多谢!

打赏译者

5.5 最小化DOM访问

行使JavaScript访问DOM成分的进程极慢,因此为了获取响应更快的页面,您应该:

  • 缓存访问过的要素的引用
  • 在DOM树外更新节点,然后添加到DOM树
  • 防止用JS实现稳定布局

Server

打赏支持自个儿翻译更加多好文章,感激!

任选一种支付办法

图片 3
图片 4

赞 1 收藏
评论

1.7 减少DOM数量

复杂页面意味着要下载越来越多字节,这也代表JavaScript中的DOM访问速度更慢。例如,当您想要添加事件处理程序时,要是在页面上循环遍历500或陆仟个DOM成分,则会有所差别。


有关小编:刘健超-J.c

图片 5

前端,在路上…
个人主页 ·
我的篇章 ·
19 ·
    

图片 6

柒.一 保持组件小于25K

此限制与BlackBerry不会缓存大于25K的机件这一真情有关。请留意,那是未压缩的大大小小。在此地收缩组件大小很重点,因为单独使用gzip也许还不够。

Content

  1. 最小化 HTTP 请求
    最后用户响应时间的80%用从前端。大多数时间都以下载页面中的全部组件:图像,样式表,脚本,Flash等。缩短组件数量又收缩了展现页面所需的HTTP请求数量。那是更快页面包车型地铁重点。

压缩页面中组件数量的1种方式是简化页面包车型大巴设计。可是,有未有措施营造更增进内容的页面,同时也能兑现长足的响应时间?以下是削减HTTP请求数量的局地技艺,同时照旧支撑添加的页面设计。

整合文件
是通过将享有脚本组合到单个脚本中以及将富有CSS组合到单个样式表中的秘诀来压缩HTTP请求的多少。当脚本和样式表从页到页差别时,组合文件更具挑战性,但使那1部分本子进度可以改革响应时间。

CSS
Sprites
是缩减图像请求数量的首选办法。将您的背景图像合并为3个图像,并动用CSS
background-imagebackground-position 属性来呈现所需的图像段。

图像影象将多少个图像组合成单个图像。总体大小大约相同,但减去HTTP请求数量会加快页面速度。假如图像在页面中是三番五次的,则图像投射只可以工作,例如导航栏。定义图像投射的坐标只怕很麻烦,简单出错。

动用导航图像投射也不足访问,由此不推荐使用。
内联图像
使用data:URL方案将图像数据嵌入到实际页面中。那足以追加HTML文书档案的大大小小。将内联图像组合到(缓存)样式表中是裁减HTTP请求并幸免扩充页面大小的壹种艺术。全体主流浏览器都不辅助内联图片。

调整和收缩页面中HTTP请求的数量是始于的地点。这是拉长第三遍访问者功用的最重大的引导方针。如Tenni
Theurer的博客小说中所述浏览器缓存使用 –
揭露!,您网站的每一天访问者中有40-60%的空域缓存。

使你的页面非常快为那些率先次访问者是更好的用户体验的重要。

  1. 减少DNS查询
    域名种类(DNS)将主机名映射到IP地址,就如电电话簿将人口姓名映射到他俩的电话号码一样。当你在浏览器中输入www.yahoo.com时,浏览器联系的DNS解析器会回到该服务器的IP地址。DNS有1个股份资本。DNS经常供给20-120微秒来寻觅给定主机名的IP地址。在成功DNS查找从前,浏览器不能够从此主机名下载任何内容。
    缓存DNS查找以获得更好的性质。那种缓存能够在由用户的ISP或局域网维护的特种缓存服务器上发生,然而也设有在个人用户的微处理器上发生的缓存。DNS音信保存在操作系统的DNS缓存(Microsoft
    Windows中的“DNS客户端服务”)中。一大半浏览器都有协调的缓存,与操作系统的缓存分开。只要浏览器将DNS记录保留在大团结的缓存中,就不会对操作系统造成记录请求的难为。
    暗中认可景况下,Internet Explorer会缓存DNS查找28分钟,由
    DnsCacheTimeout注册表设置钦定。Firefox缓存DNS查找壹分钟,由network.dnsCacheExpiration配置安装控制。(法斯特erfox将其变动为①钟头。)
    当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的多寡相等网页中唯壹主机名的数据。那包蕴在页面的U景逸SUVL,图像,脚本文件,样式表,Flash对象等中利用的主机名。减弱唯1主机名的数码缩小了DNS查找的数码。
    减去唯壹主机名的数码有十分大只怕压缩页面中生出的互相下载量。幸免DNS查找缩短响应时间,但减少并行下载也许会扩大响应时间。笔者的清规戒律是将那几个零部件分成至少七个但不当先多少个主机名。那导致收缩DNS查找并允许中度并行下载之间的完美折中。

  2. 幸免重定向
    接纳301和30二情形代码完结重定向。以下是301响应中HTTP头的示范:

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

浏览器自动将用户带到该Location字段中内定的ULANDL。重定向所需的有着音信都在头文件中。响应的人体壹般是空的。就算他们的名字,在实践中也不会缓存30一和302的响应,除非额外的标题,例如
Expires或者Cache-Control注解它应有是。元刷新标签和JavaScript是将用户辅导到任何UGL450L的别的格局,但尽管非得实行重定向,首要选拔技术是应用正规的3xx
HTTP状态代码,重固然为了有限支持后退按钮平常办事。

要牢记的是重定向会减速用户体验。在用户和HTML文书档案之间插入重定向会延迟页面中的全部剧情,因为页面中的任何内容都无法被渲染,并且在HTML文书档案到达在此以前不会起来下载任何组件。

最浪费的重定向之一是频仍发生的,Web开发人士平日不会发觉到那或多或少。当U哈弗L中缺乏尾巴部分斜线(/)时,会发生那种境况,不然应当有贰个。
例如,去
http://astrology.yahoo.com/astrology
获得2个饱含重定向到
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:

  • Gzip组件
  • 减少DNS查找
  • 缩小JavaScript
  • 防止重定向
  • 配置ETag

咱俩来看3个例子。
Web 二.0电子邮件客户端也许会动用Ajax下载用户的自发性达成地址簿。
一经用户上次应用电子邮件互连网应用程序后用户并未有改动她的地址簿,假如Ajax响应得以使用未来的Expires或Cache-Control标头举办缓存,则足以从缓存读取从前的地址簿响应。必须通报浏览器哪一天使用从前缓存的地址簿响应,而不是伸手新的地址簿响应。那能够通过向地址簿Ajax
UTucsonL添加四个时刻戳来代表,例如,用户最终三回修改她的地点簿&t=1一九零零4161二。假设地址簿自上次下载以来未有被改动,则时间戳将是1致的,并且地址簿将从浏览器的缓存中读取,从而解除额外的HTTP往返。

哪怕你的Ajax响应是动态创立的,并且恐怕仅适用于单个用户,但仍可缓存它们。那样做会使您的Web
2.0应用程序更快。

  1. 后负载组件
    您能够仔细看看你的页面,问问本人:“为了最初渲染页面相对须求怎样?”
    其他的内容和组件能够等待。

JavaScript是在onload事件在此以前和未来拆分的上佳候选者。
比如,假若你有JavaScript代码和库开始展览拖放和卡通,那么能够等待,因为在始发显示之后拖动页面上的要素。
任何寻找候选人实行前期加载的位置包含隐形的内容(用户操作后出现的情节)以及下方的图像。

援助你化解难点的工具:YUI Image
Loader允许你将图像延迟到折叠位置,YUI
Get实用程序是1个不难易行的章程,可以即时包涵JS和CSS。举个例子,在郊外看看
Yahoo!主页与Firebug的网络面板打开了。

当质量目的与其余Web开发最好实践相平等时,那是很好的。
在那种景况下,渐进增强的想法告诉大家,当JavaScript被协理时,能够革新用户体验,然而你必须确定保障页面包车型大巴做事就是未有JavaScript。
从而在规定页面工作不荒谬化从此,您可以选择一些后加载脚本来增强它,从而为你提供越来越多铃声和口哨,如拖放和卡通。

  1. 预加载组件
    预加载恐怕看起来与早先时期加载相反,但实质上具有差别的对象。通过预加载组件,您能够选用浏览器空闲的大运,并请求现在内需的机件(如图像,样式和本子)。那样当用户访问下一页时,您可以将多数零部件放在缓存中,并且您的页面将为用户加载更快。

其实有几体系型的预加载:

  • 无偿预 加载 – 一旦加载运行,您就可以连续领取部分卓殊的零件。
    自我批评google.com,精晓哪些请求1个机智图像的加载。
    本条Smart图片不须求在google.com主页上,但在连年的追寻结果页面上是供给的。
  • 有原则的预加载 –
    基于用户操作,您做出有依照的困惑,用户在何地下一步,并相应地预加载。在search.yahoo.com上,你能够看来在输入框中输入后,如何请求1些分外的机件。
  • 展望预加载 – 在开发银行重新设计前边提前预加载。
    每每重复规划后,您会发现:“新网址很酷,但比原先更慢”。
    题材的一局地或然是用户正在利用完全缓存访问您的旧站点,但新的站点始终是空缓存体验。您能够在开行重新设计前面先行加载某个零部件来减轻那种副功用。您的旧网址能够应用浏览器空闲的时日,并恳请新网址将采纳的图像和本子
  1. 收缩DOM成分的数量
    复杂的页面意味着更加多的字节下载,也代表JavaScript中的DOM访问速度较慢。假设您想要添加事件处理程序,例如,假如循环访问500或四千个页面上的DOM元素,那将大有可为。

大方的DOM成分恐怕是局地病症,应该使用页面包车型大巴号子举行改进,而不要删除内容。您是还是不是选择嵌套表实行布局?你是还是不是<div>只投入越来越多的事物来缓解布局难题?恐怕有更好的和更语义上正确的秘诀来做你的标记。

对于布局来说,不小的佑助是YUI
CSS实用程序:grids.css能够辅助你全部布局,fonts.css和reset.css能够扶持你剥离浏览器的暗中同意格式。那是贰个机会,开首卓绝和思辨你的号子,例如,<div>只有当它有含义的语义,而不是因为它表现叁个新的行。

DOM成分的多寡很简单测试,只需输入Firebug的控制台:

 document.getElementsByTagName('*').length

DOM成分有些许?检查其余具备能够标记的类似页面。例如,Yahoo!主页是1个这个繁忙的页面,仍旧低于700个因素(HTML标签)。

  1. 划分跨域的零件
    分开组件允许你最大程度地互相下载。由于DNS查询损失,请确定保障您使用的不超过贰-陆个域。例如,您能够承接你的HTML和动态内容www.example.org里面分化静电元件static1.example.org和static2.example.org

至于越来越多新闻,请参阅Tenni Theurer和Patty
Chi的“最大化拼车车道中的并行下载
”。

  1. 最小化iframe的数量
    iframe允许在父文档中插入七个HTML文书档案。精通iframe的干活原理,以便有效的施用分外主要。
  • <iframe> 优点:
    赞助缓慢的第贰方内容,如徽章和广告
    有惊无险沙箱
    互相下载脚本

  • <iframe> 缺点:
    费用高,固然空白
    阻碍页面加载
    非语义

  1. 没有404s
    HTTP请求是昂贵的,所以发生HTTP请求并获得无用的响应(即40四 Not
    Found)是一心不供给的,并且会减速用户体验,未有其余功利。

有的网址有援救40肆s“你的意思是X?”,那对用户体验13分好,但也会浪费服务器能源(如数据库等)。尤其倒霉的是当链接到外部JavaScript是荒谬的,结果是40四.先是,这几个下载将阻止并行下载。接下来,浏览器大概会尝试解析404响应体,就如它是JavaScript代码,试图找到可用的事物。


1.2 减少DNS查找

DNS就好像电话簿将人们的人名映射到他俩的电话号码一样,当你输入www.yahoo.com时,浏览器会通过DNS解析重返服务器的IP地址,那些DNS解析过程要求费用,平时要求20-120ms才能分析成功,在那此前,浏览器不能够从服务器获取其余内容。

由此缓存DNS查找来收获更好的习性。DNS新闻保存在操作系统的DNS缓存中,大部分的浏览器都有友好的缓存,与操作系统的分离。

暗中同意意况,IE会将DNS查找缓存二十七秒钟,FireFox缓存一分钟。

当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数额也正是网页中唯壹主机名的多少。
减弱唯1主机名的多寡可削减DNS查找的多寡。

削减唯1主机名的多少有一点都不小希望收缩页面中爆发的竞相下载量。幸免DNS查找会收缩响应时间,但减弱并行下载或然会浓缩响应时间。
准则是将那一个零部件分成至少四个但不当先多个主机名。那是缩减DNS查找和同意中度并行下载之间的卓绝折衷。

以下为译文:

肆.四 幸免过滤器

专有的AlphaImageLoader过滤器目的在于缓解IE版本<7中的半透明真彩色PNG的题材。该过滤器的标题在于它在下载图像时挡住渲染并冻结浏览器。它还会追加内部存款和储蓄器消耗,并且每一个成分运用,而不是各种图像,由此难点倍加扩展。

顶级做法是放任AlphaImageLoader,改用PNG八来优雅降级。

加快网址访问的超级实践

非凡的绩效团队曾经规定了1部分使网页飞快的最好做法。该清单包罗分为九个类别的三拾贰个一级做法。


2.2 添加Expries 或者 Cache-Control

那条规则有多个地点:

  • 对于静态组件:通过设置Expires头达成“永然而期”策略
  • 对此动态组件:使用十分的Cache-Control标头来协助浏览器处理标准请求

页面内容更是充分,意味着页面中有越多脚本,样式表,图像以及Flash。您的页面的第2回访问只怕必须发生四个HTTP请求,但经过使用Expires标头,您能够使那一个组件可缓存。

浏览器采取缓存来收缩HTTP请求的数目和尺寸,从而加快网页加载速度。Web服务器使用HTTP响应中的Expires头来告诉客户端能够缓存组件多长期。
比如:

Expires: Thu, 15 Apr 2010 20:00:00 GMT

代表在2010-04-壹伍都得以请求缓存内容。

那是1篇有关 <u>怎么着加快网址访问速度</u> 的译文,最初的小说出自
雅虎开发者网址,原标题为
Best Practices for Speeding Up Your Web
Site。

三.贰 用未有cookie的域名提供组件。

当浏览器发出静态图像请求并将cookie与请求壹起发送时,服务器对那一个cookie未有其余用处。所以他们只是未有丰富理由制造网络流量。您应该保障使用无cookie请求请求静态组件。创立四个子域并在那边托管全体静态组件。

若是您的域名是www.example.org,您能够托管您的静态组件static.example.org。不过,如若你曾经在超级域上设置了cookie
example.org而不是www.example.org,则怀有请求都
static.example.org将富含那个cookie。在那种景观下,您能够购买二个崭新的域,在那里托管您的静态组件,并保障此域无cookie

1.5 延迟加载组件

你能够自学看看您的页面并咨询你协调,最初页面包车型地铁渲染须求怎样,别的的内容和零部件就是足以推迟加载的。

JavaScript是在 onload
时间在此之前和今后拆分的美好候选者,例如,如若你有拖放和动画的JS代码,则足以顺延加载,因为它须求在页面渲染完现在才能够实行。其它可延缓的牢笼隐形的情节,折叠起来的图样等等。

4.3 选择<link>而不是@import

在此之前的八个极品标准是说CSS应该在顶部来允许稳步渲染。

在IE用@import和把CSS放到页面底部作为等同,所以最棒别用。

一.10 不要出现40四

HTTP的哀告是老大昂贵的,因而爆发的HTTP请求得到无用的响应是截然未有必要的,并且会影响用户体验。

一些网站会有特意的40四页面提升用户体验,但那依然会浪费服务器能源。特别坏的是当链接指向外部js但却获得404结果。那样首先会下跌并行下载数,其次浏览器大概会把40四响应体当作js来分析,试图从内部找出可用的事物。

正文大部分剧情翻译自雅虎前端的习性优化,怎么样让页面加载更快,雅虎给出了七个规则,原来的书文地址:贝斯特Practices for Speeding Up Your Web Site
。首要从多个样子分别介绍了如何进行质量的优化。

4.一 将CSS放在顶部

在研究Yahoo!的性质时,大家发现将样式表移动到文书档案HEAD会使页面看起来加载速度更快。那是因为将样式表放在HEAD中允许页面稳步彰显。

关心品质的前端工程师希望页面被慢慢渲染,那时因为,大家期望浏览器尽早渲染获取到的别样内容。那对大页面和网速慢的用户很重点。给用户视觉反馈,比如进程条的首要性已经被大批量研讨和记录。在我们的意况中,HTML页面就是进程条。当浏览器稳步加载页面底部,导航条,logo等等,那几个都以给等待页面包车型客车用户的视觉反馈。那优化了一体化用户体验。

把体制表放在文档尾部的题材是它阻挡了广大浏览器的逐级渲染,包涵IE。这个浏览器阻止渲染来幸免在体制更改时索要重绘页面成分。所以用户会卡在白屏。

发表评论

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