判断网页中element是否可见的最佳方法

最新推荐文章于 2024-08-20 10:00:03 发布

原创最新推荐文章于 2024-08-20 10:00:03 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了在JavaScript中提高元素可见性检测效率的方法，对比了使用jQuery的is(':visible')与利用getBoundingClientRect()的性能差异，并提供了一个AngularJS的server factory实现，展示了如何通过计算element高度来判断元素是否可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前一直用jQurey的is(":visible")来判断，这也是 @红薯在某文中推荐的~。一次偶然在chrome中发现这个函数居然是消耗CPU最多的，这个函数效率很低！经过一翻搜寻，终于找到了它：getBoundingClientRect()——获取element实际的top、bottom、left、right定位值，我们利用它计算element的高度，如果为0，即可认为element不可见。关键是，几乎所有浏览器都支持getBoundingClientRect！

下面是来自于jsGen的代码片段，一个AngularJS的server

factory('isVisible', function () {
    return function (element) {
        var rect = element[0].getBoundingClientRect();
        return !!(rect.bottom - rect.top);
    };
})