最佳实践
本话题发布最佳实践相关的问答文章和技术分享，将持续更新，为您推荐了20篇问答，访问即可查看更多精彩内容。
-
1
回答
42浏览
这段CSS选择器会不会导致性能问题？
我最近在优化一个老项目，发现有一段CSS用了很深层的嵌套选择器，页面元素一多就感觉卡顿。我查了下说是选择器复杂度会影响渲染性能，但不确定是不是这个原因。 我试过简化结构，但样式就乱了。这段代码是不是真...
-
1
回答
37浏览
Vue跨端项目里怎么处理平台差异代码？
最近用 Vue + UniApp 做一个同时跑在微信小程序和 H5 上的项目，有些组件在不同平台表现不一样。比如我想在 H5 里用 div，在小程序里用 view，但写成条件编译又觉得维护麻烦。有没有...
-
2
回答
122浏览
跨端开发中如何统一处理不同平台的样式差异？
最近用 Taro 开发一个小程序和 H5 通用的项目，发现同样的 padding: 20rpx 在微信小程序和 H5 上渲染效果差很多，H5 看起来特别挤。 我试过用平台判断加条件编译，但代码越来越乱...
-
2
回答
49浏览
微前端子应用如何正确加载公共样式而不冲突？
我在用 qiankun 搭建微前端项目，主应用和子应用都用了 Ant Design，但子应用的样式总是被主应用覆盖，导致 UI 错乱。我试过把子应用的样式 scoped，但有些全局组件（比如 Moda...
-
1
回答
29浏览
前端怎么用惰性求值优化大数据列表渲染？
我有个页面要展示上万条数据的列表，直接渲染卡得不行。听说可以用惰性求值只处理可视区域的数据，但不知道具体咋实现。试过用 Array.prototype.slice 截取一部分，但滚动时还是卡顿明显。 ...
-
2
回答
38浏览
React组件卸载后WeakMap里的DOM引用没被回收怎么办？
在React项目里用WeakMap存DOM引用，但发现组件卸载后内存没降下来。比如这样写的： const domRefs = new WeakMap(); function MyComponent()...
-
2
回答
47浏览
如何用惰性求值优化频繁调用的复杂计算函数？
在开发实时数据可视化时，我发现每帧都要调用一个计算坐标坐标的函数calculatePosition()，里面涉及大量三角函数运算。虽然用了缓存但参数每次都会变，导致缓存命中率很低，帧率明显下降。 我尝...
-
2
回答
56浏览
位运算优化CSS动画时为啥反而更卡了？
最近在优化一个无限滚动的CSS动画，尝试用位运算代替除法计算位置偏移，但发现帧率反而从60掉到30了。 比如这段代码用位运算右移代替除以2： .scroll-item { transform: tra...
-
2
回答
128浏览
React中使用闭包导致内存泄漏，该怎么优化？
在开发React列表组件时发现内存泄漏问题，代码里用闭包保存了状态变量。比如这个定时器示例： useEffect(() => { const timer = setTimeout(() =>...
-
2
回答
62浏览
React函数组件中如何避免因函数重新创建导致子组件频繁渲染？
我在开发一个React项目时发现，父组件传递的函数每次重新渲染都会生成新引用，导致子组件不必要的重复渲染。比如下面这个搜索框组件： function SearchBar({ onSearch }) {...
-
2
回答
43浏览
为什么我的JavaScript计时器会导致内存泄漏？
我正在开发一个实时数据监控的仪表盘，用setInterval定时更新数据。但发现每次页面切换后内存都没释放，用开发者工具看DOM已经清空了，但内存占用一直涨。代码大致是这样的： function st...
-
2
回答
63浏览
为什么对象脱离作用域后内存没有及时回收？
我写了个Vue组件用setTimeout定时更新状态，但发现组件卸载后，Chrome内存 profi查看还是有大量对象残留。虽然在onUnmounted里用了clearTimeout，但用垃圾回收分析...
-
2
回答
74浏览
循环中频繁计算复杂表达式如何用惰性求值优化？
最近在处理一个大数据列表渲染时发现性能卡顿，每次循环都要执行Math.sqrt(item.value * (item.value + 1))这样的计算。我尝试把计算结果存到变量里放到循环外面，但发现数...
-
2
回答
89浏览
为什么在循环里声明变量优化后性能还是卡顿？
最近在优化一个需要循环创建1000个DOM元素的功能，发现每次循环里用var item声明变量时页面卡顿。我改成用const后性能没变化，控制台也没有报错，但元素渲染还是明显延迟： for (let ...
-
2
回答
106浏览
自定义组件的props默认值和校验应该如何正确设置？
最近在写一个复用性较高的表单组件，但发现当父组件忘记传入required字段时，组件会报错。虽然设置了defaultProps，但有时候还是会失效，比如在动态生成组件时默认值没生效。 尝试过这样写： ...
-
1
回答
51浏览
微前端应用间如何安全共享状态而不污染全局变量？
我在用qiankyun搭建微前端项目时，两个子应用需要共享用户登录状态。之前尝试把状态挂载到window上，但发现不同子应用可能覆盖字段，而且测试时发现全局变量残留导致内存泄漏。试过用provider...
-
2
回答
97浏览
微前端子应用加载时依赖冲突怎么办？
最近用single-spa集成React和Vue子应用，但发现两个子应用都依赖lodash，版本不同导致功能异常。尝试过用webpack的externals和alias隔离，但打包后还是报错Canno...
-
2
回答
100浏览
uni-app中如何解决不同端的样式差异？按钮在H5和小程序显示完全不一样
我在用uni-app开发时发现，同一个按钮组件在H5和微信小程序上的圆角显示完全不一样。尝试用条件编译写不同样式，但不管怎么改都无效，控制台也没报错： 点击我 .button { @if(__PLAT...
-
2
回答
111浏览
React Native和Web版组件样式不一致如何解决？
在做跨端项目时遇到了样式问题，React Native和Web版的按钮组件看起来完全不一样。我在组件里用了内联样式和Tailwind类名混合写法，但移动端显示文字挤在一起，网页端又正常： functi...
-
2
回答
60浏览
对象池复用DOM元素时内存占用反而更高怎么办？
最近在尝试用对象池优化一个高频创建销毁DOM元素的动画组件，但发现内存占用反而更高了，这是为什么呢？ 我按照网上的教程实现了简单的对象池，把废弃的DOM元素存到数组里复用： class DOMPool...
