Best Practices for Increasing Speed with Dynamsoft Barcode Reader JavaScript Edition

blog-barcode-best-Practices

Dynamsoft Barcode Reader JavaScript Edition is a JavaScript API for barcode scanning based on the latest WebAssembly technology. Overall, JavaScript Edition comes with a clear advantage – end users don’t need to install anything to use your web application.

However, this relatively new technology relies heavily on browsers, which may impact decoding performance.

Performance Data with Different Browsers

Generally, the performance of WebAssembly depends on the network connection, device and browser used. Below are some preliminary data from our testing.


Note:

  • The Initial Load (cold cache) column lists the time spent on downloading the WASM file and compilation when a user first accesses the above demo page.
  • The Subsequent Visits (warm cache) column lists the time spent on page load from the second time forward. The Average Time column lists the average time spent on localizing and decoding multiple barcodes from one video frame.

1. Android

As you can see from the table below, on Android phones, Firefox has much better speed than Chrome. If you have control over your users’ browser choice, Firefox is recommended.

(version: 6.5; date: March 2019)

Device Browser Initial Load (ms) Subsequent Visits (ms)
HUAWEI Mate20 CPU: Hisilicon Kirin 980 Chrome 70 1,998 996
HUAWEI Mate20 CPU: Hisilicon Kirin 980 Firefox 63 1,217 207

2. iPhone

On iOS phones (iPhones), we recommend using newer hardware, such as iPhone 7 or higher.

(version: 6.5; date: March 2019)

Device Browser Initial Load (ms) Subsequent Visits (ms)
iPhone 7 Safari 11.4 3,036 1,599
iPhone X Safari 12.1 2,211 928

3. Desktop

The performance on desktops is generally acceptable in different browsers across the operating systems. From our test, Safari performs less optimally on macOS.

(version: 6.5; date: March 2019)

Device Browser Initial Load (ms) Subsequent Visits (ms)
Win10 CPU: i7-4790 Chrome Version 70 (64-bit) 546 88
Win10 CPU: i7-4790 Firefox Quantum 63 (64-bit) 220 291
Win10 CPU: i7-4790 Microsoft Edge 42 339 27
Ubuntu: 16.0.4 Firefox Quantum 63 (64-bit) 396 125
Mac: 10.13.6 Safari 12 3,540 2,023
Mac: 10.13.6 Firefox Quantum 63 (64-bit) 290 64
Mac: 10.13.6 Chrome 71 (64-bit) 975 276

Why Firefox is Faster than Chrome

With Firefox and Edge, the browser supports caching compiled WebAssembly modules to IndexedDB, which allows users to store structured data on the client-side. So, from the second visit forward, the browser can finish page loading in a split second by retrieving the compiled module file.

At the first visit
Firefox-1
From the second visit
Firefox-2
Chrome and Safari do not support the aforementioned caching mechanism. We can store the .wasm file to IndexedDB, but not the compiled module file. So compilation is required upon every visit.

At the first visit
Chrome-1
From the second visit
Chrome-2

Preloading the .wasm File

For better user experience, especially with iPhones and first-time visits, you may consider making some small adjustments to ease users’ anxiety while waiting for the page to load. For example, you can move the barcode reading step further down the user flow so that when users are performing the previous steps, the page can start preloading the .wasm file or compiling it in advance. This way, users won’t notice the long load time when they reach the barcode reading step.

Contrary to what some may believe, specifying the barcode format does not actually help too much on speeding up the loading of Dynamsoft Barcode Reader JavaScript Edition. The reason is that with Dynamsoft Barcode Reader, linear codes, QR code, Datamatrix, PDF417 and Aztec are all scanned at once.

Future Release Plans

1. Optimize the codebase:

In version 6.5 (scheduled Feb 2019), the codebase responsible for linear barcode decoding will be revamped.

In version 7.0 (scheduled June 2019), the codebase responsible for 2D barcode decoding will be revamped.

Simplify the codebase for barcode localization. Dynamsoft Barcode Reader runs a comprehensive algorithm to localize multiple barcodes, even in extreme circumstances. The algorithm is overkill in the JavaScript Edition, where users tend to proactively adjust the camera to point at the barcodes. Simplifying the localization codebase will greatly reduce the size of the .wasm file, and thus greatly reduce the downloading and compiling time.

These methods are expected to speed up the compilation of Dynamsoft Barcode Reader JavaScript Edition.

2. Browser plugin

Develop a plugin for Chrome (desktop) and FireFox (desktop and Android), so that the compiled module will load upon opening the browser, i.e., before opening the page. There is no determined timeline for this.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com