css画三角的方法
border法
tranform法
重绘和重排
重排必定引起重绘,重绘不一定引起重排
重绘:盒子的大小,位置以及其他属性,比如颜色,字体大小确定下来之后,浏览器把这些原色按照各自的特性绘制一遍
重排:渲染树的中一部分或全部,因为元素的规模尺寸,布局隐藏等改变而需要重新构建,这就称之为重排
优化方法:
浏览器会自己维护一个队列,然后合并某些重绘重排
减少重绘重排,可以合并多次的dom修改和样式更改,减少对style样式的请求
1. 修改classname
2. display:none -> 修改样式 -> display:block
3. position: absolute或position: fixed,脱离文档流,修改不会影响其他dom
4. 不要经常访问浏览器flush队列,如果一定要访问,利用缓存,存储要访问的值,接下来不会引起重排
5. 使用cloneNode或replaceNode,引起一次重绘重排
6. 需要创建多个节点,用document.fragment包起来,一次性添加
7. 少用table布局