当前位置： 首页 > news >正文

如何利用浏览器的可见性API优化网站性能

news 2025/9/19 7:59:44

最近在使用微软AI聊天工具Bing时，发现一个有趣的东西。我向它提问后，它在持续输出的过程中，如果我离开了当前它的浏览器会话，比如切屏，看当前浏览器的其它标签页，它会默认停止它的输出，等我回来它才继续。我们来探讨一下这个现象的实现方式，以及它的作用。

什么是浏览器的可见性API

浏览器的可见性API是一种JavaScript的接口，它可以让你知道一个页面什么时候是隐藏的，什么时候是显示的。

公众号：Code程序人生，个人网站：https://creatorblog.cn

当用户最小化窗口或切换到另一个标签页时，API会发送visibilitychange事件，让监听者知道页面的状态已发生变化。你可以检测到该事件并执行某些操作或采取不同的行为。例如，如果你的web应用正在播放视频，当用户将标签页放到后台时，它可以暂停视频，当用户返回标签页时，它又可以恢复播放。

浏览器的可见性API可以让你在页面不可见时避免执行不必要的任务，这对于节省资源和提高性能特别有用。例如，你可以在页面隐藏时停止动画或轮询服务器，从而减少CPU和网络的消耗。

如何使用浏览器的可见性API

要使用浏览器的可见性API，你需要了解以下几个概念：

  • document.hidden属性：这是一个只读的布尔值，如果页面处于隐藏状态，则返回true，否则返回false。

  • document.visibilityState属性：这是一个只读的字符串，表示页面的当前可见性状态。可能的值有：

    • visible：页面内容至少部分可见。在实践中，这意味着页面是非最小化窗口的前景选项卡。
    • hidden：页面内容对用户不可见，原因可能是文档标签页在后台或属于最小化窗口的一部分，也可能是设备屏幕关闭。
    • prerender：页面正在预渲染，尚未对用户可见。这个状态只在支持预渲染的浏览器中存在，比如Chrome。
    • unloaded：页面正在从内存中卸载。这个状态只在支持页面卸载事件的浏览器中存在，比如Firefox。

  • visibilitychange事件：这是一个事件，当页面的可见性状态发生变化时触发。你可以给document对象添加一个事件监听器，来处理这个事件。

浏览器的可见性API的示例

下面是一个简单的示例，用浏览器的可见性API来实现一个简单的数据绑定，当页面可见时，显示当前的时间，当页面隐藏时，停止更新时间：

<html>
<head><style>#time {font-size: 36px;text-align: center;}</style>
</head>
<body><div id="time"></div><script>// 获取页面上的元素let timeElement = document.getElementById("time");// 定义一个变量，用来存储定时器的IDlet timerId = null;// 定义一个函数，用来更新时间function updateTime() {// 获取当前的时间let now = new Date();// 格式化时间为HH:MM:SSlet timeString = now.toTimeString().slice(0, 8);// 更新页面上的元素的内容timeElement.textContent = timeString;}// 定义一个函数，用来处理页面可见性变化的事件function handleVisibilityChange() {// 如果文档变为可见，更新时间并启动定时器if (document.visibilityState === "visible") {updateTime();timerId = setInterval(updateTime, 1000);}// 如果文档变为隐藏，清除定时器else if (document.visibilityState === "hidden") {clearInterval(timerId);}}// 监听文档的可见性变化事件document.addEventListener("visibilitychange", handleVisibilityChange);// 启动定时器timerId = setInterval(updateTime, 1000);</script>
</body>
</html>

你可以在浏览器中运行这个代码，然后切换标签页或最小化窗口，看看页面上的时间的变化。

浏览器的可见性API的应用场景

浏览器的可见性API有很多有用的应用场景，比如：

  • 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
  • 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
  • 页面想要检测何时正在预渲染，以便可以准确的计算页面浏览量。
  • 当设备进入待机模式（用户按下电源键关闭屏幕）时，网站想要关闭设备声音。

浏览器的可见性API的兼容性和注意事项

浏览器的可见性API是一个比较新的特性，它在大多数现代浏览器中都有支持，但在一些老版本的浏览器中可能不兼容。如果你想让你的代码在不支持的浏览器中也能运行，你可以使用一些polyfill或shim的方法。

另外，你还需要注意以下几点：

  • 浏览器的可见性API只能检测页面是否处于前台或后台，不能检测页面是否被遮挡或半透明。
  • 浏览器的可见性API只能检测标签页的可见性，不能检测<iframe>的可见性。如果你想检测<iframe>的可见性，你需要在<iframe>内部的文档中使用浏览器的可见性API。
  • 浏览器的可见性API不能检测用户是否真的在关注页面，只能检测页面是否有可能被用户看到。如果你想检测用户是否真的在关注页面，你可能需要使用其他的方法，比如检测用户的鼠标或键盘活动，或者使用WebGazer.js等工具来实现眼球追踪。

总结

浏览器的可见性API是一种JavaScript的接口，它可以让你知道一个页面什么时候是隐藏的，什么时候是显示的。

你可以使用document.hidden和document.visibilityState属性来获取页面的可见性状态，也可以使用visibilitychange事件来监听页面的可见性变化。

浏览器的可见性API可以让你在页面不可见时避免执行不必要的任务，从而节省资源和提高性能。浏览器的可见性API有很多有用的应用场景，比如暂停视频，停止轮播，关闭声音等。浏览器的可见性API在大多数现代浏览器中都有支持，但在一些老版本的浏览器中可能不兼容，你可以使用一些polyfill或shim的方法来解决这个问题。

浏览器的可见性API还有一些注意事项，比如不能检测页面是否被遮挡或半透明，不能检测<iframe>的可见性，不能检测用户是否真的在关注页面等。

相关文章：

如何利用浏览器的可见性API优化网站性能

最近在使用微软AI聊天工具Bing时&#xff0c;发现一个有趣的东西。我向它提问后&#xff0c;它在持续输出的过程中&#xff0c;如果我离开了当前它的浏览器会话&#xff0c;比如切屏&#xff0c;看当前浏览器的其它标签页&#xff0c;它会默认停止它的输出&#xff0c;等我回来…...

编程日记 2023/11/8 21:59:14

还不知道IP地址不够用是怎么被大牛们解决的？(NAT/NAPT, IPv6, DHCP)

文章目录 前言1. DHCP网络管理协议什么是 DHCPDHCP 两种分配机制 2. NAT网络地址转换协议什么是 NATNAT 技术使用NAT网络设备间如何通信两个内网设备相互通信不同内网中的设备相互通信NAT IP转换过程 NAPT 技术NAT 技术的缺陷 3. IPv6 协议什么是 IPv6 总结 前言 在之前的文章…...

编程日记 2023/11/8 21:58:13

使用决策树预测隐形眼镜类型

任务描述 本关任务&#xff1a;编写一个例子讲解决策树如何预测患者需要佩戴的隐形眼镜类型。使用小数据集&#xff0c;我们就可以利用决策树学到很多知识&#xff1a;眼科医生是如何判断患者需要佩戴的镜片类型&#xff0c;一旦理解了决策树的工作原理&#xff0c;我们甚至也…...

编程日记 2023/11/8 21:57:12

[ACTF2020 新生赛]BackupFile 1

题目环境&#xff1a; 好好好&#xff0c;让找源文件是吧&#xff1f;咱们二话不说直接扫它后台 使用dirsearch工具扫描网站后台&#xff08;博主有这个工具的压缩包&#xff0c;可以私聊我领取&#xff09;python dirsearch.py -u http://0d418151-ebaf-4f26-86b2-5363ed16530…...

编程日记 2023/11/8 21:55:10

解决vuex刷新数据丢失

Vuex 是一个 Vue.js 的状态管理库&#xff0c;它使得你可以在 Vue 组件之间共享状态。当你在 Vuex 中更新状态时&#xff0c;如果你遇到数据丢失或数据不一致的问题&#xff0c;可能需要进行深度复制或者使用其他方式来确保数据的完整性。 假设你有一个 Vuex 存储&#xff0c;…...

编程日记 2023/11/8 21:54:09

linux系统下读取当前硬盘的温度

这个其实很简单&#xff0c;借助于smartctl工具&#xff08;Ubuntu默认安装好了&#xff09;&#xff0c;标红的部分就是当前温度&#xff0c;单位是摄氏度。 sudo smartctl -l scttempsts /dev/sda...

编程日记 2023/11/8 21:53:08

python 深度学习 解决遇到的报错问题8

本篇继python 深度学习 解决遇到的报错问题7-CSDN博客 目录 一、OSError: [WinError 127] 找不到指定的程序。 Error loading "D:\my_ruanjian\conda-myenvs\deeplearning\lib\site-packages\torch\lib\caffe2_detectron_ops.dll" or one of its dependencies. 二、…...

编程日记 2023/11/8 21:52:07

Linux pipe()系统调用示例

Linux系统调用pipe函数&#xff0c;创建一个pipe&#xff0c;通过传入的fd数组返回pipe的读、写两端。 其中fd[ 0 ]用于读&#xff0c;fd[ 1 ]用于写。 一个pipe是单向数据传输的&#xff0c;不用用于父子进程双向读写。创建2个pipe实现父子进程间的双线读写。 #include <u…...

编程日记 2023/11/8 21:51:06

音频中的采样率和比特率

音频中的采样率和比特率 采样频率千比特率音频比特率 采样频率 参考&#xff1a;https://blog.csdn.net/qq_38907791/article/details/88925224 采样频率&#xff0c;也称为采样速度或者采样率&#xff0c;定义了每秒从连续信号中提取并组成离散信号的采样个数&#xff0c;它…...

编程日记 2023/11/8 21:50:05

Python常用脚本

1.解压指定文件夹内的zip包&#xff0c;解压到当前位置 import os import zipfile# 指定文件夹路径 folder_path "/path/to/your/folder"# 获取文件夹下所有的zip文件 zip_files [os.path.join(folder_path, file) for file in os.listdir(folder_path) if file.e…...

编程日记 2023/11/8 21:47:02

Redis5 分布式系统之主从模式

目录 分布式系统 引子 分布式系统类型 主从模式 一个主节点和多个从节点 创建多个节点方法 配置主从结构 主从模式知识 主从复制 拓扑结构 1.一主一从 2.一主多从 3.树形主从 主从实现原理 psync数据同步 全量复制和部分复制 psync流程 1.全量数据同步 2.部…...

编程日记 2023/11/8 21:46:01

【黑马程序员】Maven 进阶

文章目录 前言一、分模块开发与设计1. 分模块开发意义2. 分模块开发&#xff08;模块拆分&#xff09;2.1 创建 Maven 模块2.2 书写模块代码2.3 通过 Maven 指令安装模块到本地仓库&#xff08;install 指令&#xff09; 二、依赖管理1. 依赖传递1.1 依赖传递冲突问题 2. 可选依…...

编程日记 2023/11/8 21:44:59

231108 C语言memset当第三个参数为0，即设置个数为零也不报错

memset语法&#xff1a; void *memset(void *s, int c, size_t n); 犹豫第三个参数为0会不会报错&#xff0c;测试不会。 代码&#xff1a; #include"stdio.h" #include"stdlib.h" // memset memcpy int main() { int sig[100] { 0 }; int …...

编程日记 2023/11/8 21:43:56

HMM与LTP词性标注之马尔科夫模型（HMM原理剖析）

文章目录 问题描述viterbi算法联合概率与条件概率维特比算法实例 问题描述 viterbi算法 联合概率与条件概率 维特比算法实例...

编程日记 2023/11/8 21:42:55

Python自动化测试selenium指定截图文件名方法

这篇文章主要介绍了Python自动化测试selenium指定截图文件名方法&#xff0c;Selenium 支持 Web 浏览器的自动化&#xff0c;它提供一套测试函数&#xff0c;用于支持 Web 自动化测试&#xff0c;下文基于python实现指定截图文件名方法&#xff0c;需要的小伙伴可以参考一下 前…...

编程日记 2023/11/8 21:40:52

Linux 实现文件后半部分的复制

继上次实现文件从后往前数2k的数据进行复制&#xff0c;此次要求是文件的一半且是后半部分。 即复制源文件sour_file的后半部分到dest_file 除了数据上从后2K变化到后一半之外&#xff0c;其他的几乎没有什么变化。 这道题的关键点就在于后一半怎么求&#xff0c;在经历了用 …...

编程日记 2023/11/8 21:39:51

阿里开源中间件一览

1. 概述以及竞品对比 间件介绍官方链接竞品竞品介绍异同点对比Dubbo高性能的RPC框架&#xff0c;用于实现分布式服务的调用和管理。DubbogRPC gRPC是由Google开源的一款高性能、通用的RPC框架&#xff0c;支持多种编程语言 链接&#xff1a;gRPC Dubbo更注重于服务治理和可扩展…...

编程日记 2023/11/8 21:38:50

Ubuntu20.04下Salome_meca 2022软件安装（支持GPU加速）

一、什么是Salome_meca &#xff1f; Salome_meca 是一个开源的有限元分析软件套件&#xff0c;主要用于模拟和分析复杂的力学问题。它是 Salome 平台的一部分&#xff0c;Salome 是一个通用的集成化软件环境&#xff0c;用于建模、预处理、模拟和后处理各种复杂的工程和科学问…...

编程日记 2023/11/8 21:37:49

uniapp：打包ios配置隐私协议框

使用uniapp打包ios 上架商店需要配置隐私协议政策弹窗。当用户点击确定后才能继续操作。 首先manifest.json中配置使用原生隐私政策提示框是不支持ios的。不用勾选。 解决思路&#xff1a; 1、新建页面&#xff1a;iosLogin.vue&#xff0c;pages.json中 这个页面需要放在第一…...

编程日记 2023/11/8 21:35:47

JS逆向爬虫---请求参数加密③【比特币交易爬虫】

查询参数确定 t无加密 请求头参数加密 X-Apikey参数加密确定 X-Apikey逆向 const API_KEY "a2c903cc-b31e-4547-9299-b6d07b7631ab" function encryptApiKey(){ var t API_KEY, e t.split(""), n e.splice(0, 8);return t e.concat(n).join("&…...

编程日记 2023/11/8 21:34:46

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/19 0:14:07

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/9/18 5:24:07

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/8/6 22:35:04

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/8/6 4:17:44

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2025/9/7 3:22:38

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/9/1 13:30:26

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/7/5 19:39:42

深入浅出Diffusion模型：从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...

编程新知 2025/9/12 5:25:46