渲染一个HTML页面都做了哪些步骤
- 生成DOM树
- 生成CSS树
具体渲染过程
- 页面加载时，浏览器把获取到的HTML代码会解析成1个DOM树；
- DOM树里面会包含所有HTML标签、JS动态添加的元素等；
- 那么接着就是CSSOM树的构建，也就是CSS下载完后，对CSS进行解析成对象，组成CSSOM树；
- DOM树与CSSOM树结合，生成渲染树Render Tree;
Render Tree 全过程如图所示
回流
请描述下叫做回流？
回流是整个页面进行重排，也就是页面所有dom元素渲染。影响了这个页面的尺寸、布局、隐藏等。
例如：
<ion-content>
<div id="echarts" style="height: 350px; width: 400px; top: -33px;"></div>
</ion-content>
实际上来说，此时要完整的渲染这个图表，首先先显示视口宽度，然后在根据根据设置的父节点宽高，这个就是回流阶段。最后呈现为实际像素。
常见回流会发生在哪些场景？
- width/height/border/margin/padding修改
- 动画，:hover 等伪类引起的元素表现改动 display=none 等造成页面回流
- appendChild 等dom元素操作
- font 类 style 的修改
- background的修改
- scroll 页面
- resize页面
- 读取元素的属性
- offsetLeft/Top/Height/Width/
重绘
请描述下是重绘？
当Render Tree树中某个DOM元素的属性需要更新，是影响外观且不影响布局的，则称之为重绘。
例如：
<h1 style="text-align: center;font-size: 35px;">测试</h1>
<p style="text-align: center;font-size: 17px;">测试</p>
常见重绘会发生在哪些场景
- color修改
- text-align修改
- :hover
- a:hover
区别
- 回流必将引起重绘，重绘未必引起回流；
实际开发中该如何避免回流的发生呢？
- 尽可能在DOM末梢通过改变class来修改元素的style属性，尽可能减少受影响的dom元素；
- 避免内联样式，使用class的样式进行设置样式；
<style lang="css">
.bg1{
width: 100%;
height: 100vh;
position: absolute;
background-size:100% 100%;
z-index: 1;
}
</style>
<template>
<div>
<div class="bg1"></div>
</div>
</template>
- 减少元素批量修改的次数
- 设置动画元素position属性为fixed或者absolute。由于当前元素从DOM流中独立出来，因此受影响的只有当前元素，元素repaint；
- CSS硬件加速 transform/opacity/filters...... 但如果用得不好就会引起内存过大，消耗性能等麻烦；
- 动画精度太强，会造成更多次的重绘/回流，必要的时候牺牲精度，满足性能损耗，获取性能和平滑度平衡；
- 避免使用tale进行布局，改用div;
