前端性能优化阅历总结 (前端性能优化面试题)

本文目录导航：

• 前端性能优化阅历总结
• 前端性能优化有哪些方法
• 前端性能优化｜什么是防抖和节流？

前端性能优化阅历总结

昨天面试，面试官让讲一下前端性能优化，脑子转不上来，随意讲了下，当天总结下本兽性能优化关系的阅历。

缩小DOM操作

2012年的时刻基于jQuery开发单页运行，性能是设施的资源治理，切换页面的时刻加载html片段而后向后端失掉数据，恳求成功后经常使用DOM接口将数据增加到表格中启动显示。

做的时刻每一条数据独自append，名目展示的时刻列表类页面平均须要3秒左右能力显示进去，第一次性去了解前端性能优化。

查资料了解到关键的性能瓶颈在DOM操作（选用元素、增加元素）上，优化方向关键有两点：

缓存选用元素的结果，不要每次从新选用；

数据失掉成功后将一切的数据兼并一同增加到表格中。

优化后性能优化显著，平均关上速度降落到了300毫秒以下。

缩小CSS的重绘和回流

这个优化思绪关键是谷歌性能优化的倡导，讲重绘和回流的博客也比拟多，实施起来关键就是触及变动的样式尽量经常使用不会造成重绘和回流的CSS样式，这共性能优化多少我自己并没有启动验证和测试，只是依照最佳通常启动开发。

在Reactjs-player代码中有所提现：

播放器工具栏暗藏的时刻经常使用了translate平移的模式替代top

style={{transform:hiding?translate(0,48px):translate(0,0)}}

缓存进展条长度经常使用transform替代width

transform:scaleX(0);

性能优化

依据我的阅历，React性能优化关键就是缩小render次数。

经常使用类组件的时刻可以经常使用Pure组件优化性能，在某些状况经常使用shouldComponentUpdate缩小组件更新。

在React16.8版本以后，我的名目代码都切换到了函数式组件，性能优化的模式关键有以下几点：

经常使用包装组件，的第二个参数相似与类组件的shouldComponentUpdate，在须要的时刻可以疏忽props的变动不更新组件，挂载在Router上的组件假设不这样经常使用切换路由会造成组件更新，我的名目中都是显式的写进去，Reactjs-player中也是这样成功的，代码地址，；

(ReactjsPlayer,(p,n)=>===&&===&&===&&===&&===&&===&&===&&===&&===&&===&&===,);

Redux的useSelector也是相似处置，可以间接经常使用redux提供的shallowEqual函数；

经过ref缓存形态，尽量缩小useEffect和useCallback的依赖，Reactjs-player的代码成功；

经常使用useReducer替代useState，兼并多个形态更新操作，同时经常使用节流降落形态变动的次数，Reactjs-player的代码成功

白板性能优化

白板的性能大抵时教员上行PPT到主机，后端解析成多个图片后提供应前端经常使用，网页将PPT显示在Canvas中，教员可以在PPT下面标注，同时将教员电脑摄像头的画面叠在最下层，而后将教员这边的操作经过captureStream导出成视频之后经常使用WebRTC和在校生启动互动。

在开发成功后，假设经常使用画笔工具的时刻不时拖动不松开，会造成CPU消耗不时下跌，开发的电脑上CPU应用率会升到90%以上。

优化的手腕有以下几点：

将白板分层，缩小不用要的绘制；

教员每次绘制完结后将Canvas导出一个图片缓存上去，下次绘制canvas的时刻只须要绘制这个截图和以后操作的轨迹；

绘制的时刻做节流处置，每次鼠标move事情只记载轨迹点，超越绘制距离才触发绘制；

未实施：经常使用离屏Canvas和WebWorker，进一步优化性能。

白板在经常使用了下面的前三步优化后，CPU应用率可以稳固在50%以下，后续没有去实施第四步了。

视频会议中的性能优化

之前的Janus信令都是并行处置，前端只需收到WebSocket信息就会智能去衔接等操作，同一个会议中已参与的人超越10个以后，前面的人参与会议须要同时建十几个衔接，在安卓手机上经常产生ICE失败的状况。

依据疑问现象剖析或许是性能疑问造成，优化的模式如下：

底层Janus信令处置只上报形态，由下层被动调用接口去建设衔接；

经常使用义务队列限度并发，同时只去建设一个衔接；

缩小页面中视频显示的个数，这个关键是业务上优化；

关于页面上没有显示视频的流，间接纳音频，控制主机不要发送视频流。

经过上述的优化后，ICE失败的疑问没有再产生了。

导播页面性能优化

经常使用Electron开发了一个相似vmix的程序，软件界面如下图所示。

左下角两个摄像头预览的分辨率是1080p，下面的输入和预览经常使用的canvas绘制video成功的，由于经常使用的配件性能比拟差，推流到后端的视频帧率只能到15左右。

最开局的想法是经常使用MediaStream的applyConstraints接口灵活调整摄像头的分辨率，帧率可以优化到20帧左右，然而有些摄像头切换分辨率会花屏2-3秒，体验差不能驳回。

最后剖析CPU的消耗在渲染上，处置方法是左下角的摄像头预览不间接显示video，而是将video绘制到低分辨率的canvas启动预览，性能优化很大，输入帧率可以稳固在28左右，满足了业务需求。

原文：

前端性能优化有哪些方法

前端性能优化的方法有：

一、缩小http恳求数

罕用的缩小http恳求数有以下几种：

1、兼并图片。

当图片较多时，可以兼并为一张大图，从而缩小http恳求数。

经常变动的图片或许不太适合，变动相对稳固的就可以思考。

兼并大图除了能缩小http恳求数外，还可以充沛应用缓存来优化性能。

2、兼并紧缩css样式表和js脚本，他们的独特目标都是为了缩小http衔接数。

3、去掉不用要的恳求。

开发写代码或许系统更新之后残留的有效恳求衔接。

4、充沛应用缓存。

这里说的缓存是客户端侧缓存或许说阅读器缓存。

Expires头信息是客户端侧缓存的关键依据，格局相似于Expires:sun ,20 Dec 2017 23:00:00 GMT。

以Apache为例，可在Apache的性能文件中设置Expires。

二、图片优化

优化方法：

1、尽或许的经常使用PNG格局的图片，它相对来说体积较小。

2、关于不同格局的图片，在上线之前最好启动必定的优化。

3、图片的提前加载，也叫做赖加载。

三、经常使用CDN

CDN即内容散发网络，可以经常使用户就近取得所需内容，处置网络拥堵的状况，提高用户访问网站的照应速度。

四、开启GZIP

GZIP即数据紧缩，用于紧缩经常使用Internet传输的一切文本资源。

开启GZIP的方法很便捷，到对应的web服务性能文件中设置一下即可。

以Apache为例，在性能文件中增加。

五、样式表和JS文件的优化

六、经常使用无cookie域名

无cookie域名的概念：当发送一个恳求时，同时还要恳求一张静态的图片和发送cookie时，主机关于这些cookie不会做任何经常使用，也就是说这些cookie没什么用，没不要随恳求一同发送。

前端性能优化｜什么是防抖和节流？

前端性能优化中，防抖和节流是两个经常出现的概念，它们在处置频繁触发的事情时各有特点。

防抖好比电梯门期待乘客所有进入后封锁，假设在期待时期又有新的恳求，会从新计时。

构想一下，当用户延续点击提交按钮，防抖会在必定时期内（如5秒）内只口头最后一次性的提交操作，防止频繁恳求。

而节流则更像是游戏中的技艺冷却机制，无论用户如何极速点击，技艺只能在设定的时时期隔后监禁一次性。

例如在拖拽性能中，节流确保了每距离一段时期才计算并更新一次性位置，降落CPU经常使用。

防抖的外围原理是保养一个计时器，只要在规则时期完结后或触发中止计时条件时，才会口头函数。

节流则是审核时时期隔能否已到，无论触发多少次，只口头一次性函数。

两者都旨在限度事情的口头频率，只是口头机遇不同。

总结来说，防抖是兼并屡次操作为一次性，而节流保障在一段时期内仅口头一次性。

在前端开发中，了解和把握这两个优化技巧，能够优化运行的性能和用户体验。

如需了解更多技术常识，欢迎关注“青云技术社区”群众号，参与技术交换群，介入抽奖优惠，赢取威望的《JavaScript 威望指南》。

优惠截至2021年8月11日，奖品丰盛，时机不容错过。