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

前端系统复习之浏览器渲染机制_第1张图片

二面的内容:

  • 渲染机制

  • JS 运行机制

  • 页面性能

  • 错误监控

本文接下来讲渲染机制。

渲染机制包括的内容:

  • 什么是DOCTYPE及作用

  • 浏览器渲染过程

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

  • Reflow:重排

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

  • Repaint:重绘

  • Layout:布局

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

什么是DOCTYPE及作用

定义

DTD(Document Type Definition):文档类型定义。

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

DOCTYPE:用来声明DTD规范。

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

常见的DOCTYPE声明有几种

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

1、HTML 4.01 Strict:(严格的)

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

2、HTML 4.01 Transitional:(传统的)


PS:该DTD包含所有的HTML元素和属性,但包括展示性的和弃用的元素(比如 font、u下划线等)。

3、HTML 5:

总结:

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

面试时,可以这样回答: HTML 4.01 中有两种写法,一种是严格的,一种是传统的;并且答出二者的区别。 HTML 5的写法是

浏览器的渲染过程

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

前端系统复习之浏览器渲染机制_第2张图片

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

  • DOM Tree:浏览器将HTML解析成树形的数据结构(DOM 树)。

  • CSS Rule Tree:浏览器将CSS解析成树形的数据结构。

  • Render Tree: DOM和CSSOM合并后生成Render Tree。(虽然有了Render Tree,但并不知道节点的位置,需要依靠接下来的layout)

  • layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置(宽高、颜色等)。

  • painting:按照算出来的规则,通过显卡,把内容画到屏幕上。

  • display:打击看到的最终效果。

参考链接:

  • 浏览器渲染原理及流程[荐]

Reflow:重排

定义

重排 Reflow:DOM结果中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算,并根据计算结果将元素放在它该出现的位置,这个过程称之为Reflow。

什么时候触发 Reflow

  • 增加、删除、修改DOM节点时,会导致 Reflow 或 Repaint。

  • 移动DOM的位置,或是加个动画的时候

  • 修改CSS样式时(宽高、display 为none等,都是通过css样式来修改的)

  • 当用户Resize窗口时(移动端没有这个问题),或是滚动的时候,有可能会触发(具体要看浏览器的规则)。

  • 修改网页的默认字体时(这个影响非常严重)。

面试总结:

首先要答出 Reflow 定义;其次,什么时候触发,至少要答出两条。更进一步,面试官可能还会问你怎么避免reflow,这个自己去查查吧。

Repaint:重绘

定义

Repaint重绘制:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器便把这些元素都按照各自的特性绘制一遍,于是页面的内容出现了,这个过程称之为 Repaint。

说白了,页面要呈现的内容,统统画在屏幕上,这就叫 Repaint。

什么时候触发 Repaint

  • DOM改动

  • CSS改动

其实,就是判断当前呈现的内容是否发生变化(无论这个变化是通过DOM改动还是CSS改动)。只要页面显示的内容不一样了,肯定要 Repaint。

面试总结:

面试官经常会问:“如何**尽量减少**Repaint的频率?”

注意, reflow是问“怎么避免”,repaint是问“怎么减少”。Repaint是无法避免的,否则就成了静态页面了。

答案

(1)如果需要创建多个DOM节点,可以使用DocumentFragment创建完,然后一次性地加入document。(加一个节点,就repaint一次,不太好)

(2)将元素的display设置为”none”,完成修改后再把display修改为原来的值。

参考链接:如何减少浏览器repaint和reflow ?

你可能感兴趣的:(前端系统复习)