例如我在 vue，或者微信小程序里面使用切换 display:none 的类进行切换。那么这个过程是重新渲染吗？
之前都没用考虑过这种问题。想问问在 mvvm 里面和普通情况下，切换 display:none 进行显示和隐藏有什么区别呢
This topic created in 3082 days ago, the information mentioned may be changed or developed.
 |
1
如果是重新渲染，是不是频繁切换还是影响性能
|
 |
TimRChenMay 27, 2018 via Android
2
建议使用搜索引擎自行查找答案，有很多的。
|
|
4
还有疑问就是 vue.js 这种模板里面设置 display:none 切换显示是如何渲染的呢
|
 |
qiayueMay 27, 2018
5
微信小程序里边切换可以使用 wx:if="{{show}}"
当 show 为 false 时不会渲染 |
|
7
@qiayue 尝试使用 displya:none 和 hidden 的时候想到 display:none 切换显示的时候，是否渲染呢。如果也是需要频繁渲染是不是有些消耗性能
|
 |
murmurMay 27, 2018
8
vue 印象中会创建虚拟 dom 节点 然后和真实的 dom 节点比对 找出那个改动的部分
所以在没有针对性优化的情况下（属性上绑定了函数或者计算属性这种） 会有一个较大范围的虚拟 dom 重构 然后再比较 虽然说 vue 在设计中可以感知某个属性关联了那些属性 而你在以前 jquery 或者源生模式下你改 display 就是去改 display 少了虚拟 dom 比对那一步 |
|
9
@murmur 这么说来，如果直接使用 display:none 切换的话在 vue 和原生 js 情况下其实都要重新渲染也就是比较消耗性能的，是这样吗
|
|
13
@murmur display=none 和 visibility=hidden 的区别主要就是 hidden 仅仅是隐藏，display 等于 none 是页面里就没有是吧。但是 vue 里面说 v-if 还有微信小程序里面 wx:if 都说比较消耗性能，你这里说性能可以忽略不计，是因为 vdom 有啥区别吗
|
 |
FelldeadbirdMay 28, 2018 via iPhone
14
网络慢的时候，会看到隐藏部分的…
|
 |
desMay 28, 2018 via Android
15
建议去看看游览器渲染过程，答案都在里面
还有你是要开发小程序？ 里面不是说的很清楚了吗，你有认真看吗 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html 给你摘出来: 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。 |
 |
SourceManMay 28, 2018 via iPhone
16
为什么不自己试一下
v-if 和 v-show 的区别 或者百度一下 |
 |
why1May 28, 2018
17
用 audio tag 测试
|
 |
kamalMay 28, 2018
18
DOM + CSSOM -> Render Tree -> Reflow/Layout -> Paint
Reflow/Layout 之前已经知道 display:none，Reflow/Layout 和 Paint 都不会触发。 已知 visibility:hidden; 不会发生 Paint。 所以，通过修改 visibility 会发生 repaint，修改 display 属性会发生 reflow。 |
 |
sujin190May 28, 2018
21
调试工具条性能工具里可以看得到每个操作的重排重绘信息，我记得 w3c 的官方文档也写了每个 css 属性对重排重绘的影响了吧
一般来来说如果 display:none 之后影响其他元素的高度之类的就会产生重排，重绘基本都会有吧 vue 和微信小程序 if 这个在映射到 dom 之后使用的是添加和删除标签的操作，那么肯定会触发浏览器重新渲染了 chrome 调试工具条似乎有工具可以标记颜色显示网页各部分渲染，可以看出是否有重复渲染，想不起来那个工具了 |
Select Language