vue-styled-components
vue-styled-components copied to clipboard
v-vibe
优化性能， 开启Web worker计算样式后生成样式可行吗
Is your feature request related to a problem? Please describe
因为是运行时框架，有时候大量的样式重算会阻塞浏览器渲染主线程，是否考虑引入Web worker的方案开启子线程来处理样式呢
Describe the solution you'd like
No response
Additional context
No response
我先测一下性能差异
可能需要一些特定的场景，比如后端是一个socket推送的列表，数据是实时变化的，而前端还有几个按钮控制显示不同的数据，按钮聚焦要显示不同的样式，这时候可能出现按钮聚焦卡顿之类的。
测试了一下，使用web worker反而更慢了，创建worker以及worker和主线程之间传递数据的开销远远大于直接计算的开销
不过不在意计算速度，只需要不阻塞主线程渲染也可以上（纯任务分流
测试了一下，使用web worker反而更慢了，创建worker以及worker和主线程之间传递数据的开销远远大于直接计算的开销
不过不在意计算速度，只需要不阻塞主线程渲染也可以上（纯任务分流
确实如此，感觉可以提供一个入口给用户选择是否开启web worker来计算样式
测试了一下，使用web worker反而更慢了，创建worker以及worker和主线程之间传递数据的开销远远大于直接计算的开销
不过不在意计算速度，只需要不阻塞主线程渲染也可以上（纯任务分流
确实如此，感觉可以提供一个入口给用户选择是否开启web worker来计算样式
嗯，我看看怎么实现
假如我有一个比较大的组件， 如果我通过props传入，改变了某一个选择器对应的dom的样式，会将整个组件的样式进行重算替换还是类似vue的diff 计算然后替换的呢
假如我有一个比较大的组件， 如果我通过props传入，改变了某一个选择器对应的dom的样式，会将整个组件的样式进行重算替换还是类似vue的diff 计算然后替换的呢
是整体重新计算了，这里用diff貌似没什么意义，因为无论如何 .classxxx { /*css style/ } 都是要整体替换的
假如我有一个比较大的组件， 如果我通过props传入，改变了某一个选择器对应的dom的样式，会将整个组件的样式进行重算替换还是类似vue的diff 计算然后替换的呢
是整体重新计算了，这里用diff貌似没什么意义，因为无论如何 .classxxx { /*css style/ } 都是要整体替换的
噢噢，diff props变化可以减少计算量，可以加一个
我待会加上样式缓存/批量更新/异步更新来优化这个问题
v1.12.0-beta.1已实现，具体文档：https://vue-styled-components.com/zh/guide/advances/performance-optimization
我待会加上样式缓存/批量更新/异步更新来优化这个问题
v1.12.0-beta.1已实现，具体文档：https://vue-styled-components.com/zh/guide/advances/performance-optimization
好的好的，前几天休假了，一回来就看到你搞定了，真优秀😄