开发者控制台
登录
登录
开发者控制台

网页应用开发最佳实践

网页应用开发最佳实践

无论是移植现有网页应用，还是为Fire平板电脑或Android设备创建新的网页应用，都必须考虑到不同的设备功能会对应用的行为或外观有何影响。请按照以下最佳实践和指南来优化您的网页应用。

保护网页应用

互联网上的通信很容易被窃听和恶意篡改。亚马逊应用商店建议您采取措施保护提交的网页应用。为保护网页应用的安全，最好的方法是使用TLS 1.2。请避免使用早期版本，如TLS 1.0或TLS 1.1，因为它们的安全性不够高。

了解有关保护网页应用的详细信息。

为设备方向更改做计划

客户可能会在设备处于纵向或横向模式时使用您的应用。请运用以下技巧来管理应用在不同方向上的行为。

采用响应式设计技术

如今的屏幕尺寸和分辨率种类日益增加，越来越多样化。因此，针对每一种设备创建不同版本的网页应用并非切实可行的方法。相反，请采用响应式网页设计技术来提供最佳观看体验，最大限度减少在各种设备上的大小调整、平移和滚动。

在纵向或横向模式下锁定方向

诸如游戏之类的原生应用通常被设计成只在一个最佳方向上运行。当客户旋转设备时，应用将保持锁定在原有方向。有关更多信息，请参阅强制设备朝向特定方向。

指导客户旋转设备 

如果应用在一个方向上运行效果最佳，请通过文字或图片告诉客户将其设备旋转到该方向。

关闭触摸反馈

默认情况下，大多数Android设备会在用户点击网页链接时向其提供可视反馈。此类反馈通常显示为叠加在链接目标上的半透明颜色块。如果要禁用此行为，请在CSS标记中包含以下代码。

          body {
          -webkit-tap-highlight-color: rbga(255, 255, 255, 0);
          -webkit-user-select: none;
          }

确保网页应用填满屏幕

设计应用时应考虑到设备的不同屏幕尺寸和宽高，使应用填满整个屏幕。在某些情况下，应用可能无法填满整个屏幕，例如，应用可能需要采用宽银幕模式，或者原生宽高比可能与目标设备的宽高比不匹配。在此类场景中，应用必须填满80%的屏幕。网页应用资源包括示例代码，此示例代码可以在任何设备上动态调整应用的尺寸，同时保持正确的宽高比。此代码位于文件夹<install location>/Web/samples/webapp-cookbook/FillScreen/中

如果使用该标记为视口提供自定义设置，您可能会注意到网页应用在Fire平板电脑上和非亚马逊Android设备上的呈现方式存在差异。

如果内容宽度大于屏幕，则视口可能会缩小以适应内容。为防止出现这种情况，请在头部部分添加以下内容：

<meta name="viewport" content="user-scalable=no">

用户代理字符串

请参阅Fire平板电脑的用户代理字符串。

游戏应用的最佳实践

  • 使用requestAnimationFrame来限制帧速率。请勿以超出要求的速率进行渲染。
  • 使用数据结构跟踪游戏状态。
  • 使用有效的冲突检测算法和数据结构，例如k-d tree、quad tree、r-tree、边界矩形等，或使用有效的预置库。在此处可以看到有效冲突检测技术的示例。
  • 请勿不断地动态计算游戏状态。
  • 请勿尝试绘制不可见的东西。
  • 请勿使用CSS框阴影，因为它们绘制成本很高，并且可能会显著降低性能。

使用画布元素的最佳实践

  • 使用带有纹理形式预生成内容的sprite。
  • 使用整数坐标以避免进行亚像素数学计算。
  • 使用屏幕外画布来绘制线条、笔划、路径等调用，并将生成的缓冲区内容复制到主渲染画布。
  • 使用Web Worker在单独的Worker线程中在屏幕外画布上绘制。
  • 使用画布来绘制调用时，对调用进行批处理以提升性能。
  • 在不同渲染层中保持不变的背景和动画对象。这可以减少由于静态内容造成的渲染开销。
  • 使用clearRect清除画布，而不是重置宽度或高度属性。
  • 尽量减少对画布的状态更改。
  • 如果引擎未检测到并优化非保留模式，则跟踪并减少动画画布中需要重新渲染的部分。
  • 避免模糊。这可能会非常昂贵。
  • 避免像素回读和操作，因为它们将禁用渲染引擎可能本来能够执行的任何并行化/流水线操作。

优化网页应用合成层的最佳实践

Amazon Web View通过将选定层发送到GPU进行合成来改进渲染。如果在作为根层一部分的div上执行CSS变换，则会即时创建一个层并将其发送至GPU进行合成。对于更大、更复杂的div来说，这会很昂贵。为了提升性能，对于将会频繁地变换/重新绘制的div，应提前将其制作成其自己的合成层。

如果满足以下条件之一，RenderLayer将获得自己的合成层：

  • 该层具有3D或透视变换CSS属性。
  • 该层通过加速视频解码被<video>元素使用。
  • 该层被具有3D环境或加速2D环境的<canvas>元素使用。
  • 该层用于合成插件。
  • 该层使用CSS动画实现不透明度或使用动画webkit变换。
  • 该层使用加速CSS过滤器。
  • 具有合成后代的层包含需要位于合成层树中的信息，例如片段或反射。
  • 该层有一个具有较低z索引的兄弟元素，该兄弟元素包含一个合成层。

JavaScript的最佳实践

  • 尽可能使用类型化数组，而不是JS数组。
  • 使用“for”循环而不是“for-in”循环，因为前者更高效。
  • 尽可能使用本地变量。但是，如果某个变量是复杂对象并且需要分配支持，则可能需要将其创建为单例，前提是其数据类型不会更改，并且该对象不会变成多态。
  • 请勿创建“大型”方法。将方法模块化并分解成较的算法组块。虚拟机可以在其认为有利的地方内联和重新创建更大的方法。反之却不成立。
  • 请勿在数据类型可能更改（例如在整型、浮点型、双精度型之间更改）的地方使用变量。

在应用中保留导航

如果导航流停留在应用中，并且不会将客户导航到设备上的浏览器中，则客户将获得最佳的应用使用体验。请测试核心应用功能，确保客户不会被导航到浏览器。