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

转载 2012年03月27日 11:24:29

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

1. 使用 HTML5 表单和输入框

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

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

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

2. 使用 CSS 转换效果

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

01 div.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  
13 div.box.totheleft {
14     left: 0px;
15 }
16  
17 div.box.totheright {
18     left: 80px;
19 }

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

3. 使用 HTML5 Web 存储

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

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

1 //check to see if localstorage is present (browser supports HTML5)
2 if (('localStorage' in window) && window.localStorage !== null) {
3     //store items
4     localStorage.wishlist = '["Bear", "Cow", "Pig"]';
5 }

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

4. 使用 Web Workers

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

1 var worker = new Worker('doWork.js');
2  
3 worker.addEventListener('message', function(e) {
4     console.log('Worker said: ', e.data);
5 }, false);
6  
7 worker.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 只是一个简单的文本文件,下面是一个示例:

01 CACHE MANIFEST
02 # 2011-06-18:v3
03  
04 # Explicitly cached entries
05 index.htm
06 style.css
07  
08 # offline.htm will be displayed if the user is offline
09 FALLBACK:
10 / /offline.htm

你需要在HTML页面中启用缓存

1 <html manifest="http://www.example.com/example.appcache">
2   ...
3 </html>

Manifest 缓存文件可以定义缓存任意的文件扩展名,但你需要在 Web 服务器上设置对应的 MIME 类型,例如在 Apache 上:

1 AddType text/cache-manifest .appcache

使用应用程序缓存,你只需要简单几步就可以创建离线的 Web 应用,访问是非常快速,适合用来处理一些不经常更新的静态文件。

7. 使用 CSS 替代图片

使用 CSS 特效而不是图片是一个很简单的用来提升网页速度的方法,因为你无需重开 HTTP 请求来获取图片,而且一般图片大小也比几行 CSS 代码要大得多,下面是一些你可以用来替换图片的 CSS 特效:

  • CSS Masks
  • Box-shadow
  • Transforms
  • RGBA/Alpha opacity
  • Border-radius
  • Linear and radial gradients

8. 使用硬件加速

现在浏览器对硬件加速的支持还不普遍。如果你的应用有动画或者 3D 效果,那么启用硬件加速直接让 GPU 进行处理会大大提升这些动画和3D的速度。要使用硬件加速你需要用 HTML5 的 Canvas。

9. 使用客户端数据库

目前,主流浏览器在客户端数据库的支持上还没达成一致,除了 Web SQL 数据库和 IndexedDB 以外。通过对数据库的使用可以大大提升客户端数据存储的速度,而不是将数据重新发给服务器端。不仅可以减少 HTTP 请求,还可以大大降低服务器负载。

但不幸的是,大多数浏览器支持 Web SQL DB ,但 Mozilla 只支持 IndexedDB,这是你必须要考虑的问题。

如你所见,HTML5 带来很多很强大的新特性可以帮你加速 Web 开发以及响应速度,提供更好的用户体验。而你准备好了吗?

英文原文OSCHINA原创翻译

VR中的9轴传感器(重力加速度/陀螺仪/磁力计).md

转载注明出处:),否则我也拿你没办法:(前言传感器的调试过程,一般根据原厂提供demo代码,调试数据接口,将数据流打通即可,在VR中,当带上头显设备,运行应用时,出现漂移、延迟、不回归问题,往往束手无...
  • dabenxiong666
  • dabenxiong666
  • 2016年12月23日 10:39
  • 18363

1-9九个数字不重复组成一个三位数加法算式,求出所有组合

此题咱没想出很巧妙的解法,直接根据编程来吧 using System; using System.Collections.Generic; using System.Text; namespa...
  • qiaoquan3
  • qiaoquan3
  • 2016年05月16日 19:44
  • 5929

html5 获取 陀螺仪,重力感应(转发)

DeviceOrientationEvent是获取方向,得到device静止时的绝对值;     DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比 ...
  • liang_love_java
  • liang_love_java
  • 2015年10月16日 15:08
  • 2118

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

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

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

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

加速HTML5应用的几大方法

HTML优化的几大方法
  • SUNLYH2_2
  • SUNLYH2_2
  • 2017年01月11日 15:12
  • 122

日常HTML5开发中如何加速应用

小程序刷爆朋友,HTML5跨平台、开发成本低、开发速度快的优点结合APP发展成新局势,WEB app成为流行,应用打开加载速度是一个App评判优异的重要因素,那么日常HTML5开发中如何加速应用。 ...
  • ccnanxi
  • ccnanxi
  • 2016年10月27日 15:46
  • 161

App 开发:Hybrid 架构下的 HTML5 应用加速方案

在移动 App 开发领域,主流的开发模式可分为 Native、Hybrid、WebApp 三种方式。然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立...
  • zhenzigis
  • zhenzigis
  • 2016年02月29日 09:37
  • 184

HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用

SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果,喜欢特效的朋友可不要错过哦。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧,希望本文对你有所帮助。 ...
  • mozhi2008
  • mozhi2008
  • 2017年02月01日 16:40
  • 368

Windows 2008 R2 中 IE9无法播放HTML5视频文件的解决方法!

====================================================== 注:本文源代码点此下载 =============================...
  • javazhuanzai
  • javazhuanzai
  • 2012年01月15日 04:41
  • 610
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:9 个用来加速 HTML5 应用的方法
举报原因:
原因补充:

(最多只允许输入30个字)