display:none;页面会渲染吗

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

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

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

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

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

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

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

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

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

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

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

@murmur 好的

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

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

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

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


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

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

用 audio tag 测试

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

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

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

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

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

调试工具条性能工具里可以看得到每个操作的重排重绘信息，我记得 w3c 的官方文档也写了每个 css 属性对重排重绘的影响了吧

一般来来说如果 display:none 之后影响其他元素的高度之类的就会产生重排，重绘基本都会有吧

vue 和微信小程序 if 这个在映射到 dom 之后使用的是添加和删除标签的操作，那么肯定会触发浏览器重新渲染了

chrome 调试工具条似乎有工具可以标记颜色显示网页各部分渲染，可以看出是否有重复渲染，想不起来那个工具了