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

蚊子前端博客
发布于 2019-02-26 16:03
我们的业务主要是在移动端中使用和推广的,在移动端中,网络环境和内存都有不确定性,网络环境好的终端,不一定有好的内存;同样,有好内存的终端,也不一定都实时处在良好的网络环境下。因此,我们在针对移动端中应该有哪些优化呢?

导航

  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等;

  • 必测红米等高危机型;

阅读(678)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆