前端面试之4-1 渲染机制

一面更偏重于基础，二面看知识面是不是广。二面会考场只是体系深度。比如前端，除了css html js对浏览器特性是否掌握，浏览器引擎是否掌握。

不懂就不懂，不要说忘了。问面试官哪些资料能掌握。不要觉得对方为难你。也不要觉得自己很厉害，看不起面试官。

其实大多数人都没看外文。所以不要绝对说哪个方案是对，哪个一定错。大部分人看的都是博客。所以当面试官怀疑你的方案有问题时候，不要争论对错，就说我们查一下相关资料，去验证一下是不是对的。要有严谨态度，查清楚之前，不要妄下结论。

没有深入学习过，被问住了很正常，这时候说好话，说他研究的深，自己研究的没有他研究的深。相对情况下。什么都不会，那就完了。

难度比较深，问的比较多的以下四点：

渲染机制：浏览器怎么渲染页面的。

JS运行机制：js引擎以及浏览器之间怎么完成平时之间的交互的。

页面性能：你开发的页面卡不卡，你用什么方法保证你写的页面是流畅的。

错误监控：各大公司都有自己的代码质量体系，会通过代码提交的时候来控制。通过线上环境的错误收集，来监听你代码在客户端运行是不是出现错误。考察前端人员有没有错误监控能力。

渲染机制：几个概念，没有代码。一般会问：

1、什么是DOCTYPE以及作用。

2、浏览器渲染过程。有的公司会问：浏览器中输入url，发生哪些事情，让你一步一步描写清楚？其中有一步就是浏览器渲染过程。输入url，会有一个dms解析，然后发到服务器，服务器再响应，响应过来，到了客户端，浏览器这边就开始渲染过程。

3、重排Reflow

4、重绘Repaint

5、布局Layout 这个和css布局不同，这个是浏览器的布局方式。

这五个大概念，弄清楚。

DTD告诉浏览器，我是什么文档类型。浏览器根据这个来判断用什么浏览引擎来解析它渲染它。

DOCTYPE 就是直接告诉浏览器什么是DTD。告诉浏览器包含哪个DTD，也就是哪个文档类型。

常见的DOCTYPE 有哪些？写一下HTML5的DOCTYPE怎么写？

一个strict，一个loose。不用记怎么写。知道4.01有两个模式，一个严格模式，一个传统模式。知道HTML5怎么写。能说出严格和宽松的区别。如果严格模式，使用了弃用的元素，页面是是有问题的。宽松模式没有问题。

渲染过程很复杂，但是不会说的那么细。几句话说清就好了。

浏览器拿到HTML和css之后要干什么？

HTML经过HTML parser转化成DOM tree，css按着css规则和css解释器，转成CSSOM Tree，两棵树之间一整合，就是attachment，形成一个render tree，告诉浏览器渲染的树的结构就出来了。render tree不包含html具体内容，也不知道具体位置是什么。比如有一个div，layout之前，不知道画在具体什么位置。这时候通过layout就可以精确计算到要显示的这些dom真正的宽高，位置颜色，最后开始paint，画图，把内容呈现出来。最后display，在浏览器上能看到页面效果。

以下博客上的：https://www.cnblogs.com/RachelChen/p/5456182.html

CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。

DOM树和CSSOM树连接在一起形成render tree .

render tree只包含了用于渲染页面的节点

布局计算了每一个对象的准确的位置以及大小

绘画是最后一步，绘画要求利用render tree来将像素显示到屏幕上

第一步是结合DOM树和CSSOM树形成“render tree”，渲染树用来描述所有可见的DOM内容，并且将CSSOM样式信息附加到节点上。

为了形成渲染树，浏览器大致做的事情有:

从DOM树根节点开始，遍历每一个可见的节点

一些节点是完全不可见的（比如 script标签，meta标签等），这些节点会被忽略，因为他们不会影响渲染的输出

一些节点是通过CSS样式隐藏了，这些节点同样被忽略——例如上例中的span节点在render tree中被忽略，因为span样式是display:none;

对每一个可见的节点，找到合适的匹配的CSSOM规则，并且应用样式

显示可见节点（节点包括内容和被计算的样式）

让我们快速的浏览下浏览器所做的事情：

处理HTML标签建立DOM树

处理CSS标签建立CSSOM树

连接CSSOM树和DOM树形成一个render树

在render树上运行布局来计算每个节点的形状

在屏幕上画每一个节点

虽然我们的页面很简单，但是它进行了大量的工作！下一章我们讨论怎样对渲染进行优化。

左边的html，右边DOM tree进行分析。

比如这个css样式表，被parser完了之后，会转成类似一个结构，会按照body，p，span img等等树形结构，每个对应样式是什么，注意样式是计算完的。比如有两个样式，最后的结果呈现在DOM tree上。

DOM tree和CSSOM tree两个生成Render tree。两个重合，再重新计算。拿到这个render tree之后就可以就行paint了。

这个layout的任务就是计算每个dom的位置，宽高。

js修改DOM之后，浏览器该怎么做呢？这时候就要reflow了，重排。什么时候触发reflow？每个dom都有reflow方法。新的内容当让也要repaint了。DOM有改变，满足reflow触发。

面试，重排要知道概念。什么时候会触发reflow。什么时候避免触发reflow。

页面呈现的内容，统统画在屏幕上，就是repaint。

触发条件，DOM改动，CSS改动。只要判断现在呈现的内容是不是变化了。页面内容只要不一样了，肯定repaint。

如何尽量减小repaint？repaint无法避免，但是最大程度减小。比如把用户输入计算条件，把输入隐藏掉，计算结果显示出来。两个交互，用户输入，然后输入隐藏，结果展示。这个过程，呈现内容不一样了。怎么做，少画一些东西。就是要把最后的结果，放在一个节点，就算有很多结果，也不要一个一个添加，而是放在一个片段里面，然后一次添加片段。也就是repaint一次。不然你加一个节点，重新repaint一次。