• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > html5 >

9 个用来加速 HTML5 应用的方法

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-03-22点击:
   

 

  Web 开发者经常在找一些新的方法来不断的提升页面的速度和性能,而 HTML5 的很多新特性可以实现,让用户有着更好的体验,在这里我们整理了 9 中简单易于实现的 HTML5 技巧,或许可以对你有所帮助。

  1. 使用 HTML5 表单和输入框

  HTML5 引入很多全新的表单属性和输入框类型,虽然并不是所有的浏览器都支持,但它们的确都很有用:

  •   autofocus 使得页面加载完毕后自动为某个输入框设置输入焦点
  •   placeholder 允许你为输入框设置默认文本,并在获取焦点时自动清除
  •   required 属性要求必须填写值后才能提交表单
  •   pattern 可以通过正则表达式指定输入框允许输入的内容

  因为这些功能都是内置的,无需使用 JavaScript 方法来实现,第一是节省开发时间,同时也让页面具有更好的适应性。

  2. 使用 CSS 转换效果

  使用 CSS 转换效果来替换 JavaScript 的方法可以提升页面元素在两种状态进行转换的速度,通过使用 totheleft 和 totheright 你可以迅速移动一个框。例如:

  01div.box {

  02 left:50px;

  03 //for webkit browsers

  04 -webkit-transition: all 0.3s ease-out;

  05 //for mozilla

  06 -moz-transition: all 0.3s ease-out;

  07 //for opera

  08 -o-transition: all 0.3s ease-out;

  09 //other browsers

  10 transition: all 0.3s ease-out;

  11}

  12

  13div.box.totheleft {

  14 left: 0px;

  15}

  16

  17div.box.totheright {

  18 left: 80px;

  19}

  首先使用CSS的方法可减少页面的代码量,而且动画的执行也更加快速。

  3. 使用 HTML5 Web 存储

  但你需要在浏览器上存储一些数据时,你可能会首先考虑到 Cookie,这些 Cookie 在每次浏览器请求时都会附带上。而 HTML5 更有效的方法就是本地存储 —— Web Storage。

  有两个 Web Storage 对象分别是:sessionStorage 和 localStorage ,这些存储的数据是不会通过 HTTP 请求来传输的,因此不会对请求的时间参数任何影响,下面是一小段示例代码:

  1//check to see if localstorage is present (browser supports HTML5)

  2if (('localStorage' in window) && window.localStorage !== null) {

  3 //store items

  4 localStorage.wishlist = '["Bear", "Cow", "Pig"]';

  5}

  从上面代码我们可看到,比使用 Cookie 的方法更加简单,无需指定失效时间。

  4. 使用 Web Workers

  Web Workers 是 HTML5 规范内容之一,用于提供后台脚本运行支持。相当于是多线程的处理环境。示例代码:

  1var worker = new Worker('doWork.js');

  2

  3worker.addEventListener('message', function(e) {

  4 console.log('Worker said: ', e.data);

  5}, false);

  6

  7worker.postMessage('Hello World'); // Send data to our worker.

  Web Workers 可在很多场景下使用,例如图片处理、文本格式和以及大文件接收和处理等等。

  5. 使用 Web Sockets

  Web Sockets 用来实现跟远程主机的双路通讯,例如在 Web 浏览器和远程服务器之间,这是一个非常轻量级的通讯架构,带宽占用以及性能方面比标准 HTTP 要减少 3~5 倍。

  因为 Web Sockets 必须使用 80 端口,因此 Web Sockets 不仅用来创建跟快速的通讯接口,还可以在 HTTP 之上实现跟高级的双路通讯。

  6. 使用应用程序缓存

  应用程序缓存可以让你创建完全支持离线浏览的 Web 应用,降低服务器负载以及更快的体验速度。可通过缓存的 manifest 文件来指定要缓存的文件,manifest 只是一个简单的文本文件,下面是一个示例:

标签: html5 用来 加速

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ