触发window.onload事件时加载了哪些外部资源以及资源的加载顺序是什么？

当浏览器加载一个网页时，它会触发window.onload事件。在这个事件中，浏览器会加载一些外部资源，例如CSS样式表、JavaScript脚本、图片和其他媒体文件等。这些资源的加载顺序取决于它们在HTML文档中的位置和依赖关系。

以下是一些可能会被加载的外部资源：

CSS样式表：这些文件定义了网页的外观和布局。它们通常在HTML文档的<head>部分中引用。
JavaScript脚本：这些文件提供了网页的交互性和动态功能。它们通常在HTML文档的<head>或<body>部分中引用。
图片和其他媒体文件：这些文件用于显示网页上的视觉内容。它们通常在HTML文档的<img>标签或CSS中引用。

在加载这些资源时，浏览器会按照它们在HTML文档中的顺序进行加载。但是，浏览器可能会并行加载多个资源，以提高网页加载速度。此外，如果一个资源依赖于另一个资源（例如，一个JavaScript脚本依赖于一个CSS样式表），那么浏览器会等待依赖的资源加载完成后再加载该资源。

总之，当window.onload事件被触发时，浏览器会加载一些外部资源，并按照它们在HTML文档中的顺序进行加载。这些资源包括CSS样式表、JavaScript脚本、图片和其他媒体文件等。

相关·内容

网站性能优化(二)一定要将CSS置于顶部，JS置于底部吗？

一般，前端主要关心首屏（也就是可视区域内的页面）渲染速度，这也是，为什么要提倡“图片懒加载”的原因。 2. 误区：按照顺序依次下载CSS和JS文件其实外部脚本文件和CSS文件是并行下载的。...： loading.png 一般资源（如图片，CSS文件）的获取和加载不会阻挡当前webkit的渲染过程，但是，某些资源会阻碍主线程渲染（如JS文件），这时，webkit会启动另外一个线程去遍历后面的...有文章将此现象称为“浏览器预解析”：浏览器先对HTML代码做静态分析找到外链的JS和CSS文件，然后并行下载(但是执行顺序不变)。PS：IE>=8 及其他主流浏览器基本都实现了这个功能。...做重排(layout)和重绘(paint)工作； 3.小结为了提高性能，真正需要关心的是“首次必须加载哪些CSS和JS？”，尽可能通过异步方式加载那些并不是首屏必需的外部文件。...加载事件一般在window.onload事件中触发，这时，页面已经完全呈现（相应的资源文件下载完毕），只需要动态创建标签或者标签即可，如下（注意：动态加载文件也可以利用浏览器缓存

8584 0

window的onload事件和domcontentloaded执行顺序

2018-12-20 06:12:04 onload事件支持我们首先来看一下都有哪些支持onload事件。...当window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。...这通常是在用户查看或与页面交互之前执行所需任务的好时机，例如添加事件处理程序和初始化插件。当通过对此方法的连续调用添加多个函数时，它们在DOM按照添加顺序准备就绪时运行。...相反，DOMContentLoaded事件触发后添加的事件侦听器永远不会执行。浏览器还在对象load上提供事件window。当此事件触发时，表示页面上的所有资源都已加载，包括图像。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。

3.7K1 0

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

DOM 树，但像和样式表之类的外部资源可能尚未加载完成。...load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeunload/unload —— 当用户正在离开页面时。...load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。 beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。...window.onload 当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。...当页面和所有资源都加载完成时，window 上的 load 事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。

1.8K1 0

$(document).on和$(#idname).on和$(function(){ })区别

而window.onload会在页面资源全部加载完毕后才会执行。　　...DOM 文档加载步骤：解析 HTML 结构加载外部的脚本和样式文件解析并执行脚本代码执行 $(function(){}) 内对应代码加载图片等二进制资源页面加载完毕，执行 window.onload... 　　$(选择器).click(fn)的使用　　当选中的选择器被点击时触发回调函数fn。...页面加载完，并没有这个元素，所以这段代码点击时，压根没执行。　　...2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。　　3.

2.1K2 0

浏览器渲染页面与DOM相关常见的面试题以及问题

,在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签,这时，浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程...4.layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。　　...但与此同时，如果还有外部文件，则是同时加载（不阻塞后续外部文件link、script加载）。但是外部文件内的代码不会执行，只会在代码解析到它的时候执行。...所以他不会被任何加载过程阻塞，只会在自己加载完成之后执行。但是，异步执行的影响就是，它如要读取dom节点，很可能会失败，因为它的加载和html解析过程没有了先后顺序。...事件监听器可以被添加到节点上并在给定事件发生时触发。什么是DOM渲染？ DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。 DOM树的构建是文档加载完成开始的？

1.2K3 0

监控平台前端SDK开发实践

记录型监控页面访问记录：用户访问了哪些页面。资源加载记录：页面中加载了哪些资源。用户行为记录：用户在页面上做了哪些操作，目前我们只记录用户的点击行为。接口调用相关记录：页面调用了哪些接口。...资源完整性检查资源完整性检查模块的任务是记录页面加载了哪些资源，并进行上报。...当我们排查问题时，可以查看当前页面已经加载成功了哪些资源及其加载顺序，排除因为某些资源没有加载或者加载顺序不当而引起错误的情况。 ?...资源加载完整性检查的上报时机分四类，每次将开始监听到触发上报之间所有记录到的已加载资源一起上报，减少上报请求数： onload：window.onload时触发 onload_timeout: onload...超时（5秒）时触发 async：window.onload后一定延时（5秒）触发，上报后停止监听 hash_change：onhashchange开始监听，一定延时（5秒）触发上报，上报后停止监听内存中维护一个已加载资源的数组

1.9K8 0

jQuery页面加载完毕后执行事件

； } 这几种方法在功能上的效果是一样的，但是三者还是有一些区别的： window.onload 表示的是页面被加载完毕。...$(document).ready(function() 只需要在浏览器把所有的HTML放入DOM tree之后就执行js效果，包括在加载外部图片等资源之前。...所以，建议使用方式：样式控制的，比如图片大小控制，使用$(window).load()； jS事件触发的方法，可以在$(document).ready()里面加载。...; 也就是说页面加载时绑定，真正该触发时触发。...一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

20.8K4 0

HTML解析之DOMContentLoaded和onload

实际上如果了解浏览器解析HTML规则就很清楚原因了，浏览器解析HTML由上往下依次执行，如果遇到会阻塞解析，先执行该JS脚本（如果是外部JS文件还要先加载），执行结束后再接着往下解析，所以上面获取不到...MDN解释：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。...注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。...window.onload 这个就没什么好说的，此时HTML文档解析完成，其他依赖资源也全部加载完成。...DOM树构建完成，触发DOMContentLoaded 其他css、img、iframe等资源如果还未加载完成继续加载。

1.6K2 0

JS的页面生命周期事件

今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾生命周期事件 DOMContentLoaded..., 浏览器完成HTML的加载, 并构建DOM树, 图片和样式等外部资源还没加载完成 load, 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等 beforeunload, 用户即将离开,...DOMContentLoaded DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上 2. window.onload 当包括样式、图像和其他资源的页面被全部加载时...，window 对象上的 load 事件就会被触发 3. window.onunload 当访问者离开页面时，window 对象上的 unload 事件就会被触发。...document.readyState 属性为我们提供了一些关于当前加载状态的信息 loading —— 文档正在被加载。

3.4K3 0

探究网页资源究竟是如何阻塞浏览器加载的

这是布兰的第 15 篇原创一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。...DOM 的加载，更加不会阻塞页面渲染；当图片加载完成的时候，会打印 onload，说明图片延迟了 onload 事件的触发。...DOMContentLoaded 事件触发之前执行；多个 defer 的脚本执行顺序严格按照定义顺序进行，而不是先下载好的先执行； asyn 特点对于 async 的 script，浏览器会继续解析...脚本的执行和 DOMContentLoaded 的触发顺序无法明确谁先谁后，因为脚本可能在 DOM 构建完成时还没下载完，也可能早就下载好了；多个 async，按照谁先下载完成谁先执行的原则进行，所以当它们之间有顺序依赖的时候特别容易出错...DOM，但此时外部资源比如样式和脚本可能还没加载完成，并且该事件需要绑定到 document 对象上；细心的你一定看到了上面的可能二字，为什么当 DOMContentLoaded 触发的时候样式和脚本是可能还没加载完成呢

2.1K3 0

Js框架设计之DomReady

iframe,他不会堵塞Dom构建,但是它会在加载DOM时和其他标签争抢资源(因为iframe会发送http请求,但是http请求有限),们经常看到一些新闻网,上面会挂许多iframe广告, 这些页面一开始加载时就很卡...的错误二、使用DomReady机制解决因DOM解析未完成前使用document.getElementById获取报null错误的问题 1、在早期的浏览器中,提供了一个window.onload方法,这个方法会在浏览器加载完所有的文件...DomReady还可以满足用户提前绑定事件的需求,因为有时页面图片资源过多, window.onload迟迟不能触发,这时若还没有绑定事件,用户点哪个按钮都没有反应。...字符串，指定事件名。 //function 必须。指定要事件触发时执行的函数。 //useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。...之后 //2、当页面包含图片时，onreadystatechange事件会触发在window.onload之后(换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时)

1.5K6 0

浏览器特性

的不同 window.onload 事件表示页面加载完成后才加载 JavaScript 代码。...这里的 “页面加载完成” 指的是在文档装载完成后会触发 load 事件，此时，在文档中的所有对象都在 DOM 中，所有图片，脚本，链接以及子框都完成了装载。...complete 文档和所有子资源已完成加载。load 状态的事件即将被触发。...制定策略一个策略由一系列策略指令所组成，每个策略指令都描述了一个针对某个特定类型资源以及生效范围的策略。...； manifest-src 将哪些清单应用于资源； media-src 使用和元素指定用于加载媒体的有效源； object-src 指定，<embed

1.3K1 0

长期维护更新，前端面试题

虽然现在 HTTP/2 的存在，减少了这种问题的发生，但是在外部资源加载的情况下，仍会花费较长时间。要了解如何减少 HTTP 请求以大幅度缩减加载时间，请阅读WordPress 性能。...外部资源的加载速度随着主机提供商的服务器架构、地点等不同而不同。减少外部请求要做的第一步就是简略地检查网站。研究你网站的每个组成部分，消除任何影响访问者体验不好的成分。...，判断此listener绑定的dom是否处于页面中perload的位置，如果处于则加载异步加载当前图片的资源同时listener会在当前图片加载的过程的loading，loaded，error三种状态触发当前...在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。 React 中 Element 与 Component 的区别是？...；当某个事件触发时，React根据这个内部映射表将事件分派给指定的事件处理函数；当映射表中没有事件处理函数时，React不做任何操作；当一个组件安装或者卸载时，相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除

2.4K4 1

onload 和 domready

博客地址：https://ainyi.com/46 window.onload 事件会在页面或图像加载完成后触发（即所有元素的资源都下载完毕）如果页面上有许多图片、音乐或 falsh 还没加载完成，onload...的 DOM 准备完毕，资源还没加载完"); }) DomReady DomReady 事件就是在 DOM 文档结构准备完毕后触发，即在资源加载前触发 DOMContentLoaded DOMContentLoaded... 事件比 onload 事件快许多，它是在 DOM 准备完毕后触发（不需等待资源下载完毕） DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用，此事件会在 DOM...准备完毕，资源还没加载完"); }) // 在 document 文档加载完成后就可以对 DOM 进行操作（即所有元素的资源都下载完毕） window.onload = function(){...一样，会在页面或图像加载完成后触发（即所有元素的资源都下载完毕），但是： FireFox 的 script 元素不支持 onreadystatechange 事件，只支持 onload 事件 IE 的

2.7K2 0

最常见的 20 个 jQuery 面试问题及答案

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。...如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。　　...另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。...JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。...另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

13.8K3 0

前端知识普及之页面加载

window.onload = function(){ $(".gravatar").on('click',function(){ //... }); //以及其他操作...从微观上分的话，页面加载有两部分一个是以DOMContentLoaded触发为标志的DOM树的渲染完成一个是以辅助资源img,font加载完成为触发标志的onload事件他们两个的具体区别就是"资源的加载...//ready执行 (5) 加载图片等外部文件。 (6) 页面加载完毕。//load执行其实，说到这里，这篇文章就已经结束了。想得美。...performance.timing对象通常，我们可以从performance.timing对象上，获得我们想要的一切时间值.具体有哪些，我就不赘述了。...另外为complete时，这时候图片等相关资源已经加载完成。这个时候模拟触发DOMContentLoaded事件，其实和onload事件触发时间并没有太久的时间距离。

1.6K9 0

jQuery：详解jQuery中的事件（一）

当文档或者它的某些元素发生某些变化或操作时，浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互，但是jQuery增加兵扩展了基本的事件处理机制。...jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。　　...一、jQuery中的事件　　1、加载DOM：　　执行时机：在常规的JavaScript中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法...例如与图片相关的HTML下载完毕，并且已经解析为DOM树了，但是很有可能图片还未完全加载，所以例如图片的高度和宽度等属性就不一定有效。　　...如果处理函数绑定给window对象，则会在所有的内容（包括窗口、框架、对象和图像等）加载完毕后触发，出国处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

1.7K2 0

网站性能优化(三)异步加载脚本

原则上来说，HTML在使用标签加载外部脚本文件时，会顺序下载，顺序执行，并阻碍其他资源文件的下载，比如图片（当然，如今主流浏览器是可以实现JS和CSS文件并行下载）。...不同浏览器表现还是不一致的） loading1.png 为了加速页面渲染，不让脚本文件阻塞其他资源下载，可以考虑“异步加载脚本”的技术。...loading2.png 但是这种方式会阻塞window.onload事件，参考chrome developer timeline: timeline-script.png 优点:：支持跨域加载脚本文件...Script defer和async 两者都支持异步加载文件，不同之处是，defer会在全部资源下载完毕后才执行JS文件；async在脚本文件下载完就立刻执行，并且，async模式加载的JS文件无法依序执行...小结异步加载脚本还普遍存在另一个问题：无法保持多个脚本的执行顺序（除了defer）。

1.4K3 0

高性能Javascript--脚本的无阻塞加载策略

9643 0

jquery面试题目_高并发面试题

如何在点击一个按钮时使用 jQuery 隐藏一个图片？这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。...ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。...JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。...如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。...另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

9.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云