in all starts from within
HTML:说一下回流和重绘
CSS:img的title和alt属性区别
JavaScript:如何正确判断this的指向?
HTML:说一下回流和重绘
「回流」:
触发条件:
当我们对 DOM 结构的修改引发 DOM 几何尺寸变化的时候,会发生回流
的过程。
例如以下操作会触发回流:
- 一个 DOM 元素的几何属性变化,常见的几何属性有
width
、height
、padding
、margin
、left
、top
、border
等等, 这个很好理解。 - 使 DOM 节点发生
增减
或者移动
。 - 读写
offset
族、scroll
族和client
族属性的时候,浏览器为了获取这些值,需要进行回流操作。 - 调用
window.getComputedStyle
方法。
回流过程:由于DOM的结构发生了改变,所以需要从生成DOM这一步开始,重新经过样式计算
、生成布局树
、建立图层树
、再到生成绘制列表
以及之后的显示器显示这整一个渲染过程走一遍,开销是非常大的。
「重绘」:
触发条件:
当 DOM 的修改导致了样式的变化,并且没有影响几何属性的时候,会导致重绘
(repaint
)。
重绘过程:由于没有导致 DOM 几何属性的变化,因此元素的位置信息不需要更新,所以当发生重绘的时候,会跳过生存布局树
和建立图层树
的阶段,直接到生成绘制列表
,然后继续进行分块、生成位图等后面一系列操作。
「如何避免触发回流和重绘」:
- 避免频繁使用 style,而是采用修改
class
的方式。 - 将动画效果应用到
position
属性为absolute
或fixed
的元素上。 - 也可以先为元素设置
display: none
,操作结束后再把它显示出来。因为在display
属性为none
的元素上进行的DOM操作不会引发回流和重绘 - 使用
createDocumentFragment
进行批量的 DOM 操作。 - 对于 resize、scroll 等进行防抖/节流处理。
- 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
- 利用 CSS3 的
transform
、opacity
、filter
这些属性可以实现合成的效果,也就是CPU
加速。
参考来源:https://juejin.im/post/5df5bcea6fb9a016091def69#heading-57
CSS:img的title和alt属性区别
title鼠标划上去显示的内容
alt:图片不能正常显示,而显示的提示语
参考来源:https://zhidao.baidu.com/question/263730425037686525.html
JavaScript:如何正确判断this的指向?
1、表层上并且根据规则判断 点击~
2、底层判断是不是Reference 这里