首页 > 其他分享 >【前端面试】采用react前后,浏览器-解析渲染UI的变化

【前端面试】采用react前后,浏览器-解析渲染UI的变化

时间:2024-09-03 21:21:20浏览次数:11  
标签:浏览器 渲染 DOM react HTML UI 文档 解析

浏览器渲染html

浏览器解析和渲染 UI(用户界面),特别是 HTML 文档,是一个复杂的过程,涉及到多个阶段。以下是浏览器从接收 HTML 文档到显示渲染后的页面的一般步骤:

1. 下载 HTML 文档

  • 用户输入 URL 或点击链接时,浏览器会向服务器请求 HTML 文档。
  • 服务器响应请求,并将 HTML 文档发送回浏览器。

2. 解析 HTML

  • 浏览器开始解析 HTML 文档,构建一个 DOM(文档对象模型)树。
  • DOM 树是由节点组成的,每个节点代表 HTML 文档中的一个元素。

3. 解析 CSS

  • 浏览器同时解析关联的 CSS 样式表,构建一个 CSSOM(CSS 对象模型)树。
  • CSSOM 树包含了所有样式信息,用于确定如何显示 DOM 树中的每个元素。

4. 构建渲染树

  • 浏览器将 DOM 树和 CSSOM 树合并,创建一个渲染树。
  • 渲染树包含了 DOM 树中的所有可见元素,以及它们的样式信息。

5. 布局(Layout)

  • 浏览器对渲染树进行布局,也称为“流布局”(flow layout)。
  • 这一步骤确定了每个元素在页面上的确切位置和大小。

6. 绘制(Painting)

  • 浏览器使用渲染树的信息来绘制页面上的每个元素。
  • 这一步骤涉及到将元素的样式、颜色、图片等绘制到屏幕上。

7. 合成(Compositing)

  • 对于有层叠上下文(如使用 CSS 的 transformopacityfilter 属性)的元素,浏览器会进行合成。
  • 合成是将页面的各个部分合并到最终的像素输出上的过程。

8. 显示页面

  • 一旦绘制和合成完成,浏览器就会显示渲染后的页面。
  • 用户现在可以看到并与之交互。

9. JavaScript 执行

  • 如果 HTML 文档中包含 JavaScript 代码,浏览器会在不影响解析的情况下延迟执行,或者在文档解析完成后执行。
  • JavaScript 可以修改 DOM 和 CSSOM,这可能导致浏览器重新执行上述渲染流程的一部分。

10. 重排(Reflow)和重绘(Repaint)

- 当 DOM 或 CSSOM 发生变化时,浏览器可能需要重新执行布局、绘制或合成。
- 这些变化可能是由于用户交互、JavaScript 操作或浏览器窗口大小的改变。

浏览器的渲染引擎(如 Chrome 的 Blink、Firefox 的 Geck

标签:浏览器,渲染,DOM,react,HTML,UI,文档,解析
From: https://blog.csdn.net/weixin_43342290/article/details/141823055

相关文章

  • UI自动化如何建立+如何进行元素定位
    下载驱动mac下载驱动的方法seleniummacOSchromedrivermacOS安装Selenium配置ChromeDriver_seleniumide谷歌浏览器驱动下载mac系统-CSDN博客win下载驱动的方法Chromedriver安装教程(简洁版)-CSDN博客驱动-浏览器更新的链接https://www.cnblogs.com/aiyablog/arti......
  • npm install时一直idealTree:npm: sill idealTree buildDeps的解决方案
    修改下镜像的地址。1、采用新的镜像地址,进入cmd之后输入://1.npm的命令npmconfigsetregistryhttps://registry.npmmirror.com//2.yarn的命令yarnconfigsetregistryhttps://registry.npmmirror.com2、查看是否安装成功://npm的命令npmconfiggetregi......
  • SpringBoot3.x+MyBatisPlus+druid多数据源配置
    1引言本章主要介绍SpringBoot3.x多数据源配置,以及在此基础上配置分页拦截,自动填充功等功能,源码链接在文章最后。下面列出几个重要文件进行介绍。2项目结构整体项目结构如下,主要介绍配置文件和配置类。3主要代码3.1pom.xml注意SpringBoot3.x对应依赖为mybatis-plu......
  • 【花雕学编程】Arduino FOC 之并联五连杆算法
    Arduino是一个开放源码的电子原型平台,它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板,它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的,你可以使用ArduinoIDE(集成开发环境)来编写、......
  • 【花雕学编程】Arduino FOC 之步进电机正反转驱动、AS5600编码器信息读取及速度检测
    Arduino是一个开放源码的电子原型平台,它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板,它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的,你可以使用ArduinoIDE(集成开发环境)来编写、......
  • 谷歌浏览器看视频卡顿原因及解决方法
    谷歌浏览器是一款非常不错的网上浏览工具,用户可以使用它来在线浏览各种各样的视频。不过有些用户在观看过程中可能会遇到视频卡顿的情况,这很影响我们的观看体验。接下来就给大家介绍一下谷歌浏览器看视频卡顿的原因,并附上解决方法,帮助你恢复流畅的观看体验。谷歌浏览器看视频......
  • Stable Diffusion进阶篇,ComfyUI文字生成视频的一条龙服务(附完整工作流)
    有些小伙伴发现了一个问题,那就是根据图片生成出来的视频看着怪怪的:前半段看着好像还可以,但是后面部分的面部就开始崩坏了。而今天这篇笔记则是要简单了解一下一些进阶参数以及一些文生图生视频的内容,不然的话我担心内容太少字数都凑不够。我这里准备了ComfyUI文字生成......
  • Neural Magic发布GuideLLM:评估和优化大型语言模型(LLM)部署的强大工具
    大型语言模型(LLMs)的部署和优化已成为各种应用的关键。NeuralMagic推出了GuideLLM,以应对对高效、可扩展且具有成本效益的LLM部署日益增长的需求。这款强大的开源工具旨在评估和优化LLM的部署,以确保它们在满足现实中的推理需求的同时,具有高性能和最小的资源消耗。GuideLLM概述......
  • 实战复杂低代码项目React从架构到拆解
    实战复杂低代码项目:‌React从架构到拆解随着技术的不断进步和业务需求的日益复杂,‌低代码平台(‌Low-CodePlatform)‌已成为现代软件开发领域中的热门工具。‌而基于React的低代码平台,‌更是凭借其组件化、‌响应式、‌数据驱动等特性,‌为开发者提供了一种高效构建应用程序的新途......
  • Vue3+Vite+Vant-UI+Pinia+VueUse开发双端业务驱动技术栈商用项目
    前言:个人git仓库,全是干货一、本次搭建项目涉及到vue3、vite、pinia、vue-router、typescript、element-plus,下面先简单介绍一下大家比较陌生的框架或库1、vue3vue团队官宣:2022年2月7日,vue3作为vue的默认版本。现在打开vue官网,界面默认显示的是vue3版本的指导文档。vue团队在......