加速HTML5应用的几大方法

最新推荐文章于 2024-01-09 19:54:45 发布

SUNLYH2_2

最新推荐文章于 2024-01-09 19:54:45 发布

阅读量746

点赞数 1

分类专栏：优化文章标签： html5 应用

本文链接：https://blog.csdn.net/SUNLYH2_2/article/details/54343721

版权

优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.使用HTML5表单和输入框

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

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

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

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

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

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

2.使用 CSS 转换效果

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

div.box {
left:50px;
//for webkit browsers
-webkit-transition: all 0.3s ease-out;
//for mozilla
-moz-transition: all 0.3s ease-out;
//for opera
-o-transition: all 0.3s ease-out;
//other browsers
transition: all 0.3s ease-out;
}
div.box.totheleft {
left: 0px;
}
div.box.totheright {
left: 80px;
}

3.使用 HTML5 Web 存储

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

// check to see if localstorage is present (browser supports HTML5)
if ((‘localStorage’ in window) && window.localStorage !== null) {
//store items
localStorage.wishlist = ‘[“Bear”, “Cow”, “Pig”]’;
}

4. 使用 Web Sockets

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

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

5. 使用应用程序缓存

应用程序缓存可以让你创建完全支持离线浏览的 Web 应用，降低服务器负载以及更快的体验速度。可通过缓存的 manifest 文件来指定要缓存的文件，manifest 只是一个简单的文本文件，下面是一个示例：
CACHE MANIFEST
Explicitly cached entries
index.htm
style.css
offline.htm will be displayed if the user is offline
FALLBACK:
/ /offline.htm
你需要在HTML页面中启用缓存
…
Manifest 缓存文件可以定义缓存任意的文件扩展名，但你需要在 Web 服务器上设置对应的 MIME 类型，例如在 Apache 上：
AddType text/cache-manifest .appcache
使用应用程序缓存，你只需要简单几步就可以创建离线的 Web 应用，访问是非常快速，适合用来处理一些不经常更新的静态文件。