• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏

1.display 属性(不占据空间)

display: none;

2.hidden 属性 (不占据空间)

HTML5 新增属性，相当于 display: none

<div hidden> </div>

视觉上的隐藏

1.利用 position 和 盒模型 将元素移出可视区范围

1. 设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。(可视区域不占位)

position:absolute; left: -99999px;

2. 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。（可视区域占位）

position: relative; left: -99999px;

如希望其在可视区域不占位置，需同时设置 height: 0;

3. 设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -99999px;

如果希望其在可视区域不占位，需同时设置 height: 0;

2.利用 transfrom

1. 缩放(占据空间)

transform: scale(0);

如果希望不占据空间，需同时设置 height: 0

2. 移动 translateX, translateY(占据空间)

transform: translateX(-99999px);

如果希望不占据空间，需同时设置 height: 0

3. 旋转 rotate (占据空间)

transform: rotateY(90deg);

3.设置其大小为0

宽高为0，字体大小为0：

height: 0; width: 0; font-size: 0;

宽高为0，超出隐藏:

height: 0; width: 0; overflow: hidden;

4.设置透明度为0 (占据空间)

opacity: 0;

5.visibility属性 (占据空间)

visibility: hidden

6.层级覆盖，z-index 属性 (占据空间)

position: relative;
z-index: -999;

再设置一个层级较高的元素覆盖在此元素上。

7.clip-path 裁剪 (占据空间)

clip-path: polygon(0 0, 0 0, 0 0, 0 0);

语义上的隐藏

aria-hidden 属性 (占据空间)

读屏软件不可读，占据空间，可见。

<div aria-hidden="true">
</div>

11. 使用JS将元素从页面中移除

点击查看更多

13.浏览器事件代理机制的原理是什么？

事件流

在说浏览器事件代理机制原理之前，我们首先了解一下事件流的概念，早期浏览器，IE采用的是事件捕获事件流，而Netscape采用的则是事件冒泡。"DOM2级事件"把事件流分为三个阶段，捕获阶段、目标阶段、冒泡阶段。现代浏览器也都遵循此规范。

事件代理机制的原理

事件代理又称为事件委托，在祖先级 DOM 元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件冒泡的原理来触发绑定在祖先级 DOM 的事件。因为事件会从目标元素一层层冒泡至 document 对象。

为什么要事件代理？

1. 添加到页面上的事件数量会影响页面的运行性能，如果添加的事件过多，会导致网页的性能下降。采用事件代理的方式，可以大大减少注册事件的个数。

2. 事件代理的当时，某个子孙元素是动态增加的，不需要再次对其进行事件绑定。

3. 不用担心某个注册了事件的DOM元素被移除后，可能无法回收其事件处理程序，我们只要把事件处理程序委托给更高层级的元素，就可以避免此问题。

4. 允许给一个事件注册多个监听。

5. 提供了一种更精细的手段控制 listener 的触发阶段(可以选择捕获或者是冒泡)。

6. 对任何 DOM 元素都是有效的，而不仅仅是对 HTML 元素有效。

addEventListener

addEventListener 接受3个参数，分别是要处理的事件名、实现了 EventListener 接口的对象或者是一个函数、一个对象/一个布尔值。

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

options(对象) | 可选

• capture: Boolean。true 表示在捕获阶段触发，false表示在冒泡阶段触发。默认是 false。

• once:Boolean。true 表示listener 在添加之后最多只调用一次，listener 会在其被调用之后自动移除。默认是 false。

• passive: Boolean。true 表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。默认是 false。

useCapture(Boolean) | 可选

useCapture 默认为 false。表示冒泡阶段调用事件处理程序，若设置为 true，表示在捕获阶段调用事件处理程序。

如将页面中的所有click事件都代理到document上:

document.addEventListener('click', function (e) {
    console.log(e.target);
    /**
    * 捕获阶段调用调用事件处理程序，eventPhase是 1; 
    * 处于目标，eventPhase是2 
    * 冒泡阶段调用事件处理程序，eventPhase是 3；
    */ 
    console.log(e.eventPhase);
    
}, false);

与 addEventListener 相对应的是 removeEventListener,用于移除事件监听。

点击查看更多

14. setTimeout 倒计时为什么会出现误差？

setTimeout 只能保证延时或间隔不小于设定的时间。因为它实际上只是将回调添加到了宏任务队列中，但是如果主线程上有任务还没有执行完成，它必须要等待。

如果你对前面这句话不是非常理解，那么有必要了解一下 JS的运行机制。

JS的运行机制

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在"任务队列"(task queue)。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。