前端页面渲染流程

本文记录一下对前端渲染流程的理解

HTTP响应原理

用户请求url，服务器响应HTML CSS

JavaScript文件等，通过多个http请求，响应的文件在浏览器中被处理，组合成见到的网页，这个过程被称为渲染。

浏览器处理HTML

某些 HTML 元素在解析时将触发更多 HTTP 请求：

• link元素引用外部 CSS 样式表。-
• script元素引用外部 JavaScript 文件。
• image，video和 audio等元素，这些元素引用要嵌入到网页中的媒体文件。

  解析CSS并呈现页面

  接下来，让我们看看 CSS 是如何处理的。

  1. 浏览器解析在页面上找到的 CSS（包含在 HTML 文件中，或从外部样式表中获取），并根据它们将应用于哪些 HTML 元素（在 DOM 中表示为称为节点的项目）将不同的 CSS 样式规则排序到不同的“桶”中。然后，浏览器根据需要将样式附加到不同的元素（此中间步骤称为渲染树）。
  2. 在应用规则后，渲染树将按照它应该出现的结构进行布局。这包括要嵌入到页面中的任何图像和其他媒体文件。
  3. 页面的视觉显示显示在屏幕上（此阶段称为 painting）。

  处理JavaScript

  在页面上找到的任何 JavaScript（包含在 HTML

  文件中或从外部脚本文件获取）都会被解析、解释、编译和执行。这发生在最终页面渲染完成之前的某个时候——毕竟，一些 JavaScript

  可能会影响渲染，例如通过向 DOM 添加节点或修改现有节点。

  Ajax-asynchronous JavaScript And XML

  同步与异步请求

  

  

  在实际业务中公司一般会封装request，看源码调用即可。

  浏览器渲染过程总结