12 HTML5的高级功能介绍

12 HTML5的高级功能介绍

作为一名Web开发者能掌握前面介绍过的HTML5技术,就几乎可以满足我们的需求,当然,HTML5的内容远不指这些,如果你从事一些HTML5游戏开发, 或基于移动设备的APP应用开发,你还需要了解更多HTML5的内容。 像绘制图形、本地存储、离线应用程序、通信API、处理线程、获取地理位置信息等。

  1. 绘制图形

如果人见过基于HTML5的游戏,多数都是通过HTML5新增元素canvas元素实现的, 这个元素有一套编程接口(Canvas API), 专门用来绘制图形, 可以实现非常漂亮的图形与图像, 创建出更多丰富多彩、赏心悦目的下一代Web页面。在canvas元素里进行绘画,并不是指拿鼠标来作画,canvas元素只是一个无色通明区域,是JavaScript语言的画布,需要利用JavaScript编写脚本进行绘画。

  1. 本地存储与离线应用

在HTML5中除了canvas元素之外, 另一个新增的非常重要的功能是可以在客户端本地保存数据。 在HTML5中与本地存储相关的有两个重要内容,分别是Web Storange与本地数据库。基中Web Storange存储机制是对HTML4中cookies存储机制的一个改善。本地数据库是HTML5新增的功能,可能使用它在客户端本地建立一个数据库,实现原本必须保存在服务器端数据库中的内容,可以直接保存在客户端本地了, 这就大大减轻了服务器端的负担, 提高了访问数据库的速度。现在Web应用程序已经变得越来越复杂, 如果没有和Internet建立连接, 就不能使用这个Web应用程序,在HTML5中新增加的API,利用本地缓存机制很好地解决了这个问题, 让Web应用程序在离线状态时也可能正常工作。 就是把所有构成Web应用程序的资源文件, 像HTML文件、CSS文件和JavaScript脚本等放在本地缓存中,当服务器没有和Internet建立连接时, 也可以利用本地缓存中的资源文件来正常运行Web应用程序。

  1. 通信API

在HTML5中提供了网页文档之间互相接收与发送信息的功能, 使用这个功能, 只要获取到网页所在窗口对象的实例, 不仅同源的Web网页之间可以互相通信, 甚至可以实现跨域通信。HTML5新增两个和通信相关的功能, 跨文档消息传输功能与使用Web Sockets API来通过socket端口传递数据的功能。使用跨文档消息传输功能, 可以在不同网页文档、不同端口、不同域之间进行消息的传递。使用Web Sockets API可以让客户端与服务器通过Socket端口来传递数据,这样做就可以实现数据推送技术,服务器不再是被动地等待客户端发出的请求,只要客户端与服务器建立了一次连接之后, 服务器端就可以在需要的时候,主动地将数据推送到客户端, 直到客户端显示关闭这个连接。

  1. 处理线程

在使用HTML4与JavaScript编写的Web程序中, 因为所有的处理都是在单线程内执行的,如果花费时间比较长的话, 程序界面会处于长时间没有响应的状态,而当时间长到一定程度,浏览器还会跳出一个脚本运行时间过长的提示框, 用户就不得不中断正在执行的处理。为了解决这个问题, HTML5新增了一个Web Workers API, 用户可以很容易地创建在后台运行的线程(在HTML5中被称为worker), 创建一个不会影响前台处理的后台程序, 并且在这个后台线程中还能创建多个子线程,你可以将耗时较长的处理交给后台线程去运行, 对用户在前台页面中执行的操作就完全没有影响了。

  1. 获取地理位置信息

HTML5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。如果浏览器支持, 且设备具有定位功能,就能够直接使用这组API业获取当前位置信息。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。基于此特性可以开发基于位置的服务应用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,085评论 25 707
  • 古文今读: 【原文】 同志相得,同仁相忧, 同智相谋,同恶相党, 同爱相求,同美相妒, 同责相害,同利相忌, 同类...
    清静道人阅读 308评论 0 0
  • 我有一个虽然没拜过把子,但铁到扎心的兄弟伙,在他一米八的肌肉硬汉外形下,有一颗随时准备用小粉拳锤锤你胸口的娇滴滴少...
    火锅老师阅读 285评论 0 0
  • 明天就是端午节了,端午节你想起了什么? 粽子,还是划龙舟,还是屈原的故事。 让我们来回忆一下你印象最深的端午节是怎...
    安梓阅读 740评论 0 1