web网页生命周期

生命周期

Web页面的生命周期是指从页面开始加载到页面卸载的整个过程，它包含了一系列的事件和阶段，以下是详细的介绍：
一、加载阶段

DNS解析
- 当用户在浏览器地址栏输入网址并回车，或者点击一个链接时，首先会进行DNS（域名系统）解析。浏览器会将域名（如www.example.com）解析为对应的IP地址。这个过程是通过向本地DNS服务器发送查询请求来完成的，如果本地DNS服务器没有缓存该域名的IP地址，它会向上游DNS服务器进行查询，直到找到对应的IP地址。
TCP连接
- 获取到IP地址后，浏览器会与服务器的IP地址建立TCP连接。TCP连接是一个可靠的连接，它通过三次握手过程来建立。首先，浏览器发送一个SYN（同步）包给服务器；服务器收到后回复一个SYN - ACK（同步 - 确认）包；最后，浏览器再发送一个ACK（确认）包给服务器，这样TCP连接就建立了。
发送HTTP请求
- TCP连接建立后，浏览器会通过这个连接向服务器发送HTTP请求。HTTP请求中包含了请求方法（如GET、POST等）、请求URL、HTTP头部信息（如User - Agent、Accept - Encoding等）等内容。例如，当用户访问一个网页时，浏览器会发送一个GET请求来获取页面的HTML文件。
服务器响应
- 服务器接收到HTTP请求后，会进行处理并返回HTTP响应。HTTP响应中包含了状态码（如200表示成功，404表示未找到等）、响应头部信息（如Content - Type表示内容类型）和响应体（如HTML文件的内容）。浏览器接收到HTTP响应后，会根据响应头部信息来解析响应体。
解析HTML文档
- 浏览器接收到HTML文档后，会开始解析它。浏览器会构建DOM（文档对象模型）树，DOM树是页面元素的层次结构表示。例如，对于一个简单的HTML文档：
  1
  2
  3
  4
  5
  6
  7
  8
  9
  <html>
  <head>
  <title>示例页面</title>
  </head>
  <body>
  <h1>欢迎来到示例页面</h1>
  <p>这是一个段落。</p>
  </body>
  </html>
  浏览器会构建出一个DOM树，树的根节点是<html>，它有两个子节点<head>和<body>，<head>下有一个<title>节点，<body>下有一个<h1>节点和一个<p>节点。
加载CSS和JavaScript文件
- 在解析HTML文档的过程中，如果遇到<link>标签引入的CSS文件或者<script>标签引入的JavaScript文件，浏览器会发起额外的HTTP请求来加载这些资源。对于CSS文件，浏览器会解析它并构建CSSOM（CSS对象模型），CSSOM和DOM树结合会生成渲染树。渲染树包含了页面中可见元素的所有样式信息。对于JavaScript文件，浏览器会执行其中的代码，JavaScript代码可能会修改DOM树或者影响页面的渲染。
页面渲染
- 当DOM树、CSSOM和所有必要的资源都加载完成后，浏览器会开始渲染页面。渲染过程包括布局（计算元素的大小和位置）、绘制（将元素绘制到屏幕上）等步骤。最终，用户可以看到页面的内容。
  二、交互阶段
用户与页面交互
- 页面加载完成后，用户可以与页面进行交互，如点击按钮、输入文本、滚动页面等。这些交互会触发相应的事件，例如点击按钮会触发click事件。JavaScript可以监听这些事件并做出响应。例如，一个登录表单页面，当用户点击“登录”按钮时，JavaScript会获取用户输入的用户名和密码，然后进行验证或者发送到服务器进行处理。
页面更新
- 根据用户的交互或者JavaScript代码的执行，页面可能会进行更新。例如，使用Ajax技术从服务器获取新的数据并更新页面的一部分内容，而不需要重新加载整个页面。或者，JavaScript代码修改了DOM元素的样式或者内容，导致页面重新渲染部分区域。
  三、卸载阶段
页面卸载
- 当用户离开当前页面，比如点击浏览器的后退按钮、关闭标签页或者导航到其他页面时，页面会开始卸载。在页面卸载过程中，会触发beforeunload和unload事件。beforeunload事件可以在用户离开页面之前进行一些操作，例如提示用户是否保存当前页面的数据。unload事件是在页面真正卸载之前触发的，可以用来进行一些清理工作，如清除定时器、断开WebSocket连接等。
资源释放
- 页面卸载完成后，浏览器会释放与该页面相关的资源，如内存中存储的DOM树、CSSOM、JavaScript对象等。这些资源的释放有助于减少内存占用，为新的页面加载腾出空间。

输入域名到显示页面过程

当你在浏览器地址栏输入一个域名并按下回车键，到最终页面显示出来，这个过程中发生了很多事情。以下是这个过程的大致步骤：

DNS解析：
- 浏览器首先检查本地缓存（如hosts文件、浏览器缓存等）是否已经解析过该域名。
- 如果本地没有缓存，浏览器会向DNS服务器发送请求，将域名解析为IP地址。
- DNS服务器会返回域名对应的IP地址给浏览器。
建立TCP连接：
- 浏览器使用解析得到的IP地址，通过TCP协议与服务器建立连接。这涉及到一个称为“三次握手”的过程。
发送HTTP请求：
- TCP连接建立后，浏览器会构建一个HTTP（或HTTPS）请求，请求中包含请求行（如GET /index.html HTTP/1.1）、请求头（如Host、User-Agent等）和空的请求体（对于GET请求）。
- 浏览器通过TCP连接将HTTP请求发送给服务器。
服务器处理请求：
- 服务器接收到HTTP请求后，会根据请求的URL、方法和头信息等处理请求。
- 服务器可能会查询数据库、调用其他服务或执行其他操作来生成响应内容。
发送HTTP响应：
- 服务器构建HTTP响应，包括状态行（如HTTP/1.1 200 OK）、响应头（如Content-Type、Content-Length等）和响应体（即请求的资源内容，如HTML文档）。
- 服务器通过TCP连接将HTTP响应发送回浏览器。
关闭TCP连接：
- 如果是HTTP/1.0，并且请求头中没有Connection: keep-alive，那么服务器会在发送完响应后关闭TCP连接。
- 如果是HTTP/1.1，并且请求头中有Connection: keep-alive，那么TCP连接会被保持，以便重用，减少后续请求的延迟。
渲染页面：
- 浏览器接收到服务器的响应后，开始解析响应体中的HTML内容，并构建DOM树。
- 浏览器解析CSS样式表，并应用样式到DOM树。
- 浏览器解析JavaScript代码，并执行脚本，这可能会进一步修改DOM树。
- 浏览器进行页面布局（layout）和绘制（paint），最终将页面显示给用户。
加载资源：
- 在页面渲染过程中，浏览器会并行地加载页面中的其他资源，如图片、CSS文件、JavaScript文件等。
- 这些资源的加载和解析也是并行进行的，以提高性能。
页面交互：
- 页面加载完成后，用户可以与页面进行交互，如点击按钮、输入文本等。
- 浏览器会根据用户的交互发送新的请求或执行相应的JavaScript代码。
  这个过程中涉及到网络协议、服务器处理、浏览器渲染等多个复杂的步骤，每个步骤都可能影响页面加载的速度和性能。优化这些步骤是前端性能优化的重要部分。