2024年前端最全闲庭信步聊前端 - 揭开视频直播神秘面纱(4)，面向Web前端开发者的复习指南

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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

• 帧率：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帧才会渲染出一段视频，这就引申出了一堆问题比如说视频花了一小段啊、刚打开的延迟呀等等。。。

• 花屏：不是所有的地方都花有些部分是好的，有些部分是有问题的，我们假设这个GOP只有3帧，IPP，如果第一个P帧丢失，那么第二P帧的参考帧就变成了I帧，这样就出现了对硬不上的问题然后这个GOP整个都是花屏，直到加载出下一个GOP（P帧只会参考P帧或者I帧，花屏见下图）

• 延迟：有的时候打开一个视频或直播时，你会发现不是立马就播放的，因为一个GOP是从I帧开始的，所以你打开时可能正好处于I帧之后的几帧中，所以你要等待直到加载到下一个I帧才能开始播放

直播

–

直播行业大概是啥时候兴起的呢，我没具体调查，但是在我的印象中最早的是12年时候的yy直播，在我感觉直播行业的兴起时间大概是14年~15年左右，最火的是斗鱼，然后出了虎牙、战旗、龙珠、熊猫、网易CC、企鹅电竞等

然后就是近期发生的大事件的斗鱼和虎牙合并，合并后斗鱼将退市，还有企鹅电竞把用户都统一管理了，只是大概看了下没深入了解有兴趣的同学可以深入了解一下……

轻松时刻

其实中间有一段挺有意思的事情，日本有一个弹幕网站叫做 Niconico，然后中国模仿了一个类似的网站就是最初的 A站（Acfun）。

13年的时候A站推出了一个板块“生放送”，然后14年独立了出去就是斗鱼TV，规模和用户量和盈利都超过的 A站。

再后来！200几年的时候A站内部出了问题，然后A站的一个资深用户建立了一个类似于A站的网站，然后也完全超过了A站，这个就是B站

ps：A站太惨了

直播流程及常用软件

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

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

的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-ziRGQUJT-1715570260098)]

[外链图片转存中…(img-OcyqOTMi-1715570260099)]

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