重绘与回流
重绘
当元素样式的改变不会影响布局时,浏览器将会使用重绘对元素进行更新,此时只需要UI层面的重新像素绘制,所以损耗较少
常见的重绘操作:
改变元素的颜色、改变元素的背景颜色等
回流(重排)
当元素的尺寸、结构发生改变或者出发某些属性时,浏览器会重新计算渲染页面内,发生回流
比如让标签隐藏或者改变标签的宽高、还有就是通过js往页面中添加DOM元素以及通过js获取元素的尺寸大小或者偏移量
重绘不一定会引起回流,但是回流一定会引起重绘
浏览器的渲染过程
浏览器的渲染过程:
1.解析html创建DOM树
2.解析css创建CSSOM (css rule true css规则树)
3.将DOM树和CSSOM结合,合并成一个Render Tree(渲染树)
4.根据渲染树,去布局绘制并显示
DOM CSSOM Render Tree
阻止事件冒泡和系统默认事件
阻止浏览器默认事件
在事件处理函数中写入
event.preventDefault()
IE浏览器兼容处理 ———— event.preventDefault ? event.preventDefault() : event.returnValue = false;
阻止事件冒泡
在事件处理函数中写入
event.stopPropagation(); (阻止事件冒泡)
IE浏览器兼容处理 ———— event.stopPropagation?event.stopPropagation():event.cancelBubble = true;
event.stopImmediatePropagation(); (阻止事件冒泡,如果同一个标签对象绑定多个处理事件,则阻止后续绑定事件)
ps:
多次绑定事件如果以标签对象 . on事件 = 事件处理函数 方式,则只会显示最后一次 (相对于修改属性值)
document.querySelector('.box').onclick = function(){
console.log("第一次给box绑定click事件");
}
document.querySelector('.box').onclick = function(){
console.log("第二次给box绑定click事件");
}
鼠标常见事件
鼠标单击事件click
标签对象 . addEventListener('click',function(){
console.log("鼠标单击事件");
});
鼠标双击事件dblclick
标签对象 . addEventListener('dblclick',function(){
console.log("鼠标双击事件");
});
鼠标右键事件contextmenu
标签对象 . addEventListener('contextmenu',function(){
console.log("鼠标右键事件");
});
鼠标按下事件mousedown
标签对象 . addEventListener('mousedown',function(){
console.log("鼠标按下事件");
});
鼠标松开事件mouseup
标签对象 . addEventListener('mouseup',function(){
console.log("鼠标松开事件"