为一名前端攻城狮，Canvas 和 SVG 对于我们并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的时间要比 canvas 长很多，svg 并不属于 html，最初的 svg 是由 XML 定义的，在 html 5 中 canvas 与 svg 看着相似，其实不同。

一、基本介绍

Canvas

• 通过 js 来绘制 2D图形。
• canvas 图像单位是像素。
• canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。

SVG

• svg 使用 XML 描述的2D图像。
• svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
• svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。

二、SVG与Canvas比较

1. svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
2. svg 支持事件处理器，而 canvas 不支持事件处理器。
3. svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
4. canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
5. canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
6. canvas 适合开发游戏，svg 不适合游戏应用。

二、如何应用

2.1、功能上来说

canvas 是一个画布，绘制出来的图形是位图，因此 canvas 可以绘制图片，在实际应用中，由于渲染性能高，所以大型游戏开发都用的 canvas 。除此之外，还有统计中常见的柱状图、饼图、雷达图等也使用的 canvas 。而 svg 绘制的是矢量图，放大后不会失真，所以很适合做地图。

2.2、操作方面讲

canvas 绘制的图形，只能给 canvas 整个画布添加事件，而不能给某个图形或文件添加事件处理器，但是 svg 支持事件绑定，如果需要添加带有事件的动画效果时，就需要选择 svg。

级驾驶员辅助系统、安全解决方案、更清洁驱动系统理念以及一体式互联技术：随着汽车行业向软件化和驾乘服务持续快速转型的步伐，大陆集团的前沿创新产品清单还在不断扩充。国际科技公司大陆集团即将在1月5-8日拉斯维加斯举办的国际消费电子产品展期间展览多项技术产品及服务，以此彰显其对汽车业数字化进程的深刻理解。

大陆集团执行董事会董事兼车身电子事业部负责人Helmut Matschi介绍说：“整个汽车业目前正在经历一场变革，我们大陆集团在重塑汽车业的过程中发挥着非常积极的作用。依托我们在系统集成方面扎实的专业知识和车联网领域多年积累的丰富经验，我们根据最新市场发展动态不断调整我们的产品。例如，我们目前正在为客户开发新型驾乘解决方案的必备组件，共同为塑造未来驾乘愿景出力。在即将举办的拉斯维加斯国际消费电子产品展上，我们将展出最新的面向未来的解决方案。”

大陆集团隆重推出车载生物特征识别技术

创新的进入控制系统能够做的不仅仅只是锁住车门或启动发动机那么简单。大陆集团将无钥匙进入启动系统与生物特征识别元件相结合，为驾乘者提供个性化的服务并提高安全性。举例而言，在启动发动机时就不再需要在车内放上一把车钥匙了（具体根据汽车厂商系统配置情况而定）。

只有在驾驶员通过指纹传感器完成身份验证后，驾驶员才能启动发动机。这种双因子认证系统可极大地增强车辆防盗性能。此外，车内摄像头可提升车辆个性化水平。利用面部识别功能可对座椅位置、后视镜角度、音乐播放、温度调节以及导航等多种车载功能进行个性化设置。生物识别技术可与任何一种智能系统集成，无论车辆使用何种接入技术（低能耗蓝牙?或低频技术）都是如此。

云终端使娱乐系统变得智能又不失灵活

大陆集团全新云终端设备使驾驶舱变得异常灵活。过去直接与车载主机集成的各种应用现在已被转移至云端，在云端进行处理后再通过强大的浏览器显示出来，这样就能确保系统随时处于最新状态，并可随时添加各种新功能。

此外，终端设备采用了HTML5技术来开发和显示云端应用，不仅实现了跨平台应用开发，同时也能使数据在不同分辨率的显示器上正常显示。因此，车辆厂商就能针对不同车型与车级开发应用。

云终端设备还能起到驾驶员数字助理的作用，它可对驾驶员在一天和一周中不同时间段的习惯进行分析，在此基础上设置播放的娱乐节目，在上午驾驶员开车上班途中播放所收藏的广播电台。其它应用也能照此优化，另一种便利选项：如果驾驶员每周三下午都会到健身房健身，那么系统一启动就会自动显示出驶往健身房的路线图。

即便是标准的无线广播也可通过添加云服务和人工智能系统的方式实现重大优化。大陆集团的服务可将多种功能纳入到统一的众包理念中，后者的设计目的就在于使无线广播系统成为一个智能系统。这就意味着，驾驶员可查看任何一个特定时段的电台播出表，准确选择他们喜好的电台收听。此外，电台还能自动切换到驾驶员收藏的艺术家列表。系统能够根据驾驶员的收听习惯，有针对性地推荐其它电台，从而使整个系统更为完美。

车轮上的集群智能技术: 摩托车电子地平线技术

摩托车手现在已经可以开始对未来赛季充满期待了，因为大陆集团开发人员利用电子地平线技术可让汽车驾驶员和摩托车手看到弯道后的情况。供摩托车手所用的电子地平线系统可实现摩托车车手彼此互联，成为摩托车手社群的共享平台，并让摩托车手能够共享重要的路线信息。大陆集团所开发的这一系统采用了集群智能理念，可在后台持续提供精准和最新的数字化地图信息。所存储的数据经云平台核对后提供给所有摩托车手使用，这样就可确保摩托车手预先了解沿途的障碍物以及道路工程、事故、道路积油积水或交通拥堵等情况，这样不仅能够增强摩托车手的安全性，对于其它所有道路使用者也同样如此。

功能加强的智能玻璃

大陆集团的“智能玻璃控制”技术仅需一键即可对几乎所有车窗有选择性地进行无级式调暗，而且更为智能：大陆集团在其中又加入了多种新功能，进一步提高了乘客舒适度。由于在车载电子通讯系统中集成了智能玻璃控制技术，玻璃可根据不同的交通状况自动进行动态调节。譬如，系统与光感传感器相连后，智能玻璃能将阳光照到的位置精准调暗。

无钥匙进入启动系统也和智能玻璃控制系统相结合，这样在驾驶员携带车钥走近汽车时，就能对车窗调色。大陆集团的解决方案并不受所用薄膜种类限制，而且与电化学与分散聚合物液晶等多种技术都兼容。

优质3D显示器为驾驶舱带来全新设计选项

驾驶舱对功能和数字内容的需求与日俱增，这就意味着车载显示器正在越变越大。全数字化仪表对于数字化内容的灵活显示可能是比较理想的，但也可能会限制到设计的灵活性。为确保未来驾驶员既可享受到数字化内容，又无需盯着老式的平面媒体显示器，大陆集团开发了3D显示器，其特点是采用了局部光学贴合元件，可重现传统显示器的质感，设计个性化程度较高。

从航空到公路: 高清三维激光扫描雷达

高清三维激光扫描雷达（HFL）是一款车载传感器，可对车辆周围环境进行3D实时探测，该传感器无任何活动机械部件。此项技术已经在航空领域进行了测试，可显示车辆周围的精细视图，可应用于白天、夜晚以及恶劣天气状况。高清三维激光扫描雷达使大陆集团用于高级驾驶员辅助系统的车载传感器产品线进一步得以拓展，与其它传感器结合使用，能为高度自动化驾驶和全自动化驾驶提供有力支持。大陆集团的车载环境探测雷达因其出色的“拖车并道辅助系统（Trailer Merge Assist）和拖车长度探测系统（Trailer Length Detection）”荣获了2017国际消费电子产品展“车载智能技术”类创新奖。

辅助驾驶与自动化驾驶控制单元使互联能力得以增强

辅助驾驶与自动化驾驶控制单元（ADCU）是一款车载中央计算机，由多个异构处理器所组成，在底盘与安全系统互联方面起到了关键作用，它使以往独立运行的多系统实现了互联，从而使功能范围得以扩展。由于干预决策经过了统一仲裁，因此不同系统中的同步干预能够完美契合。

对于大陆集团而言，辅助驾驶与自动化驾驶控制单元是构建功能安全架构所必需的核心组件，同时作为主机也承载着环境模型建立和实现驾驶功能的职责。

Zonar: 平板电脑式智能车队管理系统

大陆集团最近收购的Zonar公司将在展台上展出其面向客运和货运的智能车队管理技术。全新的ZonarConnect?系统是能够持续保持联网的下一代平板电脑，能让商用车队经营者更好地控制其业务流程。ZonarConnect平板电脑获得了自动车载记录设备规范（AOBRD）认证，并做好了进行后续美国电子记录设备（ELD）标准认证的相关准备。此外，ZonarConnect设备中还独家安装了获得专利的 EVIR应用，EVIR应用是目前惟一在用的认证电子车辆检查程序。

文从营销频道H5业务展开，讲述了H5测试的通用测试技巧与实现方案，对测试工作和经验进行总结提炼。通过本文可以了解京东内常用研发架构的测试方法和实践效果。

【本文目录】

• 了解H5业务
• 常用测试手段
• 针对京东现有H5常用架构和实现方案的测试
• 痛点和不足

背景

H5页面是营销域最常见的一种运营形式，业务通过H5来提供服务，可以满足用户对于便捷、高效和低成本的需求。H5页面是业务直面用户的端点，其质量保证工作显得尤为重要。各业务的功能实现具有通用性，相应也有共性的测试方法，本文进行总结和分享。

1 了解H5业务

多角度认识H5业务，了解功能的实现链路，明确各个节点是由哪一方如何实现，一方面可以打开设计用例的思路；另一方面在遇到问题时，可以快速定位，精确反馈。

【1.1 前端展示】

1.1.1 两种开发技术

提及前端，需要首先介绍两种开发技术“原生开发”、“H5开发”：

原生应用开发：是在 Android、iOS 等移动平台上利用官方提供的开发语言、开发类库、开发工具进行 App 开发。所以原生架构的 App 在应用性能上和交互体验上应该是最好的，比如APP中的“直播”、“登录”以及提醒组件等是纯原生开发的模块。

H5开发：是指利用 Web 技术（HTML5、JavaScript、CSS）进行的 App 开发。H5 开发的好处是可以跨平台，编写的代码可以同时在 Android、iOS、Windows 上进行运行。当前APP内的主要活动比如“百亿补贴”、“便宜包邮”以及“秒杀”等均为H5开发实现。

两种开发实现的特点对比如下：

1.1.2 容器角度分层

以春晚页面为例，从容器的角度，一个H5页面从顶层到底层的层级展示如下图：

其中通天塔H5 fragment容器重写了JDHybrid的CommonMFragment，X5WebView容器重写了x5webview，支持自行决定使用系统还是x5。图中涉及4方，分别是通天塔团队、JDHybrid团队、JSSDK和H5具体业务方。其中通天塔团队、JDHybrid团队是原生开发的架构，属于容器侧，JSSDK和H5具体业务方属于H5开发，各自作用可概述如下：

?JDHybrid：提供环境设备信息、导航栏、页面路由、页面事件、通用JS功能、性能优化

?通天塔：提供自定义的导航栏的逻辑，包括UI和JS桥；其他复用webview容器的能力

?JSSDK：统一API，调用客户端协议；同时提供性能异常上报、常用函数等

?H5前端：接入JSSDK，展示页面内容，实现前端交互等业务逻辑

1.1.3 具体功能实现

具体功能的实现，往往涉及多个功能提供方，大体可分两类：

?能力由JDHybrid提供的

H5通过JSSDK调JDHybrid封装的方法， JDHybrid调自身逻辑

例如：获取设备信息中的uuid

JDHybrid提供了获取设备基础信息的JS桥，按照约定的规则入参，可以即可获得uuid等信息。但原生底层API，但不再对外暴露，而是由JSSDK统一维护，京东电器的H5代码只需要调用JSSDK即可

?能力由其他团队（通天塔或其他组件）提供的

H5调JS代码，经过webview内核 ，内核调用 JDHybrid封装的统一方法， JDHybrid调通天塔（或其他插件）

例如：打开地址列表，地址列表是地址组件提供的能力，JDHybrid提供了路由方法可以通过测试demo简单判断是否具体业务问题。

【1.2 内容数据】

能为多个业务提供同一类功能的应用，被抽象为各个“上游”。营销内容从配置到呈现给用户，需要多重业务逻辑处理，除本业务服务端进行精细化业务处理，还需要与各个上游进行交互。一个业务整体的功能实现，与各常见上游之间调用的链路如下图所示：

1.2.1 数据来源

商品信息、优惠券、红包和利益点，是一个H5页面常见的元素，其底层来源各不相同：

1.2.2 数据策略

通常，业务方不会与底层数据直接交互，而是通过多个上游，实现数据的千人千面效果，例如：

?算法：根据业务配置策略，将商品组信息整合之后提供给具体业务

?UMC：基于用户数据，针对不同人群，制定发放不同权益类型的规则

?互动工坊：按照活动维度，设置任务和奖品的组合规则

关于内容数据的验证，测试关键在于所配即所得，不同的用户画像获得的数据要符合业务预期。

2 常用测试手段

【2.1 测服务端】

2.1.1 查看日志

?平台：泰山-日志管理

?适用场景：涉及上下游逻辑，且不能在前端直接观察

?关注点：

通过关键字，筛选各个应用的信息，验证服务端对上游的入参、上游对服务端的返回是否符合预期

2.1.2 特殊场景

?平台：deeptest-mock管理

?适用场景：对于一些异常场景或者边界值，营销活动或素材无法精准满足场景要求，

?关注点：

可在平台上录入上游接口信息，通过mock上游返回，验证业务服务端的处理逻辑

2.1.3 JMQ验证

?平台：泰山-JMQ

?适用场景：应用服务之间通过MQ来通信的场景

?关注点：开启消费轨迹，验证发送给其他应用服务的MQ信息时机是否准确，内容是否正确

2.1.4 缓存查询

?平台：泰山-JIMDB

?适用场景：需求改动到缓存逻辑，尤其针对长期互动类

?关注点：缓存的写入时间是否及时、有效期是否合理、缓存内容正确性

2.1.5 直接调用

?平台：deeptest-用例管理

?适用场景：

前置操作较长（如需要先展示再领取）、条件苛刻（如需要多重身份打标）、阈值较高需要批量操作等

?关注点：接口返回同入参预期，边界逻辑正确处理

【2.2 测前端】

2.2.1 功能测试

2.2.2 兼容测试

覆盖原则：

?Android、iOS不同系统

?兼顾不同屏幕分辨率

?如涉及到站外投放，需考虑到容器版本微信版本兼容，不同原生浏览器

?系统内核、X5内核

平台：

当前已有一些自动化手段，如Airtest、活动自动化测试等以插件形式集成在赛博云测平台

2.2.3 埋点测试

关注点：埋点事件名称、上报时机、关键字段是否与埋点方案一致

平台：track

2.2.4 与原生架构结合

注意：

1.X5内核需要为京东APP开启存储权限，才会下载

2.X5内核下载好之后，需重启APP才可以使用

3.快速定位问题方法：使用手机自带浏览器，访问H5页面，如果和APP内表现不一致，可缩小问题范围

【2.3 线上追踪】

需求上线之后，还需要在真实用户场景下，对需求的功能、性能和体验进行监控、分析和验证。当前公司已有的追踪平台和手段陈列如下：

3 针对京东现有H5常用架构和实现方案的测试

【3.1 发布】

3.1.1 ihub

大前端共建平台，基于iPaaS标准建设，面向开发者提供包含h5、iOS、安卓等端的跨端楼层开发管理能力。赋能开发者跨业务线、跨系统（符合iPaaS标准）的开发内容复用、检索及二次开发等功能

验证点：

?位置：楼层位于首屏，非首屏等，验证是否有异常，比如数据加载，楼层渲染等

?数量：一个页面中是否使用了多个共建模板，是否有冲突

?共存：共建模板与通天塔的自有模板共存时是否有异常

?联动：共建模板关联锚点导航

当前已经沉淀出针对大促会场的自动化测试方法

3.1.2 通天塔可视化平台

是活动/频道页面可视化搭建平台，支持一次搭建输出H5、原生、PC等多端页面，供产研、采销运营、商家等用户免费使用

验证点：可视化配置、服务端保存与下发、前端展示正常，关注新增功能点对老功能的兼容

【3.2 性能优化】

用户能够正常访问页面，页面的内容才能产生价值，最大程度减少页面的加载时间，进而降低跳失率，就显得尤为重要。当前公司内部已有一些较为成熟的性能优化工具，会涉及到工具接入和效果的测试验证工作。

3.2.1 页面加载过程

一个H5页面的加载过程可简单归纳为以上几个步骤，性能优化手段，主要是从提前请求时机、减少资源请求等方面入手。

3.2.2 现有优化手段

验证原则：接入生效、接入后对业务逻辑无影响。

3.2.2.1 JDHybrid离线包

原理：

把首屏的一些静态资源(如img、js、css、html等)打包提前加载到本地磁盘，当加载页面时直接从本地磁盘（或内存）获取资源加载

验证方法：

1）日志：借助JDHybrid团队提供的测试工具（Xconsole、xdog等），确认对应资源使用离线资源

2）抓包：H5在使用该资源时，不发起网络请求

3）hybrid快速验证工具：

使用业务：

通天塔会场、跨晚、春晚等

3.2.2.2 通天塔-数据直出

原理：前端直接从HTML中获取展示数据， 无需发起首屏接口请求。

验证方法：抓包观察，接入的楼层不发起网络请求

使用业务：部分通天塔会场、领券中心等

3.2.2.3 通天塔-SSR

原理：服务端渲染网页内容，并且将渲染后的HTML发送给浏览器，浏览器直接显示。数据直出和SSR区别在于直接加载一整个html，还是先页面、 后楼层顺序的加载页面片。

验证方法：禁用JS，页面仍可加载

使用业务：百亿补贴、便宜包邮等

?3.2.3 优化效果验证

3.2.3.1 同业比对性能测试工具

录制用户操作流程，通过自动化拆帧的方式，从用户视角对场景进行耗时采集和分析。控制变量的情况下可与竞品进行性能对比与分析

3.2.3.2 烛龙

通过侵入式埋点方式，实现了对APP应用的全方位监控，实时采集用户的性能异常数据，快速精准定位问题，发现性能瓶颈，减少用户流失，提升用户体验

【3.3 风控】

H5常用的风控手段，集中在反爬和用户身份两大方向，验证的关注点在于“接入的正确性”和“策略的有效性”。

3.3.1 价格反爬接口三件套

?神盾处置

验证点：

登录加黑白名单，请求接口，可触发处置，网关返回605

在处置页放弃验证，可返回上一页，不能循环进入处置页面

在处置页成功验证，处置页面消失，H5页面重新加载

?神盾接口加固

验证点：

入参的h5st正常，验签面板返回结果200，soa接口正常下发数据，前台页面正常展示

mock入参中异常，验签面板返回非200，soa接口在网关侧拦截（下发403或者mock数据），前台页面走业务兜底逻辑

?设备指纹

验证点：body中传参正确即可

3.3.2 RCS风控

验证点：根据不同画像人群的配置策略，验证对应pin触发业务处理逻辑是否符合预期

4 痛点和不足

1. 组件测试

组件的代码改动偏底层，测试过程相对黑盒，划定测试范围时，往往只能是重复性回归，因为更加底层的逻辑测不到，如场景无法创造等。如何提高可测性、增加测试精准性，是需要进一步解决的问题。

2. 兼容测试

当前设备机型较多，落实到兼容测试，其实是单一行为的重复，靠人工执行耗时长，且覆盖范围有限。但当前缺乏可靠的自动化工具，可以替代兼容验证，同时降低脚本的维护成本。

3. 测试素材

涉及到权益相关的需求，依赖真实素材，可能会阻碍测试进度。通过mock的方式前提是有一方作保证，或内容已验证，风险较大。

4. 兜底测试

大型互动中，调用接口较多，且交互复杂，但对健壮性要求较高，兜底工作量较大。当前的兜底自动化工具，还需要丰富支持的场景。

作者:技术质量 丁嘉莹

来源-微信公众号:京东零售技术

出处:https://mp.weixin.qq.com/s/AlwRQriRqVfGmWC8sgRq7w