页面渲染主要经过过程，具体介绍如下：
字节 → 字符 → 令牌 → 节点 → 对象模型
CSS树的生成和DOM树的生成基本是相同，如下
为什么会有CSS树
因为CSS关系也会有父子关系，就是css中常说的继承，一些样式如font-size等子元素会继承父级，所以会生成一套对应的CSS树和DOM树相对应。
通过上面的页面渲染介绍，很容易理解，重排就是重新布局页面结构，计算节点位置，而重绘就是绘制页面，只是一些样式如背景，颜色的变化等，不需要重新计算位置布局，所以 重排一定会导致重绘，但是重绘不一定导致重排。
导致页面重排主要有以下几点
上文中触发了四次重排，通过上文介绍，offsetTop，scrollTop，clientTop等属性的修改会触发重排，当浏览器获取DOM样式的时候立刻会执行一次重排，因为需要计算浏览器位置坐标，不会再继续观察下文是否还有DOM的操作，下文介绍浏览器渲染机制。
这种情况看似会触发四次重排，实际只会触发一次重排，现代浏览器基本都有渲染机制，浏览器会批量将样式修改一次性执行，批量修改完后再批量获取DOM位置，实际只触发一次。
等价于
通过上文，容易理解这种情况会触发两次重排，可以使用缓存（实际是分离读写）来优化。
这种情况会触发五次重排
避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性实现元素的动画，设置position属性，最好是设为absoulte或fixed，脱离文档流，这样不会影响其他元素的布局。
事件委托原理：利用事件冒泡的特性，子元素都会冒泡到父元素上，当子元素如（li）元素都绑定事件时，可以只需绑定父元素（ul）来达到相同的效果，这样不仅减少了对dom的操作，减少重排或重绘，而且不用分配大量变量来保存dom，减少了内存。
委托
不要使用table布局，因为table中某个元素一旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
不要一个个修改属性，应通过一个class来修改
改为
参考文献
https://blog.csdn.net/b954960630/article/details/82317999
圣诞树啊，应该是考虑怎样画三角形吧，用border就可以了哈。
<!DOCTYPE html><html>
<head>
<title></title>
<style type="text/css">
.ss{
height: 0
width: 0
position: absolute
border: 20px solid tan
border-color: transparent transparent #1fd224 transparent
}
.s1{
border-width:80px
top: 100px
left: 400px
}
.s2{
border-width:100px
top: 115px
left: 382px
}
.s3{
border-width:120px
top: 126px
left: 362px
}
.s4{
border-width:140px
top: 140px
left: 342px
}
.dd{
height: 130px
width: 40px
position: absolute
top: 420px
left: 460px
background-color: #1fd224
}
</style>
</head>
<body>
<div class="s1 ss"></div>
<div class="s2 ss"></div>
<div class="s3 ss"></div>
<div class="s4 ss"></div>
<div class="dd">
</div>
</body>
</html>
看着有点丑，楼主可以改变宽度高度以及颜色哈。最后希望采纳哈
形象一点说就是，html相当于人里面的器官，组成了人体；而Css就是你穿着的衣服，即使html网页结构相同，但是如果你的css变化的话整个网页也
是可以变化的，而js就是发蜡，香水之类的可以使你的网页更加丰富的脚本语言；整个网页就是人体，衣服，香水发蜡结合的结果了。dom树是根据网页的标签的层级关系来说的,可参考遗传学的那种关系.
换句话说:
html是网页的结构，css是网页的表达形式，JS是脚本语言；
