HTML-事件机制-重绘和回流-<script>标签

本文介绍了HTML事件的冒泡和捕获机制,详细解析了重绘和回流的概念,强调了回流必然导致重绘但重绘不一定会引发回流。讨论了如何避免回流和重绘以优化页面性能,提供了一些CSS和JavaScript的最佳实践。此外,详细阐述了<script>标签的async和defer属性对页面加载和执行的影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

1.事件冒泡和捕获

在这里插入图片描述

事件流分为捕获阶段、目标阶段、冒泡阶段三各阶段

DOM事件流有3个阶段:捕获阶段,目标阶段,冒泡阶段;三个阶段的顺序为:捕获阶段——目标阶段——冒泡阶段;

通过暂缓执行捕获事件,可以达到先冒泡后捕获的效果;

实际操作中使用的函数是

element.addEventListener(type, listener, useCapture)其中的useCapture默认为false,即使用的是bubbling prase.

当为ture时使用Capture prase 即事件捕获。
对于目标元素,事件响应执行顺序根据的事件的执行顺序执行;

事件捕获是从顶层的Window逐层向内执行,事件冒泡则相反;
事件委托(事件代理)是根据事件冒泡或事件捕获的机制来实现的

2.重绘和回流

背景知识

1.浏览器使用流式布局模型 (Flow Based Layout)。
2.浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render Tree。
3.有了R
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值