2020-09-10 html的MediaRecorder应用场景 + css的分离图层做动画 + JS的RAIL性能评估模型 + 软技能的管理团队人重要还是事重要

最新推荐文章于 2025-06-13 08:49:12 发布

原创最新推荐文章于 2025-06-13 08:49:12 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3 #html #html5

JavaScript 同时被 3 个专栏收录

141 篇文章

订阅专栏

每日3+1

132 篇文章

订阅专栏

CSS

73 篇文章

订阅专栏

博客围绕HTML、CSS、JS技术展开。介绍了HTML中MediaRecorder的构造及运用，CSS分离图层做动画可减轻渲染影响，还阐述了JS里RAIL性能评估模型的四个方向。此外，还提及团队管理中人和事重要性的探讨，但作者表示自己只是程序员未深入作答。

2020-09-10 题目来源：http://www.h-camel.com/index.html

[html] 你有使用过MediaRecorder吗？说说它的运用场景有哪些？

MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象。

对指定的流创建一个音频比特率为128kbps,视频比特率为2.5Mbps的媒体录制器. 被录制的媒体数据会以MP4格式封装。

var options = {
  audioBitsPerSecond : 128000,
  videoBitsPerSecond : 2500000,
  mimeType : 'video/mp4'
}
var mediaRecorder = new MediaRecorder(stream,options);
m = mediaRecorder;

stream: 将要录制的流，可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 <audio>, <video> 以及 <canvas>DOM元素。

mimeType:为新构建的 MediaRecorder 指定录制容器的MIME类型. 在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种mimeType.

audioBitsPerSecond: 指定音频的比特率.

videoBitsPerSecond: 指定视频的比特率.

MDN地址 https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder/MediaRecorder

[css] 分离图层做动画有什么优点？

减轻图层间渲染的影响

[js] 说说你对RAIL性能评估模型的了解

RAIL是一种以用户为中心的性能模型，最终目的是让网站在任何特定的设备上都能快速运行，每个网络应用均具有与其生命周期有关的四个不同方向，它们会以不同的方式影响着性能。主要包括：

1.立即响应用户，在100ms内确认用户输入

在用户注意到停滞后有100ms的时间来响应用户的输入。如果未响应，用户会注意到操作与反应之间的连接中断。

2.设置动画或滚动时，在10ms内完成帧

如果动画的帧率发生变化，用户会注意到，除非每秒生成60帧。只有10ms来执行代码。

3.最大程度增加主线程的空闲时间

利用空闲时间完成推迟的工作，例如，尽可能减少预加载数据，以便应用快速加载，并利用空闲时间加载剩余数据。

4.持续吸引用户，在1000ms内呈现交互内容

在1s中之内加载你的网站，否则用户注意力会分散，他们处理任务的感觉会中断，侧重于优化关键渲染路径取消阻止渲染。

[软技能] 你觉得团队管理，人的方面重要还事的方面重要？说说你的理由？

i am not a leader, i am just a poor programmer