当前位置: 首页 > Web前端 > CSS

关于项目优化点

时间:2023-03-30 15:15:15 CSS

性能优化文章大致是4个方向1.减少请求数,合并请求,合并接口,使用location和图片gizp压缩合并图片2.请求速度,服务器方向,cdn分发预分析dns3、增加列表数据等Cache,(1)使用强缓存,每5分钟更换一次(2)离线缓存,图片css后缀4,JS/CSS优化,加载顺序,服务端渲染,pipeline。css基础把css放在前面,先加载样式,避免节点的渲染计算,样式div.classdivp下面的写法尽量避免,这些写法对于样式渲染计算量很大,先找所有的div,然后找到对应的类。操作动画时最好使用transform或opacity。Transform和opacity动画经过gpu优化,表现更流畅。js文章列表加载节流图片懒加载功能防抖单页懒加载场景一:对于大列表,切换tab这时候节点会很多,可以通过div占位处理,virtualscrolling等场景2:针对大列表中滚动计算节点的优化,滚动计算必然会造成大量的性能浪费。如果计算量大页面卡顿,可以使用节流来减少计算量。如果你必须为每次计算吐出一些节点,你可以将它用于未添加的节点。一是展示骨架解决方案,优化展示空白,提升用户体验。场景三:对于交互类要保证流畅,所以必须在首屏加载完成后执行。比如王者荣耀tgp游戏交互,拼多多给水果浇水获取对应的水果场景四:对于大型树结构,在编辑对象的某个属性时,需要先找出节点。对于一些一次性使用的功能和不复杂的情况,没有必要引入一个包来解决。比如elastic二楼,简单的渐变动画,直接手写过渡的项目都不需要引入redux。Redux是一个数据交互特别频繁的项目,需要在其他模块中频繁使用,进行数据交互。