前端性能优化阅历总结 (前端性能优化有哪些方法)
本文目录导航：
前端性能优化阅历总结
昨天面试，面试官让讲一下前端性能优化，脑子转不上来，随意讲了下，当天总结下本兽性能优化关系的阅历。
增加DOM操作2012年的时刻基于jQuery开发单页运行，性能是设施的资源治理，切换页面的时刻加载html片段而后向后端失掉数据，恳求成功后经常使用DOM接口将数据参与到表格中启动显示。
做的时刻每一条数据独自append，名目展示的时刻列表类页面平均须要3秒左右才干显示进去，第一次性去了解前端性能优化。
查资料了解到关键的性能瓶颈在DOM操作（选用元素、参与元素）上，优化方向关键有两点：
缓存选用元素的结果，不要每次从新选用；
数据失掉成功后将一切的数据兼并一同参与到表格中。
优化后性能优化清楚，平均关上速度降落到了300毫秒以下。
这个优化思绪关键是谷歌性能优化的倡导，讲重绘和回流的博客也比拟多，实施起来关键就是触及变动的样式尽量经常使用不会造成重绘和回流的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左右，满足了业务需求。
原文：网站数据多，传输速度慢，怎样处置？
网站数据传输速度慢的疑问可以经过多种方法来处置，以下是一些有效的优化战略：1.优化Web设计：例如，优化图片大小、代码格局和外部脚本的经常使用，选用优质的服务提供商启动托管、内容缓存和负载平衡。
2.测试网站性能：经常使用性能测量工具，如Google Lighthouse或Cloudflare Observatory，来评价网站性能，并关注Core Web Vitals目的，如最大内容绘制、初次输入提前和累计规划偏移。
3.优化图像：降落图像分辨率和尺寸，紧缩图像文件自身，以缩短图像加载期间。
4.限度HTTP恳求的数量：增加每个页面须要加载的资产总数，并优化速度测试中发现的耗时最多的HTTP恳求。
5.经常使用阅读器HTTP缓存：批示阅读器缓存不经常更改的网页元素，增加主机须要传输到阅读器的数据量。
6.删除不用要的JavaScript渲染阻塞：确保JavaScript代码不会阻塞页面的渲染。
7.经常使用有效的第三方服务：选用极速且牢靠的DNS服务，经常使用CDN缓存Web内容，以及选用能够过滤恶意流量的Web运行程序安保提供商。
8.经常使用数据传输优化技术：比如数据紧缩、数据分片、数据加密和数据重传等方法。
9.主机配件优化：更新主机配件可以增强主机的处置才干。
10.经常使用CDN(Content Delivery Network)：经过CDN，可以将网页中的资源缓存到多个天文位置的主机上，经常使用户访问时能就近下载到这些文件，从而到达网络提速的目的。
11.参与文件过时或缓存头：设置适当的HTTP缓存头，如Expires和Cache-Control，来控制阅读器缓存资源的行为。
12.主机开启gzip紧缩：紧缩须要传输的内容，减小在网络上行输的数据量。
格局定义搁置在文件头部，而Javascript脚本放在文件末尾，以放慢页面渲染速度。
14.经常使用构建工具启动资源的兼并和紧缩，如Webpack。
15.正当应用阅读器缓存，设置资源的缓存期间为必定周期，增加重复恳求。
16.移动优化，确保网站对移动设施友好，经常使用减速移动页面（AMP）等技术。
17.经常使用静态页面：静态网站生成器可以预先编译网页，增加主机实时处置的需求。
18.增加页面HTTP恳求数量：兼并文件、经常使用CSS Sprites、Image maps和内联图片等方法。
19.经常使用内容散布式网络：如Cloudflare、Akamai或Amazon CloudFront等。
20.主机数据传输速度慢的或许要素及处置方法：如更新网络带宽、优化主机性能、驳回负载平衡技术、优化网络架构和经常使用数据紧缩等。
21.大数据传输慢的处置打算：经常使用如镭速（Raysync）等高速、牢靠的数据传输工具，支持海量小文件传输，有效降落网络延时和丢包等疑问。
经过实施上述战略，可以清楚提高网站数据的传输速度，改善用户体验。
网站性能优化的实战指南
性能优化是运行程序开发必定的上班之一，其目的之一为用户提供极致的速度体验，本文总结WEB运行或许网站可以极速实操的阅历。
运行自身
运行或许网站自身的优化，不包含逻辑和代码的优化。
其中包含大家相熟的资源最小化、图片懒加载、增加HTTP恳求、提前加载、预加载。
资源（静态资源）紧缩是指从HTML、CSS和JavaScript中删除不须要加载的不用要的冗余数据的环节，包含删除代码注释和格局、空白字符、未经常使用的代码、换行符等。
如今的前端技术，这些上班都有现成的工具可以成功。
增加HTML、CSS和JavaScript将放慢前端加载期间，由于它增加了须要从主机恳求的代码量。
生成HTML、CSS和JavaScript代码的优化版本可以借助工具，如下：
HTML:PageSpeedInsights、HTMLMinifier。
CSS、ChromeDevTools中的Coverage工具、YUICompressor。
JavaScript：JSMin、ChromeDevTools中的Coverage工具。
提前加载
提前加载有助于进一步缩短前端加载期间，经常使用提前加载，首先确保关键的内容先加载，如页面框架、文本内容、首屏内容等。
在实践运行中可以对JavaScript启动提前加载，HTML中可以有两个关系属性async和defer，这个两个属性使得script都不会阻塞DOM的渲染。
：
defer属性规则能否对脚本口头启动提前，直到页面加载为止。
async：会使得script脚本异步的加载并在准许的状况下口头，并且不会按着script在页面中的顺序来口头，而是谁先加载完谁口头。
<scriptasyncsrc=图片懒加载图片懒加载又称图片延时加载、惰性加载，即在用户须要看到图片的时刻加载，这样可以增加恳求，节俭带宽，提高页面加载速度。
通常将页面中的img标签属性src指向一张小尺寸图片或许为空，而后定义data-src属性指向实在的图片。
当载入页面时，先把可视区域内的img标签的data-src属性值赋值给src，而后参与页面滚动事情，把用户行将看到的图片加载。
假设不想自己写代码，可以经常使用第三方脚本库，如lazyload。
现代阅读器也成功了懒加载的性能，即为须要成功懒加载的标签参与属性loading=lazy，如：
<imgsrc===lazy><iframesrc===lazy></iframe>预加载预加载就是经过设置相应的资源属性通知阅读器能否须要预取，包含CSS文件、JavaScript文件、DNS接下，关键是在HTML页面的<head></head>间参与<meta/>：
<linkrel=dns-prefetchhref=///><linkrel=preloadas=stylehref=/devpoint/public/css//><linkas=scriptrel=preloadhref=/devpoint/public/scripts/site_/>增加HTTP恳求
增加HTTP恳求，经常出现的准则页面尽量只要一个CSS文件和一个JavaScript文件，CSS小图片经常使用CSSSprites（经常使用图像汇合拼接成一个图像文件，而后经过经常使用CSS中的background-image和background-position属性来显示所需的图像区域。
这样做可以增加了所需的主机恳求数量）。
主机侧这里繁难引见部署环境的优化，经常出现的模式是为静态资源参与缓存、紧缩文件。
缓存为静态资源参与缓存是经常出现的处置模式，通常在名目开发中倡导驳回动态分别，即所谓的静态资源与运行自身分别，繁难对静态资源启动优化，参与缓存或许参与CDN都可以繁难的成功。上方是以Nginx的性能为例，为静态资源参与缓存：
location~*\.(gif|webp|txt|jpg|jpeg|png|swf|flv|ico|mp4|js|css|eot|ttf|woff|woff2|svg|bmp|doc|zip|docx|rar)${proxy_cachecache_one;proxy_cache_validh;proxy_cache_validd;proxy_cache_validany5m;expires90d;}紧缩文件关于WEB名目，可以经常使用适合的方法紧缩文件，可以轻松地对前端的加载期间发生严重影响。以下是可以遵照的两个不错的文件紧缩选项：
Gzip：最盛行的数据紧缩和解紧缩方法，一切现代阅读器都支持，Gzip在将站点的HTML、CSS和JavaScript包发送到阅读器之前先在主机端对其启动紧缩，而后在客户端解紧缩文件并传送内容。
Brotli：与以后可用的紧缩方法相比，它提供了最佳的紧缩率，依据CertSimple的钻研，Brotli紧缩JavaScript文件比Gzip小14%，而HTML和CSS紧缩率比Gzip好21%和17%。
性能黄金规律：80-90%的最终用户照应期间用于下载前端组件，例如图像、样式表、脚本等。
因此，优化前端数据加载关于降落跳出率和参与用户在网站上的逗留期间至关关键。
