首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Javascript跟踪网页加载25%、50%、75%和100%后的页面滚动深度,仅当用户等待2秒时

JavaScript跟踪网页加载25%、50%、75%和100%后的页面滚动深度,仅当用户等待2秒时,可以通过以下步骤实现:

  1. 首先,需要使用JavaScript来跟踪网页加载的进度。可以通过监听window对象的load事件来判断网页加载完成的百分比。可以使用performance.timing对象来获取网页加载的相关信息,如domContentLoadedEventEndloadEventEnd等属性。
  2. 在网页加载过程中,可以使用window对象的scroll事件来监听页面滚动的深度。可以通过document.documentElement.scrollTopdocument.body.scrollTop属性来获取当前页面滚动的深度。
  3. 在用户等待2秒后,可以根据页面加载的百分比和页面滚动的深度来进行相应的处理。可以使用条件语句来判断加载百分比和滚动深度的范围,并执行相应的操作。

以下是一个示例代码,用于实现上述功能:

代码语言:txt
复制
// 监听页面加载完成事件
window.addEventListener('load', function() {
  // 获取页面加载的时间信息
  var timing = performance.timing;
  
  // 计算页面加载的百分比
  var loadPercentage = Math.floor((timing.loadEventEnd - timing.navigationStart) / (timing.domComplete - timing.navigationStart) * 100);
  
  // 监听页面滚动事件
  window.addEventListener('scroll', function() {
    // 获取页面滚动的深度
    var scrollDepth = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    
    // 判断加载百分比和滚动深度的范围
    if (loadPercentage >= 25 && scrollDepth >= 0) {
      // 当加载百分比达到25%且滚动深度大于等于0时,执行相应操作
      // TODO: 在此处添加相应的操作代码
    }
    
    if (loadPercentage >= 50 && scrollDepth >= 0) {
      // 当加载百分比达到50%且滚动深度大于等于0时,执行相应操作
      // TODO: 在此处添加相应的操作代码
    }
    
    if (loadPercentage >= 75 && scrollDepth >= 0) {
      // 当加载百分比达到75%且滚动深度大于等于0时,执行相应操作
      // TODO: 在此处添加相应的操作代码
    }
    
    if (loadPercentage >= 100 && scrollDepth >= 0) {
      // 当加载百分比达到100%且滚动深度大于等于0时,执行相应操作
      // TODO: 在此处添加相应的操作代码
    }
  });
  
  // 设置等待2秒的定时器
  setTimeout(function() {
    // TODO: 在此处添加根据加载百分比和滚动深度进行处理的代码
  }, 2000);
});

请注意,以上代码仅为示例,具体的操作代码需要根据实际需求进行编写。另外,由于题目要求不能提及特定的云计算品牌商,因此无法提供腾讯云相关产品和产品介绍链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CloudflareHTTP2优化策略

JavaScript可能包括面向用户应用程序逻辑、用户行为分析与营销跟踪信标,一旦出现延迟即可导致业务跟踪指标的下降。 借并行下载可实现更好图像加载效果。...图像文件前几个字节包含浏览器页面布局所需要图像尺寸,并行逐行图像下载允许在浏览器接收原始数据50%基础之上优先完成视觉上图像加载。...这就是我所描述采用“最佳加载策略”加载资源,浏览器所呈现出效果: 启用全部连接,加载HTML、CSS阻止脚本前4秒内,页面为空白。 第4秒,页面显示了背景与结构却未显示文本与图像。...这就意味着用户使用IE内核浏览器观看动画需要耐心等待页面元素全部加载完成,这无疑是对用户浏览网页体验巨大影响。...例如,浏览器识别出用户正在阅读某一网页用户视觉重心位于当前网页之上;而如果我们想要提升下一页观感,那么我们可以尝试提升某些关键异步脚本优先级或增加关键图像加载优先级。

1.3K30

浏览器之性能指标-FID

blur 页面元素失去焦点触发,通常用于处理用户离开表单元素操作。 change 表单元素值改变触发,通常用于处理输入内容变化情况。...---- FID测量第一个用户交互 FID可以说是我们网站「脸面」。用户首次与我们页面进行交互对于他们对网页性能体验感知至关重要。...❞ 当用户访问一个网页,浏览器会加载页面中包含各种资源,如图像、脚本、样式表等。通常情况下,这些资源是根据页面的内容结构进行请求和加载。...然而,在某些情况下,这些资源可能会在没有用户直接请求情况下被加载。例如,网页脚本文件被设置为自动加载,并且不是在用户直接与网页交互加载,就会导致输入延迟。...它是在FCP在主线程上运行「最长任务持续时间」。 ❝通过测量该任务持续时间,可以模拟用户在这个长时间任务开始页面进行交互,并等待任务完成以处理输入潜在情况。

40940

浏览器之性能指标-TBT

RAIL 代表 Web 应用生命周期「四个不同方面」: 响应 在 100 毫秒内完成由用户输入发起响应,让用户感觉交互是即时 为了确保在 100 毫秒内产生可见响应,需要在 50 毫秒内处理用户输入事件...100 到 1000 毫秒 在此时间窗口内,用户会觉得任务进展基本上是自然连续。对Web上大多数用户来说,加载页面或更改视图是一项任务。...(关于主线程长任务,我们在浏览器之性能指标-TTI有过介绍,这里就不在赘述) 一个长任务正在处理,浏览器无法简单地暂停它并响应用户操作,比如用户点击事件,而这些操作发生在长任务进行期间。...❝TBT是TTI一个很好「补充指标」,因为它有助于量化页面在变得可靠交互之前非交互性严重程度。 ❞ 虽然TBTTTI有着类似的目标,但它们在跟踪网页响应性方面存在不同。...减少请求资源数量传输大小 通过选择CDN优化CSSJavaScript(专注于传送必要代码),改进页面加载时间。

71221

Google Analytics 4中事件跟踪全解析(2021)

类型 增强衡量事件有如下6种类型: 网页浏览量(page_view):网页加载或处于活动状态网站更改浏览器历史记录状态触发,系统会自动收集此事件,你无法停用收集,你一布署GA4基础跟踪代码,这个事件就一定会有...滚动次数(scroll):当用户滚动页面超过90%时候才触发。 出站点击次数(click):当用户点击跳转到其他网站时候触发。...视频互动度(video_start):对youtube视频做跟踪,默认支持如下几个事件: video_start(视频开始播放触发) video_progress(视频播放时长超过 10%、25%...、50% 75% 触发) video_complete(视频结束播放触发) 文件下载次数(file_download):当用户下载特定文件格式文件是触发,默认支持如下文件pdf|xlsx...虽然一个事件最多可以设置25个参数,但每个媒体资源对多可以设置100事件参数,50个文本型50个数值型,而且事件参数需要注册才可以在GA中使用,文本型注册成事件级自定义维度,数值型注册成事件级自定义指标

7.1K40

如何深入理解 JavaScript加载

它延迟显示某些元素,如图片、视频其他多媒体,直到用户主动与网页进行交互。本文将向您展示如何使用懒加载,以便您用户在访问您网站获得更好体验。 介绍 网络用户对网站加载时间性能有很高期望。...懒加载好处 减少带宽使用:加载不必要资源会消耗大量带宽,影响用户网站所有者。延迟加载可以通过加载所需资源来节省带宽。...这确保了每当用户滚动页面都会调用该函数。此外,我们在页面加载时调用 lazyLoadContent() 来加载可见内容。 何时使用懒加载 对于网页开发人员来说,知道何时实施延迟加载是很重要。...与预加载所有页面不同,延迟加载可以在用户滚动到当前页面末尾获取和加载后续页面。具有资源密集型功能网站,例如交互式地图、数据可视化复杂动画,可以使用延迟加载来优化性能。...它允许开发人员高效地跟踪元素何时进入视口,从而触发懒加载内容加载。 为JavaScript禁用用户提供备选方案:并非所有用户都在其浏览器中启用了JavaScript

28430

浏览器之性能指标-TTI

任务过长且浏览器无法快速响应交互VS将较长任务拆分成较小任务交互情况 在上述图例顶部,由用户交互触发事件处理程序「必须等待一个长任务完成」才能执行,这导致交互延迟。...---- 页面完全可交互 "页面完全可交互"(Page Fully Interactive)是指在网页加载完成,「所有」主要用户交互元素功能都已经加载并且可以响应用户操作,用户可以在页面上执行各种操作而不会出现明显延迟或等待...页面完全可交互用户体验更加流畅,因为用户可以立即与页面进行交互,无需等待页面响应。...一个网页达到页面完全可交互状态,以下几个条件应当满足: 「页面结构已经完全加载:」 所有HTML文档、CSS样式表JavaScript脚本都已下载完成,并且浏览器已经解析构建了整个页面的DOM...「主要内容可见:」 网页主要内容已经在浏览器窗口中可见,用户可以看到页面的核心信息而不需要进行滚动等待

1.4K30

浏览器之性能指标-INP

例如,如果一个页面100次交互响应时间为50毫秒,然后有一个交互延迟为300毫秒,那么INP将被报告为50毫秒。...该指标显示了第75百分位数。例如,如果INP为273毫秒,这意味着对于25%访问者,他们所经历输入到下一次UI更新之间「最糟糕延迟」是273毫秒。...脚本执行与启动过程中长任务之间关系 在页面生命周期中,页面加载,首先进行渲染,但是这里有一个很迷惑点,仅仅因为页面已经渲染出来,不意味着页面已经完成加载。...布局抖动是性能瓶颈,因为在JavaScript中更新样式,然后立即请求这些样式值,浏览器被迫执行同步布局工作,而它本来可以在事件回调完成异步地等待稍后执行。...我们可以限制页面加载期间响应用户交互期间渲染工作量一种方法是利用CSScontent-visibility属性,它实际上是在元素接近视口延迟渲染它们。

71720

CSS | 视差滚动 | 笔记

引言 视差滚动(Parallax Scrolling)是一种效果, 能够使不同层次元素以不同速度进行滚动, 从而产生了视觉上深度动态效果。...scroll 背景相对于元素本身固定,而不是随着它内容滚动(对元素边框是有效)。 对父元素 css_demo 设置 overflow: scroll, 元素内容超出页面滚动。...在上图中,应该在屏幕底部按钮被隐藏了。 更糟糕是,当用户第一次使用手机访问网站,地址栏会显示在页面顶部, 因此用户体验是很糟糕。...页面加载,将高度设置为 window.innerHeight 将正确地将高度设置为窗口可见部分。 如果地址栏是可见,那么 window.innerHeight 是全屏高度。...类似的,background-position: 25% 75% 表示图像上左侧 25% 顶部 75% 位置将放置在距容器左侧 25% 距容器顶部 75% 容器位置。

54421

前端性能优化学习 02 Web 性能指标「建议收藏」

差不多每秒 60 桢 空闲(Idle):使用 JavaScript 主线程时候,应该把任务划分到执行时间小于 50ms 片段中去,这样可以释放线程以进行用户交互。...这么做就是保证用户在发生操作 100ms 内给出响应。 加载 Load 指标:首次加载应该在小于 5s 时间内加载完成,并可以进行用户交互。对于后续加载,则是建议在 2s 内完成。...为确保您达到大多数用户这一目标,衡量移动设备台式机设备页面加载75 个百分位数是一个很好衡量标准。 以下是一些示例: 在以上两个时间轴中,最大元素随内容加载而变化。...如上图所示,浏览器接收到用户输入操作,主线程正忙于执行一个耗时比较长任务,只有当这个任务执行完成,浏览器才能响应用户输入操作。它必须等待时间就是此页面上该用户 FID 值。...因此,如果用户确实在较长任务中间与页面进行交互,则浏览器必须等待任务完成才能响应。 如果任务足够长(例如,超过 50ms 任意时间),则用户很可能会注意到延迟并感觉页面缓慢或过时。

1.4K21

Fluid -41- 添加博客加载页面

简介 加载动画可以缓解用户等待页面加载不适感,给予用户一个明确指示,告诉他们页面正在加载中。这有助于提升用户体验,减轻用户焦虑感,让他们 感觉 页面加载速度更快。...实现思路 html + css 创建动画页面 调用 js 加载 dom 事件来控制加载动画消失 实现方法 动画照搬了一个示例 ~ 动画页面 我在 bodyBegin 注入了元素代码: <div id="...(此处用了 jquery) $(function(){ $("#Loadanimation").fadeOut(500); }); 这样就可以了 ~ 优化方向 单次显示 看了几位大佬博客,加载页面显示一次...,虽然我们博客加载方式不同,可以尝试自己实现,已知思路是检测用户是否从本站跳转而来:在网页加载,通过JavaScript检测document.referrer属性,这个属性包含了前一个文档 URL...,如果document.referrer为空或者不是你网站URL,那么用户可能是从其他网站跳转而来。

13410

前端性能优化——让你长任务保持在50ms 内

长任务优化 网页加载,长时间任务可能会占用主线程,使页面无法响应用户输入(即使页面看起来已就绪)。点击点按通常不起作用,因为尚未附加事件监听器、点击处理程序等。...识别长任务 一般来说,在前端网页中容易出现长任务包括: 大型 JavaScript 代码加载 解析 HTML CSS DOM 查询/DOM 操作 运算量较大 JavaScript 脚本执行...我们可以考虑拆分这些脚本: 首屏加载加载必要最小 JavaScript 代码。 其他 JavaScript 代码进行模块化,进行分包加载。...通过预加载、闲时加载等方式,完成剩余所需模块代码加载。 拆分 JavaScript 脚本,使得用户打开页面,只发送初始路由所需代码。...这样可以最大限度地减少需要解析编译脚本量,从而缩短网页加载,也有助于提高 First Input Delay (FID) Interaction to Next Paint (INP) 时间。

38010

用框架你,可能早已忽略了这些事件API

因此,它必须等待样式加载完成。 DOMContentLoaded 等待脚本,它现在也在等待脚本前面的样式。...window.onload 整个页面,包括样式、图片其他资源被加载完成,会触发 window 对象上 load 事件。可以通过 onload 属性获取此事件。...它们俩意义实际上是相同所有资源(iframe img)都加载完成,document.readyState 变成 complete。...总结 页面生命周期事件: DOM 准备就绪,document 上 DOMContentLoaded 事件就会被触发。在这个阶段,我们可以将 JavaScript 应用于元素。...页面所有资源都加载完成,window 上 load 事件就会被触发。我们很少使用它,因为通常无需等待那么长时间。

1.7K10

深入理解图片框架原生懒加载功能

当今网站上充斥着大量媒体资源,例如图片视频。图片约占网站平均通信量 50%。然而这些图片中大部分都没机会进入用户视野,因为它们位于网站页面的头版之外。...简言之,我们要讨论是一种延迟网络资源加载机制,在该机制下,网页内容按需加载,或者说得更直白些,网页内容进入用户视野再触发加载。 这样做有什么好处?... LazyLoadingLibrary.run() 该懒加载库时刻记录用户滚动页面的行为...这还会给用户造成网页加载速度缓慢错觉。 另外,懒加载库本身也是对带宽和 CPU 算力占用。而且别忘了,如果用户禁用了 JavaScript(都已经2019年了,这种情况我们不予考虑,你说对吧?)...懒加载到底有多「懒」,这应该由浏览器来解释,而说明文档表明,懒加载始于用户页面滚动到图片附近之时,意即图片即将进入视野加载

80630

移动Web学习笔记

当你点击一个链接或者通过Javascript定义可点击元素时候,它就会出现一个半透明灰色背景,设置 -webkit-tap-highlight-color: transparent就不会产生这个背景...继续滚动速度持续时间滚动手势强烈程度成正比 10. pointer-events: none 解释:当鼠标点击设置了pointer-events: none属性标签,标签不起作用,会出现类似于标签禁用效果点击此处查看详细解释...、input标签添加`spellcheck=”false”s属性向标签中输入单词拼写错误,不会产生红色波浪线 25.... 解释:预解析技术,当你浏览网页,浏览器会在加载网页网页域名进行解析缓存,这样在你单击当前网页连接就无需进行DNS解析...,减少用户等待时间,提高用户体验,点击此处查看详细介绍 32.

99430

高性能JavaScript--加载执行

JavaScript运行了多长时间,那么浏览器空闲下来响应用户输入之前等待时间就有多长。 从基本层面说,这就意味着标签出现使整个页面因脚本解析、运行出现等待。...在加载JavaScript过程中,页面解析用户交互是被完全阻塞。...把脚本放在页面的顶端,将会导致一个可以察觉延迟,通常表现为:页面打开一片白,用户不能阅读操作。 ? 如图,第一javas文件开始下载,阻塞了其他文件下载。...每个HTTP请求都会产生额外性能负担,下载一个100KB文件比下载4个25KB文件要快。总之,减少引用外部文件数量。典型,一个大型网站或者网页应用需要多次请求JavaScript文件。...文件使用动态脚本节点下载,返回代码通常立即执行。脚本“自运行”类型这一机制运行正常,但是如果脚本只包含页面其他脚本调用接口,则会带来问题。

75120

jQuery实现图片懒加载

一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型网站上,在图片加载均采用了一种名为懒加载方式,具体表现为,页面被请求,只加载可视区域图片,其它部分图片则不加载,只有这些图片出现在可视区域才会动态加载这些图片...2.懒加载原理 页面img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。...网页高度不足浏览器窗口$(document).height()返回是$(window).height() 假如您要获取整个网页高度,不建议用$("html").height()、$("body"...body]: document.body.offsetWidth (包括滚动边框,若滚动边框为0,则clientWidth相等) 网页可见区域高[针对body]: document.body.offsetHeight...data-img 2.滚动页面,检查页面所有的img标签,看看这个标签是否出现到我们视野,出现在我们视野 再去判断它是否已经加载过,如果没有加载加载

13.6K20

【数据可视化】Echarts高级功能

多个系列数据存在极强不可分离关联意义,为了避免在同一个直角系内同时展现时产生混乱,需要使用联动多图表对其进行展现。...ECharts中事件行为 3.1 ECharts中事件 事件是用户或浏览器自身执行某种动作,如click、mouseover、页面加载完毕触发load事件,都属于事件。...3.1.2 ECharts组件交互行为事件 用户在使用交互组件触发行为事件,即调用“dispatchAction”触发事件,如切换图例开关触发legendselectchanged事件(这里需要注意...通过调用折线图滚动鼠标,带动柱状图图表同步变化,这主要是因为鼠标在折线图中滚动,会产生dataZoom(数据区域缩放组件)事件。...4.2 异步数据加载如何显示加载动画 ECharts默认提供了一个简单加载动画,只需要在数据加载前,调用showLoading方法显示加载动画,在数据加载完成,再调用hideLoading方法隐藏加载动画即可

20310

2022 年 CSS 全览

JavaScript alert() 函数就是一个很好例子: 请注意,在调用 alert() 之前,页面是如何通过鼠标键盘访问。显示警报对话框弹出窗口页面的其余部分将被冻结或不活动。...当用户滑出侧边菜单,让鼠标或键盘与后面的页面交互是不合适;相反,显示侧边菜单,使页面处于inert状态,现在用户必须关闭或在该侧边菜单中导航,并且永远不会发现自己在打开菜单页面中迷失在其他地方...在移动设备上,加载页面,会显示带有 url 状态栏,此栏会占用部分视口空间。在几秒钟一些交互之后,状态栏可能会滑开,以便为用户提供更大视口体验。...根据访问视口大小,可以在页面加载上节省更多资源。当用户与媒体滚动条交互,继续保存。这些图像上都有load="lazy"属性,再加上CSS完全隐藏元素,这意味着永远不会对图像发出网络请求。...对于我测试,在一个中等大小视口上,最初加载了 40 个请求和 700kb 资源。当用户滚动媒体选择,会加载更多请求和资源。

4.2K20
领券