49彩票集团首页-49彩票集团官网|官网首页

49彩票集团让大家拥有最好的账号使用功能,49彩票集团是为大家带来更加方便的使用途径,是因为在49彩票集团娱乐的玩家们越来越多,发展成为最受欢迎的网上体育娱乐公司。

预加载是浏览器对西楚有可能被选取能源的生机

2019-11-25 作者:计算机网络   |   浏览(99)

HTML5技术中有这样5个特性,它们能够让你实现事半功倍的开发效果,它们分别是:DNS Prefetching、Link Prefetching、Download属性、Regular Expressions以及Datalist元素。 HTML5的诞生为Web App以及移动App开发带来了许多新鲜有趣的JavaScript与HTML API。本文将介绍5个能够让你事半功倍的HTML5特性。

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

一、DNS 预解析缓存

众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换。
如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析。而且这个功能应用实在是太简单:

复制代码 代码如下:

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

淘宝网就应用了这项技术,你可以打开淘宝网,查看源代码,最顶端就把他们的一些 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 会直接在浏览器打开,mp3、mp4 等媒体直接用浏览器内置播放器播放)。但有时候,用户其实是希望直接下载而不是在浏览器上看看,这时就可以加上这个属性,属性值会对下载的文件重命名:

复制代码 代码如下:

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

如果你确定这个资源是用户肯定会下载的,就可以加上这个属性,还可以用 JS 或者手动改变想要保存的文件名。

HTML5 还有很多其他特性,但是看了很长时间书和各种资料,很少见到上面三个又比较实用的属性,拿出来分享一下。

当提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。
资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

 

HTML5都有什新特性?

其实说,HTML5就是html、css、js的结合体,不用大惊小怪的。还有一方面是HTML5还不是很成熟,取决于浏览器的支持程度。至于HTML5的新特性,有若干点,比如说其中的canvas绘图,新增的api包括:canvas,geolocation ,websocket , webstorage;还有新增的若干标签,如video,audio标签。  

引用 Patrick Hamann 的解释:

  1. 49彩票集团,DNS Prefetching

简诉html5的新特性及以后的发展状况

1.新的文档类型 (New Doctype)
2.脚本和链接无需type (No More Types for Scripts and Links)
3.语义Header和Footer (The Semantic Header and Footer)
4.Hgroup
5.标记元素 (Mark 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 是网站性能优化的比较重要的一部分,虽然加载时...

预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可以在当前页面使用到,一些可能在将来的某些页面中被使用。作为开发人员,我们比浏览器更加了解我们的应用,所以我们可以对我们的核心资源使用该技术。
这种做法曾经被称为 prebrowsing,但这并不是一项单一的技术,可以细分为几个不同的技术:DNS-prefetch、subresource 和标准的 prefetch、preconnect、prerender。

DNS主机名解析有时会出现拖慢网站速度的问题。现代浏览器当遇到DNS解析时已经十分聪明——用户在跟随某个链接之前,浏览器先尝试解析域名再将其进行缓存。

DNS 预解析 DNS-Prefetch

DNS Prefetching特性允许开发者手动控制,告诉浏览器需要解析哪个域名。代码如下:

通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如,我们将来可能从 example.com 获取图片或音频资源,那么可以在文档顶部的 标签中加入以下内容:

[html] <link rel="dns-prefetch" href="//fonts.googleapis.com"> 
<link rel="dns-prefetch" href="//google-analytics.com"> 
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//platform.twitter.com"> 

<link rel="dns-prefetch" href="//example.com">
1
<link rel="dns-prefetch" href="//example.com">
当我们从该 URL 请求一个资源时,就不再需要等待 DNS 的解析过程。该技术对使用第三方资源特别有用。

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//platform.twitter.com">

在 Harry Roberts 的文章中提到:

  1. Link Prefetching

通过简单的一行代码就可以告知那些兼容的浏览器进行 DNS 预解析,这意味着当浏览器真正请求该域中的某个资源时,DNS 的解析就已经完成了。
这似乎是一个非常微小的性能优化,显得也并非那么重要,但事实并非如此 – Chrome 一直都做了类似的优化。当在浏览器的地址栏中输入 URL 的一小段时,Chrome 就自动完成了 DNS 预解析(甚至页面预渲染),从而为每个请求节省了至关重要的时间。

Link Prefetching特性允许开发者在页面加载的时候预先加载他们希望指定的页面或元素。代码如下:

预连接 Preconnect

[html] <link rel="prefetch" href="" /> 
<link rel="prefetch" href=" /> 

与 DNS 预解析类似,preconnect 不仅完成 DNS 预解析,同时还将进行 TCP 握手和建立传输层协议。可以这样使用:

<link rel="prefetch" href="" />
<link rel="prefetch" href=" />你也能够使用prerendering特性令你的网站速度更快,浏览器能够在后台获取并渲染整个页面,用户点击相应链接时再为用户展示该页面。代码如下:
[html] view plaincopyprint?<link rel="prerender" href="" /> 

<link rel="preconnect" href=";
1
<link rel="preconnect" href=";
在 Ilya Grigorik 的文章中有更详细的介绍:

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

现代浏览器都试着预测网站将来需要哪些连接,然后预先建立 socket 连接,从而消除昂贵的 DNS 查找、TCP 握手和 TLS 往返开销。然而,浏览器还不够聪明,并不能准确预测每个网站的所有预链接目标。好在,在 Firefox 39 和 Chrome 46 中我们可以使用 preconnect 告诉浏览器我们需要进行哪些预连接。
预获取 Prefetching

本文由49彩票集团发布于计算机网络,转载请注明出处:预加载是浏览器对西楚有可能被选取能源的生机

关键词:

  • 上一篇:没有了
  • 下一篇:没有了