Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Author: Douyin small program iOS team students

What is stream loading?

Stream loading is explained in a phrase, “load the files in the package while downloading the package.” Concurrent download and load can speed up the time when a small program starts without cache for the first time.

Second, implementation scheme

1.1 Replacing ZIP packages with PKG Packages

Before streaming the solution, the files of the applets are compressed into the ZIP package. Although the zip package is smaller, the files in the ZIP package can only be decompressed after the complete ZIP package is downloaded, and decompression takes time.

In the stream loading scheme, we use PKG packages to load applets’ files. PKG packages are uncompressed binaries that can read binary data directly from a specified area within the package. The size of PKG packets is larger than that of compressed ZIP packets. The CDN intelligent compression service enables the server to gzip the returned PKG data and compress repeated strings during PKG packet requests, reducing the transmission size of PKG packets and shortening the download time.

The following figure shows the file distribution structure within the PKG package. For example, different applets may have different file order.

1. | "PKG" file identifier (8 bytes) | (8 bytes) | 2. The file version number (8 bytes) | | extension information length extension information | 3. | contains the number of files (8 bytes) | 4. 1 file name length (2 bytes) | | file file filename | file 1 Offset (4 bytes) | file size (4 bytes) | 5. 1 2 file name length (2 bytes) | | file file filename | 2 2 offset (4 bytes) | file size (4 bytes) | 2 6. |... 7. | | | 1 binary content file 2 binary content |... |Copy the code

1.2 The loading time of resources is advanced

With the support of the PKG format package, we don’t have to wait for the package to complete before loading the resource, so the resource load time is earlier.

The start-up process before and after stream loading optimization is as follows:

Assuming that the files in the package of A certain version of small program A remain unchanged and the loading sequence of resources is the same before and after modification, loading the files in advance can make the first screen rendering of small program appear faster.

1.3 Small program package body transformation and optimization

Package body transformation is mainly to optimize the first screen loading time of small program, split app-service.js, separate js logic of different interfaces of small program from app-service.js file, and load as needed when all sides are opened, reducing the content that needs to be loaded during the first screen loading process and shortening the first screen display time.

As shown in the figure below, app-service.js contains the js logic of pageA, pageB, and pageC before splitting. After the split, the first screen only needs to download the “slimmed-down” app-service.js and the home page pagea.js before loading.

1.4 PKG file rearrangement optimization

To maximize the benefits of stream loading, we also optimized the order of file distribution in PKG packages.

For example, here is a PKG package file distribution for a small program, with the following files in order from lowest to highest:

Gameb. js is loaded in game.js. In this case, the applets will stop executing and wait for PKG to continue downloading. Execution will continue until the package download size exceeds gameB.js.

The optimization of the file distribution order in the PKG package is to adjust the location of the file in the PKG package, so that the file distribution order is as consistent as possible with the file load order of the applet start execution. This reduces the need to stop waiting to load a file that has not yet been downloaded during startup of the cache-free applets.

The background sorts files in order and frequency according to the buried points in the file access sequence reported every day, optimizes the file order of the PKG, and generates a new PKG. This operation does not require any action by the developer.