基于webview的前端页面优化指南

导航 #

1. 页面性能规范
2. 分享规范
3. 页面要求
   
   • 交互规范
   • 容灾规范
   • 其他异常处理
4. 技术规范
5. 测试标准

我们的业务主要是在移动端中使用和推广的，在移动端中，网络环境和内存都有不确定性，网络环境好的终端，不一定有好的内存；同样，有好内存的终端，也不一定都实时处在良好的网络环境下。因此，我们在针对移动端中应该有哪些优化呢？

1. 页面性能规范 #

• 从loading到呈现页面元素的时间，wifi下<500ms，4G下<1000ms，超过5000ms时进行预警上报；
• DOM ready的时间：<400ms；
• 页面完成加载的时间：<3000ms；
• 首次完成加载时的资源数量：<35；
• 单个资源的体积大小：<240kb
• 图片：<250kb

2. 分享规范 #

在新闻客户端、微信、QQ等终端分享时，均有相关的文案和图标规范。

要提供的信息和规范有：

1. 标题title : 中文字符下最多为24个汉字，一个中文字符可以更换为2个英文字符或数字，请自行换算；超过的字符被隐藏无法显示；
2. 描述desc : 中文字符下最多为48个汉字；
3. 链接link : 分享的链接，请注意显式地写出http还是https协议；
4. 图标img : 分享的图标，尺寸为120*120，图片链接请请注意显式地写出http还是https协议；

3. 页面要求 #

3.1 交互规范 #

• 用户点击某个按钮或者进行某个操作后，应立即给出过渡效果，比如loading等，避免用户出现假死的错觉；
• 请求接口时，添加上锁，防止多次重复的请求；
• 应当尽可能地使用APP能够提供的功能（例如接口请求、复制等功能）；

3.2 容灾规范 #

• 做好单个异常的捕获和处理，避免整个页面挂掉；
• 操作无法完成时，可让用户重试或者重新加载等；

3.3 其他异常处理 #

• 增加对页面出现异常的上报
• 对可能出现的异常进行try-catch，比如获取url中的参数后，进行JSON.parse操作等，url中的参数不一定是你传的完整的json string；
• 对于写在页面中的图片结构，需获取接口后才能赋图片地址的，请先确保图片地址获取完成后再进行渲染，否则会额外请求错误的图片地址；

4. 技术规范 #

• 所有的静态资源都放在CDN上，除非你使用了本地存储（如service worker等）；
• 使用第三方库时，不要全部加载，应按需import；
• 使用骨架屏提升请求接口时的用户体验；
• 使用新的技术，同时做好优雅降级，新的技术浏览器会从底层支持，同时会有更好的用户体验和编码体验。如使用IntersectionObserver监听元素的可见性，同时使用scroll做好降级处理；
• 业务代码与native代码解耦；
• 应当尽可能地使用APP能够提供的功能（例如接口请求、复制等功能）；
• 所有的函数和方法应当写明用途、传入参数的含义、类型，和最后返回的结果；

5. 测试标准 #

• 基础库应当有单元测试，且覆盖率尽可能地做到100%；
• 低端手机的降级处理，如动画降级、IntersectionObserver降级、ES6的polyfill等；
• 必测红米等高危机型；