你可能不知道的9个可以使HTML5应用加速的方法网页前端/web开发工程师

/ 集美大学软件学院网页前端/web开发工程师 / 2017-03-30

WEB工程师经常会去寻找一些新的方法来提升整个页面的性能和速度,而HTML5有很多新的特性能够实现页面加速,给用户创造了更好的体验。今天,汇鱼人才小编就给大家整理了网络上的9种能够简单实现HTML5加速的方法。希望对你能有所帮助。

HTML5开发工程师,HTML5应用加速,汇鱼网

1. 使用 HTML5 Web 存储


当你想要在浏览器上面存储数据的时候,你第一反应可能是考虑到 Cookie,这些 Cookie 在每次浏览器请求时都会附带上。而 HTML5 更有效的方法就是本地存储 —— Web Storage其中它又有两个对象分别是sessionStorage 和 localStorage ,这些存储的数据是不会通过 HTTP 请求来传输的,因此不会对请求的时间参数任何影响。


2. 使用 CSS 替代图片


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

Box-shadow

RGBA/Alpha opacity

CSS Masks

Transforms

RGBA/Alpha opacity

Border-radius

Linear and radial gradients


3. 使用 HTML5 表单和输入框


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

placeholder 允许你为输入框设置默认文本,并在获取焦点时自动清除

pattern 可以通过正则表达式指定输入框允许输入的内容

autofocus 使得页面加载完毕后自动为某个输入框设置输入焦点

required 属性要求必须填写值后才能提交表单

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


4.使用 Web Workers


Web Workers 是 HTML5 规范内容之一,它能够为后台脚本提供运行支持。相当于是在多线程环境中处理。


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


5.使用 Web Sockets


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


6. 使用硬件加速


现如今,浏览器对硬件加速这一块还不是很普遍。当你开发的应用有3D效果或者动画时,如果启动硬件加速直接让GPU进行处理的话,那么将会大大的提升这些动画和3D的速度。如果你要启用硬件加速的话,你还需要用HTML5的Canvas。


7. 使用 CSS 转换效果


使用 CSS 转换效果来替换 JavaScript 的方法可以提升页面元素在两种状态进行转换的速度,通过使用totheleft 和 totheright 你可以迅速移动一个框。而且使用CSS的方法也可以减少页面的代码量,而且动画的执行速度也会更快。


8. 使用应用程序缓存


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


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


9.使用客户端数据库


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


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


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


公众号,微信

汇鱼网海峡创乐汇
汇鱼网海峡创乐汇