页面加载过程

学不会只能哭

已于 2023-03-18 21:55:41 修改

阅读量4.2k

点赞数

分类专栏：前端学习笔记文章标签： html Powered by 金山文档

于 2023-02-20 22:29:01 首次发布

本文链接：https://blog.csdn.net/m0_61696809/article/details/129133214

版权

前端学习笔记专栏收录该内容

52 篇文章 0 订阅

订阅专栏

网址到页面加载完成详细流程

用户在浏览器中输入一个网址或者点击链接时，浏览器开始加载页面。页面的加载过程可以分为如下几个阶段：

URL 解析：浏览器将输入的 URL 解析成协议、主机名、端口号、路径等各个部分。

DNS 查询：浏览器将解析得到的主机名转换为 IP 地址，需要通过 DNS 查询来完成。

建立 TCP 连接：浏览器向服务器发送一个 TCP 连接请求，并进行三次握手来建立连接。

发送 HTTP 请求：浏览器向服务器发送 HTTP 请求，请求包括请求行、请求头、请求体等。

接收 HTTP 响应：服务器接收到请求后，会返回一个 HTTP 响应，响应包括状态行、响应头、响应体等。

HTML 解析：浏览器开始解析响应内容，如果响应内容是 HTML，浏览器会将其分解成节点树。

DOM 构建：浏览器根据解析得到的节点树构建出 DOM 树。

CSS 解析和渲染：

解析 CSS：

浏览器通过解析 CSS 文件，生成一颗 CSSOM 树（CSS Object Model），表示样式的结构。

合并 DOM 和 CSSOM：

浏览器将 DOM 和 CSSOM 合并为一颗渲染树，表示文档的最终结构和样式。

Layout(回流、也叫重排):

根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（在视口的位置，大小）

Painting(重绘):

根据渲染树以及回流得到的几何信息，得到节点的绝对像素。

Display:

将像素发送给GPU，展示在页面上。

脚本执行：如果页面中包含脚本，浏览器会执行它们。脚本可能会修改 DOM 树、触发重新渲染等操作。

图片和其他资源下载：如果页面中包含图片、样式表、脚本文件等资源，浏览器会开始下载它们。

页面完成加载：所有资源下载完成后，页面完成加载，此时浏览器会触发 onload 事件。

以上步骤并不是严格按照顺序依次执行的，它们之间可能存在重叠、并行等情况。此外，页面加载的时间还受到网络状况、页面大小、服务器性能等因素的影响，因此加载时间会有所不同。

如何生成渲染树?

从DOM树的根节点开始遍历每个可见节点。

对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。

根据每个可见节点以及其对应的样式，组合生成渲染树。

哪些是不可见节点？

一些不会渲染输出的节点，如script、link等。

一些通过css隐藏的节点

script、meta 等在页面上显示不出来的节点

display: none 的节点

head 节点

页面的加载状态

页面的加载状态可以分为以下几种：

Uninitialized（未初始化）：这是文档刚被创建或已被unload()方法卸载时的状态。

Loading（正在加载）：文档对象已经创建，并开始加载其资源，例如图片和CSS文件等。

Interactive（已交互）：文档对象已经被创建，但是仍然存在一些正在加载的资源，此时用户可以看到页面的部分内容。

Complete（已完成）：文档对象已经被创建，所有的资源已经加载完成，此时页面已经可以完整地展示给用户。

其中，第3种状态（Interactive）比较特殊，它表示文档已经被解析完成，可以进行DOM操作，但是一些图片、视频等资源还没有加载完成，此时用户可能会看到一些空白的区域或占位符，但是整个页面的框架已经构建完成。

readyStage页面属性

我们可以通过监控document.readyState属性来获取页面的加载状态。document.readyState有以下三种值：

loading：正在加载页面，文档还没有解析完成。

interactive：文档已经解析完成，但是还有一些资源没有加载完成。

complete：页面已经全部加载完成，包括所有的资源（图片、CSS、JS等）

onload使用方法

onload 是一个事件处理函数，它会在浏览器加载页面时触发。通常情况下，我们会在页面的 body 元素上添加 onload 事件处理函数，以便在页面加载完成后执行一些操作，例如：

执行一些初始化操作：在页面加载完成后，我们可以执行一些初始化操作，例如初始化页面元素、加载第三方库等。

向服务器发送异步请求：如果页面中需要向服务器发送异步请求获取数据，我们可以将请求放在 onload 事件处理函数中，以确保请求在页面加载完成后执行。

执行一些动画效果：在页面加载完成后，我们可以执行一些动画效果，例如淡入、滑动等。

需要注意的是，onload 事件处理函数的执行时间会受到页面大小、网络状况、服务器性能等因素的影响，因此如果需要执行一些耗时操作，最好在异步操作中执行，以免阻塞页面加载。

onload 方法。

图片等资源加载完成后执行操作

如果页面中需要加载大量的图片或其他资源，我们可能需要在这些资源加载完成后执行一些操作。例如，我们可以使用以下代码，当页面中的所有图片加载完成后，在控制台输出一条消息：

<body onload="console.log('All images loaded!')">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  ...
</body>

页面初始化操作

在页面加载完成后，我们可能需要执行一些初始化操作，例如初始化页面元素、绑定事件等。例如，我们可以使用以下代码，在页面加载完成后执行一些初始化操作：

<body onload="init()">
  <div id="content">...</div>
  ...
  <script>
    function init() {
      var content=document.getElementById('content');
      content.innerHTML='Hello, world!';
      // 绑定事件等
    }
  </script>
</body>

异步请求

在页面加载完成后，我们可能需要向服务器发送异步请求获取数据。例如，我们可以使用以下代码，在页面加载完成后向服务器发送异步请求，获取用户信息并更新页面：

<body onload="loadUserInfo()">
  <div id="user-info">Loading...</div>
  ...
  <script>
    functionl oadUserInfo() {
      // 向服务器发送异步请求获取用户信息
      var xhr=newXMLHttpRequest();
      xhr.onreadystatechange=function() {
        if (xhr.readyState===4&&xhr.status===200) {
          var userInfo=JSON.parse(xhr.responseText);
          // 更新页面中的用户信息
          var userInfoElement=document.getElementById('user-info');
          userInfoElement.innerHTML=userInfo.name+' ('+userInfo.email+')';
        }
      };
      xhr.open('GET', '/api/user', true);
      xhr.send();
    }
  </script>
</body>

window.onload

window.onload 和前面提到的 onload 事件是一样的，都是在页面加载完成后触发。不同的是，window.onload 是通过 JavaScript 代码来注册事件处理程序，而不是通过 HTML 元素的 onload 属性来注册。具体来说，我们可以使用以下代码来注册 window.onload 事件处理程序：

window.onload=function() {
  // 页面加载完成后执行的操作
};

这里的 window 对象表示全局对象，在浏览器环境中等价于 window 关键字。我们可以将上述代码放在 <script> 标签中，或者放在外部 JavaScript 文件中，并在页面中引入这个文件，来实现在页面加载完成后执行一些操作的效果。例如：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <scriptsrc="script.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>
window.onload = function() {
  console.log('Page loaded!');
};

在上述示例中，当页面加载完成后，会在控制台输出一条消息 "Page loaded!"。由于 JavaScript 代码是在页面加载完成后执行的，因此 window.onload 事件处理程序也会在页面加载完成后执行。

常见方法举例

1、readystatechange 事件：

readystatechange 事件：这个事件在页面的状态变化时触发，包括 loading、interactive、complete 等状态。我们可以使用 document.readyState 属性来获取当前页面的加载状态，然后在 readystatechange 事件中根据需要执行一些操作。通常情况下，我们会在 readystatechange 事件中判断 document.readyState 是否为 complete，如果是则表示页面已经加载完成。

document.onreadystatechange=function() {
  console.log(document.readyState);
  if (document.readyState==="complete") {
    // 页面加载完成
  }
}

2、pageshow 事件：

pageshow 事件：这个事件在页面被加载时触发，并且在每次显示页面时也会触发。例如，当用户从浏览器的历史记录中返回到当前页面时，会触发 pageshow 事件。这个事件和 onload 事件有些相似，但是 pageshow 事件可以在页面刷新和后退/前进操作时触发。

onpageshow 事件在用户浏览网页时触发。onpageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

window.addEventListener("pageshow", function(event) {
  if (event.persisted) {
    // 从浏览器缓存中恢复页面时触发
  } else {
    // 从新加载页面时触发
  }
});

3、beforeunload 事件：

beforeunload 事件：这个事件在页面即将卸载时触发，通常用于提示用户保存修改或确认是否要离开当前页面。在 beforeunload 事件中，我们可以使用 event.returnValue 属性来设置提示消息

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue='确定要离开当前页面吗？';
});

4、DOMContentLoaded 事件：

DOMContentLoaded 事件：这个事件在文档的 DOM 树构建完成后触发，即在页面的 HTML 和 JavaScript 文件都被下载完成并解析完毕后触发。与 onload 事件不同的是，DOMContentLoaded 事件

不需要等到所有外部资源（如图片、样式表、脚本等）都加载完成才触发。

这个事件通常用于在页面加载完成后执行一些初始化操作，例如操作 DOM 元素、绑定事件等。

document.addEventListener('DOMContentLoaded', function() {
  // DOM 树构建完成后执行的代码
});

5、onload 事件：

onload 事件：这个事件在页面及其所有外部资源都加载完成后触发。在 onload 事件中，我们可以执行一些需要等待页面加载完成后才能执行的操作，例如操作 DOM 元素、发送 AJAX 请求等。一般来说，我们可以使用 window.onload 或者 addEventListener('load', handler) 来注册 onload 事件处理程序。

window.onload=function() {
  // 页面及其所有外部资源都加载完成后执行的代码
};

学不会只能哭

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
页面加载过程

html加载过程，页面加载状态，onload使用方法，window.onload，readystatechange,pageshow,beforeunload,DOMContentLoaded,onload等作用解析
复制链接

扫一扫