9 个用来加速 HTML5 应用的方法
fmms 13年前
<p>Web 开发者经常在找一些新的方法来不断的提升页面的速度和性能，而 HTML5 的很多新特性可以实现，让用户有着更好的体验，在这里我们整理了 9 中简单易于实现的 HTML5 技巧，或许可以对你有所帮助。</p> <h2>1. 使用 HTML5 表单和输入框</h2> <p>HTML5 引入很多全新的表单属性和输入框类型，虽然并不是所有的浏览器都支持，但它们的确都很有用：</p> <ul> <li><code>autofocus</code> 使得页面加载完毕后自动为某个输入框设置输入焦点</li> <li><code>placeholder</code> 允许你为输入框设置默认文本，并在获取焦点时自动清除</li> <li><code>required</code> 属性要求必须填写值后才能提交表单</li> <li><code>pattern</code> 可以通过正则表达式指定输入框允许输入的内容</li> </ul> <p>因为这些功能都是内置的，无需使用 JavaScript 方法来实现，第一是节省开发时间，同时也让页面具有更好的适应性。</p> <h2>2. 使用 CSS 转换效果</h2> <p>使用 CSS 转换效果来替换 JavaScript 的方法可以提升页面元素在两种状态进行转换的速度，通过使用 <span style="font-weight:bold;">totheleft</span> 和 <span style="font-weight:bold;">totheright</span> 你可以迅速移动一个框。例如：</p> <pre class="brush:css; toolbar: true; auto-links: false;">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; }</pre> <p></p> <p>首先使用CSS的方法可减少页面的代码量，而且动画的执行也更加快速。</p> <h2>3. 使用 HTML5 Web 存储</h2> <p>但你需要在浏览器上存储一些数据时，你可能会首先考虑到 Cookie，这些 Cookie 在每次浏览器请求时都会附带上。而 HTML5 更有效的方法就是本地存储 —— Web Storage。</p> <p>有两个 Web Storage 对象分别是：<code>sessionStorage</code> 和 <code>localStorage</code> ，这些存储的数据是不会通过 HTTP 请求来传输的，因此不会对请求的时间参数任何影响，下面是一小段示例代码：</p> <pre class="brush:js; toolbar: true; auto-links: false;">//check to see if localstorage is present (browser supports HTML5) if (('localStorage' in window) && window.localStorage !== null) { //store items localStorage.wishlist = '["Bear", "Cow", "Pig"]'; }</pre> <p></p> <p>从上面代码我们可看到，比使用 Cookie 的方法更加简单，无需指定失效时间。</p> <h2>4. 使用 Web Workers</h2> <p>Web Workers 是 HTML5 规范内容之一，用于提供后台脚本运行支持。相当于是多线程的处理环境。示例代码：</p> <pre class="brush:js; toolbar: true; auto-links: false;">var worker = new Worker('doWork.js'); worker.addEventListener('message', function(e) { console.log('Worker said: ', e.data); }, false); worker.postMessage('Hello World'); // Send data to our worker.</pre> <p></p> <p>Web Workers 可在很多场景下使用，例如图片处理、文本格式和以及大文件接收和处理等等。</p> <h2>5. 使用 Web Sockets</h2> <p>Web Sockets 用来实现跟远程主机的双路通讯，例如在 Web 浏览器和远程服务器之间，这是一个非常轻量级的通讯架构，带宽占用以及性能方面比标准 HTTP 要减少 3~5 倍。</p> <p>因为 Web Sockets 必须使用 80 端口，因此 Web Sockets 不仅用来创建跟快速的通讯接口，还可以在 HTTP 之上实现跟高级的双路通讯。</p> <h2>6. 使用应用程序缓存</h2> <p>应用程序缓存可以让你创建完全支持离线浏览的 Web 应用，降低服务器负载以及更快的体验速度。可通过缓存的 manifest 文件来指定要缓存的文件，manifest 只是一个简单的文本文件，下面是一个示例：</p> <pre class="brush:shell; toolbar: true; auto-links: false;">CACHE MANIFEST # 2011-06-18:v3 # Explicitly cached entries index.htm style.css # offline.htm will be displayed if the user is offline FALLBACK: / /offline.htm</pre> <p></p> <p>你需要在HTML页面中启用缓存</p> <pre class="brush:html; toolbar: true; auto-links: false;"><html manifest="http://www.example.com/example.appcache"> ... </html></pre> <p></p> <p>Manifest 缓存文件可以定义缓存任意的文件扩展名，但你需要在 Web 服务器上设置对应的 MIME 类型，例如在 Apache 上：</p> <pre class="brush:shell; toolbar: true; auto-links: false;">AddType text/cache-manifest .appcache</pre> <p></p> <p>使用应用程序缓存，你只需要简单几步就可以创建离线的 Web 应用，访问是非常快速，适合用来处理一些不经常更新的静态文件。</p> <h2>7. 使用 CSS 替代图片</h2> <p>使用 CSS 特效而不是图片是一个很简单的用来提升网页速度的方法，因为你无需重开 HTTP 请求来获取图片，而且一般图片大小也比几行 CSS 代码要大得多，下面是一些你可以用来替换图片的 CSS 特效：</p> <ul> <li>CSS Masks</li> <li>Box-shadow</li> <li>Transforms</li> <li>RGBA/Alpha opacity</li> <li>Border-radius</li> <li>Linear and radial gradients</li> </ul> <h2>8. 使用硬件加速</h2> <p>现在浏览器对硬件加速的支持还不普遍。如果你的应用有动画或者 3D 效果，那么启用硬件加速直接让 GPU 进行处理会大大提升这些动画和3D的速度。要使用硬件加速你需要用 HTML5 的 Canvas。</p> <h2>9. 使用客户端数据库</h2> <p>目前，主流浏览器在客户端数据库的支持上还没达成一致，除了 Web SQL 数据库和 IndexedDB 以外。通过对数据库的使用可以大大提升客户端数据存储的速度，而不是将数据重新发给服务器端。不仅可以减少 HTTP 请求，还可以大大降低服务器负载。</p> <p>但不幸的是，大多数浏览器支持 Web SQL DB ，但 Mozilla 只支持 IndexedDB，这是你必须要考虑的问题。</p> <p>如你所见，HTML5 带来很多很强大的新特性可以帮你加速 Web 开发以及响应速度，提供更好的用户体验。而你准备好了吗？</p> <p><a href="/misc/goto?guid=4958334105969085768" rel="nofollow" target="_blank">英文原文</a>，OSCHINA原创翻译</p>