网页的加载和执行顺序
了解加载过程
网页加载时,会发生几个事件以特定顺序发生:
-
HTML 下载和解析: 浏览器首先获取并解析 HTML 文档。解析 HTML 时,浏览器创建文档对象模型 (DOM),它表示页面的结构。
-
外部资源加载: 在解析 HTML 时,浏览器遇到外部资源CSS 和 JavaScript 文件等资源。这些资源从文档中较早出现的资源开始并行下载。
-
阻塞和异步加载:遇到 标签时,浏览器会暂停 HTML 解析并等待 JavaScript 文件加载。但是,外部 CSS 文件是异步加载的,允许在下载时继续解析。
-
CSS 应用程序: 下载 CSS 文件后,浏览器会解析并应用它们。样式规则应用于已经构建的 DOM,影响页面的外观。
-
内联 JavaScript 执行:内联 <script>;块一旦被解析就会被执行。它们与 HTML 解析器在同一线程中运行,并且可以修改 DOM。</script>
-
DOM 内容加载事件: 一旦 HTML 文档被完全解析,就会触发 DOMContentLoaded 事件。这表明 HTML 和内联 JavaScript 已被执行,并且 DOM 已准备好进行操作。
-
JavaScript 执行(外部):外部 JavaScript 文件在解析和应用后完全加载并执行所有CSS。它们可以与 DOM 交互并修改页面的行为。
-
窗口加载事件: 当整个页面(包括图像和外部脚本等所有资源)完成时,将触发 window.onload 事件加载中。它通常用于需要准备好整页的任务。
特定问题
-
$(document).ready 在触发 DOMContentLoaded 事件后执行,此时 HTML 和内联 JavaScript 已加载
-
abc.jpg 首先被下载并显示,而 kkk.png 被下载并在 JavaScript 代码执行并设置 src 属性时替换它图片至“kkk.png”。
浏览器差异
不同的浏览器处理资源加载和执行的方式可能略有不同。例如,Firefox 有一项设置限制每个域的同时请求数量,从而影响资源下载行为。此外,缓存机制和网络条件也会影响这些事件的时间和顺序。
以上是网页如何加载和执行:分步指南?的详细内容。更多信息请关注PHP中文网其他相关文章!