面试合集--元素在窗口中消失

前言

整理一个面试合集，方便以后翻看，每一篇一个topic，以我现在能理解的最深程度尽量整理。

元素隐藏方法

1. display:none
2. visibility: hidden;

vue框架中

3. v-if
4. v-show

区别

display:none

1. 父元素的显隐直接影响子元素。
2. 会引发页面的回流
3. 影响计数，原始位置不保留

<ol>
    <li>元素1</li>
    <li style="display:none;">元素2</li>
    <li>元素3</li>
    <li>元素4</li>
</ol>
<!--
    1. 元素1
    2. 元素3
    3. 元素4
-->

visibility:hidden

1. 子元素继承父元素样式，但是可以通过设置自身visibility样式，进行显隐。
2. 会引发页面重绘
3. 不影响计数，原始位置保留

<ol>
    <li>元素1</li>
    <li style="visibility:hidden;">元素2</li>
    <li>元素3</li>
    <li>元素4</li>
</ol>
<!--
    1. 元素1
    
    3. 元素3
    4. 元素4
-->

v-if: 控制组件的加载和卸载，控制dom的增加和删除。针对无需渲染的部分，不渲染，避免后续domdiff带来的损耗。

v-show：控制组件（dom）的样式，进行display:none控制样式显示和隐藏。对于频繁操作显隐的组件来说，更适合。

重绘和回流

重绘：当页面中样式改变，不影响它在文档流中的位置时（如color，background-color，visibility等），浏览器会将新样式赋予给元素，并重新绘制它。

回流：当render-tree中部分或全部尺寸、结构、或者某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。

引发回流的条件

1. 页面首次渲染
2. 浏览器窗口大小发生改变。
3. 元素尺寸、位置发生改变。
4. 元素内容发生改变（文字数量、图片大小等）
5. 元素字体大小改变
6. 添加或删除可见dom
7. 激活css伪类（:hover）
8. 查询某些属性和方法
   • clientWidth clientHeight clientTop clientLeft
   • offsetWidth offsetHeigt offsetTop offsetLeft
   • scrollWidth scrollHeight scrollTop scrollLeft
   • width height
   • getComputedStyle()
   • getBoundingClientRect()

现代浏览器会针对频繁的回流和重绘进行优化，维护一个队列，将回流和重绘的操作维护在队列中，队列内任务数量达到一定，或者时间达到阈值，会清空队列，进行一次性处理。 但是当访问以上属性的时候，需要获取准确信息，因此会立刻触发队列清空操作。保证取值的准确性。