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