葡京网投哪个正规 > 新葡亰-前端 > 学习系列,关于HTML5特性的一些限制与讨论

原标题:学习系列,关于HTML5特性的一些限制与讨论

浏览次数:87 时间:2019-11-15

关于HTML5的11个让人难以接受的事实

2012/01/01 · HTML5 · 2 评论 · HTML5

英文:11 hard truths about HTML5,编译:葡京网投哪个正规 ,WebAppTrend

HTML5为Web开发者提供了很多强大的新特性,但是它的一些特定的限制会让它无法和本地应用匹敌。

HTML5整合进了很多新的特性,并且有可能提升Web编程模式。和每一个阅读技术资讯的人所知道的一样,没有任何一样东西能像HTML5对互联网造成更多改变。在代码中加入一些HTML5,网站会变得更快更炫。但是HTML5能为那些想要要网络上实现本地应用表现的人做什么可能不在此列了。

在享受了HTML5的新标签以及APIs之后,现在已经是时机来承认HTML5模式确实是有一些限制的。这些限制不但会让我们对HTML5的幻梦破灭,还有可能让我们在某些场合不再使用HTML5。

事实上是,尽管HTML5确实有很强大的功能,但它并不能解决所有问题。它的一些附加功能是非常强大的,能让Web apps成为native app的强有力的对手,但是安全问题、本地数据存储的限制、同步问题以及政治问题都会让我们减小对它的期望。毕竟,任何技术都是有其限制的。

下面是Web开发者需要接受的一些关于HTML5的事实。

 事实1:安全是一场噩梦

客户端计算最根本的问题是用户最终拥有了对机器上运行的代码的控制权。在Web apps中,当浏览器拥有一个很强大的调试工具的时候,这种控制权比以往更容易被滥用。

当在浏览器中集成了一个Javascript的调试器比如Firebug,任何对Facebook、Google以及其他网站感兴趣的人都可以插入断点来查看代码。这对于了解网站是如何运行的是非常有利的,但对于安全问题来说却是一场噩梦。

想象有个变量的值是你想要改变的,Firebug或者其他一个浏览器调试器可以让你很容易地将数据改成你想要的任何数据。你想要通过改变你的地理位置来捉弄一下你的朋友吗?那么你可以修改浏览器中的经度和维度变量,让浏览器“处于”世界上的任何位置。所有你的Web应用的neat features都可以被修改,浏览器使得这样的修改比在本地应用中更为容易。

对于引发的安全问题,也是有些限制的。一些Javascript工具比如Google Web Toolkit和标准的编译器一样复杂,它们的输出是非常令人费解的。但是一些工具比如JavaScript Deminifier能解决这个问题。

威胁当然也跟应用性质有关。一个人通过改变浏览器上显示的经纬度来和朋友开玩笑说在环游世界的途中是一回事,而获得其他人的权限又是另外一回事了,这会带来威胁。一旦涉及到金钱,情况会更糟糕。所有这些都意味着基于客户端的HTML5是不能用来处理敏感数据的,每个人都应该对自己的能力加以警醒。

事实2:本地数据存储是有限制的

浏览器中隐藏的本地数据库让Web应用更容易在电脑上缓存数据。对任何一个在浏览器中享受这种台式机体验的人来说,这些数据库可以节省带宽,提升性能。然而它们肯定比不上本地应用的数据的强大功能。

HTML5的数据存储能力毫无疑问是很重要的功能,但是你仍然不能将存储的数据迁移到另外一台机器上,或是制作副本、备份、用另外一个应用打开。所有这些数据都是隐藏在浏览器之下的。

某种程度上说,这是最糟糕的一种情况。因为你要承担存储这些数据库的所有责任而不能对它有任何控制。

一些最新的浏览器可以让你看到在你的机器上创建了哪些数据库,但这些信息是有限的。Safari甚至可以让你能够删除数据库,但是你不能浏览这些信息或是将它们迁移到另外一台机器上,这些文件在设计之初就没有让它能够很容易迁移,尽管你可以做到这一点,如果你知道到哪里找这些文件的话。

你同样不能深入到文件中看到底存储了什么。当然,一个程序员可以看懂这些文件,但前提是他们研究清楚了文件格式并且做一些hacking。这些文件不像表单或者文本可以很容易地荣任何编辑器打开,使得它们不像本地应用那样容易被人们读懂。

事实3:本地数据可以被操纵:

用户可能并不拥有对数据的控制权,但是网站同样也被限制不能处理用户数据。用户换浏览器了?用户换机器了?很多Web开发者对此都无能为力。因为同步问题,他们不能让用户创建更多数据。

Web开发者也需要担心本地数据库的安全。尽管没有工具可以让用户可以很容易修改本地数据并升级权限,但服务器同样也没有能力去阻止用户做到。所有因为运行用户修改Javascript代码的安全漏洞同样会影响数据库。它们门户大开,等着有人写一个Greasemonkey脚本或一些本地代码去更改数据。

事实4:离线数据对同步是一场噩梦

HTML5的本地数据存储极大提升了离线使用Web应用的能力。唯一的问题是数据同步。

如果一个Web应用连接到网络上,它可以持续地将数据存储到云中去。而当应用离线时,应用中发生的数据就不能存储到云中。如果一个人切换了浏览器或者使用了不同的机器,就会出现副本,这时同步就会成为一个大问题。更糟糕的是,时钟本身就可能是不同步的,使得发现最新被保存的数据是不现实的。

当然,这对本地应用来说也一直都是一个问题,但是在本地应用中,为同步负责的是人,他可以通过查看文件名并改变日期来进行同步。但是因为HTML5并没有给用户对隐藏在浏览器之下的数据库的控制权,开发者必须提供用户界面让用户通过这个界面来管理同步问题。

这并非是一个完全棘手的问题。开发人员可以通过使用版本控制系统来处理这个问题,而现今的版本控制系统在处理这些问题上已经变得越发复杂了。但拥有这项技术并不意味着这是一个很容易使用的解决方案。合并不同GIT库是件很费时间的事情。HTML5开发者们需要先处理好这些问题,才能管理HTML5 Web应用的同步。

事实5:云端什么都没有向你承诺:

为HTML5将数据存储在云端而带来的所有结构性的问题来责备HTML5实际上不是件很公平的事情,但云端是一个必须的部分,因为云省去了安装软件和备份数据的麻烦。

由于HTML5本地数据存储的限制,大量Web应用存储仍然要保留在服务器端,但这可能是灾难性的。就在最近Facebook决定将不再使用一个基于Linux的插件来上传照片,结果,这个插件去掉的,同样被去掉的是通过这个插件上传的照片

这样的例子比较少见,但是因为各种原因,它们正变得越来越多。你能确保那个可爱地免费提供他们的一切HTML5应用的新兴公司在几年后甚至几个月后还存在吗?你只能自求多福。

情况还更糟糕。正如很多Web应用所明确说明的那样,这些数据并不是你的,在大数情形下,你不能诉诸法律来恢复数据。有些更离谱的服务条款甚至说数据可以“没有任何原因”就被删除。

HTML5不仅没有避免这个问题,它的结构实际上是保证了任何由你的浏览器缓存的数据都会存储在云端,这些数据是脱离了你的控制的。HTML5的炒作说这是它的一个优势特性,但这实际上却很容易造成不利影响。

事实6:强制升级并非是每个人都想要的

有个故事,或许是杜撰的,说一个人使用Gmail账户和酒吧里认识的人保持着随意的联系。当Google+出现以后,所有的历史记录都出现了,因为Google+在论坛里自动连上了那些旧的地址。每天,这些旧名字和旧面孔都会出现询问是否要加入到论坛中去。

当Web应用公司需要升级的时候,他们会将所有人一次性升级。尽管这据说是为了让用户不再受升级安装文件之苦,但对于那些不想使用新特性的人来说,这确是一场噩梦。这不像上面是一个关于人们隐私的问题。新软件可能因为新旧软件包之间的依赖关系而经常崩溃。

事实7:Web Workers并不会处理优先级

Web Workers(译者注:一种新的 JavaScript 编程模型)是HTML5的一个非常耐人寻味的特性。与其去使用Javascript传统的wait、delay和pause命令,现在Web开发者可以拆分他们的命令并且整合到Web Workers的CPU hogs中。换句话说,HTML5 Web开发者可以让浏览器表现得像操作系统一样。

但问题在于,Web Workers并没有复制操作系统的所有特性。尽管它提供了一种方式来讲负载分支并分离,但是却没有方法来管理负载或是设置优先级。API只是让消息传入或者传出Worker对象。这就是它做的一切了,剩下的都交给浏览器了。

CPU丰富的应用比如code crackers会潜入流行网站的后台吗?用户被交给会周期性被窃取的网站了吗?病毒已经附在一切有用的软件上了,那么攻破网站就只是时间问题了。而用户面对这一切能做的很少,因为他们没有办法去监测或者跟踪Worker objects做了什么。电脑被重定向到指定网页的时候只会越来越慢。

事实8:格式不兼容比比皆是

HTML5引入了<audio>和<video> 标签,第一眼看上去,它们和图像标签一样好用。只要在其中加入一个URL,浏览器就会引入数据流。然而,如果它真有这么简单的话,为什么我浪费了两个星期来让所有主要的浏览器可以播放基本的音频文件呢?

个别浏览器构建者只实现了部分而不是全部的音频视频格式确实不是HTML5委员会的错。大家都是人,都想要争夺统治权。往往在一个浏览器上工作正常的文件到了另外一个浏览器上却不能工作了。开发者要如何测试这一点呢?API开发者非常聪明,他们加入了canPlayType函数,但就是这个函数也不是所有浏览器都支持的。

事实9:各浏览器的实现是独立的

HTML5的田园诗般的愿景是一回事,其实现的蹩脚的现实是另一回事。诚然,程序员正在尽他们最大努力来实现架构师的梦想,但就是有一些标签和对象无法正常工作。

例如,有很多理由去喜欢HTML5的地理定位API。它提供了对隐私的一定程度的包含,对精确度也有控制。要是它能一直一贯地工作该有多好——有的浏览器就会总是超时,这个浏览器还是不太聪明,因为它应该知道台式机上是没有GPS芯片的。

最后,人们会去抱怨浏览器没有完全实现HTML5的特性,而不是去责备API本身的结构问题。这一事实凸显了Web开发者在开发基于HTML5的Web应用时所面临的挑战。

事实10:硬件idiosyncracies带来新的挑战

抱怨某些浏览器构建者超出了职责要求而提供更好的性能表现似乎也不公平,但这并非是恩将仇报。一个法拉利拥有者在绕过了一个灯杆以后,他就会发现有时候额外的动力并非总是好事。

Microsof通过将IE和低端硬件驱动整合而提升了IE浏览器中画布对象(Canvas object)的性能。它甚至做了一些游戏比如pirateslovedaisies.com来显示其性能。

但现在程序员们需要注意这些附加功能是否能够实现,并且这些代码的运行速度也是无法保证的。

例如,pirateslovedaisies.com的游戏设计者设计了一个开关来开启或者关闭IE支持的特性。但是,有没有一个API来告诉你这些特性是什么呢?没有。最简单的方式是通过浏览器名字来进行测试并估算帧速率。很多游戏开发者都有多年经验来了解可用硬件的范围,唯一的解决方法就是禁止创新,但这将是Web开发者又要解决的一个新的问题。

事实11:政治一直都存在

有个叫Ian Hickson的人,是HTML5标准的主要起草者,也是生命的最高独裁者(the Supreme Dictator for Life)。我想他们这是在开玩笑,因为这样的头衔实在太不匹配了。标准的编写者只是在提出建议,浏览器公司的编码天才们才是最终做出决定的人。他们可以选择实现或者不实习某个特性,然后Web开发者就要去测试结果是否稳定。几年以后,标准就会根据与实现程度的匹配情况做出改变。

很多Javascript开发者将兼容性问题都留给了开发代码库的人,比如jQuery。这些层让我们不必去了解不同浏览器之间的差别。但是,这些代码在将来是否足够健壮?只有时间才会知道。

这个议题凸显了这个领域中最根本的问题。我们想要自由、创造性以及因为浏览器间的激烈竞争而产生的丰富特性。创新的脚步非常快,但是因为浏览器开发者都争相添加新的特性以赢得先机,使得各个浏览器之间有更多的不同。

但我们希望能有一个统一的指挥者这样就能获得稳定性。但是,对于独裁和自治间的争斗,从来都没有一个理想的解决方式。与其为这些差异头疼,我们或许想要听听Winston Churchill对下议院所说的话:“事实上,民主是一种最糟糕的政府形式,除非其他的形式都经过了一次又一次的试验。”

 

赞 收藏 2 评论

葡京正网网投 1

用户可能并不拥有对数据的控制权,但是网站同样也被限制不能处理用户数据。用户换浏览器了?用户换机器了?很多Web开发者对此都无能为力。因为同 步问题,他们不能让用户创建更多数据。Web开发者也需要担心本地数据库的安全。尽管没有工具可以让用户可以很容易修改本地数据并升级权限,但服务器同样 也没有能力去阻止用户做到。所有因为运行用户修改Javascript代码的安全漏洞同样会影响数据库。

HTML5带给我们的是什么呢?

1、让Web再次回归到富客户端地步,而且更加的独立,减少了对第三方插件的依赖。

     比如:之前的HTML4的标准中并没有对于视频、音频以及其他的富客户端技术支持的非常好,这就使得Flash和SilverLight变得异常的成功。而在HTML5新标准中原生的就支持音频、视频、画布等技术。让我们的WEB程序拥有更多富客户端表现的方式,而且让我们的WEB程序更加独立,更好的适应多种形式的客户端。

2、对本地离线存储的更好的支持 

     由于之前想在客户端保存一些数据都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。 

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。有了本地数据库的支持,让一些简单的离线应用也成为了可能。 

葡京正网网投 ,3、新的特殊内容元素,更好的支持SEO以及方便视障人士使用

     现在所有的站点基本上都是Div+CSS布局,几乎所有的文章标题、内容、辅助介绍等都用Div容器来承载。搜索引擎在抓取页面内容时,因为没有明确的容器的含义只能去猜测这些标签容器承载的是文章标题还是文章内容等,HTML5新标准中直接添加了拥有具体含义的HTML标签比如:article、footer、header、nav、section 

4、更加智能的表单标签

     之前的表单标签,仅仅是简单的类型的约束,比如文本框、文本域、下拉列表等,而跟业务结合紧密的表单标签数据校验等控制都没有很好的支持,而是用这些技术都基本上都是跟第三方的JS控件进行结合使用,但是这些第三方总会涉及到版本控制、浏览器兼容性、非标准等一系列的问题,而在HTML5的标准中直接添加了智能表单,让这一切都变得那么的简单,比如 calendar、date、time、email、url、search。

5、HTML5即时二维绘图 ,也就是画布的引入,让Javascript子弹飞

     画布的引入使得:Web端生成动画效果、制作Web游戏、更好的交互体验设计都增加了无限的变数,当社区充斥着乱七八糟超炫的HTML5的JS控制的效果的时候,让人无限的赞叹。HTML5 的canvas 元素使用JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

6、JS嗑药了,支持多线程

     在不影响UI update 及 浏览器与用户交互的情况下, 前端做大规模运算,只能通过 setTimeout 之类的去模拟多线程 。而新的标准中,JS新增的HTML5 Web Worker对象原生的就支持多线程。 

7、WebSockets让跨域请求、长连接、数据推送等一切都变得那么简单,Web不仅仅是Ajax

      WebSockets是在一个(TCP)接口进行双向通信的技术,PUSH技术类型。WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的。  

8、更好的异常处理

      HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。 

9、文件API让文件上传和操纵文件变得那么简单

      由于项目中经常遇到用Web应用中控制操作本地文件,而之前都是使用一些富客户端技术比如flash,ActiveX,Silverlight等技术,面对文件JS就是个shit,就是个鸡肋。在HTML5的新的提供的FHTML5 File API 让JS可以轻松上阵了。

10、编辑、拖放、微数据、浏览历史管理、地理信息接口API、设备硬件操作API等很多的新功....

html5网站的特点都有什?

1.语义特性(Class:Semantic)
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。
2 本地存储特性(Class: OFFLINE & STORAGE)
基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一) 和API说明文档。
3 设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation 功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联
4 连接特性(Class: CONNECTIVITY)
更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。
5 网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

  1. 三维、图形及特效特性(Class: 3D, Graphics & Effects)
    基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。
    7 性能与集成特性(Class: Performance & Integration)
    没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。
  2. CSS3特性(Class: CSS3)
    在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。
    参考资料:百度百科  

问题4:离线数据对同步是一场噩梦

总结:

        通过上面HTML5的新特点,不难总结出HTML5=Javascript+HTML+CSS。HTML5的新特性带给开发者的是更友好更丰富的本地处理的API,更智能的更优雅的HTML标签,更强的本地处理的功能,通信也进一步加强。Google很早之前就意识到了,客户只要拥有一个浏览器就可以了,相信不久的将来现在的Web的应用不在对本地处理那么鸡肋,CS形式的客户端相信也会越来越少。

        作为开发者,当Adobe公司宣布放弃Flash,把最大的精力放到HTML5的开发上的时候,那你可能会看到这些趋势,当微软选择了HTML5而放弃了Silverlight继续升级的时候,那你基本上也没有什么好选择的了。HTML5的发力,的确带给我们每个开发者都带来了机会。

当然以上只是笔者的观点,每个人都有阅读新技术的角度,欢迎大家转载讨论。

我参与的厚德IT团队也同步更新,希望大家关注。(厚德IT专注于IT最新技术分享)

此文章在另外一个blog同步:


html5技术的好处在什地方

 1、SEO(搜索引擎优化)得到提升

 2、更快的图片下载速度,尤其是对于移动用户

3、Web应用开发更容易,尤其是移动应用

 4、更精美的动画效果

 HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观,语义标记具有网络营销SEO和维护优势。HTML5现在拥有的一些效果已经超越早期标准的效果,其中之一就是动画制作。
  为了获得精美的网络营销动画效果,网页团队过去通常使用Flash。不过,Flash也有一些明显的不足:搜索引擎无法索引,苹果的iOS和操作系统不允许使用Flash。安全性和许可证限制了其在许多公司中的使用。通过HTML5,精美的可视化动画可以成为语义动画。  

中 40 个最重要的技术点,html540技术点 介绍 我是一个ASP.NETMVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。...

观点:

HTML5的未来?

       当然HTML5不是孤立的,Javascript API的增强,让JS变成异常强大的未来的编程武器。CSS3带给未来Web应用也是极大的新的挑战。相信由于HTML5标准化的支持,相信未来Web技术真正的可以跑在任何的端,也让我们的Web应用更加的独立,更加的轻松的融入到各个端中,HTML5 就是未来!

HTML5 中 40 个最重要的技术点,html540技术点

介绍

  我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下40个重要的问题将帮助你复习HTML5相关的知识。

  这些问题不是你得到工作的高效解决方案,但是可以在你想快速复习相关主题的时候有所帮助。

  快乐地找工作。

葡京正网网投 2

  SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?

  SGML(标准通用标记语言)是一个标准,告诉我们怎么去指定文档标记。他是只描述文档标记应该是怎么样的元语言,HTML是被用SGML描述的标记语言。

  因此利用SGML创建了HTML参照和必须共同遵守的DTD,你会经常在HTML页面的头部发现“DOCTYPE”属性,用来定义用于解析目标DTD

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  现在解析SGML是一件痛苦的事情,所以创建了XML使事情更好。XML使用了SGML,例如:在SGML中你必须使用起始和结束标签,但是在XML你可以有自动关闭的结束标签。

  XHTML创建于XML,他被使用在HTML4.0中。你可以参考下面代码片段中展示的XML DTD

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

葡京正网网投 3

  总之,SGML是所有类型的父类,较旧的HTML利用SGML,HTML4.0使用派生自XML的XHTML

  什么是HTML5?

  HTML5是最新的HTML标准,他的主要目标是提供所有内容而不需要任何的像flash,silverlight等的额外插件,这些内容来自动画,视频,富GUI等

  HTML5是万维网联盟(W3C)和网络超文本应用技术工作组(WHATWG)之间合作输出的

  为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?

  HTML5没有使用SGML或者XHTML,他是一个全新的东西,因此你不需要参考DTD,对于HTML5,你仅需放置下面的文档类型代码告诉浏览器识别这是HTML5文档

  如果我不放入<! DOCTYPE html> ,HTML5还会工作么?

  不会,浏览器将不能识别他是HTML文档,同时HTML5的标签将不能正常工作

  哪些浏览器支持HTML5?

  几乎所有的浏览器Safari,Chrome,Firefox,Opera,IE都支持HTML5

  HTML5的页面结构同HTML4或者更前的HTML有什么区别?

  一个典型的WEB页面包含头部,脚部,导航,中心区域,侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容,我们可能要使用DIV标签。

  但是在HTML5中通过为这些区域创建元素名称使他们更加清晰,也使得你的HTML更加可读

葡京正网网投 4

  以下是形成页面结构的HTML5元素的更多细节:

  • <header>:代表HTML的头部数据
  • <footer>:页面的脚部区域
  • <nav>:页面导航元素
  • <article>:自包含的内容
  • <section>:使用内部article去定义区域或者把分组内容放到区域里
  • <aside>:代表页面的侧边栏内容

  HTML5中的datalist是什么?

  HTML5中的Datalist元素有助于提供文本框自动完成特性,如下图所示:

葡京正网网投 5

  以下是DataList功能的HTML代码:

1 2 3 4 5 6 7 8 <input list="Country"> <datalist id="Country">   <option value="India">   <option value="Italy">   <option value="Iran">   <option value="Israel">   <option value="Indonesia"> </datalist>

  HTML5中什么是不同的新的表单元素类型?

  这里有10个重要的新的表单元素在HTML5中被介绍

  让我们一步一步了解这10个元素

  如果你想显示颜色选择对话框

1 <input type="color" name="favcolor">

葡京正网网投 6

  如果你想显示日历对话框

1 <input type="date" name="bday">

葡京正网网投 7

  如果你想显示含有本地时间的日历

1 <input type="datetime-local" name="bdaytime">

葡京正网网投 8

  如果你想创建一个含有email校验的HTML文本框,我们可以设置类型为“email”

1 <input type="email" name="email">

葡京正网网投 9

  对于URL验证设置类型为”url”,如下图显示的HTML代码

1 <input type="url" name="sitename">

葡京正网网投 10

  如果你想用文本展示数字范围,你可以设置类型为“number”

1 <input type="number" name="quantity" min="1" max="5">

葡京正网网投 11

  如果你想显示范围控制,你可以使用类型”range”

1 <input type="range" min="0" max="10" step="2" value="6">

葡京正网网投 12

  想让文本框作为搜索引擎

1 <input type="search" name="googleengine">

  想只能输入时间

1 <input type="time" name="usr_time">

  如果你想使用文本框接受电话号码

1 <input type="tel" name="mytel">

  HTML5中什么是输出元素?

  当你需要计算两个输入的和值到一个标签中的时候你需要输出元素。例如你有两个文本框(如下图),你想将来自这两个输入框中的数字求和并放到标签中。

葡京正网网投 13

  下面是如何在HTML5中使用输出元素的代码

1 2 3 4 5 <form onsubmit="return false"  öninput="o.value = parseInt(a.value) + parseInt(b.value)">   <input name="a" type="number"> +   <input name="b" type="number"> =   <output name="o" /> </form>

  为了简单起见,你也可以使用“valueAsNumber”来代替“parseInt”。你同样能在output元素中使用“for”使其更加可读

1 <output name="o" for="a b"></output>

  什么是SVG(Scalable Vector Graphics可缩放矢量图形)?

  SVG(Scalable Vector Graphics可缩放矢量图形)表示可缩放矢量图形。他是基于文本的图形语言,使用文本,线条,点等来进行图像绘制,这使得他轻便,显示更加迅速

  我们能看到使用HTML5的SVG的简单例子么?

  比方说,我们希望使用HTML5 SVG去显示以下简单的线条

葡京正网网投 14

  下面是HTML5代码

1 2 3 <svg id="svgelem" height="[object SVGAnimatedLength]" xmlns="http://www.w3.org/2000/svg"> <line></line>

  HTML5中canvas是什么?

  Canvas是HTML中你可以绘制图形的区域

  我们如何使用Canvas来画一条简单的线?

  • 定义Canvas区域
  • 获取访问canvas上下文区域
  • 绘制图形

  定义Canvas区域

  定义Canvas区域你需要使用下面的HTML代码,这定义了你能进行绘图的区域

1

<canvas id="mycanvas" width="600" height="500">

1 2

var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

  绘制图形

  现在一旦你获取了访问上下文,我们就可以开始在上下文中绘制了。首先调用“move”方法并从一个点开始,使用线条方法绘制线条然后使用stroke方法结束。

1 2 3 ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();

  以下是完整的代码

1 2 3 4 5 6 7 8 9 10 11 12 <body  onload="DrawMe();"> <canvas id="mycanvas" width="600" height="500"></body> <script> function DrawMe() { var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d"); ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke(); }

  你可以得到以下输出

葡京正网网投 15

 

  Canvas和SVG图形的区别是什么?

  Note:-如果你看了之前的两个的问题,Canvas和SVG都可以在浏览器上绘制图形。因此在这个问题中,面试官想知道你在什么时候选用哪种方式。

SVG Canvas
这个就好像绘制和记忆,换句话说任何使用SVG绘制的形状都能被记忆和操作,浏览器可以再次显示 Canvas就像绘制和忘记,一旦绘制完成你不能访问像素和操作它
SVG对于创建图形例如CAD软件是良好的,一旦东西绘制,用户就想去操作它 Canvas在绘制和忘却的场景例如动画和游戏是良好的
因为为了之后的操作,需要记录坐标,所以比较缓慢 因为没有记住以后事情的意向,所以更快
我们可以用绘制对象的相关事件处理 我们不能使用绘制对象的相关事件处理,因为我们没有他们的参考
分辨率无关 分辨率相关

  如何使用Canvas和HTML5中的SVG去画一个矩形?

  HTML5使用SVG绘制矩形的代码

1 2 3 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect></rect>

  HTML5使用Canvas绘制矩形的代码

1 2 3 4 var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.stroke();

  CSS(cascading style sheets级联样式表)中的选择器是什么?

  选择器在你想应用一个样式的时候,帮助你去选择元素。举例,下面是简单的被命名为”instro”的样式,他适用于HTML元素显示红色背景

1 2 3 4 5 <style> .intro{   } </style>

  应用上面的”intro”样式给div,我们可以使用”class”选择器,如下图所示

1 2 3 4 <div class="intro"> <p>My name is Shivprasad koirala.</p> <p>I write interview questions.</p> </div>

  如何使用ID值来应用一个CSS样式?

  假设,你有一个HTML段落标签,使用id是”mytext”,就和下面的片段中显示的那样

1 <p id="mytext">This is HTML interview questions.</p>

 

  你可以使用”#”选择器和”id”的名字创建一种样式,并把CSS值应用到段落标签中,因此应用样式到”mytext”元素,我们可以使用”#mytext”,如下所示

1 2 3 4 5 6 <style> #mytext {   } </style>

 

  迅速修订一些重要的选择器

  设置所有段落标签背景色为黄色

1 2 3 4 div p {   }

 

  设置所有div内部的段落标签为黄色背景

1 2 3 4 div p {   }

 

  设置所有div之后的段落标签为黄色背景

1 2 3 4 div+p {   }

 

  设置所有含有“target”属性的变为黄色背景

1 2 3 4 5 6 7 a[target] {   } <a href="http://www.questpond.com">ASP.NET interview questions</a> <a href="http://www.questpond.com" target="_blank">c# interview questions</a> <a href="http://www.questpond.org" target="_top">.NET interview questions with answers</a>

 

  当控制得到焦点的时候设置所有的元素为黄色背景

1 2 3 4 input:focus {   }

 

  根据相关连接操作设置超链接样式

1 2 3 4 a:link    {color:green;} a:visited {color:green;} a:hover   {color:red;} a:active  {color:yellow;}

  CSS中使用列布局是什么?

  CSS列布局帮助你分割文本变为列,例如考虑下面的杂志新闻在一个大的文本中,但是我们需要在他们之间使用边界划分为3列,这里HTML5的列布局就有所帮助了

葡京正网网投 16

  为了实现列布局我们需要指定以下内容

  • 我们需要把text划分为多少列

  指定列数我们需要使用column-count,对于Chrome和firefox分别需要”webkit”和“moz-column”

1 2 3 -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;
  • 两列之间我们想要多少差距
1 2 3 -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:20px;

  你想在这些列之间画一条线么?如果是,那么多厚呢?

1 2 3 -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:6px outset #ff00ff;

  以下是完整代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style> .magazine { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;   -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:20px;   -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:6px outset #ff00ff; } </style>

  你可以使用class属性来应用样式到文本

1 2 3 <div class="magazine"> Your text goes here which you want to divide in to 3 columns. </div>

  你能解释一下CSS的盒子模型么?

  CSS和模型是围绕在HTML元素周围的定义Border(边界),padding(内边距)和margin(外边距)的矩形空间

  Border(边界):定义了元素包含的最大区域,我们能够使边界可见,不可见,定义高度和宽度等;

  Padding(内边距):定义了边界和内部元素的间距

  Margin:定义了边界和任何相邻元素的间距

葡京正网网投 17

  例如以下是简单的CSS代码定义了盒子的边界,内边距和外边距值

1 2 3 4 5 6 .box {     width: 200px;     border: 10px solid #99c;     padding: 20px;     margin: 50px; }

  现在如果我们应用了以上的CSS到一个如下显示的DIV标签,你输出将会和下面图形中显示的那样。我已经创建两个测试“Some text”和“Some other text”,因此我们能看到多少margin(外边距)的属性功能

1 2 3 4 <div align="middle" class="box"> Some text </div> Some other text

葡京正网网投 18

  你能解释一些CSS3中的文本效果么?

  这里面试官期待你回答两个Css的文本效果,以下是两种需要注意的效果

  阴影文本效果

1 2 3 4 .specialtext { text-shadow: 5px 5px 5px #FF0000; }

葡京正网网投 19

  文字包装效果

1 2 3 4 <style> .breakword {word-wrap:break-word;} </style>

葡京正网网投 20

  什么是Web Workers?为什么我们需要他们?

  考虑以下会执行上百万次的繁重的循环代码

1 2 3 4 5 6 7 function  SomeHeavyFunction() { for (i = 0; i < 10000000000000; i++) { x = i + x; } }

  比方说上面的循环代码在HTML按钮点击以后执行,现在这个方法执行是同步的,换句话说这个浏览器必须等到循环完成才能操作

1 <input type="button" onclick="SomeHeavyFunction();" />

  这个会进一步导致浏览器冻结并且没有相应,屏幕还会显示如下的异常信息

葡京正网网投 21

  如果你能移动这些繁重的循环到Javascript文件中,采用异步的方式运行,这意味着浏览器不需要等到循环接触,我们可以有更敏感的浏览器,这就是web worker的作用

  Web worker帮助我们用异步执行Javascript文件

  Web Worker线程的限制是什么?

  Web worker线程不能修改HTML元素,全局变量和Window.Location一类的窗口属性。你可以自由使用Javascript数据类型,XMLHttpRequest调用等。

  我们如何在JavaScript中创建一个worker线程?

  创建一个worker线程,我们需要通过Javascript文件名创建worker对象

1 var worker = new Worker("MyHeavyProcess.js");

  我们需要使用“PostMessage”发送信息给worker对象,下面是相同的代码。

1 worker.postMessage();

  当worker线程发送数据的时候,我们在调用结束的时候,通过”onMessage”事件获取

1 2 3 4 worker.onmessage = function (e) { document.getElementById("txt1").value = e.data; };

葡京正网网投 22

  这个繁重的循环在“MyHeavyProcess.js”的Javascript文件中,以下代码,当Javascript文件想发送信息,他使用”postmessage”,同时任何来自发送者的信息都在“onmessage”事件中接收到。

1 2 3 4 5 6 7 8 var x =0 self.onmessage = function (e) {     for (i = 0; i < 1000000000; i++)     {         x = i + x;     }     self.postMessage(x); };

  如何中止Web Worker?

1 w.terminate();

  为什么我们需要HTML5的服务发送事件?

  网络世界的普遍需求是从服务器更新。以一个股票应用为例,浏览器必须定期从服务器更新最新的股票值。

葡京正网网投 23

  现在实现这类需求开发者通常写一些PULL的代码,到服务器同时抓取某些区间数据。现在PULL的解决方案是很好的,但是这使得网络健谈有很多的调用,同时增加了服务器的负担。

  因此相比于PULL,如果我们能采用某种PUSH的解决方案那会是很棒的。简而言之,当服务器更新的时候,将会发送更新到浏览器客户端,那可以被接受通过使用”SERVER SENT EVENT”

  因此首要的是浏览器需要连接将会发送更新的服务器资源,比方说我们有一个”stock.aspx”页面会发送股票更新,因此连接该页面,我们需要使用附加时间来源对象,如下所示:

1 var source = new EventSource("stock.aspx");

  当我们将要接受服务器发送的更新信息时,我们需要附加功能。我们需要附加功能到”onmessage”事件就像以下显示的那样。

1 2 3 source.onmessage = function (event) {   document.getElementById("result").innerHTML += event.data + "<br>"; };

  现在来自服务端,我们需要去发送事件,下面是一些用命令需要从服务端发送的重要事件列表

Event Command
发送数据到客户端 data : hello
告诉客户端10s内重试 retry : 10000
提出具体事件与数据 event : successdata : You are logged in.

  因此,举例说明,如果你想下面的ASP.NET代码一样发送数据,请标记内容类型设置给文本/事件

1 2 3 4 Response.ContentType="text/event-stream"; Response.Expires=-1; Response.Write("data: " + DateTime.Now.ToString()); Response.Flush();

  以下是设置10s后重试的命令

1 Response.Write("retry: 10000");

  如果你想附加事件,我们需要使用“addEventListener”事件,如下代码所示:

1 2 3 source.addEventListener('message', function(e) {   console.log(e.data); }, false);

  来自服务器端的以下信息将会触发Javascript的”message”方法

1 2 event: message data : hello

  HTML5中的本地存储概念是什么?

  很多时候我们会存储用户本地信息到电脑上,例如:比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络恢复的时候,他想获取这些信息然后发送到服务器进行存储
现代浏览器拥有的存储被叫做“Local Storage”,你可以存储这些信息。

  我们如何从本地存储中添加和移除数据?

  数据添加到本地存储采用键值对,以下示例显示了城市数据”India”添加了键”Key001”

1 localStorage.setItem(“Key001”,”India”);

  从本地存储中检索数据我们可以提供键名并使用”getItem”方法

1 var country = localStorage.getItem(“Key001”);

  你也可以使用以下代码,存储Javascript对象在本地存储中

1 2 3 4 5 var country = {}; country.name = “India”; country.code = “I001”; localStorage.setItem(“I001”, country); var country1 = localStorage.getItem(“I001”);

  如果你想存储Json格式,你可以使用“JSON.stringify”方法,如下所示:

1 localStorage.setItem(“I001”,JSON.stringify(country));

  本地存储的生命周期是什么?

  本地存储没有生命周期,它将保留知道用户从浏览器清除或者使用Javascript代码移除。

  本地存储和cookies(储存在用户本地终端上的数据)之间的区别是什么?

  Cookies Local storage
客户端/服务端 客户端和服务端都能访问数据。Cookie的数据通过每一个请求发送到服务端 只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器
大小 每个cookie有4095byte 每个域5MB
过期 Cookies有有效期,所以在过期之后cookie和cookie数据会被删除 没有过期数据,无论最后用户从浏览器删除或者使用Javascript程序删除,我们都需要删除

 

  什么是事务存储?我们如何创建一个事务存储?

  会话存储和本地存储类似,但是数据在会话中有效,简而言之数据在你关闭浏览器的时候就被删除了。

  为了创建一个会话存储你需要使用“sessionStorage.variablename.”在以下的代码我们创建了一个名为”clickcount”的变量;

  如果你刷新浏览器则数目增加,但是如果你关闭浏览器,“clickcount”变量又会从0开始。

1 2 3 4 5 6 7 8 if(sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 0; }

  本地存储和事务存储之间的区别是什么?
本地存储数据持续永久,但是会话在浏览器打开时有效知道浏览器关闭时会话变量重置

  什么是WebSQL?

  WebSQL是一个在浏览器客户端的结构关系数据库,这是浏览器内的本地RDBMS(关系型数据库系统),你可以使用SQL查询

  WebSql是HTML5的一个规范吗?

  不是,许多人把它标记为HTML5,但是他不是HTML5的规范的一部分,这个规范是基于SQLite的

  我们如何使用WebSQL?

  第一步我们需要做的是使用如下所示的“OpenDatabase”方法打开数据库,第一个参数是数据库的名字,接下来是版本,然后是简单原文标题,最后是数据库大小;

1 var db=openDatabase('dbCustomer','1.0','Customer app’, 2 * 1024 * 1024);

  为了执行SQL,我们需要使用“transaction”方法,并调用”executeSql”方法来使用SQL

1 2 3 4 5 6 db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)'); tx.executeSql('INSERT INTO tblcust (id, customername) VALUES(1, "shiv")'); tx.executeSql('INSERT INTO tblcust (id, customername) VALUES (2, "raju")'); }

  万一你要使用“select”查询你会得到数据”result”集合,我们可以通过循环展示到HTML的用户界面

1 2 3 4 5 6 7 8 9 10 db.transaction(function (tx) {   tx.executeSql('SELECT * FROM tblcust', [], function (tx, results) {    for (i = 0; i < len; i++) {      msg = "<p><b>" + results.rows.item(i).log + "</b></p>";      document.querySelector('#customer).innerHTML +=  msg; }  }, null); });

  HTML5中的应用缓存是什么?

  一个最需要的事最终是用户的离线浏览,换句话说,如果网络连接不可用时,页面应该来自浏览器缓存,离线应用缓存可以帮助你达到这个目的

  应用缓存可以帮助你指定哪些文件需要缓存,哪些不需要。

  HTML5中我们如何实现应用缓存?

  首先我们需要指定”manifest”文件,“manifest”文件帮助你定义你的缓存如何工作。以下是”mainfest”文件的结构

1 2 3 4 CACHE MANIFEST # version 1.0 CACHE : Login.aspx
  • 所有manifest文件都以“CACHE MANIFEST”语句开始.
  • #(散列标签)有助于提供缓存文件的版本.
  • CACHE 命令指出哪些文件需要被缓存.
  • Mainfest文件的内容类型应是“text/cache-manifest”.

  以下是如何在ASP.NET C#使用manifest缓存

1 2 3 4 5 6 7 Response.ContentType = "text/cache-manifest"; Response.Write("CACHE MANIFEST n"); Response.Write("# 2012-02-21 v1.0.0 n"); Response.Write("CACHE : n"); Response.Write("Login.aspx n"); Response.Flush(); Response.End();

  创建一个缓存manifest文件以后,接下来的事情实在HTML页面中提供mainfest连接,如下所示:

1 <html manifest="cache.aspx">

  当以上文件第一次运行,他会添加到浏览器应用缓存中,在服务器宕机时,页面从应用缓存中获取

  我们如何刷新浏览器的应用缓存?

  应用缓存通过变更“#”标签后的版本版本号而被移除,如下所示:

1 2 3 4 5 6 7 CACHE MANIFEST # version 2.0(new) CACHE : Login.aspx Aboutus.aspx NETWORK : Pages.aspx

  应用缓存中的回退是什么?

  应用缓存中的回退帮助你指定在服务器不可访问的时候,将会显示某文件。例如在下面的manifest文件中,我们说如果谁敲击了”/home”同时服务器不可到达的时候,”homeoffline.html”文件应送达

1 2 FALLBACK: /home/ /homeoffline.html

  应用缓存中的网络是什么?

  网络命令描述不需要缓存的文件,例如以下代码中,我们说”home.aspx”永远都不应该被缓存或者离线访问。

1 2 NETWORK: home.aspx

观点:

那什么是HTML5呢?

         HTML 5草案的前身名为Web Applications 1.0,是在2004年由WHATWG提出,再于2007年获W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。目前Firefox、Google Chrome、Opera、Safari(版本4以上)、Internet Explorer 9已支援HTML5技术。 

HTML5本质并没有对之前HTML4版本的规范进行彻底的变革,更令人欣喜的是,HTML5一开始设计就考虑了跟之前的标准进行兼容。而且把最新的WEB开发的一些新技术新的规范引入进了新版本的标准中。那么它的本质是什么呢?其实HTML5的发展就是html,css,jsapi的发展,用另外一句话解释就是:HTML5=HTML+CSS+JSAPI。

问题7:Web Workers并不会处理优先级

引言,认识两个标准制定的组织

        在讲什么是Html5之前得先了解两个组织;WHATWG :网页超文本技术工作小组(英语:Web Hypertext Application Technology Working Group,缩写为WHATWG),是一个以推动网络 HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商和一些相关团体形成的一个松散的、非正式的协作组织,这些团体希望发展一些新的技术,从而开发人员可以在互联网上编写并部署应用。 另外一个就是大家熟悉的W3C :万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会,它主要是为解决web应用中不同平台、技术和开发者带来的不兼容问题,保障Web信息的顺利和完整流通,万维网联盟制定了一系列标准并督促Web应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范,开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。

HTML5的田园诗般的愿景是一回事,其实现的蹩脚的现实是另一回事。诚然,程序员正在尽他们最大努力来实现架构师的梦想,但就是有一些标签和对象 无法正常工作。例如,有很多理由去喜欢HTML5的地理定位API。它提供了对隐私的一定程度的包含,对精确度也有控制。要是它能一直一贯地工作该有多好 ——有的浏览器就会总是超时,这个浏览器还是不太聪明,因为它应该知道台式机上是没有GPS芯片的。最后,人们会去抱怨浏览器没有完全实现HTML5的特 性,而不是去责备API本身的结构问题。这一事实凸显了Web开发者在开发基于HTML5的Web应用时所面临的挑战。

webWorker的问题确实还会有一堆,从标准上看webworker还在进化期,与serverEvent相比,webworker是另一种服 务器端的通信,这种优先级的处理,完全是在开发者来决定的,这没什么问题。webWorker肯定是不成熟的,还需要时间。但是作者所说的问题,可能是看 了一眼标准后作出的臆想,可那已经不是问题了,webworker的根本问题,现在是父子进程的通信和子子进程的通信问题。

抱怨某些浏览器构建者超出了职责要求而提供更好的性能表现似乎也不公平,但这并非是恩将仇报。Microsoft通过将IE和低端硬件驱动整合而提 升了IE浏览器中画布对象(Canvas object)的性能。它甚至做了一些游戏比如pirateslovedaisies.com来显示其性能。​但现在程序员们需要注意这些附加功能是否能 够实现,并且这些代码的运行速度也是无法保证的。例如,pirateslovedaisies.com的游戏设计者设计了一个开关来开启或者关闭IE支持 的特性。但是,有没有一个API来告诉你这些特性是什么呢?没有。最简单的方式是通过浏览器名字来进行测试并估算帧速率。很多游戏开发者都有多年经验来了 解可用硬件的范围,唯一的解决方法就是禁止创新,但这将是Web开发者又要解决的一个新的问题。

观点:

问题5:云端什么都没有向你承诺

观点:

这是肯定的。geolocation在不同的浏览器上实现是不一样的。但是,浏览器是可以检测出设备是否支持geolocation的,返回了false就对了。这与html5标准也不是大关系。是设备问题。而摩尔定律和统计是:12个月内,人们平均都换了手机了。

有个故事,或许是杜撰的,说一个人使用Gmail账户和酒吧里认识的人保持着随意的联系。当Google+出现以后,所有的历史记录都出现了,因为 Google+在论坛里自动连上了那些旧的地址。每天,这些旧名字和旧面孔都会出现询问是否要加入到论坛中去。当Web应用公司需要升级的时候,他们会将 所有人一次性升级。尽管这据说是为了让用户不再受升级安装文件之苦,但对于那些不想使用新特性的人来说,这确是一场噩梦。这不像上面是一个关于人们隐私的 问题。新软件可能因为新旧软件包之间的依赖关系而经常崩溃。

​观点:

​观点:

安全问题是全面存在的,不仅仅是断点调试和变量。不过,好像到目前为止,大家都有安全问题,没有谁是绝对安全的。因此,在一些不是很重视安全的项目上,安全问题可以降级。这完全由架构师来思考和决定。

本地数据存储是有限制的,确实是,但是在不同的浏览器上,限制是不一样的。因此架构师应该以支持最好的浏览器(ios上就是 safari,android上目前就是欧朋最新版)为准,推荐你的用户去使用最好的软件,而不是兼容那些垃圾软件……因此,我的个人建议是:不要让自己 的作品去适应当前的、一定会消失的问题,追求卓越,推荐卓越完全是应有的使命。在移动浏览器端,safari的表现就可能是最好的,存储可能也是最大的。 (当然,鉴于行业的剧烈变化,这一切是会变的)

*崔康 热情的技术探索者,资深软件工程师,InfoQ编辑,从事企业级Web应用的相关工作,关注性能优化、Web技术、浏览器等领域。*

为HTML5将数据存储在云端而带来的所有结构性的问题来责备HTML5实际上不是件很公平的事情,但云端是一个必要的部分,因为云省去了安装软件 和备份数据的麻烦。由于HTML5本地数据存储的限制,大量Web应用存储仍然要保留在服务器端,但这可能是灾难性的。就在最近Facebook决定将不 再使用一个基于Linux的插件来上传照片,结果,同样被去掉的是通过这个插件上传的照片。这样的例子比较少见,但是因为各种原因,它们正变得越来越多。 你能确保那个免费提供他们的一切HTML5应用的新兴公司在几年后甚至几个月后还存在吗?你只能自求多福。情况还更糟糕。正如很多Web应用所明确说明的 那样,这些数据并不是你的,在大数情形下,你不能诉诸法律来恢复数据。有些更离谱的服务条款甚至说数据可以“没有任何理由”就被删除。HTML5没有避免 这个问题,它的结构实际上是保证了任何由你的浏览器缓存的数据都会存储在云端,这些数据是脱离了你的控制的。HTML5的炒作说这是它的一个优势特性,但 这实际上却很容易造成不利影响。

​观点:

问题10:硬件特质带来新的挑战

问题2:本地数据存储存在限制

……这不用担心啊。windows phone在中国不超过10万台。开发者的力量都集中在移动端,桌面端的进化受微软影响,但是在移动设备中。微软的影响是非常弱的。android和ios两块里,做好一块,就是王了,何必管那么多?

浏览器中隐藏的本地数据库让Web应用更容易在电脑上缓存数据。对任何一个在浏览器中享受这​种台式机体验的人来说,这些数据库可以节省带宽,提升 性能。然而它们肯定比不上本地应用的数据的强大功能。HTML5的数据存储能力毫无疑问是很重要的功能,但是你仍然不能将存储的数据迁移到另外一台机器 上,或是制作副本、备份、用另外一个应用打开。所有这些数据都是隐藏在浏览器之下的。某种程度上说,这是最糟糕的一种情况。因为你要承担存储这些数据库的 所有责任而不能对它有任何控制。 一些最新的浏览器可以让你看到在你的机器上创建了哪些数据库,但这些信息是有限的。Safari甚至可以让你能够删除数据库,但是你不能浏览这些信息或是 将它们迁移到另外一台机器上,这些文件在设计之初就没有让它能够很容易迁移。你同样不能深入到文件中看到底存储了什么。当然,一个程序员可以看懂这些文 件,但前提是他们研究清楚了文件格式并且做一些hacking…..

有个叫Ian Hickson的人,是HTML5标准的主要起草者,也是最高独裁者(the Supreme Dictator for Life)。我想他们这是在开玩笑,因为这样的头衔实在太不匹配了。标准的编写者只是在提出建议,浏览器公司的编码天才们才是最终做出决定的人。他们可以 选择实现或者不实现某个特性,然后Web开发者就要去测试结果是否稳定。几年以后,标准就会根据与实现程度的匹配情况做出改变。很多Javascript 开发者将兼容性问题都留给了开发代码库的人,比如jQuery。这些层让我们不必去了解不同浏览器之间的差别。但是,这些代码在将来是否足够健壮?只有时 间才会知道。这个议题凸显了这个领域中最根本的问题。我们想要自由、创造性以及因为浏览器间的激烈竞争而产生的丰富特性。创新的脚步非常快,但是因为浏览 器开发者都争相添加新的特性以赢得先机,使得各个浏览器之间有更多的不同。但我们希望能有一个统一的指挥者这样就能获得稳定性。但是,对于争斗,从来都没 有一个理想的解决方式。

一个伟大的事业,总是会有跌跌撞撞的。在项目中,无论我如何大骂HTML5的缺点,都无法阻挡我对HTML5深深的期盼。所谓的技术(争权夺利), 我们不予考虑……移动互联网已经有了很多泡沫,但是前景依然美好,那些正在创业的和已经创业的,请向移动互联网看齐,这个盘子很大,没有谁能一口吃下,快 来吧……在这里,我想说一句:这个世界上从不缺少CEO和老板,只缺少真正能解决问题的人。

关于云的问题,这似乎是一个云存储与本地存储的问题,与HTML5的关系不太大。相反,HTML5如果与云服务器供应商结合起来,可以发挥较大的生产力。

对于此篇文章,HTML5研究小组成员秀野堂主在《我这一年所了解的HTML5》一文(以下简称“观点”)中专门对这11个问题分别作了分析和讨论,我们不妨将两篇文章的观点对比一下,对于HTML5技术圈里的开发人员会有所启发。

Web Workers是HTML5的一个非常耐人寻味的特性。与其去使用Javascript传统的wait、delay和pause命令,现在Web开发者可 以拆分他们的命令并且整合到Web Workers的CPU hogs中。换句话说,HTML5 Web开发者可以让浏览器表现得像操作系统一样。但问题在于,Web Workers并没有复制操作系统的所有特性。尽管它提供了一种方式来讲负载分支并分离,但是却没有方法来管理负载或是设置优先级。API只是让消息传入 或者传出Worker对象。这就是它做的一切了,剩下的都交给浏览器了。

问题3:本地数据可以被操纵

格式不兼容是真实的存在的。这完全是厂商之争和市场之争。不过没有关系,我们是这样看待问题的:目前能够支持好html5的浏览器本来就不多,因此,我们只需要迎合一部分人群即可。而那一部分人群用的设备就是主流……

问题9:各浏览器的实现是独立的

问题1:安全是一场噩梦

问题8:格式不兼容比比皆是

​有关HTML5的更多内容可以关注InfoQ中文站的HTML5板块。

​HTML5的本地数据存储极大提升了离线使用Web应用的能力。唯一的问题是数据同步。 如果一个Web应用连接到网络上,它可以持续地将数据存储到云中去。而当应用离线时,应用中发生的数据就不能存储到云中。如果一个人切换了浏览器或者使用 了不同的机器,就会出现副本,这时同步就会成为一个大问题。更糟糕的是,时钟本身就可能是不同步的,使得检查最新被保存的数据是不现实的。 当然,这对本地应用来说也一直都是一个问题,但是在本地应用中,为同步负责的是人,他可以通过查看文件名并改变日期来进行同步。但是因为HTML5并没有 给用户对隐藏在浏览器之下的数据库的控制权,开发者必须提供用户界面让用户通过这个界面来管理同步问题。 这并非是一个完全棘手的问题。开发人员可以通过使用版本控制系统来处理这个问题,而现今的版本控制系统在处理这些问题上已经变得越发复杂了。

观点:

离线对同步是一场噩梦。这话一点不假,确实,我们在做applicationCache时,都满怀心喜,结果碰了一鼻子的灰。其实,我们还要警告开 发者,在移动设备上,大多数的浏览器,都不能良好的支持,其原因也很简单,因为大多数浏览器厂商都还生活在狭窄宽带的时代。他们的产品设计都不足2M。因 此,在一段时间内,在移动设备上,不用applicationCache比用要妥当。但是在桌面浏览器上,用applicationCache是很好的选 择,所谓的版本控制,可以随意些,用时间戳就是一个不错的选择。

观点:

问题6:强制升级并非是每个人都想要的

HTML5引入了<audio>和<video> 标签,第一眼看上去,它们和图像标签一样好用。只要在其中加入一个URL,浏览器就会引入数据流。然而,如果它真有这么简单的话,为什么我浪费了两个星期 来让所有主要的浏览器可以播放基本的音频文件呢?个别浏览器构建者只实现了部分而不是全部的音频视频格式确实不是HTML5委员会的错。大家都是人,都想 要争夺统治权。往往在一个浏览器上工作正常的文件到了另外一个浏览器上却不能工作了。开发者要如何测试这一点呢?API开发者非常聪明,他们加入了 canPlayType函数,但就是这个函数也不是所有浏览器都支持的。

强制升级并非是每个人想要的,这点我是赞同的,但是这也不是技术问题,这是web与native的区别。引用的案例g+不适合在这里讨论,但是我们 可以看到,新浪微博就有较好的新旧版本控制,我就一直用的旧版本,不喜欢新版本,一直用的挺好。这完全取决于技术人员,不是技术和标准本身。

观点:

观点:

……在Web应用中,当浏览器拥有一个很强大的调试工具的时候,这种控制权比以往更容易被滥用。当在浏览器中集成了一个Javascript的调试 器比如Firebug,任何对Facebook、Google以及其他网站感兴趣的人​都可以插入断点来查看代码。这对于了解网站是如何运行的是非常有利 的,但对于安全问题来说却是一场噩梦。想象有个变量的值是你想要改变的,Firebug或者其他一个浏览器调试器可以让你很容易地将数据改成你想要的任何 数据。你想要通过改变自己的地理位置来捉弄一下你的朋友吗?那么可以修改浏览器中的经度和纬度值,让浏览器“处于”世界上的任何位置。很多配置属性都可以 被修改,浏览器使得这样的修改比在本地应用中更为容易。 对于引发的安全问题,也是有些限制的。一些Javascript工具比如Google Web Toolkit和标准的编译器一样复杂,它们的输出令人费解。但是一些工具比如JavaScript Deminifier能解决这个问题。 威胁当然也跟应用性质有关。一个人通过改变浏览器上显示的经纬度来和朋友开玩笑说在环游世界的途中是一回事,而获得其他人的权限又是另外一回事了,这会带来威胁。一旦涉及到金钱,情况会更糟糕……

InfoWorld网站最近发布了一篇文章《关 于HTML5的11个让人难以接受的事实》,作者Peter Wayner指出:尽管HTML5确实有很强大的功能,但它并不能解决所有问题,一些功能是非常强大的,能让Web应用成为原生应用的强有力对手,但是安 全问题、本地数据存储的限制、同步以及“争权夺利”等问题都会让我们降低对它的期望。

问题11:“争权夺利”一直都存在

本地数据可以被操纵。这是一个老调重弹的问题,即:跨域问题。这已经是大家都很清楚,而且都已经解决的问题了,再说就没有意思了。你可以去下载最新 的各种浏览器,为了跨域问题,整个html5标准中的重要api几乎都翻新了一遍。以致于微软抓着这个问题让webGL、websocket、 webWorker都推迟了出来。

HTML5已经成为2011年度技术社区最热门的词汇之一,逐渐从理论走向实践,并得到了社区的广泛认可,在强大特性的背后,HTML5也面临一些限制,最近引起了社区的讨论。

本文由葡京网投哪个正规发布于新葡亰-前端,转载请注明出处:学习系列,关于HTML5特性的一些限制与讨论

关键词:

上一篇:H5框架收集总结,Web应用开发指南第一章

下一篇:没有了