為一名前端攻城獅，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