浏览器解析url--＞建立TCP连接--＞发起https请求--＞关键渲染路径CRP

于 2024-08-23 14:25:38 发布
阅读量513 收藏 6
点赞数 17
分类专栏： 前端 开发 文章标签： tcp/ip 网络协议 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28838891/article/details/140531535
版权
开发 同时被 2 个专栏收录
58 篇文章 0 订阅
订阅专栏
前端
53 篇文章 14 订阅
订阅专栏

目录

1.解析合成url->本地缓存?->域名缓存?->DNS解析IP/端口号

2.与对应服务器建立TCP->HTTPS请求->返回html文件

3.关键渲染路径（CRP，Critical Rendering Path）

渲染进程 

0.解析HTML标签

a. 并行加载额外资源

猜测预加载（现代浏览器）：全文扫描，额外HTML和CSS

b.增量构建 DOM 树

c.CSS并行

style代码放在头部：避免无样式内容闪烁（FOUC，Flash of Unstyled Content）

d.JS阻塞

同步加载

普通js/sync：阻塞 DOM加载+解析

JS代码放在底部：HTML解析完再加载执行脚本

异步加载

async：脚本加载完就执行，无依赖

defer：HTML解析完再执行脚本，依赖

1.HTML增量构建DOM树：与构建CSSOM并行

1.CSS构建CSSOM 树：快

1.1格式化样式表：->浏览器可识别的结构-styleSheets

1.2标准化样式表：相对/助记->具体值（em->px，red->rgba(255,0,0,0)）

1.3计算每个DOM节点具体样式

计算规则：继承，层叠（样式优先级）

1.4JS解析和执行可能修改 DOM 结构和 CSS 样式

2.DOM树 + CSSOM 树=渲染树：确定DOM样式，不包括不显示元素

增量更新，优先用户可见区域

3.在渲染树上布局：确定DOM尺寸位置（如重排/回流）

4.绘制：盒子->像素（如重绘）

硬件加速层：布局树分层，用GPU加速绘制

创建新图层的情况

a.层叠上下文

b.剪裁：滚动条和内容提升为一个图层

层爆炸

5.合成分层：正确顺序显示

不回流/重绘只用合成举例：transform来实现动画效果

6.交互

Load ：页面的所有资源（DOM，CSS，图片）

DOMContentLoaded：DOM

实践意义

防抖/节流

createDocumentFragment批量操作DOM：避免插入引起的重排

*固定大小的图像可定义尺寸：避免计算引起的重排

will-change**性能问题的最后手段（不要过度准备），脚本开启和关闭will-change

参考链接

DNS，缓存，TCP，https，dom详情介绍等见超链接，此处不再赘述

1.解析合成url->本地缓存?->域名缓存?->DNS解析IP/端口号

浏览器缓存： HTTP 标头中的缓存控制信息（如 Cache-Control、Expires、ETag 等）

2.与对应服务器建立TCP->HTTPS请求->返回html文件

3.关键渲染路径（CRP，Critical Rendering Path）

渲染进程 

  • GUI渲染线程：渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。如重绘（Repaint）、回流（Reflow）时
  • JS引擎线程: 与GUI互斥，当JS执行过程会导致页面出现阻塞
  • 事件触发线程：触发时入队事件，等待JS处理(因为JS单线程)
  • 定时器触发器：因为JS单线程，如果阻塞会影响计时准确，所以需要单独线程
  • Http请求线程：XMLHttpRequest 

0.解析HTML标签

a. 并行加载额外资源

猜测预加载（现代浏览器）：全文扫描，额外HTML和CSS

现代浏览器会有一个轻量级的HTML（或CSS）扫描器继续在文档中扫描，查找那些将来可能能够用到的资源文件的url（如link标签)

也可手动设置link rel="preload"

b.增量构建 DOM 树

c.CSS并行

style代码放在头部：避免无样式内容闪烁（FOUC，Flash of Unstyled Content）

d.JS阻塞

同步加载
普通js/sync：阻塞 DOM加载+解析

在这里插入图片描述

JS可以监听 DOMContentLoaded 事件来确保 DOM 树已经完全构建以防引用还未生成

DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。

JS代码放在底部：HTML解析完再加载执行脚本
异步加载
async：脚本加载完就执行，无依赖

<script type="text/javascript" src="x.min.js" async="async"></script>

在这里插入图片描述

在这里插入图片描述

defer：HTML解析完再执行脚本，依赖

<script type="text/javascript" src="x.min.js" defer="defer"></script>

在这里插入图片描述

在这里插入图片描述

1.HTML增量构建DOM树：与构建CSSOM并行

DOM 使用逻辑树的形式来表示文档。树的每个分支末端都是一个节点，每个节点都包含对象。DOM 方法允许以编程方式来访问树。

DOM 构建是增量的，浏览器可以逐步解析文档并显示内容，提高页面加载的效率，逐步显示。

CSS 是渲染阻塞的：规则可以被覆盖，所以内容不能被渲染直到 CSSOM 完成。

1.CSS构建CSSOM 树：快

CSS 对象模型（CSSOM）可用JS动态地读取和修改 CSS 样式 的 API

css优化—MDN

1.1格式化样式表：->浏览器可识别的结构-styleSheets

浏览器的控制台document.styleSheets可以来查看

1.2标准化样式表：相对/助记->具体值（em->px，red->rgba(255,0,0,0)）

默认全屏浏览器通常是 960px。

1.3计算每个DOM节点具体样式

计算规则：继承，层叠（样式优先级）

级联（Cascading）：

CSS (Cascading Style Sheets)，级联遵循以下优先级顺序（从高到低）：

  • 重要性（!important）：使用 !important 声明的样式具有最高优先级。
  • 来源：浏览器默认样式 < 外部样式表 < 内部样式表 < 内联样式。
  • 特殊性：选择器的特殊性越高，优先级越高。
  • 顺序：后定义的规则会覆盖之前定义的规则，即后面的规则具有更高的优先级。

计算完，会被挂在到window.getComputedStyle，通过JS来获取计算后的样式

1.4JS解析和执行可能修改 DOM 结构和 CSS 样式

2.DOM树 + CSSOM 树=渲染树：确定DOM样式，不包括不显示元素

从 DOM 树的根节点开始，并且决定哪些 CSS 规则被添加

不显示元素及其子代都不会出现在渲染树

增量更新，优先用户可见区域

一旦特定的 DOM 节点和相应的 CSSOM 规则都可用，浏览器就会开始渲染那部分内容

3.在渲染树上布局：确定DOM尺寸位置（如重排/回流）

4.绘制：盒子->像素（如重绘）

硬件加速层：布局树分层，用GPU加速绘制

优化绘制性能：一些 CSS 属性（例如 opacity、transform、filter 等）会触发浏览器使用图形加速硬件（如 GPU）来处理。这些属性的变化需要更高的计算能力和帧速率来实时渲染，并且硬件加速能够更有效地利用设备的 GPU 资源，减少 CPU 的负担，从而提升页面的响应速度和动画的流畅度。

减少页面重绘和重排频率：浏览器需要实时更新元素的位置、尺寸和样式。

如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。

创建新图层的情况
a.层叠上下文
  • 文档根元素（html）；
  • position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
  • position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
  • flex (flex) 容器的子元素，且 z-index 值不为 auto；
  • grid (grid) 容器的子元素，且 z-index 值不为 auto；
  • opacity 属性值小于 1 的元素（参见 the specification for opacity）；
  • mix-blend-mode 属性值不为 normal 的元素；
  • 以下任意属性值不为 none 的元素：
  • isolation 属性值为 isolate 的元素；
  • will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素
  • contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理，不和外部元素比较z-index，遵循样式计算的继承规则

一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。

b.剪裁：滚动条和内容提升为一个图层

剪裁（clip）是指通过 CSS 或者 HTML 属性限制可视区，超出这个区域的内容通常会被隐藏或者通过滚动条来查看。

Overflow 属性

overflow: visible;：内容不会被剪裁，会超出父容器显示。

overflow: hidden;：超出部分被隐藏，不显示在父容器之外。

overflow: scroll;：显示滚动条，用户可以滚动查看内容。

overflow: auto;：如果内容超出，显示滚动条；否则不显示。

优化性能，滚动条和其内容可以在渲染过程中独立处理，而不会影响主要文档流的渲染。

层爆炸

  1. 内存压力增大：每个合成层都可能消耗GPU（图形处理单元）内存，过多的图层会增加内存的使用，尤其是在资源受限的设备上。
  2. 性能下降：虽然单个合成层可以提升性能，但过多的合成层需要额外的处理和内存读写，这可能降低页面的渲染性能。
  3. 可能导致页面崩溃：在极端情况下，内存压力过大可能导致应用程序或浏览器标签页崩溃。

5.合成分层：正确顺序显示

不回流/重绘只用合成举例：transform来实现动画效果

6.交互

如果加载包括正确延迟加载的 JavaScript，并且仅在 onload 事件触发后执行，那么主线程可能会忙于执行脚本，无法用于滚动、触摸和其他交互操作。

Load ：页面的所有资源（DOM，CSS，图片）

DOMContentLoaded：DOM

可交互时间（TTI）是测量从第一个请求导致 DNS 查询和 SSL 连接到页面可交互时所用的时间可交互是在首次内容绘制之后页面在 50ms 内响应用户的交互。

实践意义

防抖/节流

createDocumentFragment批量操作DOM：避免插入引起的重排

文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流

var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

*代表实用程度

*固定大小的图像可定义尺寸：避免计算引起的重排

will-change**性能问题的最后手段（不要过度准备），脚本开启和关闭will-change

  • 脚本开启和关闭：将 will-change 直接添加到样式表中意味着目标元素通常会在不久的将来发生变化，而浏览器会保留优化更长的时间。
  • 过度使用 will-change 将导致内存使用过多，并导致更复杂的渲染发生，因为浏览器试图为可能的更改做准备。这将导致更差的性能。
/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* <custom-ident> 示例  */
will-change: opacity; /* <custom-ident> 示例  */
will-change: left, top; /* 两个 <animatable-feature> 例子 */

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

参考链接

浏览器渲染流程_MDN

浏览器渲染流程_掘金

参宿7
关注
  • 17
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？
Whoopsina的博客
04-26 3091
从一道面试题来看前端页面的生命周期：从浏览器地址栏输入URL后，到页面渲染出来，整个过程都发生了什么？
BC-5390CRP_BC-5180CRP通信协议_V1.0_CH(1).pdf
06-01
附录E 图、表目录 图 1 检验结果、质控数据通信过程示意图.........................................................................5 图 2 工作单查询通信过程示意图.............................................
Part7-4-1 前端页面的生命周期
m0_38066007的博客
12-24 1278
1
浏览器输入URL地址后前端页面的生命周期
随风浅入画
12-05 378
浏览器输入URL地址后前端页面的生命周期
解释一下浏览器解析HTTP的过程
weixin_38881822的博客
07-09 1214
转载：https://juejin.im/post/5caf2ed95188251ac6386e44\ https://www.cnblogs.com/knowledgesea/p/3667395.html 1. 解释一下浏览器解析HTTP的过程 上来就放大招，这个题可深可浅，我整理了一下答案 一次完整的HTTP请求过程 当我们在web浏览器的地址栏中输入： www.baidu.c...
全程C-反应蛋白（CRP）质控液产品技术要求注册参考模板
04-14
全程C-反应蛋白（CRP）质控液是医疗领域中用于确保C-反应蛋白检测准确性和可靠性的关键工具。这种质控液主要用于配合特定的C-反应蛋白（CRP）检测试剂盒进行室内质量控制，确保实验室检测数据的准确性。 产品型号/...
行业分类-设备装置-CRP非免疫纳米金检测试纸条及其制备.zip
08-22
CRP非免疫纳米金检测试纸条是一种先进的生物检测技术，主要用于临床医学、食品安全和环境监测等领域。这种检测方法基于纳米金标记的非免疫反应原理，具有高灵敏度、快速简便的特点，使得现场即时检测（POCT）成为...
行业分类-设备装置-CRP非免疫纳米金检测试纸条及其试剂盒.zip
08-22
CRP非免疫纳米金检测试纸条及其试剂盒是一种先进的生物检测技术，广泛应用于医疗、科研等领域，尤其在临床诊断中扮演着重要角色。这项技术主要基于非免疫反应原理，利用纳米金作为标记物，提高了检测的灵敏度和准确...
行业分类-设备装置-PCT与CRP联检试纸条及其制备方法.zip
08-22
在医疗检测领域，PCT（Procalcitonin）与CRP（C-Reactive Protein）是两种常见的炎症标志物，常用于临床诊断和疾病监测。PCT通常与细菌感染相关，而CRP则对多种类型的炎症反应有响应。两者联检有助于更准确地评估...
TCP&IP网络编程（尹圣雨）简易版回声客户端
月之白牙的博客
08-19 263
端口号随便写了一个，写的是 2345。
linux dig域名DNS 查询与iptables域名ip访问流量限制；PTR 反向解析从 IP 地址到域名的映射
weixin_42357472的博客
08-19 1324
例如，你可以先查询域名的 IP 地址，然后根据这些 IP 地址设置防火墙规则。是一个强大的命令行工具，用于配置 Linux 内核内置的防火墙，即 Netfilter。在 Linux 系统中，你可以使用多种工具和技术来进行 DNS 查询和 IP 限制。这个命令通常用于阻止特定 IP 地址发出的包含特定字符串的数据包。通过这些方法，你可以在 Linux 系统中实现灵活的 DNS 查询和 IP 限制策略。发出的目标端口为 80（HTTP）的 TCP 数据包，如果这些数据包中包含。命令也可以用于 DNS 查询。
Linux系统编程（14）UDP全双工通信和TCP半双工通信
最新发布
weixin_68239724的博客
08-22 649
listen函数将创建的socket套接字设置为监听模式后，创建一个序列用来存储请求连接的设备，accept函数每次将第一个在队列中的请求进行处理后产生一个用来通信的和客户端建立连接的新的套接字 ，用来负责后续的通信。如果有更多的连接请求到达，新的连接可能会被拒绝或未处理，直到队列中有空闲位置。由于TCP面向连接和可靠性高的特性，因此，在使用TCP协议通信时，需要在客户端和服务端之间先建立连接才能进行数据通信。: 指定缓冲区的大小，即要接收的数据的最大字节数。结构体的指针，包含要绑定到的地址信息。
【网络】网络基础概念&&背景&&TCP/IP 五层模型&&跨网络传输详解
m0_74722801的博客
08-18 944
【网络】网络基础概念&&背景&&TCP/IP 五层模型&&跨网络传输详解
网络编程——基于TCP的自动同步云服务器
qq_52479948的博客
08-18 696
基于c语言的简陋云盘程序
Java TCP练习2
Aishangyuwen的博客
08-17 356
Java TCP练习2
网络通信编程UDP/TCP
lijiaweixx的博客
08-22 631
客户端向服务器发送 “我要和你断开连接” 的请求，服务器回复 “好的，可以断开”，服务器再发送 “我也要断开” 的请求，客户端最后回复 “好”，完成四次挥手断开连接。：客户端向服务器发送 “我要和你建立连接” 的请求，服务器回复 “好的，可以建立连接”，客户端再回复 “好”，完成三次握手建立连接。函数：从指定的套接字接收数据，并保存发送方的地址信息。接听客户端的连接请求（这一步完成后连接就建立好了，可以收发数据）。：主要针对服务器程序，绑定的是服务器所在电脑的 IP 地址。监听客户端的连接请求，使用。
【qt】基于tcp的消息发送
yyqzjw的博客
08-18 340
我们需要实现客户端发消息，服务端接收消息。
品牌出海新策略：携手TikTok达人，合作孵化IP实现双赢
wmdage的博客
08-19 634
在当今数字化时代，TikTok达人的IP孵化作为一种创新的合作模式，正逐渐成为品牌出海的新兴策略，通过与有潜力的TikTok达人合作，共同孵化新的IP，品牌不仅能够突破传统营销的局限，还能实现与达人共同成长的双赢局面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值