大家好，我是陶翁。最近面试的时候经常问：rearrangement和redrawing怎么理解？我发现很多考生没有回答重点。感觉在哪里看过相关的文章，听上去很零散，不合逻辑。错误演示一般面试流程是这样的：面试官：你怎么理解rearrangement和redrawing？考生：重排是指当页面的结构发生变化时，会重新排列，比如改变字体大小，增加或删除DOM元素等。重绘是指页面结构没有改变，只是外观发生了变化，比如改变了字体颜色、背景颜色等。只会重绘。当然，他说的是对的，我不能直接说他是错的，所以我继续引导面试官：rearrangement和redrawing有什么关系？考生：回流一定会引起重绘，重绘不一定会引起回流。采访者：为什么？考生：因为重排结构变了，肯定会引起重绘。我这时候的表情是这样的：如果你觉得上面的答案是对的，那你一定要好好看看下面的。一般不会直接跳过，会要求浏览器重新引导关键的渲染路径。不知道的我再指导一遍（其实这时候我已经基本放弃了）。你知道当浏览器加载HTML时会发生什么吗？如果您仍然不知道，这是下一个问题。如果你知道关键的渲染路径，你仍然可以通过基本指南来理解它。如果你不知道，你一定不了解重排和重绘。对于这个问题，我一般考察两点：浏览器的关键渲染路径。如果上面这个你都答不上来，一般这个问题都是冷的。性能优化，如果减少重绘和回流，当然这一点也必须建立在对关键渲染路径的理解上（这不是重点）。复习复习的目的是想知道考点是什么，简单的给大家复习一下。希望更详细的内容按照我介绍的知识点进行（深入学习可以阅读文末推荐的文章）。毕竟复习不是上课。我们可能知道可以通过编写HTML、CSS和JavaScript将页面渲染到屏幕上，但是浏览器是如何将我们的代码渲染到屏幕上的像素点上的呢？这就需要理解这样一个概念CRP：CriticalRenderingPath（关键渲染路径）是浏览器将HTML、CSS和JavaScript转换成屏幕上的像素所经历的一系列步骤。优化关键渲染路径可提高渲染性能。大致步骤如下：解析HTML时，创建DOM，HTML可以请求JavaScript，JavaScript反过来可以改变DOM。HTML包含或请求样式，进而构建CSSOM。浏览器引擎将两者结合起来创建渲染树，布局决定了页面上所有内容的大小和位置，一旦布局确定，像素就会被绘制到屏幕上。优化关键渲染路径可以减少首次渲染的时间。了解和优化关键渲染路径对于确保回流和重绘能够以每秒60帧的速度进行以确保高效的用户交互并避免烦人的伪影非常重要。让我们检查一下详细过程：步骤1.生成DOMDOM构建是增量的。浏览器从远程下载Byte=>根据对应的编码（如utf8）转成字符串=>通过AST解析成Token=>生成Node=>生成DOM。单个DOM节点以startTag标记开始，以endTag标记结束。节点包含有关HTML元素的所有相关信息。此信息使用令牌进行描述。节点根据令牌层次结构连接到DOM树中。如果另一组startTag和endTag标记位于一组startTag和endTag之间，则节点内有一个节点，这就是我们定义DOM树层次结构的方式。2、生成CSSOM浏览器解析css文件，生成CSSOM。CSSOM包含了页面的所有样式，也就是如何显示DOM信息。CSSOM类似于DOM，但又有所不同。DOM构建是增量的，CSSOM不是。CSS是渲染阻塞：浏览器阻塞页面渲染，直到它接收并执行所有CSS。CSS是渲染阻塞的，因为规则可以被覆盖，所以在CSSOM完成之前无法渲染内容。3.渲染树渲染树（RenderTree）包括内容和样式：DOM树和CSSOM树组合成一棵渲染树。为了构建渲染树，浏览器检查每个节点，从DOM树的根开始，并决定添加哪些CSS规则。渲染树仅包含可见内容（主体内部的部分）。Head（通常）不包含任何可见信息，因此它不会包含在渲染树中。如果一个元素有display:none;在它上面，它本身和它的后代都不会出现在渲染树中。4.Layout一旦构建了rendertree，就可以进行layout了。布局取决于屏幕的大小。布局这一步决定了元素在页面上的位置和方式，决定了每个元素的宽度和高度，以及它们之间的相关性。提示：一个页面在不同尺寸的屏幕上渲染，比如在移动端和PC端渲染，显示效果是不一样的。前面的步骤不变，只是在布局上会根据屏幕大小有所区别。.5.Paint的最后一步是在屏幕上绘制像素，栅格化所有元素，并将元素转换为实际像素。创建渲染树并完成布局后，即可在屏幕上绘制像素。加载时，绘制整个屏幕。之后只重绘受影响的屏幕区域，浏览器优化为只重绘需要绘制的最小区域。绘制时间取决于附加到渲染树的更新类型。绘图是一个非常快速的过程，因此在专注于提高性能时它可能不是最有效的部分。ReflowandRepaint理解了上面的keypathrendering，接下来就是简单的学习reflow和repaint了。小箱子。回流：当元素的位置发生变化时发生重排，也称为回流。此时在布局阶段，计算每个元素在设备视口中的确切位置和大小。当一个元素的位置发生变化时，它的父元素和它后面的元素的位置都可能发生变化，这是非常昂贵的。在回答什么是重排时，关键不在于位置的变化，而在于原因（Why），而不是What。什么是重新计算设备视口中每个元素的确切位置和大小。重绘：元素的样式改变了，但是位置没有改变。此时，在关键渲染路径的Paint阶段，渲染树中的每个节点都被转换为屏幕上的实际像素，这一步骤通常称为绘图或光栅化。回答什么是重绘的关键是在关键渲染路径的Paint阶段，将渲染树中的每个节点都转化为屏幕上的实际像素。这是什么。JavaScript和关键路径渲染之前讲步骤的时候，基本上讲的是HTML、CSS和CRP之间的关系。最后说一下JS和CRP的关系，再看文章开头的那张图。JavaScript在生成渲染树之前执行。这就是为什么JavaScript的加载、解析和执行会阻塞DOM的构建，阻塞页面的渲染。这其实很合理，因为JavaScript可以修改网页的内容，它可以改变DOM。如果它没有被阻塞，那么DOM正在这里构建，而JavaScript正在那里修改DOM。如何保证最终的DOM是正确的？而JS中前一秒获取的DOM和后一秒获取的DOM有什么区别？会造成一系列的问题，所以JS被阻塞了，就会阻塞DOM的构建过程，所以在JS中是获取不到JS后面的元素的，因为DOM还没有在那里构建。这就是为什么我们需要把js放到页面底部，并且尽量保证在加载JS之前生成DOM树，这样才会出现这个效果。性能优化基于上面的分析，简单说说几种性能优化的方法，大家可以分析一下为什么这些方法可以用于性能优化。减少DOM树渲染时间（例如，减少HTML级别，使标签尽可能语义化等）减少CSSOM树渲染时间（减少选择器级别等）减少HTTP请求次数和请求大小将css放在开头page和js放在页面底部位置，并且尽量使用defer或者async，避免阻塞js加载，保证只有在DOM树生成后才加载js。用链接替换@import。如果页面的css较少，尽量使用inline。为了减少白屏时间，页面加载首先用正确的性能优化思路快速生成DOM树，然后再谈性能优化相关。当你遇到性能问题的时候，绝对不是去网上找一些性能优化的方法，然后不管发生什么，就去做。综合起来，大概率是没用的。首先要做的是分析性能瓶颈在哪里。首先要做的是分析性能瓶颈在哪里。首先要做的是分析性能瓶颈在哪里。比如首屏加载遇到性能问题，需要通过开发者工具查看是否是资源量过大导致网络请求慢、后端处理慢、加载慢由于资源太多。如果这些都是No，可能是渲染慢了，再分析一下性能面板，看看是不是js执行慢了，或者是什么原因。再比如你遇到webpack的性能问题，比如打包的资源太大，你要解决这个问题，不能随便找几个优化方法就开始调整。而是应该使用webpack-bundle-analyzer插件来分析包大的原因？是不是依赖包太大，没有按需加载？还是同一个依赖的多个版本重复打包？还是因为src太大，需要做动态加载？或者因为其他的事情，使用webpack-bundle-analyzer分析的组成内容来查找问题。最后总结一下，遇到问题首先应该使用各种分析工具，找到造成性能瓶颈的原因，然后根据这个原因找到相应的优化方法，对症下药。不管是面试的时候回答，还是平时处理问题的时候，只要分析问题，解决的办法就很多。如果找不到问题，瞎折腾就是浪费时间。参考答案。相信经过复习，你对这个知识点应该很清楚了。面试的时候不需要说那么多。只说重点，让面试官知道你听懂了。如果面试官有兴趣，他会继续。对于提问者，此时我会详细介绍提问的要点。如果被问到这个问题，我的回答是这样的，仅供参考：重排和重绘是浏览器渲染关键路径上的两个节点，浏览器渲染关键路径是DOM和CSSOM生成渲染树，然后使用布局（也称为布局）步骤根据渲染树确定页面上所有内容的大小和位置。确定布局后，将像素绘制（也称为Paint）到屏幕上。其中，重排是指当元素的位置发生变化时，浏览器重新执行布局步骤，重新确定内容在页面中的大小和位置。重绘。如果元素位置没变，只是样式变了，浏览器重新渲染时，会跳过布局步骤，直接进入绘图步骤。这是重绘，所以重绘并不一定会导致重排。对于上面的回答，我想大部分面试官对于这道题都已经能打分了。但是，面试官可能会继续问更深入的问题。小伙伴们还有什么相关的问题可以在评论区告诉我们，后面我会继续帮大家一起分析。对于性能问题，减少重绘和回流感觉没那么重要，因为一般情况下优化不是很明显，不回答问题也没什么大不了的。更多的性能优化是对整个链路的优化，如性能优化标题。这8点。最后，在行业不景气的时候，希望大家能顺利找到合适的工作。关于关键路径渲染、重排、重绘，忍不住向大家推荐大魔君的两篇文章，有空就看看。CriticalRenderingPath(CRP)UnderstandingWebRearrangementandRedrawing参考文章：CriticalRenderingPathdevelopers.google.cn：CriticalRenderingPath你也加入。欢迎关注我的公众号「前端桃园」
