深圳Web培训
达内深圳罗湖中心

185-8886-4961

热门课程

【深圳Web培训机构】加速 HTML5 应用的方法

  • 时间:2017-09-07
  • 发布:深圳Web培训
  • 来源:达内新闻

【深圳Web培训机构】加速 HTML5 应用的方法

1. 使用 HTML5 表单和输出框

HTML5 引入许多全新的表单属性和输出框范例,固然并非所有的阅读器都支撑,但它们切实其实都很有用:

    autofocus 使得页面加载终了后主动为某个输出框设置输出核心
    placeholder 容许你为输出框设置默许文本,并在获得核心时主动消除
    required 属性请求必需填写值后能力提交表单
    pattern 能够经由过程正则表达式指定输出框容许输出的内容

由于这些功效都是内置的,无需使用 JavaScript 办法来完成,第一是节俭开辟光阴,同时也让页面具备更好的适应性。

2. 使用 CSS 转换后果

使用 CSS 转换后果来调换 JavaScript 的办法能够晋升页面元素在两种状况停止转换的速率,经由过程使用 totheleft 和 totheright 你能够敏捷挪动一个框。比方:
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 工具分别是:sessionStorage 和 localStorage ,这些存储的数据是不会经由过程 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,这是你必必要斟酌的成绩。

想知道更多关于IT行业的信息吗?想远远不如行动,行动起来,一起加入达内,一起进入IT行业,跟着达内的脚步,一起走进如今的互联网信息时代,带给你不一样的色彩生活——【深圳web培训机构

深圳达内

上一篇:【深圳Web培训机构】移动开发 or web 前端?
下一篇:【深圳Web培训机构】浏览器极速模式和兼容模式差异

【深圳Web培训机构】html5移动应用的技术选型

【深圳Web培训机构】浏览器极速模式和兼容模式差异

【深圳Web培训机构】加速 HTML5 应用的方法

【深圳Web培训机构】JavaScript部分的面试题

选择城市和中心
贵州省

广西省

海南省