金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 经过浏览器看HTTP缓存,5到底是个如何事物

原标题:经过浏览器看HTTP缓存,5到底是个如何事物

浏览次数:183 时间:2019-10-08

六、对于缓存机制,现在可以做的有哪些?

我在浏览资料的时候发现了一个caching checklist,比较具有参考价值,我们可以遵循建议合理的利用缓存机制:

1 使用一致的网址:如果在不同的网址上提供相同的内容,那么将会多次获取和存储相同的内容。提示:网址是区分大小写的!2 确保服务器提供验证码 (ETag):通过验证码,如果服务器上的资源未被更改,就不必传输相同的字节。3 确定代理缓存可以缓存哪些资源:对所有用户的响应完全相同的资源很适合由 CDN 或其他代理缓存进行缓存。4 确定每个资源的最优缓存周期:不同的资源可能有不同的更新要求。审查并确定每个资源适合的 max-age。5 确定网站的最佳缓存层级:对 HTML 文档组合使用包含内容指纹码的资源网址以及短时间或 no-cache 的生命周期,可以控制客户端获取更新的速度。6 变动最小化:有些资源的更新比其他资源频繁。如果资源的特定部分(例如 JavaScript 函数或一组 CSS 样式)会经常更新,应考虑将其代码作为单独的文件提供。这样,每次获取更新时,剩余内容(例如不会频繁更新的库代码)可以从缓存中获取,确保下载的内容量最少。

1
1 使用一致的网址:如果在不同的网址上提供相同的内容,那么将会多次获取和存储相同的内容。提示:网址是区分大小写的!2 确保服务器提供验证码 (ETag):通过验证码,如果服务器上的资源未被更改,就不必传输相同的字节。3 确定代理缓存可以缓存哪些资源:对所有用户的响应完全相同的资源很适合由 CDN 或其他代理缓存进行缓存。4 确定每个资源的最优缓存周期:不同的资源可能有不同的更新要求。审查并确定每个资源适合的 max-age。5 确定网站的最佳缓存层级:对 HTML 文档组合使用包含内容指纹码的资源网址以及短时间或 no-cache 的生命周期,可以控制客户端获取更新的速度。6 变动最小化:有些资源的更新比其他资源频繁。如果资源的特定部分(例如 JavaScript 函数或一组 CSS 样式)会经常更新,应考虑将其代码作为单独的文件提供。这样,每次获取更新时,剩余内容(例如不会频繁更新的库代码)可以从缓存中获取,确保下载的内容量最少。

 

8款浏览器对HTML5支持评测

2011/12/17 · HTML5 · 来源: Intel blog     · HTML5

来源:Intel blog

HTML的上一个版本诞生于1999年,从那以后,Web世界就发生了巨变,而现在的HTML5炒得火热朝天,势头之猛犹有再次创造Web历史变革的趋 势。HTML5仍处于完善之中,然而,现在大部分浏览器已经开始具备对HTML5的支持了,当然,各大浏览器的开发还在继续,将来应该会全面支持 HTML5的,现在我选择了8款浏览器(中外各四款),对其支持HTML5的程度进行了测试,测试内容来自html5test网站。感兴趣的人可以去测试一下!!

当然每个浏览器的好坏不是仅凭这个就可以定义的,并且即使浏览器的功能再强大,界面再漂亮,也不一定就是你心目中最好的浏览器,因为我觉得浏览器的使用涉 及到一个习惯问题,用习惯了自然就觉得好了,根本不会去考虑它功能是否强大。另外现实生活中我们使用浏览器,虽然其功能十分强大,十分完善,但是并不是每 个人都能完全用到所有功能的。

所以,我做这个测试是没有感情色彩的,只是测试哈!!!至于哪个浏览器好,哪个浏览器差,各位看官自己点评吧!!

我测试的8款浏览器分别是(国外)Chrome 15.0.874,IE 9.0.8112,Firefox 8.0.1,Opera 11.52

(国内)360浏览器 4.0.3.8,搜狗浏览器 3.1.0.3688,遨游浏览器v3.2.2.1000,QQ浏览器 6.8(10793)

这8款浏览器不出意外应该都是现在的最新版本!!!

首先贴上我的硬件(QQ管家测的):

图片 1

现在来看看8款浏览器的总分(顺序就是我上边列的顺序哈,不代表排名顺序):

1。Chrome

图片 2

2。IE 9

图片 3

3。Firefox

图片 4

4。Opera (我看到别人测的是Opera12的分数为325,我是昨天从Opera官网下的啊,怎么会不是最新版的???)

图片 5

5。360浏览器

图片 6

6。搜狗浏览器

图片 7

7。遨游浏览器

图片 8

8。QQ浏览器

图片 9

这么看来还是Chrome小胜啊!嗯,搜狗浏览器在对HTML5的支持上也很给力的!QQ浏览器有点没跟上节奏啊!!!!

下面让我们详细看看这8种浏览器对HTML5的支持情况:

图片 10

图片 11

图片 12

图片 13

OK!大概就是这样了,还是Chrome对HTML5支持的好一些,虽然国外的浏览器都大部分支持了HTML5,但国内的浏览器也不甘落后啊,搜狗和遨游还是很给力的!

HTML5还在发展完善,我相信在不久的将来,各个浏览器都会全面支持HTML5的。让我们静观其变吧!!

赞 收藏 评论

图片 14

知识普及:HTML 5到底是个什么东西

2012/01/05 · HTML5 · HTML5

来源:Damndigital

一、什么是HTML,以及HTML 5

1. HTML

HTML是超文本标记语言的英文缩写,这是一种标记语言,不需要进行编译,直接由浏览器执行。

语言就必须有一个语法的规则,如果没有规则,谁知道应该把一个HTML元素以怎样的形式展现给用户呢?目前HTML语言的标准是由 W3C(World Wide Web Consortium)负责制定的。依照规则,无论是何种浏览器,对于相同的HTML代码,应当展现给用户相同的效果。

目前HTML语言最新版本为4(HTML 4),此外还有一个可扩展超文本标记语言(XHTML)作为其扩展版本,提供更为丰富的功能和更严谨的语法规范。

2. HTML 5

HTML 5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出,於2007年被W3C接纳,并成立了新的HTML工作团队。2008年1月22日,W3C发布了最新的 HTML5工作草案,HTML工作组包括AOL、Apple、Google、IBM、 Microsoft、Mozilla、Nokia、Opera等数百个开发上。HTML5中增加了许多新特性,例如嵌入音频、视频和图片的函数、客户端存 储数据、交互式文档等,通过制定如何处理所有HTML元素以及如何从错误中恢复的精确规则,HTML5进一步增强了互动性,并有效减少了开发成本。

 

二、HTML5 有哪些特质

图片 15

我们来看看W3.org列举出来的8个Class技术描述:

A. 语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

B. 本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一) 和API说明文档。

C. 设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation 功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用 接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联

D. 连接特性(Class: CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技 术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。

E. 网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

F. 三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

G. 性能与集成特性(Class: Performance & Integration)

没有用户会永远等待你的Loading——HML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。

H. CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

Apple 官方对HTML5的各个特性做了详细并且动态的展示:http://www.apple.com/html5/showcase 

 

三、Html 5与Html 4的区别

A.简化的语法

更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写,这就行了。HTML5的语法兼容HTML4和XHTML1,但不兼容SGML。

B. 一个替代Flash的新”canvas”标记

对于Web用户来说,Flash既是一个惊喜,也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说,用新的 “canvas” 标记生成视频的技术已经到来。

目前, “canvas” 标记并不能提供所有的Flash具有的功能,但假以时日,Flash必将从web上淘汰。我们拭目以待,因为很多人还并不认同这种观点。

C. 新的 “header” 和 “footer” 标记

HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现,它们是专门为标志网站的这些部分设计的。在开发网站时,你不在需要用”div”标记来标注网页的这些部分。

D. 新的 “section” 和 “article” 标记

跟”header” 和 “footer”标记类似,HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。
据推测,除了让代码更有组织外,它也能改善SEO效果,能让搜索引擎更容易的分析你的页面。

E.新的 “menu” 和 “figure” 标记
新的”menu”标记可以被用作普通的菜单,也可以用在工具条和右键菜单上,虽然这些东西在页面上并不常用。
类似的,新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然,你可以用样式表来控制文字和图像,但使用HTML5内置的这个标记更适合。

F. 新的 “audio” 和 “video” 标记

新的”audio” 和 “video” 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称,它们是用来嵌入音频和视频文件的。
除此之外还有一些新的多媒体的标记和属性,例如”track”,它是用来提供跟踪视频的文字信息的。有了这些标记,HTML5使Web2.0特征变得越来越友好。问题在于,在HTML5还未被广泛的接受之前,Web2.0还是老的Web2.0。

G. 全新的表单设计

新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改,它们有很多的新属性(以及一些修改)。如果你经常的开发表单,你应该花时间更详细的研究一下。

H. 不再使用 “b” 和 “font” 标记

对我个人来说,这是一个让我不太理解的改动。我并不认为去除 “b” 和 “font”标记会带来多大的好处。我知道,官方的指导说这些标记可以通过CCS来做更好的处理,但这样一来,为了在文章一两个地方出现的这种标记,你就 需要在独立的css和文本两个地方来实现这一的功能,岂不笨拙。也许我们以后会习惯这种方法。

i. 不再使用 “frame”, “center”, “big” 标记

事实上,我已经记不清曾经何时用过这些标记了,所以,我并不为去除这些标记感到悲哀。相同的原因,有更好的标记能实现它们的功能——这很好,任何作废的标记从标准中剔除都是受欢迎的。

 

四、早期试行者:

体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器(Apple 开发的开源浏览器内核),如 Chrome 和 Safari,Firefox 不太流畅,即使现在Firefox 9官方声称完美支持HTML5,但是实际应用中,我们发现还是相对于Chrome和Safari欠缺许多。

W3C在2011年上半年正式推出了HTML5的初步标准,随之而来是谨慎的Mircosoft 发布了完美支持HTML5的IE9.

当然,介于目前浏览器市场玲琅满目,目前除了主流的浏览器的最新版本之外,之前的版本都在或多或少的拒绝HTML5。

 

五、其他Html 5开发相关站点:

图片 16

RUL:

PhoneGap是一个开源的、基于JavaScript语言、用于快速和简便开发手机应用程序的开发框架,用来构建跨平台的使用HTML,CSS 和JavaScript的移动应用程序。我们将会放出phoneGap的详细介绍。它是最普及的HTML5 to App的工具。

 图片 17

RUL: http://jsdo.it

JSDO.IT是一个js 代码分享的网站,强调社区参与和协作,它可以让程序员,开发者在站内分享自己写的程序代码和作品,也可以在站内相互交流,共享JS代码相关的内容,是通过 社交网络或社区为基础来建立的代码分享功能的网站。其界面流畅,带有自动更新的预览面板,可接受开源JS库。另外,它还有一个独特的性能,即可在智能手机 中打开浏览器查看的“智能手机预览”命令。这个工具需要用户注册并登陆才能使用。

图片 18

 

RUL:

HTML 5 Boilerplate 是一个HTML / CSS / js模板,是实现跨浏览器正常化、性能优化,稳定的可选功能如跨域Ajax和Flash的最佳实践。
此网站由业界众多专业资深前辈共同发起的一个开源开发模板站点,来帮助大家快速使用HTML5技术开发网站,同时兼容其他各种旧版本的浏览器浏览体验。 HTML5 Boilerplate并不是一套框架,他仅仅是一套模板。大家可以把他当作自己的新项目模板,在此基础上建立自己的项目。这一网站志在建立一套简单的模 板帮助大家快速的进行开发,一般来说下载了这套模板后,便可以在其上进行修改,测试,查看兼容性浏览等。

图片 19

 

RUL:

所有程序员开发者,或是对HTML5有过些许了解的人都听说过有一本程序员编程手册《PRO HTML5 PROGRAMMING》,而此网站是此书的线上官方站点,除了提供书中所提及的关于目前Html 5提供新特性讲解的部分内容,包括使用实例讲解API的调用方法等等,同时还提供更多线上编程方面的指导学习资料,以及学习实践工具。值得收藏。

 图片 20

 

RUL:

在beautyoftheweb网站上,可以下载到40种语言的IE9 RC版(开发者体验版),通过Bautyoftheweb,开发人员和爱好者即可有规律地对IE9平台上的HTML5实现效果进行预览,目前,此网站上的 IE9 RC版可以直接下载,同时还可以看线上指导视频,就算非开发者,程序员也能通过视频,领略到HTML5在IE9平台上带来的良好体验感受。目前所有RC版 下载都是免费得,比较开放,透明。可以说,这是微软为了宣传IE9而进行推广的一个网站。

 

六、DamnDigital(互动中国)特别推出过的案例学习:

 图片 21

North Kingdom:ROME & “3 Dreams of Black” 及其背后的故事(长文多图杀猫瞎眼)

 图片 22

North Kingdom联手Forsman&Bodenfors: Volvo Cross Country Travels

图片 23

创意互动:我们来玩玩有趣的图像立体化 WOOOOOW

 图片 24

 [V]以 HTML5 制成的纪录片——One Millionth Tower 重新认识城市及小区发展

图片 25

[V]WebGL:点击鼠标 开始奇幻太空之旅

 

 

图片 26

WebGL实验作品: Surface

 

七、基于HTML 5的优秀作品:

图片 27

RUL: 

 

图片 28

URL: 

 

图片 29

 URL:

 

图片 30

URL: 

图片 31

URL: 

图片 32

URL:  http://beta.rallyinteractive.com/

图片 33

URL:   http://www.beetle.com/

 图片 34

URL:  

图片 35

URL:  

图片 36

URL: 

图片 37

URL: 

图片 38

URL:  http://www.diesel.com/island

图片 39

URL:

参考资料:

(1)Wiki-HTML5

(2)W3C

(3)W3C Html5 logo**

赞 1 收藏 评论

图片 40

透过浏览器看HTTP缓存

2016/01/17 · HTML5 · HTTP, 缓存

原文出处: 大额_skylar(@大额大额哼歌等日落)   

作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关的部分,站点没有做任何缓存机制,我们的页面可能会因为资源的下载和渲染变得很慢,但大家都知道去找前端去解决页面慢的问题而不会去找服务端的开发人员。因此,了解相关的缓存机制和充分的利用它似乎就变得必不可少。

web端的缓存机制其实有多种,我在这里只是学习和整理了以浏览器为载体的HTTP缓存机制,看看它是如何工作的。

文章目录:

  •   一、web缓存的种类
  •   二、为什么需要浏览器缓存?我们需要做些什么?
  •   三、使用Etag验证缓存的HTTP响应
  •   四、什么是Cache-Control?如何定义Cache-Control策略?
  •   五、已经缓存的响应,如何更新或废弃?
  •   六、对于缓存机制,现在可以做的有哪些?
  •         七、扩展阅读

 

三、使用Etag验证缓存的HTTP响应

通常情况下,请求一个资源的过程大概是这样的:

图片 41

我在 再看Ajax  中整理了HTTP请求的请求头和响应头的一些参数,这里就看下Etag的作用。

3.1 Etag的主要作用

服务器通过 ETag HTTP 头传递验证码,大概是像‘‘x123cef’’这样的字符串。当浏览器在资源过期后再次请求时,浏览器默认会通过If-None-Match传递Etag的验证码,通过验证码可以进行高效的资源更新检查:如果资源未更改,则不会传输任何数据。

Etag就主要用来在响应过期之后,验证资源是否被修改。

3.2 Etag的工作原理

如上图,服务器在第一次返回响应的时候设置了缓存的时间120s,假设浏览器在这120s经过之后再次请求服务器相同的资源,首先,浏览器会检查本地缓存并找到之前的响应,不幸的是,这个响应现在已经’过期’,无法在使用。此时,浏览器也可以直接发出新请求,获取新的完整响应,但是这样做效率较低,因为如果资源未被更改过,我们就没有理由再去下载与缓存中已有的完全相同的字节。

于是就到了Etag发挥作用的时候了,通常服务器生成并返回在Etag中的验证码,常常是文件内容的哈希值或者某个其他指纹码。客户端不必了解指纹码是如何生成的,只需要在下一个请求中将其发送给服务器(浏览器默认会添加):如果指纹码仍然一致,说明资源未被修改,服务器会反悔304 Not Modified,这样我们就可以跳过下载,利用已经缓存了的资源,并且该资源会继续缓存120s。就像这样:

图片 42

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:经过浏览器看HTTP缓存,5到底是个如何事物

关键词:

上一篇:移动前端调试页面,前端重构方案了解一下

下一篇:没有了