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

display:none;页面会渲染吗

  •  
  •   ghostgril · 272 天前 · 2411 次点击
    这是一个创建于 272 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    21 回复  |  直到 2018-05-28 09:53:48 +08:00
        1
    ghostgril   272 天前
    如果是重新渲染,是不是频繁切换还是影响性能
        2
    TimRChen   272 天前 via Android
    建议使用搜索引擎自行查找答案,有很多的。
        3
    ghostgril   272 天前
    @TimRChen 搜索出来的结果有的说是,有的说不是。这个也不知道如何测试才来问的
        4
    ghostgril   272 天前
    还有疑问就是 vue.js 这种模板里面设置 display:none 切换显示是如何渲染的呢
        5
    qiayue   272 天前
    微信小程序里边切换可以使用 wx:if="{{show}}"
    当 show 为 false 时不会渲染
        6
    ghostgril   272 天前
    @qiayue 我知道的,文档里说了频繁切换的话这样比较消耗性能,所以我有些好奇
        7
    ghostgril   272 天前
    @qiayue 尝试使用 displya:none 和 hidden 的时候想到 display:none 切换显示的时候,是否渲染呢。如果也是需要频繁渲染是不是有些消耗性能
        8
    murmur   272 天前
    vue 印象中会创建虚拟 dom 节点 然后和真实的 dom 节点比对 找出那个改动的部分
    所以在没有针对性优化的情况下(属性上绑定了函数或者计算属性这种) 会有一个较大范围的虚拟 dom 重构 然后再比较 虽然说 vue 在设计中可以感知某个属性关联了那些属性
    而你在以前 jquery 或者源生模式下你改 display 就是去改 display 少了虚拟 dom 比对那一步
        9
    ghostgril   272 天前
    @murmur 这么说来,如果直接使用 display:none 切换的话在 vue 和原生 js 情况下其实都要重新渲染也就是比较消耗性能的,是这样吗
        10
    murmur   272 天前
    @ghostgril 这种性能损失在优化好的时候可以忽略不计 如果优化不好 在很老的机器 2012 年那种老的 ipod 上 会有明显的一个反应时间
        11
    murmur   272 天前
    @ghostgril 其实问题只不是在这里,你先查查 display=none 和 visibility=hidden 的区别再考虑 vdom 的问题吧
        12
    ghostgril   272 天前
    @murmur 好的
        13
    ghostgril   272 天前
    @murmur display=none 和 visibility=hidden 的区别主要就是 hidden 仅仅是隐藏,display 等于 none 是页面里就没有是吧。但是 vue 里面说 v-if 还有微信小程序里面 wx:if 都说比较消耗性能,你这里说性能可以忽略不计,是因为 vdom 有啥区别吗
        14
    Felldeadbird   272 天前 via iPhone
    网络慢的时候,会看到隐藏部分的…
        15
    des   271 天前 via Android
    建议去看看游览器渲染过程,答案都在里面

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


    给你摘出来:
    同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
    相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
        16
    SourceMan   271 天前 via iPhone
    为什么不自己试一下
    v-if 和 v-show 的区别
    或者百度一下
        17
    why1   271 天前
    用 audio tag 测试
        18
    kamal   271 天前
    DOM + CSSOM -> Render Tree -> Reflow/Layout -> Paint

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

    所以,通过修改 visibility 会发生 repaint,修改 display 属性会发生 reflow。
        19
    ghostgril   271 天前
    @SourceMan v-if 和 v-show 这个我是知道的,但是就是微信还有原生的差别搞不清楚
        20
    ghostgril   271 天前
    @des 其实我没说清楚,微信 wx:if 和 v-if 这些我是知道怎么回事的,就是想知道使用 display:none 和他们又什么区别
        21
    sujin190   271 天前
    调试工具条性能工具里可以看得到每个操作的重排重绘信息,我记得 w3c 的官方文档也写了每个 css 属性对重排重绘的影响了吧

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

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

    chrome 调试工具条似乎有工具可以标记颜色显示网页各部分渲染,可以看出是否有重复渲染,想不起来那个工具了
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   718 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 22:04 · PVG 06:04 · LAX 14:04 · JFK 17:04
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1