首页 > 其他分享 >浏览器页面可见性事件

浏览器页面可见性事件

时间:2023-12-11 17:23:14浏览次数:41  
标签:浏览器 可见 事件 var 资源 页面

       当我们页面在做耗资源的操作时(例如websockert 通讯,音频、视频播放灯),彼时切换到其他页面,耗资源的操作还在继续,但我们已经看不到最直观的效果反馈了,又浪费了服务器资源,有没有办法在页面切换到其它页面时让其暂停耗资源的操作呢,让服务器的资源能够最大化的有效利用?

浏览器页面可见性事件主要借助一个HTML5的一个API visibilitychange

function getAvailableVisiablityPrfix(){
    var prefixs=['webkit','moz','ms','o'];

    if('hidden' in document)
        return '';

    for(var i=0;i<prefixs.length;i++){
        var prefix=prefixs[i];
        if((prefix+'hidden') in document){
            return prefix;
        }
    }

    //未识别到指定的结果,兜底返回
    return 'not found';
}

/**
 * 注册页面可见性事件
 * @param {function} hook 页面可见性回调函数
 * @returns 
 */
function registerPageVisibilityEvent(hook){
    var prefix=getAvailableVisiablityPrfix();

    if(prefix==='not found'){
        if(window.console)
        {
            console.error('your browser is not support visibilitychange event');
        }
        else
        {
            alert('your browser is not support visibilitychange event');
        }
        return;    
    }
        
    var hiddenName=prefix+'hidden',
        eventName=prefix+ 'visibilitychange',
        stateName=prefix+ 'visibilityState';

    //注册监听事件    
    document.addEventListener(
    eventName
    , function () {
        var visibilityState=document[stateName], hidden=document[hiddenName];
        hook && hook({visibilityState:visibilityState,hidden:hidden});
    }
    ,false);
}

 

 

 

标签:浏览器,可见,事件,var,资源,页面
From: https://www.cnblogs.com/artistx/p/17894914.html

相关文章

  • 从浏览器原理出发聊聊 Chrome 插件
    浏览器架构演进单进程浏览器时代单进程浏览器是指浏览器的所有功能模块都是运行在同一个进程里,这些模块包含了网络、插件、JavaScript运行环境、渲染引擎和页面等。在2007年之前,市面上浏览器都是单进程的。单进程浏览器的架构很多功能模块运行在一个进程里,是导致单进程浏......
  • Chrome 浏览器开启 Json 数据格式化显示
    Chrome浏览器开启Json数据格式化显示默认格式安装扩展程序JSONView......
  • 支付宝云开发 H5 页面渲染提升优化实践
    支付宝云开发产品是一款蚂蚁集团独立自研的Serverless小程序一站式开发平台。蚂蚁内部FaaS产品有多年的研发、实践积累,并在内部众多业务线大规模应用,基于蚂蚁FaaS产品蚂蚁团队打造了全新的支付宝云开发产品。云开发产品具备极速弹性能力、高性能、高稳定性,在满足业务场景的同......
  • java-selenium 使用固定版本chrome浏览器和chromedriver,解决chrome自动升级无法与Chro
    1、获取Googlechrome、chromedriver地址:https://googlechromelabs.github.io/chrome-for-testing/ 2、将2个压缩包解压,存放到固定目录比如我的chromedriver位置为:D:\file\jar\chromeDriver120\chromedriver.exechrome位置为:D:\\soft\\chrome120\\chrome.exe3、代码中......
  • js获取当前页面域名判断跳转网址输出不同内容
    js代码可以实现一些html语言无法实现的功能,比如通过js代码获取当前访问的域名。通过js代码判断当前访问域名可以进行跳转等功能。js获取当前页面域名判断跳转网址代码:<scripttype="text/javascript"> host=window.location.host;if(host=="www.adminwl.com") { window.loca......
  • ubuntu-购买云服务器修改为root权限并安装宝塔上线官网静态页面
    1、首先在购买服务器时会让你填写用户名和密码,需要记住,然后登录默认是 在设置密码时默认登录名为ubuntu不可选 2、使用vim /etc/ssh/sshd_config修改下面的参数:PermitRootLogin yes保存退出,重启ssh服务(systemctl restart sshd)。然后在控制台重置密码,选择自定义用户,填......
  • 使用代理打印浏览器环境 代码环境 吐环境
    1.js打印浏览器环境vareval_env_script="";varall_eval_env_script="";varbase_script="";//常用的proxy_array(按照"_"规范填写,后面会进行解析)varproxy_array=["window","window_document","window_locati......
  • 抓取真实浏览器设备指纹fingerprint写入cookie方案
     今天分享一个关于抓取真实浏览器设备指纹写入cookie方案,用户访问页面获取到用户设备生成指纹id,通过js把指纹存入cookie,然后用php进行获取cookie存的指纹值到后台。上写法: 首页在前端页面js引入:<!--引入浏览器指纹!--><script>functiongetCookie(name){varcook......
  • 【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期
    前言好,经过上个章节的介绍完毕之后,了解了一下uni-app-修改组件主题和样式那么了解完了uni-app-修改组件主题和样式之后,这篇文章来给大家介绍一下uni-app-OptionAPI应用生命周期和页面生命周期首先不管三七二十一,先来新建一个项目搭建演示环境创建一个全新的项目:然后在......
  • Vite多页面打包教程:一步步实现多页面应用
    前言Vite是一个快速的现代化前端构建工具,它提供了快速的开发体验和高效的打包能力。在本教程中,我们将学习如何使用Vite实现多页面打包,让你的应用能够拥有多个独立的页面。步骤1:创建页面文件夹首先,在你的项目根目录下创建一个名为pages的文件夹。这个文件夹将用于存放每个页面的......