文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用原生 JavaScript 在页面加载完成后处理多个函数

JavaScript 正确的使用方法应该是 脚本与 HTML 元素分离、当页面加载完成之后再去执行。本文就来讲解如何使用原生 JavaScript 来实现。...window.onload 事件 onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，...结合监听器和 window.onload 实现页面加载完处理多个函数 这里需要特别提到监听器的一个优势：可以为一个元素上的同一个事件添加或者去除多个处理函数。...前面说过 window.onload 事件加载的缺陷是只能在页面中使用一次。而使用监听器的方法，就可以监听为 window 的 onload 事件分别加载多个函数了。...这样，就实现了页面加载完成之后处理多个函数了。 ----

2.7K20
您找到你想要的搜索结果了吗？
是的
没有找到

BOM概述

,可以写函数名两种形式调用 延迟的默认毫秒数为0,即如果不写延迟毫秒数,默认为立即触发状态,但该函数仍旧被认为是回调函数 因为定时器较多,我们常常为定时器设置var变量标识符,同时Timeout的定时器停止中的...(调用函数,[延迟毫秒数]) //停止方法: window.clearInterval(Interval ID) setInterval讲解: setInterval()用来设置一个定时器 该定时器在定时器到期后执行调用函数...这个调用函数可以直接写函数,可以写函数名两种形式调用 延迟的默认毫秒数为0,即如果不写延迟毫秒数,默认为立即触发状态,但该函数仍旧被认为是回调函数 因为定时器较多,我们常常为定时器设置var变量标识符...执行机制 在了解JavaScript的执行机制前,我们需要先了解JavaScript的基本信息: JavaScript是单线程,在同一时间只能做一件事 因为我们JavaScript是为了操作DOM和BOM...,我们在进行操作时不可能同时创建和删除,所以JavaScript被设置为单线程 但是,JavaScript的单线程注定了JavaScript的效率低下,我们的所有任务都需要进行排队,但如果其中有一项任务等待时间较长

1.1K10

浏览器层面优化前端性能(1):Chrom组件与进程线程模型分析

默认每个Tab页面一个Renderer进程（Renderer进程，内部是多线程的）Utility Network:网络进程，负责页面网络资源的加载GPU进程：最多只有一个，GPU硬件加速打开时才会被创建...当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行。...渲染进程css加载不会阻塞DOM树解析（异步加载时DOM照常构建——css是由单独的下载线程异步下载的）但会阻塞render树渲染（渲染时需等css加载完毕，因为render树需要css信息——这可能也是浏览器的一种优化机制...，导致页面渲染加载阻塞。...因为可能在它推入到事件列表时，主线程还不空闲，正在执行其它代码，定时触发器线程传说中的setInterval与setTimeout所在线程浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript

81310

浏览器层面优化前端性能(1):Chrom组件与进程线程模型分析

默认每个Tab页面一个Renderer进程（Renderer进程，内部是多线程的）Utility Network:网络进程，负责页面网络资源的加载GPU进程：最多只有一个，GPU硬件加速打开时才会被创建...当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到引擎线程空闲时立即被执行。...渲染进程css加载不会阻塞DOM树解析（异步加载时DOM照常构建——css是由单独的下载线程异步下载的）但会阻塞render树渲染（渲染时需等css加载完毕，因为render树需要css信息——这可能也是浏览器的一种优化机制...，导致页面渲染加载阻塞。...因为可能在它推入到事件列表时，主线程还不空闲，正在执行其它代码，定时触发器线程传说中的setInterval与setTimeout所在线程浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript

72110

js2

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在 JavaScript...语法： prompt("请在下方输入","你的答案") 计时相关 通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。...当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 HTML DOM 树 ?...可以通过DOM创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有...obj.style.zIndex obj.style.fontFamily 事件 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段

2.2K10

基于HTML、CSS和JavaScript制作一个中秋节倒计时网页

JavaScript 倒计时 创建一个名为 script.js 的 JavaScript 文件，来实现倒计时功能。...，以实时更新倒计时 setInterval(updateCountdown, 1000); // 初次加载页面时立即更新倒计时 updateCountdown(); 这段JavaScript代码执行以下操作...使用数学函数计算剩余的天数、小时、分钟和秒数。 更新网页上的倒计时元素，将计算得到的时间显示在页面上。...使用 setInterval 函数每秒调用一次 updateCountdown 函数，以实时更新倒计时。...在页面加载时，立即调用 updateCountdown 函数，以确保初次加载时显示正确的倒计时。 4. 图像 我们需要一张月亮的图像，将其命名为 moon.png，并放在项目目录下。 5.

30340

js对象(BOM部分DOM部分)

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在 JavaScript...语法： prompt("请在下方输入","你的答案") 计时相关 通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。...当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。...可以通过DOM创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有...obj.style.zIndex obj.style.fontFamily 事件 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段

4.2K20

基于HTML、CSS和JavaScript制作一个中秋节倒计时网页

JavaScript 倒计时创建一个名为 script.js 的 JavaScript 文件，来实现倒计时功能。...，以实时更新倒计时setInterval(updateCountdown, 1000);// 初次加载页面时立即更新倒计时updateCountdown();这段JavaScript代码执行以下操作：创建一个...- 使用数学函数计算剩余的天数、小时、分钟和秒数。- 更新网页上的倒计时元素，将计算得到的时间显示在页面上。...使用 setInterval 函数每秒调用一次 updateCountdown 函数，以实时更新倒计时。在页面加载时，立即调用 updateCountdown 函数，以确保初次加载时显示正确的倒计时。...运行将以上三个文件放在同一个目录下，然后打开 midAutumnCountdown.html 文件，我们可以看到一个漂亮的中秋节倒计时页面，页面上会显示距离中秋节的时间，以及中秋节的祝福语和月亮图像。

50351

JavaScript之BOM

二、Windows对象 Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。...所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。全局函数是 window 对象的方法。...常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在...; 计时相关 通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。...setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

1.2K50

前端学习笔记之BOM和DOM

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在 JavaScript...语法： prompt("请在下方输入","你的答案") 计时相关 通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。...当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 HTML DOM 树 ?...可以通过DOM创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有...obj.style.zIndex obj.style.fontFamily 事件 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段

98530

Js BOM

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。...() window.history.forward()等于点击浏览器的前进按钮，可以加载历史记录的下一个页面（前提是有下一个页面） function...()如果不指定参数，默认参数为0，相当于刷新当前页面 function goBack() { window.history.go...getCookie('user')); //admin console.log(getCookie('pwd')); //123456 常用方法 onload() onload 事件会在页面加载完成后立即发生...一个页面只会执行一个onload事件，后面的会覆盖前面的 注意：由于html文档是自上而下执行的，而onload是文档加载完成才执行的，因此html文档里的onclick事件里执行的函数不能在onload

79000

JavaScript定时器：setTimeout与setInterval 定时器与异步循环数组

深入了解一下 关于JavaScript定时器的知识； setTimeout与setInterval简述 setTimeout与setInterval使用方法基本相同，他们接受两个参数，第一个参数是需要执行的函数...与setInterval唯一不同的是，setTimeout在指定的延迟时间到达后 向ui队列添加一个任务，函数会立即执行，setInterval则是在指定的延迟时间不断的向ui队列添加执行任务，如果你没有手动清除那么...所以Javascript的执行会阻塞UI更新;反之，UI更新也会阻塞Javascript的执行。给用户的表现就是 浏览器在工作时短暂或长时间失去反应，用户的操作不能及时得到响应。...，这是一个非常常见的性能问题，在处理大量运算的时候，我们可以利用延迟执行将代码分成几段分别运行，可以有效改善代码执行速度，并且因为它是异步的 在执行中的空隙，ui会启动更新，因此并不会导致页面空白，用户体验提高...(){ ...... },5000); 总结 合理使用定时器无疑能够增加页面的整体性能，在处理不需要同步，不需要顺序执行的任务时，可以考虑使用setTimeout代替for循环 异步处理任务

2.1K60

前端之BOM和DOM

语法： prompt("请在下方输入","你的答案") 1.2.5.3计时相关 通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。...可以通过DOM创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有...obj.style.zIndex obj.style.fontFamily 2.4事件 事件是HTML 4.0 的新特性之一，使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段...window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。 注意：.onload()函数存在覆盖现象。...处理方法 方法1：利用onload等待某个对象加载完毕再执行 方法2：直接将JS代码写在body的最下方，这样就不会出现调用的函数还没加载的问题了

2.7K30

浏览器之性能指标-INP

这可能是由于主线程上发生的活动（可能是由于脚本加载、解析和编译），资源获取、定时器函数，甚至是由于快速连续发生且彼此重叠的其他交互引起的。...脚本执行与启动过程中的长任务之间的关系 在页面生命周期中，当页面加载时，首先进行渲染，但是这里有一个很迷惑的点，仅仅因为页面已经渲染出来，不意味着页面已经完成加载。...减少输入延迟 避免启动过多的重复定时器 ❝在JavaScript中有两个常用的定时器函数，它们可能会导致输入延迟：setTimeout和setInterval。...布局抖动是性能瓶颈，因为在JavaScript中更新样式，然后立即请求这些样式的值，浏览器被迫执行同步布局工作，而它本来可以在事件回调完成后异步地等待稍后执行。...我们可以限制页面加载期间和响应用户交互期间的渲染工作量的一种方法是利用CSS的content-visibility属性，它实际上是在元素接近视口时延迟渲染它们。

70020

BOM和DOM

，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。...当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 　　HTML DOM 模型被构造为对象的树。...可以通过DOM创建动态的 HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有...事件 　　HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。...window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。 　　　　注意：.onload()函数存在覆盖现象。

52210

前端之BOM和DOM

常用属性和方法： location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面 弹出框 可以在JavaScript...语法： prompt("请在下方输入","你的答案") 计时相关 通过使用JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。...当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM模型被构造为对象的树。 HTML DOM数 ?  ...可以通过DOM创建动态的HTML： JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有...obj.style.zIndex obj.style.fontFamily 事件 HTML 4.0的特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTNL 元素时启动一段

1.6K50

jquery清除定时任务

$('#welcomeMessage').fadeOut(); }); }); 在上面的示例代码中，我们首先在页面加载完成后显示欢迎提示框...同时，我们为提示框中的按钮绑定了点击事件，当用户点击“关闭”按钮时，会清除之前设置的定时任务并立即隐藏提示框。...JavaScript中的setInterval函数在JavaScript中，setInterval函数是一种用于周期性地重复执行指定函数或代码块的方法。...它的工作原理是在每个指定的时间间隔后重复执行指定的函数，直到被取消或页面被关闭。下面将详细介绍setInterval函数的用法和一些注意事项。...(new Date().getTime());}, 1000);注意事项在使用setInterval函数时，需要注意以下几点：重复执行：setInterval会在每个指定的时间间隔后执行指定的函数，因此函数会被周期性地重复执行

7810

浏览器也拥有了原生的 “时间切片” 能力！

Chrome 使用数据显示，用户在页面上花费的时间有 90% 是在网页加载完成后花费的，因此，仔细测量整个页面生命周期的响应能力是非常重要的，这就是 INP 指标评估的内容。...良好的响应能力意味着页面可以快速响应并且与用户进行的交互。当页面响应交互时，最直接的结果就是视觉反馈，由浏览器在浏览器渲染的下一帧中体现。...长任务发生的次数越多，而且运行的时间越长，用户就越有可能感觉到页面运行缓慢，甚至感觉页面完全挂掉了。 不过，代码在浏览器中启动任务并不意味着必须等到任务完成后才能将控制权交还给主线程。...每个小的任务完成后，控制权就会交还给主线程，浏览器就有了时间去及时的完成用户的交互或页面的绘制，所以页面会很丝滑： 这个思路太棒了，在原生的 JavaScript 代码，或者其他框架中我们也想要这样的能力怎么办...这意味着你想要在 yield 后立即恢复的工作不会让位于其他来源的任务（用户交互除外）。 scheduler.yield 是一个向主线程主动屈服并在调用时返回 Promise 的函数。

23520
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券