display:none;页面会渲染吗

[ghostgril]

例如我在 vue，或者微信小程序里面使用切换 display:none 的类进行切换。那么这个过程是重新渲染吗？

之前都没用考虑过这种问题。想问问在 mvvm 里面和普通情况下，切换 display:none 进行显示和隐藏有什么区别呢

[ghostgril]

如果是重新渲染，是不是频繁切换还是影响性能

[TimRChen]

建议使用搜索引擎自行查找答案，有很多的。

[ghostgril]

@TimRChen 搜索出来的结果有的说是，有的说不是。这个也不知道如何测试才来问的

[ghostgril]

还有疑问就是 vue.js 这种模板里面设置 display:none 切换显示是如何渲染的呢

[qiayue]

微信小程序里边切换可以使用 wx:if="{{show}}"
当 show 为 false 时不会渲染

[ghostgril]

@qiayue 我知道的，文档里说了频繁切换的话这样比较消耗性能，所以我有些好奇

[ghostgril]

@qiayue 尝试使用 displya:none 和 hidden 的时候想到 display:none 切换显示的时候，是否渲染呢。如果也是需要频繁渲染是不是有些消耗性能

[murmur]

vue 印象中会创建虚拟 dom 节点 然后和真实的 dom 节点比对 找出那个改动的部分
所以在没有针对性优化的情况下（属性上绑定了函数或者计算属性这种） 会有一个较大范围的虚拟 dom 重构 然后再比较 虽然说 vue 在设计中可以感知某个属性关联了那些属性
而你在以前 jquery 或者源生模式下你改 display 就是去改 display 少了虚拟 dom 比对那一步

[ghostgril]

@murmur 这么说来，如果直接使用 display:none 切换的话在 vue 和原生 js 情况下其实都要重新渲染也就是比较消耗性能的，是这样吗

[murmur]

@ghostgril 这种性能损失在优化好的时候可以忽略不计 如果优化不好 在很老的机器 2012 年那种老的 ipod 上 会有明显的一个反应时间

[murmur]

@ghostgril 其实问题只不是在这里，你先查查 display=none 和 visibility=hidden 的区别再考虑 vdom 的问题吧

[ghostgril]

@murmur 好的

[ghostgril]

@murmur display=none 和 visibility=hidden 的区别主要就是 hidden 仅仅是隐藏，display 等于 none 是页面里就没有是吧。但是 vue 里面说 v-if 还有微信小程序里面 wx:if 都说比较消耗性能，你这里说性能可以忽略不计，是因为 vdom 有啥区别吗

[Felldeadbird]

网络慢的时候，会看到隐藏部分的…

[des]

建议去看看游览器渲染过程，答案都在里面

还有你是要开发小程序？
里面不是说的很清楚了吗，你有认真看吗
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html


给你摘出来:
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

[SourceMan]

为什么不自己试一下
v-if 和 v-show 的区别
或者百度一下

[why1]

用 audio tag 测试

[kamal]

DOM + CSSOM -> Render Tree -> Reflow/Layout -> Paint

Reflow/Layout 之前已经知道 display:none，Reflow/Layout 和 Paint 都不会触发。
已知 visibility:hidden; 不会发生 Paint。

所以，通过修改 visibility 会发生 repaint，修改 display 属性会发生 reflow。

[ghostgril]

@SourceMan v-if 和 v-show 这个我是知道的，但是就是微信还有原生的差别搞不清楚

[ghostgril]

@des 其实我没说清楚，微信 wx:if 和 v-if 这些我是知道怎么回事的，就是想知道使用 display:none 和他们又什么区别