【浏览器渲染原理】步骤及优化

文章目录

【浏览器渲染原理】步骤及优化
- 一、对浏览器内核的理解
- 二、浏览器的主要组成部分
- 三、浏览器的渲染过程
- 四、浏览器渲染优化
- - ① 针对JavaScript：
  - ② 针对CSS：
  - ③ 针对DOM树、CSSOM树：
  - ④ 减少回流与重绘：
- 五、渲染过程中遇到 JS 文件如何处理？
- 六、什么是文档的预解析？
- 七、CSS 如何阻塞文档解析？
- 八、如何优化关键渲染路径？
- 九、什么情况会阻塞渲染？
- 十、回流与重绘
- - ① 回流与重绘的概念及触发条件
  - - （1）回流（重排）
    - （2）重绘
  - ② 如何避免回流与重绘？
  - ③ 如何优化动画？
- 十一、style样式的渲染
- 十二、link引入

一、对浏览器内核的理解

浏览器内核主要分成两部分：

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式。
JS 引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

二、浏览器的主要组成部分

⽤户界⾯ - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝显示的您请求的⻚⾯外，其他显示的各个部分都属于⽤户界⾯。
浏览器引擎 - 在⽤户界⾯和呈现引擎之间传送指令。
呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
⽹络 - ⽤于⽹络调⽤，⽐如 HTTP 请求。其接⼝与平台⽆关，并为所有平台提供底层实现。
⽤户界⾯后端 - ⽤于绘制基本的窗⼝⼩部件，⽐如组合框和窗⼝。其公开了与平台⽆关的通⽤接⼝，⽽在底层使⽤操作系统的⽤户界⾯⽅法。
JavaScript 解释器。⽤于解析和执⾏ JavaScript 代码。
数据存储 - 这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“⽹络数据库”，这是⼀个完整（但是轻便）的浏览器内数据库。

值得注意的是，和⼤多数浏览器不同，Chrome 浏览器的每个标签⻚都分别对应⼀个呈现引擎实例。每个标签⻚都是⼀个独⽴的进程。

三、浏览器的渲染过程

解析: 浏览器读取的代码的过程，就是解析。
渲染: 渲染完毕之后，用户就能看见对应的东西

一个渲染引擎主要包括：HTML解释器，css解析器，JavaScript引擎，布局Layout模块，绘图模块

HTML解析器 : 解析HTML文档的解析，主要作用是将HTML文本解析为DM树。
CSS解析器: 它的作业是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施
JavaScript引擎: 使用JavaScript代码可以修改网页的内容，也能修改css的信息，JavaScript引擎能够解释JavaScript代码，并通过DOM接口操作页面。
布局(Layout):在DOM创建之后,需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息。
绘图模块(paint)：使用图形库将布局计算后的各个网页的节点绘制层图像结构。

点击这里

【浏览器渲染原理】步骤及优化相关推荐

浏览器渲染原理以及性能优化
浏览器渲染原理以及性能优化浏览器渲染原理进程与线程 Request请求阶段 Response响应阶段浏览器渲染网页注意事项浏览器渲染网页阻塞顺序 DOM的重绘和回流 Repaint & ...
【前端性能优化】浏览器渲染原理与性能优化
目录 1. 浏览器渲染基本步骤 2. 构建DOM树.CSSOM树 3. 构建渲染树 4. 计算渲染树的布局 5. 将布局渲染到屏幕上 6. 渲染优化 1. 浏览器渲染基本步骤浏览器主要有以下步骤: ...
前端浏览器渲染原理及优化
文章目录一.浏览器组成 1. 对浏览器内核的理解 2. 浏览器的主要组成部分二.浏览器渲染原理 1.浏览器的渲染过程步骤一: 步骤二: 步骤三: 步骤四: 步骤五: 2.相关概念 ①重排(更新元 ...
前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化
一.浏览器渲染原理和关键渲染路径浏览器构建渲染树,DOM 树和 CSSDOM 树合成为 Render Tree 渲染树. 浏览器的渲染流程,如下所示: JavaScript -> Style ...
浏览器渲染原理的学习与总结
参考文章:浏览器渲染原理浏览器渲染原理 1. 进程和线程进程包涵线程, 微信是一个进程, 里面有很多诸如用户登录等线程. a.线程共享内存, 进程独立内存: 进程与进程之间是相互独立的, 他们各自 ...
Chrome浏览器渲染原理笔记
以前没怎么系统性的深入学习这方面,今天看了篇文章后还是觉得要好好整理归纳下的.顺便尝试能不能养成写笔记的习惯. 目录浏览器的架构 Chrome浏览器的多进程架构多进程架构的好处多进程架构优化 C ...
浏览器渲染机制面试_浏览器渲染原理
本文目录结构问题浏览器渲染原理渲染过程 1. 浏览器接收到 HTML ⽂件并转换为 DOM 树当我们打开⼀个⽹⻚时,浏览器都会去请求对应的 HTML ⽂件.虽然平时我们写代码时都会分为 JS ...
浏览器渲染机制面试_前端面试大全：浏览器渲染原理-文件无法渲染
在这一篇文章中,我们将一起学习浏览器渲染原理这部分的知识.你可能会有疑问,我又不是做浏览器研发的,为什么要来学习这个?其实我们学习浏览器渲染原理更多的是为了解决性能的问题,如果你不了解这部分的知识,你 ...
如何从8 道面试题中，看出浏览器渲染过程与性能优化
前言移动互联网时代,用户对于网页的打开速度要求越来越高.百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图所示. 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 ...

【浏览器渲染原理】步骤及优化

【浏览器渲染原理】步骤及优化

文章目录

一、对浏览器内核的理解

二、浏览器的主要组成部分

三、浏览器的渲染过程

【浏览器渲染原理】步骤及优化相关推荐

最新文章

热门文章