记录一下我的前端面试过程吧

前言：楼主今年24岁，在上一家公司工作了接近两年，base在成都。目标：10K+，面试题是我能记住且大多为没答上来的，面试完后作总结，答案为参考（亲喷，欢迎指正）

1.第一场面试，一家做网络安全的公司(9-12k)

时间2021年6月15日上午
结果：未通过
面试问题：

讲一下页面的重绘(repaint)和回流（reflow）

答案整理：
1.浏览器的渲染机制：1.首先浏览器会将HTML解析为DOM，将CSS解析为CSSOM，然后把DOM和CSSOM结合生成render tree(渲染树)
                 2.有了渲染树后，知道了每一个节点的样式，然后浏览器就会计算节点的位置，把节点绘制到界面上。
                 
2.回流：当render tree的一些元素的位置或大小发生变化，浏览器重新渲染部分或全部文档的过程就叫做回流。
导致回流的操作：1.页面首次渲染2.浏览器窗口发生变化3.节点内容变化4.添加或删除节点。。。

3.重绘：当页面中元素样式的改变不会影响它在文档流中的位置时，浏览器会将新样式赋予给元素，这个过程就叫做重绘。
导致重绘的操作：1.background 2. visibility(可见性设置，除了display:none)

4.总结：重绘不一定引起回流，回流一定会引起重绘

5.性能方面：回流比重绘的影响大。

6.避免性能影响：
H5、CSS方面： 1.避免使用table布局  2.避免设置多层级的内联CSS样式
Javascript方面：1. 避免频繁操作DOM 2.对于大量DOM的操作，使用代码文档片段，documentFragment（这样就可以只插入一次了）如下：
HTML：<ul id="list"></ul>

const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];
const fragment = document.createDocumentFragment();
fruits.forEach(fruit => {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});
list.appendChild(fragment);
复制代码