这是来自 Pornhub 的一道真实前端面试题。
该公司的盈利来源最重要的部分就是广告业务，这道题的目的不难猜出：判断广告究竟有没有在页面中展示出来。
回到题目
判断元素的可见性的反面是：如何隐藏一个元素。
隐藏元素的方法
使用 visibility: hidden; 或 opacity: 0;
使用 overflow: hidden
使用 display: none;
使用 z-index，#ele2 被 #ele1 覆盖。
使用 margin-left: -9999px; 或者使用绝对定位后偏移。
以上都是常见的隐藏元素的方法，初级前端工程师必须熟练掌握。
而中级前端就需要更进一步，需要知道元素的可见性。
如何判断元素的可见性
可能你的第一感觉是，既然我们知道如何隐藏元素，那么只需判断元素是否使用了隐藏即可：
- 先判断元素是否在视口中
- 再判断元素的visibility、opacity、z-index等
但是，判断元素的位置容易，判断元素的 visibility 等却是复杂的问题，它们的可见性还和父节点的可见性有关。
所以，需要从另外的途径去解决这个问题 ——
Intersection Observer（交集观察者） 这个 Web API 可以轻松的帮助你解决问题。
Intersection Observer
IntersectionObserver 设计之初，目的是以一种异步的方式来观察元素的相交性。
而随着 API 的迭代，它扩展了功能，可以用于判断元素的真实可见性。
如果你有观察者模式的基础，这个 API 就更加容易上手。
不熟悉观察者模式的可以浏览这三篇文章，由浅入深地介绍观察者模式。
通过小姐姐-备胎模式了解 JavaScript 中的观察者模式
深入了解 JavaScript 的观察者模式，中级前端工程师必会
前端面试被考察 JavaScript 的观察者模式，该如何解答
Intersection Observer 使用方法：
首先需要创建出 IntersectionObserver 实例。
- callback 是当两个元素相交状态变更时被调用
- options 是相关配置选项，例如指定容器元素、指定触发事件的频率等。
在观察者模式中，创建出主题实例后，我们需要订阅可观察者对象，而 DOM 元素在这里就是作为 observer。
了解使用 API 的使用方法后，接下来就是细节实现。假如希望判断 inner 元素在 wrap 元素中的可见性，则 ——
观察上述代码：
- callback 回调函数中， changes 参数中的 isVisible 属性就是我们希望得到的元素真实可见性。
- 而 options 中的 trackVisibility 和 delay 是开启获取 isVisible 属性的必备选项。出于性能考虑，必须同时设置这两个属性后，获取的 isVisible 才是正确的。否则不管元素是否可见， isVisible 均为 false。
结语
以上是对「前端如何判断元素的真实可见性」的简单讨论。
如果你对观察者模式陌生，也会影响学习 IntersectionObserver 这个 API。建议先行熟悉观察者模式，毕竟观察者模式也是 2019 年前端大热门问题。
欢迎评论区讨论，暂时看不明白的也可以点赞转发收藏，面试前好好看一看，说不定下次就会遇到原题。
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/282439.html