畅谈flv.js源码知识点（中）：网速计算与数据缓存分析

2023-11-03 02:47:42

网速计算

在观看视频时，用户最关心的是视频的流畅度，而视频的流畅度很大程度上取决于网络速度。因此，flv.js在播放视频之前会先进行网速计算，以确定当前网络环境是否能够流畅播放视频。

flv.js的网速计算原理是，先在本地创建一个计时器，然后每隔一段时间向服务器发送一个请求。服务器收到请求后，会立即返回一个响应。计时器记录下从发送请求到收到响应所花费的时间，并根据这个时间计算出当前的网速。

网速计算的代码位于flv.js的netSpeed.js文件中。具体实现如下：

var netSpeed = {
    // 定时器句柄
    timer: null,
    // 上一次请求时间
    lastTime: 0,
    // 上一次响应时间
    lastResponseTime: 0,
    // 请求和响应之间的时差
    latency: 0,
    // 平均网速
    averageSpeed: 0,
    // 网速计算启动
    start: function() {
        this.timer = setInterval(function() {
            var now = new Date().getTime();
            // 发送请求
            var request = new XMLHttpRequest();
            request.open('GET', 'http://www.example.com/netSpeed.txt', true);
            request.onload = function() {
                // 收到响应
                var now2 = new Date().getTime();
                netSpeed.latency = now2 - now;
                netSpeed.lastResponseTime = now2;
                netSpeed.calculateAverageSpeed();
            };
            request.send();
            // 记录上一次请求时间
            netSpeed.lastTime = now;
        }, 1000);
    },
    // 网速计算停止
    stop: function() {
        clearInterval(this.timer);
    },
    // 计算平均网速
    calculateAverageSpeed: function() {
        var now = new Date().getTime();
        var timeDiff = now - this.lastTime;
        this.averageSpeed = (this.averageSpeed * (timeDiff - this.latency) + 1000 / this.latency) / 2;
    },
    // 获取平均网速
    getAverageSpeed: function() {
        return this.averageSpeed;
    }
};

2. 数据缓存

在视频播放过程中，flv.js会将视频数据缓存在本地。这样做可以减少对网络的访问次数，从而提高视频播放的流畅度。

flv.js的数据缓存原理是，在视频播放过程中，将视频数据分段加载到本地缓存中。当播放器需要播放某个视频段时，会先检查本地缓存中是否已经存在该视频段。如果存在，则直接从本地缓存中读取数据。如果不存在，则向服务器发送请求，将该视频段加载到本地缓存中，然后再播放。

数据缓存的代码位于flv.js的buffer.js文件中。具体实现如下：

var buffer = {
    // 缓存大小
    size: 10 * 1024 * 1024,
    // 缓存数据
    data: [],
    // 缓存指针
    pointer: 0,
    // 缓存是否已满
    isFull: function() {
        return this.pointer >= this.size;
    },
    // 将数据添加到缓存中
    addData: function(data) {
        if (this.isFull()) {
            // 缓存已满，丢弃最前面的数据
            this.data.splice(0, 1);
        }
        this.data.push(data);
        this.pointer += data.length;
    },
    // 从缓存中读取数据
    readData: function(length) {
        if (this.pointer < length) {
            // 缓存中没有足够的数据，返回null
            return null;
        }
        var data = this.data.slice(0, length);
        this.data.splice(0, length);
        this.pointer -= length;
        return data;
    },
    // 清空缓存
    clear: function() {
        this.data = [];
        this.pointer = 0;
    }
};