使用 HTML5 的更快 Web 应用程序的最佳实践

发布于 2023-05-03 22:05:04 字数 9228 浏览 66 评论 0

许多 HTML5 旨在为我们迄今为止通过 JavaScript 库实现的组件和技术提供本机浏览器支持。使用这些功能（如果存在）最终可以为您的用户提供更快的体验。在本教程中，我不会重述您在 Yahoo 的 Exceptional Performance 网站或 Google 的 Page Speed 文档和让我们让网站更快的网站上看到的出色性能研究。相反，我将重点关注今天使用 HTML5 和 CSS3 如何使您的 Web 应用程序响应更快。

提示 1：使用网络存储代替 cookie

虽然 cookie 多年来一直用于跟踪独特的用户数据，但它们有严重的缺点。最大的缺陷是你所有的 cookie 数据都被添加到每个 HTTP 请求头中。这最终会对响应时间产生可衡量的影响，尤其是在 XHR 期间。因此，最佳做法是减小 cookie 的大小。在 HTML5 中我们可以做得更好：使用 sessionStorage 和 localStorage 代替 cookie。

这两个网络存储对象可用于在会话期间或无限期地在客户端持久保存用户数据。他们的数据也不会通过每个 HTTP 请求传输到服务器。他们有一个 API，可以让您高兴地摆脱 cookie。这是两个 API，使用 cookie 作为后备。

// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {

  // easy object property API
  localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';

} else {

  // without sessionStorage we'll have to use a far-future cookie
  //   with document.cookie's awkward API :(
  var date = new Date();
  date.setTime(date.getTime()+(365*24*60*60*1000));
  var expires = date.toGMTString();
  var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
                  ' expires='+expires+'; path=/';
  document.cookie = cookiestr;
}

技巧 2：使用 CSS Transitions 而不是 JavaScript 动画

CSS Transitions 为您提供两种状态之间有吸引力的视觉转换。大多数样式属性都可以转换，例如操纵文本阴影、位置、背景或颜色。您可以使用过渡到伪选择器状态，例如 :hover 或来自 HTML5 表单， :invalid 和 :valid（带有表单验证状态的示例）。但它们更强大，可以在您向元素添加任何类时触发。

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

通过添加切换类 totheleft 和 totheright 你可以移动盒子。将此代码量与 JavaScript 动画库的代码量进行比较。显然，使用基于 CSS 的动画时，发送到浏览器的字节数要少得多。此外，借助 GPU 级加速，这些视觉过渡将尽可能平滑。

技巧 3：使用客户端数据库而不是服务器往返

Web SQL 数据库和 IndexedDB 将数据库引入客户端。而不是通过以下方式将数据发布到服务器的常见模式 XMLHttpRequest 或表单提交，您可以利用这些客户端数据库。减少 HTTP 请求是所有性能工程师的主要目标，因此将它们用作数据存储可以节省许多通过 XHR 或表单回发到服务器的行程。 localStorage 和 sessionStorage可以在某些情况下使用，比如捕获表单提交进度，并且已经看到比客户端数据库 API 快得多。

例如，如果您有一个数据网格组件或一个包含数百条消息的收件箱，当用户希望搜索、过滤或排序时，将数据本地存储在数据库中将为您节省 HTTP 往返。可以在每次击键时过滤朋友列表或文本输入自动完成，从而提供更灵敏的用户体验。当然，请查看 Web SQL 数据库教程以获取有关如何使用它的综合指南。

技巧 4：JavaScript 的改进带来了相当大的性能优势

许多 JavaScript 1.6 中的Array 原型中添加了其他方法。这些现在在大多数浏览器中都可用，除了 IE。例如：

// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]

// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

在大多数情况下，使用这些本机方法产生的速度明显快于典型的 for 循环，例如： for (var i = 0, len = arr.length; i < len; i++).

原生 JSON 解析（通过 JSON.parse()) 替换了我们已经习惯包含一段时间的 json2.js 文件。本机 JSON 比使用外部脚本更快、更安全，并且它已经在 IE8、Opera 10.50、Firefox 3.5、Safari 4.0.3 和 Chrome 中使用。

本国的 String.trim 是另一个很好的例子，它不仅比普通的 JS 等价物更快，而且可能更正确。这些 JavaScript 添加在技术上都不是 HTML5，但它们属于最近可用的技术范围。

技巧 5：为实时网站使用缓存清单，而不仅仅是离线应用

两年前，Wordpress 使用 Google Gears 添加了一项名为 Wordpress Turbo 的功能。它实质上在本地缓存了管理面板中使用的许多资源，加快了对它们的文件访问。复制该行为我们可以使用 HTML5 的 applicationCache 和cache.manifest 。

应用程序缓存比设置略有优势 Expires 标头；因为你制作了一个声明性文件来指示可以缓存的静态资源，浏览器可以对其进行大量优化，甚至可能在你使用之前预先缓存它们。

将您网站的基本结构视为模板。您的数据可能会发生变化，但围绕它的 HTML 通常保持相当一致。使用应用程序缓存，您可以将 HTML 视为一系列纯模板，通过 cache.manifest 缓存标记，然后通过网络传送 JSON 以更新内容。这种模式与 iPhone 或 Android 原生新闻应用程序非常相似。

阅读应用程序缓存教程以获取有关使用它的指南。

技巧六：开启硬件加速提升视觉体验

在领先的浏览器中，许多视觉操作可以利用 GPU 级加速，这可以使高度动态的视觉操作更加流畅。的硬件加速已经宣布， Firefox Minefield 和 IE9 Safari 在版本 5 中添加了硬件级加速。（它更早地出现在 Mobile Safari 中。）Chromium 刚刚为 Windows添加了 3D 转换和硬件加速，其他两个平台即将推出.

GPU 加速仅在一组相当受限的条件下启动，但 3D 变换和动画不透明度是触发开关的最常见方式。一种有点笨拙但不引人注意的方式来打开它是：

  .hwaccel {  -webkit-transform: translateZ(0); }

但是，没有任何保证。 :)

在支持和启用硬件加速的情况下，GPU 合成的动画平移、旋转、缩放和不透明度肯定会更加流畅。它们的好处是可以直接在 GPU 上处理，并且不需要重绘图层内容。但是，任何影响页面布局的属性仍然会比较慢。

技巧 7：对于 CPU 密集型操作，Web Workers 提供

Web Workers 有两个显着的好处：1）它们很快。 2) 当他们处理你的任务时，浏览器保持响应。看看 HTML5 Slide Deck for Workers 的实际效果。

您可以使用 Web Worker 的一些可能情况：

长文档的文本格式
语法高亮
图像处理
图像合成
处理大型数组

技巧 8：HTML5 表单属性和输入类型

HTML5 引入了一组新的输入类型，升级了我们的 text, password，和 file包括 search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range 和 color。浏览器对这些的支持各不相同，目前 Opera 实现最多。通过功能检测，您可以确定浏览器是否具有本机支持（并将提供像日期选择器或颜色选择器这样的 UI），如果没有，您可以继续使用 JS 小部件来完成这些常见任务。

除了类型之外，我们的普通输入字段还添加了一些有用的功能。输入 placeholder 提供默认文本，当您点击它们时会清除，并且 autofocus 将插入符号集中在页面加载上，以便您可以立即与该字段进行交互。输入验证是 HTML5 中的另一件事。添加 required 属性意味着浏览器在填写该字段之前不会让表单提交。还有 pattern 属性允许您为要测试的输入指定自定义正则表达式；无效值阻止表单提交。这种声明式语法不仅在源代码可读性方面有了很大的提升，而且显着减少了 JavaScript 的必要性。同样，如果不存在对这些功能的本机支持，您可以使用功能检测来提供后备解决方案。

在此处使用本机小部件意味着您无需发送启动这些小部件所需的繁重的 javascript 和 css，从而加快页面加载速度并可能提高小部件的响应能力。要尝试其中一些输入增强功能，请查看 HTML5 幻灯片。

技巧 9：使用 CSS3 效果而不是请求大量的图像精灵

CSS3 提供了许多新的样式可能性，取代了我们使用图像来准确地表示视觉设计。用 100 字节的 CSS 替换 2k 图像是一个巨大的胜利，更不用说您已经删除了另一个 HTTP 请求。需要熟悉的一些属性是：

线性和径向渐变
圆角的边界半径
阴影和发光的盒子阴影
用于 alpha 不透明度的 RGBA
旋转变换
CSS 掩码

例如，您可以通过渐变创建非常精美的按钮并复制许多其他无图像效果。浏览器对其中大部分的支持非常可靠，您可以使用像 Modernizr 这样的库来捕获不支持这些功能的浏览器，以便在后备情况下使用图像。

技巧 10：WebSockets 以比 XHR 更少的带宽实现更快的交付

WebSockets 是为了响应 Comet 的日益流行而设计的。现在使用 WebSockets 确实有优势，而不是 XHR 模型上的 Comet。

WebSockets 具有非常轻的框架，因此它消耗的带宽通常比 XHR 轻。一些报告表明通过线路发送的字节数减少了 35%。此外，在更高的音量下，消息传递的性能差异更加明显； XHR 已记录在该测试中，总时间比 WebSockets 长 3500%。最后， Ericcson Labs 考虑了 WebSockets 的性能，发现由于更大量的处理要求，通过 HTTP 的 ping 时间比通过 WebSockets 的 ping 时间长 3-5 倍。他们得出结论，WebSocket 协议显然更适合实时应用程序。