前端系统复习之浏览器渲染机制

最新推荐文章于 2024-08-25 13:46:04 发布

李天下xue

最新推荐文章于 2024-08-25 13:46:04 发布

阅读量609

点赞数 1

分类专栏：前端系统复习

本文链接：https://blog.csdn.net/xuehangongzi/article/details/82390630

版权

13 篇文章 2 订阅

订阅专栏

本文详细探讨了浏览器的渲染机制，包括DOCTYPE的作用、浏览器渲染过程、Reflow和Repaint的概念及其触发条件。重点讲解了HTML5的DOCTYPE声明、重排Reflow和重绘Repaint的影响因素，为前端面试提供了关键知识点总结。

摘要由CSDN通过智能技术生成

这里写图片描述

二面的内容：

本文接下来讲渲染机制。

渲染机制包括的内容：

面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。

面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。

这里的Layout指的是浏览器的Layout。

DTD（Document Type Definition）：文档类型定义。

是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。（说白了就是：DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我）

DOCTYPE：用来声明DTD规范。

一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。（说白了，DOCTYPE就是用来声明DTD的）

面试官紧接着会问，常见的 DOCTYPE 有哪些，以及 HTML5 的 DOCTYPE 怎么写。

1、HTML 4.01 Strict：（严格的）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

PS：该DTD包含所有的HTML元素和属性，但不包括展示性的和弃用的元素（比如 font、u下划线等，这些是被废弃了的）。

2、HTML 4.01 Transitional：（传统的）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

PS：该DTD包含所有的HTML元素和属性，但包括展示性的和弃用的元素（比如 font、u下划线等）。

3、HTML 5：

<!DOCTYPE html>

总结：

面试时，不会让你写出 HTML 4.01的写法，因为大家都记不住。但是要记住 HTML 5 的写法，别看它简单，知道的人还真不多。

面试时，可以这样回答： HTML 4.01 中有两种写法，一种是严格的，一种是传统的；并且答出二者的区别。 HTML 5的写法是<!DOCTYPE html>。

浏览器的渲染过程非常复杂，但是面试只用说几句话就行了，不然太耗时间。如何快速简洁地描述清楚，是关键。

这里先解释一下几个概念，方便大家理解：

DOM Tree：浏览器将HTML解析成树形的数据结构（DOM 树）。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。（虽然有了Render Tree，但并不知道节点的位置，需要依靠接下来的layout）
layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置(宽高、颜色等)。
painting：按照算出来的规则，通过显卡，把内容画到屏幕上。
display：打击看到的最终效果。

参考链接：