HOW - 移动端 WebView H5 开发规范

一、前言

移动应用中使用 WebView 进行 H5 开发时，需要遵守一些规范，以确保应用的性能、安全性和用户体验。以下是一些常见的规范：

1. 性能优化：

   • 减少不必要的 DOM 操作和重绘。
   • 尽量避免使用大量的 JavaScript 和 CSS 文件，以减少加载时间。
   • 使用合适的图片格式和大小，以减少网络请求和提高加载速度。
   • 将不常用的资源延迟加载或按需加载，以提高页面初始化速度。
   • 避免在 WebView 中频繁触发页面重绘，以减少性能消耗。

2. 安全性：

   • 避免直接使用 eval() 函数执行动态 JavaScript 代码，以防止代码注入攻击。
   • 验证 WebView 中加载的所有数据，包括用户输入和从服务器获取的数据，以防止 XSS（跨站脚本）攻击。
   • 使用 HTTPS 协议加载 WebView 中的内容，以确保数据传输的安全性。
   • 限制 WebView 的权限，最小化其对设备功能和敏感信息的访问权限。

3. 用户体验：

   • 确保在 WebView 中的页面布局和交互方式与原生应用保持一致，以提供统一的用户体验。
   • 优化页面布局和元素大小，以适应不同尺寸的移动设备屏幕。
   • 使用适当的动画效果和过渡效果，以增强用户体验。
   • 优化页面导航和加载过程，提供清晰的反馈和加载指示。

4. 跨平台兼容性：

   • 在开发过程中考虑不同平台和设备的兼容性，确保在不同的浏览器和操作系统上都能正常运行。
   • 使用前缀或垫片（polyfill）来解决不同浏览器之间的兼容性问题。

5. 资源管理：

   • 管理好 WebView 中加载的资源，包括图片、样式表、脚本等，避免资源浪费和页面加载过慢。
   • 使用缓存机制来提高页面加载速度，但同时要确保及时更新缓存以避免过期或失效的内容。

遵循这些规范可以帮助开发者开发出高性能、安全可靠、用户体验良好的移动应用 WebView H5 页面。

二、性能优化

图片资源

使用合适的图片格式和大小，以减少网络请求和提高加载速度。

下面是一些具体的建议：

1. 选择适当的图片格式

1. JPEG 格式
   适用于照片、图像和渐变色的图形，如实景照片和人物照片。具有较高的压缩比率，文件大小也相对较小，适合保存色彩丰富的图像。缺点是不支持透明度，压缩过程中可能导致图像细节损失，不适合保存线条清晰的图形。

2. PNG 格式
   适用于图标、线条清晰的图形或者LOGO等需要透明度的图像。支持透明度，无损压缩，保留图像细节。缺点是通常文件大小较大，不适合保存色彩丰富的照片。

3. WebP 格式
   谷歌开发的一种新型图片格式，具有较高的压缩率和良好的图片质量，也支持透明度，适合用于网络传输和需要保持高质量的同时减少文件大小的图像。缺点是兼容性差，部分PC浏览器可能不支持，手机端反而支持度高一些。

4. base64 格式
   base64 是一种将二进制数据编码为 ASCII 字符串的编码方式，常用于在 HTML、CSS 和 JavaScript 中嵌入图片数据。在移动应用开发或 Web 前端开发中，对于小文件可以转换成 base64 格式。base64 格式的图片数据适用于一些体积较小、不需要频繁更新或在页面加载时需要优化性能的图片，可以减少对外部图片资源的依赖，提高页面加载速度和性能。

之前合作过的设计师给出过如下建议：

1. icon -> svg
   SVG 是一种基于 XML 的矢量图形格式，它可以被放大或缩小而不失真，适用于各种尺寸和分辨率的显示设备。SVG 图标在不同尺寸和屏幕密度下都能保持清晰度，且文件大小较小，适合用于 Web 页面和移动应用的图标设计。关于 svg 更多内容可以阅读 HOW - 图形格式SVG及其应用
2. 透明图 -> png24
   PNG24 是 PNG 格式的一种，相比较其他 PNG 格式，如 PNG8，它支持更高的色彩深度，支持每个像素24位的颜色深度，适用于色彩较丰富或者需要精细渐变的图形，；它支持完全的 Alpha 透明度通道，能够实现图像中任意像素的透明度设置，不会丢失图像细节或产生边缘锯齿；支持在压缩后与原始图像相比损失的细节和清晰度计较少，可以保持较好的视觉效果。
3. 位图 -> jpg 80%
   这表示使用 JPEG 格式保存位图图像，并且选择压缩质量为 80%。JPEG 是一种常用的位图格式，适合保存色彩丰富的照片和图像。选择 80% 的压缩质量意味着在压缩图像时会略微降低图像质量以减小文件大小，但通常这种质量损失是不太明显的，而文件大小可以显著减小。

2. 压缩图片

使用图片压缩工具，如TinyPNG、JPEG Optimizer、gif5 compress 等，将图片压缩至合适的大小，以减少文件大小。

一般来说，移动端使用的图片几十K左右的范围，大几百K肯定不合适。

注意，避免无损压缩，因为在移动应用中，通常更关注文件大小而不是细微的图像细节。

3. 使用图片 Sprites：雪碧图

将多个小图标或按钮合并成一个图片 Sprite，在页面加载时只需请求一次该图片，减少网络请求次数。使用 CSS Sprite 技术需要指定所需图片在的位置和大小，以便正确显示所需的图标。

雪碧图（Sprite Sheet）是一种将多个小图标、图片或动画帧合并到单个图像文件中的技术。雪碧图的原理是将多个图像按照一定的规则排列在一张图像上，然后通过 CSS 的 background-position 属性或者 JavaScript 来控制显示具体的图像区域。这样，在页面加载时只需请求一张合并后的大图，然后根据需要显示其中的某个部分，避免了多次请求小图标或图片导致的网络延迟和性能损耗。

在使用 CSS Sprite 技术时，需要注意：

• 图片之间要有一定的间距，避免出现交叠、重叠等显示问题。
• 使用合适的 CSS 或 JavaScript 技术来控制显示具体的图像区域。
• 更新图像时要小心维护雪碧图，确保不影响页面其他部分。

4. 适当调整图片尺寸

适当调整图片尺寸指的是根据图片在页面上的显示大小和分辨率，对图片的实际尺寸进行调整，以达到优化页面加载速度和用户体验的目的。

具体来说，适当调整图片尺寸包括以下几个方面：

1. 根据显示大小调整图片尺寸：

   • 确定图片在页面上的实际显示大小，避免使用过大的图片尺寸。
   • 如果图片在页面上只显示为某个固定大小（例如，100x100 像素），则可以将图片的实际尺寸调整为该大小，避免浪费带宽和加载时间。

2. 根据分辨率调整图片尺寸：

   • 对于高分辨率设备（如 Retina 屏幕），通常可以提供高分辨率的图片版本，以保持图像清晰度。
   • 使用响应式图片技术或媒体查询，根据设备的屏幕分辨率动态加载适合的图片版本。

下面是一个例子：

<img class="responsive-image" alt="Responsive Image">

  /* 小屏幕设备下加载较小尺寸的图片 */
  @media only screen and (max-width: 600px) {
    .responsive-image {
      content: url('image@1x.jpg');
    }
  }
  /* 中等屏幕设备下加载中等尺寸的图片 */
  @media only screen and (min-width: 601px) and (max-width: 1024px) {
    .responsive-image {
      content: url('image@2x.jpg');
    }
  }
  /* 大屏幕设备下加载大尺寸的图片 */
  @media only screen and (min-width: 1025px) {
    .responsive-image {
      content: url('image@3x.jpg');
    }
  }

当然，也可以用JavaScript来控制 src 属性来进行动态换图。

// 获取图片元素
var img = document.getElementById('responsive-image');
// 根据设备的屏幕分辨率选择不同的图片版本
if (window.matchMedia('(max-width: 600px)').matches) {
    img.src = 'small-image.jpg';
} else if (window.matchMedia('(min-width: 601px) and (max-width: 1024px)').matches) {
    img.src = 'medium-image.jpg';
} else {
    img.src = 'large-image.jpg';
}

5. 懒加载图片

将页面上不立即需要加载的图片设为懒加载状态，在用户滚动到图片可见区域时再进行加载，以提高初始页面加载速度。使用 JavaScript 库，如LazyLoad.js等，来实现图片的懒加载功能。

使用 JavaScript 库来实现图片的懒加载功能是一种常见的方法，它可以延迟加载页面上不立即需要的图片，直到用户滚动到图片可见区域时再进行加载。下面是一个示例，使用 LazyLoad.js 库实现图片的懒加载：

首先，引入 LazyLoad.js 库文件：

<script src="path/to/lazyload.min.js"></script>

然后，在需要进行懒加载的图片元素上添加 data-src 属性，并给图片元素添加一个特定的类名，例如 lazy：

<img class="lazy" data-src="path/to/image.jpg" alt="Lazy Loaded Image">

最后，在 JavaScript 中初始化 LazyLoad 实例，并指定需要进行懒加载的图片元素的选择器（这里选择类名为 lazy 的图片）：

<script>
document.addEventListener("DOMContentLoaded", function() {
    var lazyLoadInstance = new LazyLoad({
        elements_selector: ".lazy"
    });
});
</script>

这样，页面上带有 lazy 类名的图片元素将会被延迟加载，直到它们进入用户视野范围内才会被加载，这底层运用了 IntersectionObserver，从而提高了页面的初始加载速度。更多关于 IntersectionObserver 检测页面内容渲染的内容可以阅读 HOW - IntersectionObserver 和页面元素曝光

另外可以根据实际需求和设计，在懒加载图片上添加一些过渡效果或加载指示，以提升用户体验。

三、安全性

todo

四、用户体验

推荐原生 CSS 实现页面效果

在实现页面一些页面效果时，我们应该先进行分析、拆解。

1. 通用部分拆解。将多个相似元素之间的通用部分采用同一段 CSS 代码实现。比如下图中外边框、圆形渐变、高斯模糊圆环均可使用 css 绘制，高保真且占用资源少。这样还有一个好处时，当需要改变其中渐变的颜色，改 css 代码即可，不需要重新让设计师切图。

2. 渐变替代。很多背景图都是渐变构成的，那就不需要让设计师切成图片格式，而是利用css直接绘制。

总之，尽量使用 CSS 来实现画面效果有以下几个好处：

1. 浏览器可以对 CSS 进行更有效的优化和渲染。
2. 可以减少外部资源依赖。
3. 使用 CSS 实现的效果通常更易于维护。

还有一点，使用 CSS 实现的动画、过渡和效果可以通过 GPU 加速，提高动画的流畅度，并减少 CPU 的负载。

五、跨平台兼容性

todo

六、资源管理

todo