网页交互设计稿格式 第1篇
这一章我们学习了用户交互相关内容里的 hidden 属性，掌握了 hidden 的两个状态及其特性。
也学习了页面的可见性相关内容，掌握了要尽量使用 visibilitychange 或 pagehide 事件来代替 unload 事件。
还学习了惰性 inert 属性的特性和使用场景。
我们前端开发工程师一定要掌握用户交互的相关技术，提高页面的可交互性是我们应该具备的能力，只有掌握背后底层的规范，才能从容应对产品同事和 UI 同事们的“无礼请求”~
那么这一章的介绍就结束了，咱们下一章再见啦。
欢迎关注我的公众号，前端创可贴。
网页交互设计稿格式 第2篇
大家都知道我们的页面有很多 API 可以与用户进行交互，但是有些 API 只应该让用户主动去触发，而不是被我们开发者随意使用，比方说你打开了一个网站，你没有做任何交互，但是网站疯狂给你弹出很多新的 Tab，这你受得了吗。
所以为了防止某些可能会让用户感到烦扰的 API 被滥用（例如，打开弹窗或振动手机），浏览器仅在用户主动与网页互动或至少曾经与页面互动过时，才允许使用这些API。
所以就有了用户激活的概念。用户激活（User Activation） 是浏览器用来判断用户是否与页面进行了有效交互的机制。用户激活用于限制某些潜在会滥用的 API，确保只有在用户明确操作页面时才可以调用这些功能，保护用户不受网站的烦扰。
我们知道了用户激活的概念，那么用户的哪些行为会产生用户激活呢？
1. 鼠标相关操作：
2. 键盘相关操作：
3. 触摸相关操作：
这些交互事件被称为激活触发输入事件（activation triggering input events），它们表明用户明确地与页面进行了交互。
为了跟踪用户激活状态，每个窗口 Window 都有以下两个相关值：
此外，浏览器还定义了一个瞬时激活持续时间（transient activation duration），这是一个常量，表示在某些用户激活受限的 API（例如通过 打开新窗口）中，用户激活的可用时长。
网页交互设计稿格式 第3篇
系统可见性状态是由浏览器决定的，这一状态表示的是页面的可见性，例如
简单来说，就是当前页面是不是看不见或者失焦了。
通过 可以获取页面可见性状态，值为 hidden 或者 visible。当页面可见性为 hidden 状态时， 值为 true。
当 发生变化时：
当切换 Tab 或者浏览器窗口最小化等时，再切换回来，打印结果为：
我们有时候会使用 unload、beforeunload 事件在页面关闭之前做一些事情，但是通过上一章的学习我们知道 unload 这样的事件会让 bfcache 失效，不仅如此，unload 事件在移动端有时候也会不生效，比如用户不是正常关闭网页，而是打开任务管理器，然后 kill 掉了浏览器进程，这时是不会触发 unload 事件的。所以推荐大家使用 visibilitychange 事件代替 unload 事件，也可以使用 pagehide 事件代替 unload 事件。
VisibilityStateEntry 接口用于表示页面可见性状态变化，每当页面的可见性发生变化时，VisibilityStateEntry 将记录该变化，提供相关的时间戳和可见性状态。
通过 (_visibility-state_) 可以获取当前页面所有产生过的 VisibilityStateEntry 对象。
举个例子，我打开了页面，然后切换 Tab，再切换回来，一共会有 3 种状态：第一次进入页面、第二次切换出去页面、第三次切换回来页面，执行 (_visibility-state_) 的结果为：
通过下面代码，可以判断在 FCP 触发之前页面可见性有没有变为不可见：
大家可以去一些页面加载比较慢的网站试一下，在 FCP 触发之前切换 Tab，然后执行一下上面的代码，可以看到结果为 true。