课程咨询:400-111-8989

  • 【荐】HTML5前端应用9大提升方法

    发布:转载  来源:IT培训网  时间: 2017年12月07日

  • HTML5前端应用9大提升方法,WEB app越来越流行,而应用的打开加载速度也是衡量一个app重要的因素之一。本篇文章就是要告诉你,怎么在日常运用中解决这些问题!...

  • HTML5前端应用9大提升方法,WEB app越来越流行,而应用的打开加载速度也是衡量一个app重要的因素之一。本篇文章就是要告诉你,怎么在日常运用中解决这些问题!

    1.使用HTML5表单和输入框

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

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

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

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

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

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

    2.使用CSS转换效果

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

    div.box{

    left:50px;

    //forwebkitbrowsers

    -webkit-transition:all0.3sease-out;

    //formozilla

    -moz-transition:all0.3sease-out;

    //foropera

    -o-transition:all0.3sease-out;

    //otherbrowsers

    transition:all0.3sease-out;

    }

    div.box.totheleft{

    left:0px;

    }

    div.box.totheright{

    left:80px;

    }

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

    3.使用HTML5Web存储

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

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

    //checktoseeiflocalstorageispresent(browsersupportsHTML5)

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

    //storeitems

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

    }

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

    4.使用WebWorkers

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

    varworker=newWorker('doWork.js');

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

    console.log('Workersaid:',e.data);

    },false);

    worker.postMessage('HelloWorld');//Senddatatoourworker.

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

    5.使用WebSockets

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

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

    6.使用应用程序缓存

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

    CACHEMANIFEST

    #2011-06-18:v3

    #Explicitlycachedentries

    index.htm

    style.css

    #offline.htmwillbedisplayediftheuserisoffline

    FALLBACK:

    //offline.htm

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

    ...

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

    AddTypetext/cache-manifest.appcache

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

    7.使用CSS替代图片

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

    CSSMasks

    Box-shadow

    Transforms

    RGBA/Alphaopacity

    Border-radius

    Linearandradialgradients

    8.使用硬件加速

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

    9.使用客户端数据库

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

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

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

  • 上一篇:学HTML5开发 零基础入学也可以

    下一篇:参加HTML5培训班需了解的主流框架

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56