菜单

三个不常见的 HTML5 实用新特性简介,html5新特色

2019年2月2日 - 金沙前端

Web性能优化种类 – 通过提前得到DNS来进步网页加载速度

2015/04/23 · HTML5 ·
DNS,
品质优化

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

自家日常寻找办法改进网站质量,为的就是能提供更佳的用户体验。也许你日常会意识你的网站运行高效且品质非凡。你也恐怕曾让你的应用程序在Google
PageSpeed或Yahoo!
YSlow进行测试,并赢得高分。可是,有同一东西一向影响页面加载时间。它在一个页面上,开支很多时刻去探寻分化组件的DNS。例如,下边那幅图片显示了自我的博客首页所需资源的加载瀑布图。

图片 1

请留意条形图的灰青色部分,它出现在瀑布图中的半数以上零部件前。那灰红色代表下载资源前查找DNS所需时间。那居然占了组件下载时间的很超过半数!即便组件举行了优化,并曾经最小化/合并/压缩处理,你依旧必要拭目以待查找DNS时间。我利用webpagetest.org做了一个有关该网站DNS查找时间的报表。

图片 2

从上图可观察,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特点,它会被那几个不支持该技术的老旧浏览器简单忽略掉。如若您的网页内容是发源多个域名,那么那相对是一个聪明的,能加速页面加载速度的方式。

打赏辅助自己翻译更加多好小说,谢谢!

打赏译者


这一切都很好,但背后我们将琢磨在特定环境下,怎么着从子域名提供服务却会实际对质量有害。

HTML5都有什新特点?

实质上说,HTML5就是html、css、js的结合体,不用大惊小怪的。还有一头是HTML5还不是很干练,取决于浏览器的匡助程度。至于HTML5的新特点,有若干点,比如说其中的canvas绘图,新增的api包涵:canvas,geolocation
,websocket , webstorage;还有新增的几何标签,如video,audio标签。
 

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

图片 3

前端,在路上…
个人主页 ·
我的稿子 ·
19 ·
    

图片 4

那是一篇有关 <u>怎样加快网站访问速度</u> 的译文,原文出自
雅虎开发者网站,原标题为
Best Practices for Speeding Up Your Web
Site。

精晓这个有关CSS的音讯已经同意大家做出一些决定,那些决定一切基于CSS阻塞渲染,要全体被呼吁,以及它位于紧要路径的学识:

简诉html5的新特点及事后的升华现象

1.新的文档类型 (New Doctype)
2.脚本和链接无需type (No More Types for Scripts and Links)
3.语义Header和Footer (The Semantic Header and Footer)
4.Hgroup
5.标记元素 (马克 Element)
6.图形元素 (Figure Element)
7.再次定义<small> (Small Element redefined)
8.占位符 (Placeholder)
9.须求属性 (Required Attribute)
10.Autofocus 属性 (Autofocus Attribute)
11.Audio 支持 (Audio Support)
12.Video 支持 (Video Support)
13.视频预载 (Preload attribute in Videos element)
14.显得控制条 (Display Controls)
15.专业表明式 (Regular Expressions)
 

HTML5 实用新特色简介,html5新特征
一、DNS 预解析缓存 众所周知,解析 DNS
是网站质量优化的可比重大的一局地,就算加载时…

打赏接济自己翻译越来越多好小说,谢谢!

任选一种支付办法

图片 5
图片 6

赞 1 收藏
评论

加快网站访问的特等实践

优良的绩效团队已经规定了一些使网页连忙的顶级做法。该清单包罗分为7个品类的35个一级做法。


若是大家得以完全确认某个CSS图片肯定会在各样页面都会用到的话,大家就足以用个小把戏让浏览器早早下载好这么些图形,无需等到让浏览器蒙受要求运用该图片的HTML才发轫下载。想做到这点也至极简单,但所用的格局或者会有点糙,就看您怎么弄了。

七个不广泛的 HTML5 实用新特点简介,html5新特性

一、DNS 预解析缓存

肯定,解析 DNS
是网站品质优化的比较根本的一局地,即便加载时间不太长,可是很难压缩起来。尤其是为着并发下载资源而选用四个CDN 域名来加载资源的特大型网站,更不可忽略,每加载资源之前都要先举办 CDN
域名的 DNS 解析转换。
一经利用 DNS 预加载,协理该功效的浏览器就会提早对该域名展开 DNS
解析并且缓存一下,而不会在须要请求资源再开展辨析。而且以此职能应用实在是太简单:

复制代码 代码如下:

<link rel=”dns-prefetch” href=”;
<link rel=”dns-prefetch” href=”//www.google-analytics.com”>

Tmall网就选拔了那项技艺,你可以打开天猫商城网,查看源代码,最上边就把她们的一部分
CDN 服务器进行了 DNS 解析缓存。

二、资源预加载

资源预加载有很多主意,例如常见的图形预加载,有使用 CSS
的背景图片来预加载,大部分仍然用 JS。近来 HTML5
提供了特其他资源预加载方法,有多个特性:prefetch(预读取)和
prerender(预渲染),分别被 Firefox 和 Chrome 浏览器扶助。

1).PREFETCH 预读取
预读取就是很常见的资源预加载,当前页面加载成功未来,就会在前面偷偷的下载你指定的资源,一般是
JS 、CSS 和 图片 那类的,也足以下载页面:

复制代码 代码如下:

<link rel=”prefetch” href=”” />
<link rel=”prefetch” href=””
/>
<link rel=”prefetch alternate stylesheet” href=”mozspecific.css”
/>

留神,近日 Firefox 浏览器支持那些意义。

2).PRERENDER 预渲染
这么些更决定了,不仅偷偷的超前下载,而且还给您渲染出来,当用户点击链接的时候,立即给你显示出来。

复制代码 代码如下:

<link rel=”prerender” href=”” />

专注,目前 Chrome 协助这些职能。

搜素引擎其实是最必要那种预读取的效益的,因为他们非凡确定用户下一步要打开的页面(搜索结果页面),所以当用户输入搜索内容的时候,就足以提前把搜索结果页面的资源提前加载,而且动用之后,效果格外尽人皆知。

时下包容性是个毛病,貌似只有 Chrome 和 Firefox 援救,而且用的 rel
属性是例外的,如若你想同时匹配两个浏览器,可以写成下边那样:

复制代码 代码如下:

<link rel=”prefetch prerender” href=”” />

除此以外,当然为了安全无法跨域预加载资源,可能没办法用在 CDN 了。

三、Download 属性

HTML5 的 Download 属性用来强制浏览器下载对应文件,而不是开拓。Chrome 和
Firefox
等浏览器太过头强大,也许是为了升高用户体验,当用户点击的资源文件可以被它们识其余时候(例如
pdf 会直接在浏览器打开,VCD、mp5等媒体直接用浏览器内置播放器播放)。但有时,用户实际是指望直接下载而不是在浏览器上看看,那时就足以添加这些特性,属性值会对下载的文件重命名:

复制代码 代码如下:

<a href=”downloadpdf.php”
download=”download.pdf”>点击直接下载并保留成 download.pdf
文件</a>

假设您确定那些资源是用户肯定会下载的,就可以拉长那么些特性,还足以用 JS
或者手动改变想要保存的文书名。

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分钟,由
    DnsCache提姆eout注册表设置指定。Firefox缓存DNS查找1分钟,由network.dnsCacheExpiration配置安装控制。(法斯特erfox将其变动为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.org和static2.example.org

关于更加多音信,请参阅Tenni Theurer和PattyChi的“最大化拼车车道中的并行下载
”。

  1. 最小化iframe的数量
    iframe允许在父文档中插入一个HTML文档。领会iframe的行事原理,以便有效的运用分外重大。
  1. 没有404s
    HTTP请求是昂贵的,所以爆发HTTP请求并得到无用的响应(即404 Not
    Found)是一点一滴不要求的,并且会放慢用户体验,没有任何利益。

局地网站有支持404s“你的情趣是X?”,那对用户体验分外好,但也会浪费服务器资源(如数据库等)。越发糟糕的是当链接到外部JavaScript是漏洞百出的,结果是404.先是,这么些下载将截留并行下载。接下来,浏览器可能会尝试解析404响应体,似乎它是JavaScript代码,试图找到可用的事物。


那会显式地告诉浏览器,立刻早先预取我的敏感图片,而毫无考虑在它处理CSS时或许会做的别样决定。

Server

拉开阅读

以下为译文:

1 <link rel="prefetch" href="webfont.woff">

优秀的始末!

DNS预取所做的刚刚就是凭证领餐(on the
tin),它无法被概括完结。比方说,假如你必要请求来自widget.foo.com的资源,那么您可以经过不难的在页面的<head>里先扩大上面那几个来预取那一个主机的DNS:

1 <link rel="stylesheet" href="https://si0.twimg.com/a/1358386289/t1/css/t1_core.bundle.css" type="text/css" media="screen">

有意思的是,我活动inuit.css到Sass的关键原因最初是——我得以一本万利的编译一个简化的版本。

现代浏览器将相互下载JS,只有在本子被实施的时候卡住渲染(分明脚本必须也被下载了)。脚本下载经常被浏览器的预加载器所形成。当浏览器页面渲染被封堵,即等待CSS,或JS被实施,预分析器将围观页面剩余部分,寻找它能下载的资源。有些浏览器如
Chrome,
将分先后下载资源,例如,尽管脚本与图片同时在等候下载,它将先下载脚本。

很重点的内需记得的是,比方说一旦HTML被呼吁于foo.com,对万分主机的DNS查询就立时发出了,所以三番五次的其他对foo.com的央求不再受制于DNS查询。

就算如此,Andy Davies
告知自己WebKit实际上提升了CSS下载的优先级,以便只有渲染页面需求的CSS先到达,而其余的体制,如print.css尽可能的延迟。赏心悦目!

拉开阅读

CSS块渲染是因为浏览器总是试图渐进式的渲染页面;它们想在要素到达的时候顺序的渲染它。假设style在离开很远的页面下部,浏览器在赢得它后边未曾主意渲染那多少个CSS。因为这一个原因,假使浏览器在渲染文档进程中,改变了后边渲染的东西,它们可以幸免style的重绘。浏览器在它赢得所有要求的style音讯往日不会渲染页面,如若您将style放在文档底部,你就是在使浏览器等待,阻塞了渲染。

还记得从前我们谈谈CSS块渲染吗?浏览器想尽量快的取得CSS,直到不可能更快;CSS位于你的最首要路径。你的最主要路径是用户页面请求与事后实际来看页面之间的必备的旅程。因为它阻塞了渲染,所以CSS位于重点路径,而JS和图片不是。你会希望在重点路径上尽心快的增速那几个旅程,那就表示不能有DNS查询。

实际上工作中,大家搭建了一个网站,在某个阶段性的环境中它由同样台主机(如foo.com)提供资源服务,但到了使全部环境支持尤其繁忙作业的时候,大家初步由s1.foo.com与s2.foo.com提供资源服务。那意味着所有的图样,JS,CSS,字体等等都出自于分裂的域名,因此便引起了DNS查询。那里的题材在于,由于空的缓存,为了拿走CSS文件而急需履行DNS查询,那其实使得关键路径速度彻底慢下来。大家的图样半数以上会搅乱,那暗示着有理论上不应有有的延时;最佳实践须要应当将资源分布于在子域名上,对啊?但不包涵CSS。DNS查询占据了大批量的年月,进而延缓了页面的渲染。

DNS 预取

中央的前提是,假若因为一个元素是流态的而不可能天使化,那么您在它里面放置一个空元素解决尺寸的标题,然后就可以天使化了,例如:

推行压缩经常须求一点.htaccess诡计,但如本人的好爱人 尼克Payne提议的,.htaccess实际上从服务端的见解来看不是特地有质量;.htaccess评估每一个抵达请求,因而实际它有不少付出。

尽量并行

每当你从任何域名请求一个资源,会发生一个包蕴相关底部,被访问资源的
HTTP请求,并且会回来一个响应。那是对该进度的一个格外简化,但它基本就是事实上你需要了然的。那是一个HTTP请求,而且具备涉嫌的资源都从属于这一个往返的远足。当提到前端质量,那个请求正是关键的瓶颈所在,因为如我辈谈到的,浏览器受限于有稍许请求可以相互暴发。那也是干什么大家日常要动用子域名;以便允许这一个请求在数个域名上发出,允许同时发出多得多数量的伸手。

许多提出说,即便您在应用资源域名,你应该由它们提供所有静态资源服务;包涵CSS,JS,图片等等。

Spriting (精灵)

CSS中引用的Web字体和图片表现基本相同;浏览器在碰着需求它们的HTML时初阶对它们举行下载。就和本身在头里提到这样,浏览器极度精晓,那又是一个例子。想象一下,浏览器一看到下边的CSS讲明就从头下载其中所引用的图片:

因为有那种渲染阻塞阶段,CSS是性质最坏的仇人之一,正如Stoyan
Stefanov解说的那么
。而且也很有必不可少注意到浏览器在它先导渲染页面以前将下载所有的CSS。那代表就是浏览器仅仅在屏幕上渲染页面,也要请求print.css。任何只是按照一种媒体询问的样式表(如<link
rel=stylesheet media=screen and (min-device-width: 800px)
href=desktop.css>)都将会被下载,即便并不须要它们。

Facebook 用fbstatic-a.akamaihd.net:

唯独鲜明,现代浏览器照旧变得聪明了。我将给您一个AndyDavies寄给本人的电子邮件的剪辑,因为她解释的比我通晓:

相关文章

发表评论

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

网站地图xml地图