性能优化
文章平均质量分 89
LYFlied
这个作者很懒,什么都没留下…
展开
-
对react中key的理解&&利用key让组件重新渲染
文章目录key的作用原理对比流程react组件中的key利用key让组件重新渲染当我们渲染列表时通常会用到keyconst listItems = numbers.map((item) => <li key={item.id}>{item.val}</li>)key的作用(一般同级同结构的子节点都需要采用key属性,方便diff算法的使用)纯静态的同级同结构节点的渲染,可以采用index作为key的值,因为这里不需要动态去变化节点里面的内容的值;对于一组动原创 2021-04-30 13:06:33 · 1894 阅读 · 4 评论 -
React-性能优化(一)
一、使用React.Memo来缓存组件二、使用useMemo缓存大量的计算三、避免使用内联对象四、避免使用匿名函数五、延迟加载不是立即需要的组件六、调整CSS而不是强制组件加载和卸载七、使用React.Fragment避免添加额外的DOM八、基于 shouldComponentUpdate 优化九、基于 PureComponent + immutable.js 优化浅比较:将针对值类型数据对比其值是否相等,而针对数组、对象等引用类型的数据则对比其引用是否相等。原创 2021-04-01 21:23:17 · 497 阅读 · 2 评论 -
前端性能优化-优化大量图片加载&超大图片加载(附懒加载实现方案)
懒加载实现方案一.大量图片加载优化方案1.将图片服务和应用服务分离(从架构师的角度思考)2. 图片压缩方案3.图片懒加载实现方案一实现方案二4.小图片比较多时5.http2解决连接数限制二、图片过大加载优化方案原创 2021-03-29 00:38:32 · 19091 阅读 · 11 评论 -
前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)
从输入url,到页面的画面展示的过程一、白屏时间二、白屏时间的重要性三、白屏的过程四、白屏-性能优化1. DNS解析优化2. TCP网络链路优化3. 服务端处理优化4. 浏览器下载、解析、渲染页面优化内联关键CSS原创 2021-03-28 23:48:27 · 4453 阅读 · 2 评论