HTML5

  • 遇到的挑战

    移动端HTML5使用原生标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题。

    下载速度

    以一个8s短视频为例,wifi环境下提供的高清视频达到1000kbps,文件大小大约1MB;非wifi环境下提供的低码率视频是500kbps左右,文件大小大约500KB;参考QzoneTouch多普勒测速,2g网络的平均速度是14KB/s,那么下载一个低码率视频耗时35s;那么要想流畅播放视频,就需要一个加载等待的过程,这个过程要有明确的反馈,不能让用户有“坏掉了”的感觉。

    多普勒测速数据参考
    # dns(s) conn(s) rtt(s) tran(kb/s)
  • 前言

    HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage。

    这两种方式都是通过键值对保存数据,存取方便,不影响网站性能。他们的用法相同,存储时间不同。
    localStorage 的数据保存在本地硬件上,可以永久保存,可以手动调用api清除数据。sessionStorage 保存在 session 对象中,会在浏览器关闭时被清除。

    web Storage 的大小在浏览器上是有限制的,不同浏览器大小会有区别,在主流浏览器中,大小约为 5M,用来存储普通数据其实已经足够。

    用法

    以 localStorage 为例,sessionStor

  • 前言

    在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据。从上篇:HTML5 高级系列:web Storage ,我们知道 web Storage 可以方便灵活的在本地存取简单数据,但是对于大量结构化存储,indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。

    连接数据库

    一个网站可以有多个 indexedDB 数据库,但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库。

    var request = indexedDB.open('dbName'
  • 前言

    canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了。而可视化图表,则是 canvas 强大功能的表现之一。

    现在已经有了很多成熟的图表插件都是用 canvas 实现的,Chart.js、ECharts等可以制作出好看炫酷的图表,而且几乎覆盖了所有图表的实现。

    有时候自己只想画个柱状图,自己写又觉得麻烦,用别人插件又感觉累赘,最后打开百度,拷段代码,粘贴上来修修改改。还不如自己撸一个呢。

    效果

    动画效果图片显示不出来,可以到最下面找demo地址

    image

    分析

    可以这个图表由 xy轴、数据条形和标题组成。

    • 轴线:可以使用 moveTo() &

  • 前言

    HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。

    想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true,可直接拖放,如果不想拖放这两个元素,把属性设为 false 即可。

    拖放事件

    拖放事件由不同的元素产生。一个元素被拖放,他可能会经过很多个元素上,最终到达想要放置的元素内。这里,我暂时把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素我称为