性能优化专项

平时项目中,金融场景,会涉及很多对数据源的二次处理,同时会对大量数据源进行,相关算法计算,再去展示,有的时候,首屏加载后, FID 指标不行,也就是用户在数据处理阶段,由于js线程被阻塞主了,所以不能

背景： 业务需要一个能够支持无限滚动，拖拽的走势图 特点 首屏最大支持7条，各一年的数据量，并且支持任意左右拖拽，查看任意时间点数据。 效果图 思路分析 首屏数据，首次先渲染可使区域内，一年的数据量

工作中遇到了需要大量并发接口的需求，那么先了解下为什么要去限制 对于浏览器，主要有三个层面的限制，一个是同域名下， 同页面下，同请求类型下，会分别对其限制 一般以chrome举例子，会超过6个，其他请

背景：1. 公司要求项目首屏加载速率，要求为1.5s以内，在尝试将常用接口，全部缓存后，发现还是慢，最后通过打包分析工具，发现，拆包的文件，全部都集中到一个bundle.js文件，因此决定把一些较稳定

RAIL => response/animation/idle/load reponse 交互行为 100 ms内从输入到响应，或加入响应态 animation 动画 1s 60帧计算，每帧需要16m

js 对象属性和数组元素的速度都比变量慢 也就是对于重复对象访问路径，要进行变量提炼 数据缓存 常用localsotrage ，项目里面用到了lru-cahce 因为，业务特殊性，调用接口次数受限，同

我们业务中，经常遇到过需要进行虚拟滚动的场景。 那么首先整体思路和图片懒加载类似，当触达达到可视区域，才进行元素渲染 方案 定高度 不定高度 定高度 1， 对于定高度相对好处理，首先，对于滚动区域，首

背景 其实对于前端，很多需要上传比如几百兆 文件解析的业务场景下，可能会出现哪些问题呢 首先我们可以做的是确定方案 首先针对于分治思想，可以把大文件拆解为一个个独立的小文件 为了能够在服务端进行重组，

背景 业务中经常遇到了， 图片需要懒加载场景，避免性能问题，以及流量消耗。 方案梳理 其实我再业务中一般常见手段是通过 监听 onscroll 事件以及通过getBoundclientreact 来判

背景： 一般对广告或者需要大量通过图片来进行展示的业务场景，容易造成首屏加载速度过慢。 针对于这种场景下，首先分析。 加载速度 图片懒加载 待代码分析 cdn 骨架屏 体积缩小 格式Webp 相比于p

工作中，遇到了文件导出场景，需要将文件二进制流，转为 base64 编码，但是我一直没有较为深入的了解过。 目前重学整理一些 定义 是一种编码格式用来将二进制，转化为 64进制，并用ASCII表示 编

实践 css 其实在 chrome浏览器里面有一个 Layers 图层分析工具。 当你用css 比如transform 还有 会去强制分离当前 图层 进行gpu加速，但是请不要滥用，调用后，每次会进行