前端面试题目系列五

最近一两周都在忙着做项目，当🐮🐴，没什么时间更新前端面试题目，今天抽空把前端题目写一写，每次一个系列就差不多是三到四个面试可能出现的题目，帮助大家熟悉熟悉，后续的话会一直出这个系列，大家可以期待一下！

1. 浏览器渲染原理（过程）

1. 浏览器解析用户输入的URL，并通过DNS解析域名获取对应的IP地址，然后发起HTTP请求获取HTML文档，浏览器接收到HTML文档后，逐行解析并构建DOM树（DOM树是一个表示HTML文档结构的树状数据结构）。接着浏览器解析CSS文件和内联样式，生成CSSOM规则树（CSSOM树描述了CSS规则的应用和样式信息）。

2. 浏览器结合DOM树和CSSOM树，构建渲染树（RenderTree）。渲染树只包含可见的节点，排除脚本、注释等。渲染树中的每个节点都是一个渲染对象，表示实际页面上的元素。

3. 当渲染对象被创建并添加到树中，它们没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树的位置进行布局（也可以叫做回流）。这一阶段浏览器要做的事就是弄清除各个节点在页面中的确切位置和大小，这一行为也被称做"自动重排"。

4. 布局阶段结束后是绘制（Paint）阶段，浏览器根据布局信息将渲染对象绘制到屏幕上，绘制使用UI基础组件。

   为了更好的用户体验，渲染引擎会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 解析完成之后再去构建和布局 render tree。它是解析完一部分内容就显示一部分内容，同时可能还在网络下载其余内容。

2. 怎么让一个 div水平垂直居中？

1. 采用flex布局，父容器justify-content和align-items同时设置为center，子div就会水平垂直居中

   div.parent {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

2. 使用子绝对定位，父相对定位，同时孩子的位置left和top都设置为50%

   div.parent {
     position: relative;
   }
   div.child {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }
   

3. 采用grid布局，父容器设置place-items为center

   .container {
     display: grid;
     place-items: center; /* 水平垂直居中 */
     height: 100vh; /* 设置容器高度 */
   }
   .centered-div {
     /* 你的div样式 */
   }
   

3. 介绍一下重绘和回流（Repaint & Reflow），以及如何进行优化？

​ 在介绍重绘制和回流之前先得明白浏览器的渲染机制，浏览器采用流式布局模型（Flow Based Layout）；浏览器会把HTML解析为DOM，把CSS解析为CSSOM，DOM和CSSOM合并就产生了Render Tree，也就是渲染树。有了渲染树我们就知道了所有节点的样式，我们就可以计算他们在页面上的大小和位置，最后把节点绘制到页面上。

重绘是指浏览器重新渲染页面的视觉样式，当页面的外观发生变化，但元素的位置和布局不变时，就会触发重绘，重绘会影响页面的外观，但不会改变元素的几何属性（如位置和尺寸）。

回流是指浏览器重新计算页面中元素的位置和尺寸，以适应内容的变化，回流比重绘更复杂，因为它不仅涉及到重新渲染元素的视觉样式，还涉及到重新计算布局。

所以说重绘不一定回流，回流一定重绘！！！

优化的话，肯定是减少重绘和回流，通过一次性修改样式而不是多次修改，减少回流的频率，例如可以使用class替代直接修改style属性；对于动画效果，使用CSS3的transform和opacity属性，这些操作通常不会触发回流；避免table布局；避免频繁操作样式，修改class最好；避免频繁操作DOM，合并多次修改为一次。