V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ghostgril
V2EX  ›  前端开发

display:none;页面会渲染吗

  •  
  •   ghostgril · 2018-05-27 22:35:26 +08:00 · 6692 次点击
    这是一个创建于 2131 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    21 条回复    2018-05-28 09:53:48 +08:00
    ghostgril
        1
    ghostgril  
    OP
       2018-05-27 22:42:28 +08:00
    如果是重新渲染,是不是频繁切换还是影响性能
    TimRChen
        2
    TimRChen  
       2018-05-27 22:44:18 +08:00 via Android
    建议使用搜索引擎自行查找答案,有很多的。
    ghostgril
        3
    ghostgril  
    OP
       2018-05-27 23:01:17 +08:00
    @TimRChen 搜索出来的结果有的说是,有的说不是。这个也不知道如何测试才来问的
    ghostgril
        4
    ghostgril  
    OP
       2018-05-27 23:07:54 +08:00
    还有疑问就是 vue.js 这种模板里面设置 display:none 切换显示是如何渲染的呢
    qiayue
        5
    qiayue  
       2018-05-27 23:11:05 +08:00
    微信小程序里边切换可以使用 wx:if="{{show}}"
    当 show 为 false 时不会渲染
    ghostgril
        6
    ghostgril  
    OP
       2018-05-27 23:13:55 +08:00
    @qiayue 我知道的,文档里说了频繁切换的话这样比较消耗性能,所以我有些好奇
    ghostgril
        7
    ghostgril  
    OP
       2018-05-27 23:15:17 +08:00
    @qiayue 尝试使用 displya:none 和 hidden 的时候想到 display:none 切换显示的时候,是否渲染呢。如果也是需要频繁渲染是不是有些消耗性能
    murmur
        8
    murmur  
       2018-05-27 23:15:29 +08:00
    vue 印象中会创建虚拟 dom 节点 然后和真实的 dom 节点比对 找出那个改动的部分
    所以在没有针对性优化的情况下(属性上绑定了函数或者计算属性这种) 会有一个较大范围的虚拟 dom 重构 然后再比较 虽然说 vue 在设计中可以感知某个属性关联了那些属性
    而你在以前 jquery 或者源生模式下你改 display 就是去改 display 少了虚拟 dom 比对那一步
    ghostgril
        9
    ghostgril  
    OP
       2018-05-27 23:20:13 +08:00
    @murmur 这么说来,如果直接使用 display:none 切换的话在 vue 和原生 js 情况下其实都要重新渲染也就是比较消耗性能的,是这样吗
    murmur
        10
    murmur  
       2018-05-27 23:21:14 +08:00
    @ghostgril 这种性能损失在优化好的时候可以忽略不计 如果优化不好 在很老的机器 2012 年那种老的 ipod 上 会有明显的一个反应时间
    murmur
        11
    murmur  
       2018-05-27 23:22:42 +08:00
    @ghostgril 其实问题只不是在这里,你先查查 display=none 和 visibility=hidden 的区别再考虑 vdom 的问题吧
    ghostgril
        12
    ghostgril  
    OP
       2018-05-27 23:26:27 +08:00
    @murmur 好的
    ghostgril
        13
    ghostgril  
    OP
       2018-05-27 23:28:48 +08:00
    @murmur display=none 和 visibility=hidden 的区别主要就是 hidden 仅仅是隐藏,display 等于 none 是页面里就没有是吧。但是 vue 里面说 v-if 还有微信小程序里面 wx:if 都说比较消耗性能,你这里说性能可以忽略不计,是因为 vdom 有啥区别吗
    Felldeadbird
        14
    Felldeadbird  
       2018-05-28 00:36:26 +08:00 via iPhone
    网络慢的时候,会看到隐藏部分的…
    des
        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 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
    SourceMan
        16
    SourceMan  
       2018-05-28 08:09:00 +08:00 via iPhone
    为什么不自己试一下
    v-if 和 v-show 的区别
    或者百度一下
    why1
        17
    why1  
       2018-05-28 08:21:56 +08:00
    用 audio tag 测试
    kamal
        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。
    ghostgril
        19
    ghostgril  
    OP
       2018-05-28 09:09:41 +08:00
    @SourceMan v-if 和 v-show 这个我是知道的,但是就是微信还有原生的差别搞不清楚
    ghostgril
        20
    ghostgril  
    OP
       2018-05-28 09:10:44 +08:00
    @des 其实我没说清楚,微信 wx:if 和 v-if 这些我是知道怎么回事的,就是想知道使用 display:none 和他们又什么区别
    sujin190
        21
    sujin190  
       2018-05-28 09:53:48 +08:00
    调试工具条性能工具里可以看得到每个操作的重排重绘信息,我记得 w3c 的官方文档也写了每个 css 属性对重排重绘的影响了吧

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

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

    chrome 调试工具条似乎有工具可以标记颜色显示网页各部分渲染,可以看出是否有重复渲染,想不起来那个工具了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3328 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:25 · PVG 19:25 · LAX 04:25 · JFK 07:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.