2024年Web前端最全闲庭信步聊前端 - 揭开视频直播神秘面纱(1)，2024年最新2024Web前端架构面试指南

最新推荐文章于 2024-11-11 09:45:18 发布

2401_84412194

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量778

点赞数 13

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84412194/article/details/138718752

版权

程序员专栏收录该内容

202 篇文章 1 订阅

订阅专栏

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

帧率：FPS（每秒钟传输的画面数）
字节：byte（计算机的储存单位）
比特：bit（计算机的传输单位）
码率：Kbps（ ps就是/s ）

b：bit（位），B：byte(字节)，1B=8b

码率

码率就是数字信号的传输速率，每秒传送信息，一般用的单位是Kbps即千位每秒。单位内的码率越高，精度就越高就越清晰度就越高但是同样有一个缺点就是码率越高对网速的要求就越高

不同的码率清晰度完全不同：

4000码率：

10000码率：

帧率

以帧为单位的位图图像连续出现形成的画面播放就是帧率，游戏中的FPS也是帧率，越高画面越流畅，如果FPS掉到30以下你就会以为是ppt在慢慢动一般，60帧以上就会明显的提升交互感和逼真感。

说到 60 帧想起了一个方法 requestAnimationFrame(callback)，这个方法是用来实现动画效果的。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

那么动画效果如何做到流畅呢，就是达到60帧，动画每 16.67 毫秒刷新一次，然后人眼捕捉到动画后就会感觉东西在流畅的移动，这个时间其实就是 1000/60 = 16.6666666666666… ≈ 16.67。

下面是一个简单的演示效果及代码：

const element = document.getElementById(‘test’);

let start;

function step(timestamp) {

if (start === undefined) {

start = timestamp;

}

const elapsed = timestamp - start;

//这里使用Math.min()确保元素刚好停在400px的位置。

element.style.transform = ‘translateX(’ + Math.min(0.1 * elapsed, 400) + ‘px)’;

if (elapsed < 4000) { // 在四秒后停止动画

window.requestAnimationFrame(step);

}

window.requestAnimationFrame(step);

PS：通过某软件进行的屏幕录制可能是刷新率和录制的原因导致感觉有点卡卡的，动画的实际效果会比 gif 中效果流畅自然，可以自行测试一番。timestamp 是回调函数会被传入 DOMHighResTimeStamp 参数指当前被 requestAnimationFrame() 排序的回调函数被触发的时间。官方提示有一个需要注意的地方，如果要这么用的话请确保总是使用第一个参数(或其它获得当前时间的方法)计算每次调用之间的时间间隔，否则动画在高刷新率的屏幕中会运行得更快。

requestAnimationFrame 的执行执行机制是由系统决定回调函数的来自动计算，不会引起丢帧或者卡顿，比起 setInterval 优势明显。setInterval 任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；setInterval 的固定时间间隔不一定与屏幕刷新率相同，会引起丢帧。还有一点就是在大多数浏览器里，当 requestAnimationFrame 运行在后台标签页或者隐藏的 iframe 中时，requestAnimationFrame 会被暂停调用以提升性能和电池寿命。

回到正题，那怎么怎么把一幅幅的图像拼接成一个视频呢？这就需要一个东西编码器，它可以将多张图像进行编码后生成很多GOP（Group of Pictures），解码器在播放时就是读取一段一段的GOP进行解码后在进行渲染的，这就是很多播放器在播放本地视频文件时为什么要下载解码器的原因（比如快播、暴风影音、迅雷播放器呀什么的）

GOP：两个 I 帧之间的间隔

I帧、P帧、B帧

视频压缩中每帧代表一副静止图像，而在实际压缩时会采取各种各样的算法去减少数据的体积，其中IPB就是最常见的

I帧：又称关键帧，自带全部信息的独立帧无需参考其他图像便可独立解码，可以理解为一张静态画面
P帧：又称差别帧，参考前面的I帧或者P帧然后缓存画面叠加本帧的差别，生成最终画面
B帧：又称双向差别帧，记录本帧与前后帧的差别，通过前后帧与本帧结合去的最终画面，可以有更高的压缩比并且解码速度增加，可以多线程解码，所以解码更快（压缩比查了一些资料都说不清楚只需要了解就行了，想深究的可以自行研究，ps：研究清楚后请通知一哈）

所以一个GOP中，只有加载出I帧才会渲染出一段视频，这就引申出了一堆问题比如说视频花了一小段啊、刚打开的延迟呀等等。。。