昨天，面试官要求面试官谈论前端绩效优化，大脑无法转身。他只是谈论的。今天，他总结了他在绩效优化方面的经验。
2012年，基于JQuery的单页应用程序的开发，该功能是设备的资源管理。切换页面时，加载HTML片段并从后端获取数据。成功请求后，使用DOM接口将数据添加到表格以显示。
当您这样做时，每个数据都是单独应用的。列表列表的平均列表页面大约在项目演示时显示大约3秒钟。您第一次可以理解前端性能优化。
检查信息以了解主要性能瓶颈在DOM操作（选择元素并添加元素）上。优化有两个主要要点：
这种优化的想法主要是优化Google的性能优化。还有许多博客谈论重新启动和返回。最主要的是使用涉及更改的样式。尝试使用它。没有验证和测试，只是根据最佳实践开发。
Reactjs-player代码中有一些撤回：
https://developers.google.com/speed/docs/insights/browser-倒流？hl = zh-cn
根据我的经验，React性能优化主要是为了减少渲染时间的数量。
使用类组件时，您可以使用纯组件来改善性能。在某些情况下，请使用showscomponentupdate减少组件更新。
在React 16.8版本之后，我的项目代码已切换到功能组件。性能优化的要点是以下几点：
当PPT将白板的功能大致上传到服务器时，将后端分析为多个图片，并将其提供到前端的使用。该网页在画布中显示PPT。老师可以将其标记在PPT上。在同一Timethen上，通过Capturestream将教师方面的操作导出到视频中，并使用WebRTC与学生互动。
开发完成后，如果使用笔刷工具时没有松动，它将导致CPU的消耗量增加，并且开发的计算机上的CPU利用率将上升到90％以上。
有以下优化点：
在上面的前三个步骤优化白板后，CPU利用率可以稳定在50％以下，并且将来第四步不会实现。
以前的Janus信号并行处理。只要前端收到Websocket消息，它将自动连接到操作。在参加同一次会议上有10多人加入后，随后的会议中的人们需要在同一时间建立十几个联系。冰失败经常在Android手机上发生。
对问题的分析可能是由性能问题引起的。优化方法如下：
在上述优化之后，冰问题失败的问题尚未再次出现。
使用电子开发了类似于VMIX的程序。软件接口如下图所示。
左下角的两个相机预览的分辨率为1080p。上面的输出和预览帆布绘制视频。由于所使用的硬件性能很差，因此将视频帧速率推向后端只能达到15个。
最初的想法是使用MediaStream的ApplyConstraints接口来动态调整相机的分辨率。帧速率可以增加到约20帧。
最后，分析渲染中的CPU消耗。解决方案是，左下角的摄像头预览不会直接显示视频，但是该视频被绘制为低分辨率画布以进行预览。表现大大提高了业务需求。
原始：https：//juejin.cn/post/7101642015649038349