Network scheduling scheme under weak network environment in orange heart sinking market

Recently, the department has carried out a major reconstruction of the small program, and also carried out a review of the usual performance bottleneck. In our near-perfect office environment (fiber optic network, the latest equipment), our small program can almost reach the second to open level, whereas in the sinking market scenario, the user’s use scenario may exceed our imagination, often open more than 10 seconds. In this scenario, how to optimize becomes the proposition we think about. How to reach an agreement between us walking in the cloud and users on the ground has become the direction of our efforts.

Imaginary speed

In the real world

In fact, we will face the bad signal, the network speed is not good, the network resources will occur congestion of the phenomenon of false start. How to ensure that our business code is not blocked by low priority requests, and the maximum concurrent number of wechat small program WX. request is 10 requests, in such a scenario how to deal with

(The following solution is a project-based solution withdrawal, and the library is not used in the project.) Design a priority scheduling center here, and the following is the implementation architecture

We schedule requests in a centerSchedule, prioritize tasks into a lowQueue and normalQueue, and maintain a fetchingQueue that is requesting. During the request process, the data in the normalQueue is first cleared, and then the data in the low priority queue is cleared.

npm install easy-schedule -S
Copy the code

class centerSchedule {
    lowPriorityList = [];
    maxWaitingTime;
    threshold = 5;
    _isFetching = false;
    constructor(props) {
        const { lowPriority, maxWaitingTime, threshold, adapter } = props;
        if(lowPriority) {
            this.addLowPriorityList(lowPriority)
        }
        this.maxWaitingTime = maxWaitingTime;
        this.adapter = adapter;
        this.threshold = threshold || 5;
        this.lowQueue = new CommonQueue({maxWaitingTime});
        this.normalQueue = new CommonQueue();
        this.fetchingQueue = newCommonQueue(); }}Copy the code

As shown in the figure, when initializing the queue, use the decorator pattern and put the request method into the Adapter. And put the response priority parameter into the initialization

An 🌰

import schedule from  'easy-schedule'

function fetch(value) {
    return new Promise((resolve, reject) = > {
        setTimeout(() = > {
            console.log(value);
            resolve(value)
        }, 1000)})}const center = new schedule({
    adapter: fetch,
    lowPriority: 'low'.maxWaitingTime: 200
})


center.request({
    url: 'first'
})
center.request({
    url: 'low',
    
})
center.request({
    url: 'last'.priority: 'low'
})

Copy the code