JavaScript优化：事件流、委托、懒加载与预加载详解

需积分: 5 81 浏览量更新于2024-08-03 收藏 655KB PDF 举报

本资源是一份关于JavaScript优化的详细教程，主要关注于事件流、事件委托、懒加载和预加载四个关键主题。首先，事件流是JavaScript中事件处理的核心概念，它定义了事件如何在文档对象模型（DOM）层次结构中从触发事件的节点向上（冒泡）或向下（捕获）传播的过程。DOM事件流分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。通常，为了兼容性考虑，开发者倾向于在事件冒泡阶段绑定事件监听器，因为这样可以确保大多数浏览器能正确处理。事件委托是优化事件处理性能的一种策略，通过在父元素上监听事件，然后根据事件源来判断是否需要进一步处理。例如，在图1所示的HTML结构中，通过在`<div>`元素上监听`click`事件，当用户点击按钮时，实际上是先触发`<body>`，然后逐级冒泡到`<div>`，最后到达`<button>`。通过这种方式，可以避免为每个单独的子元素添加事件监听器，从而节省内存和提高效率。懒加载是一种常用的优化技术，特别是在处理大量图片或其他数据时。它指的是只有当用户滚动到包含这些元素的位置时才加载它们，而不是一次性加载整个页面。这样可以减少初始页面加载时间，提升用户体验。预加载则是另一种优化手段，通常用于预先请求资源，以便它们在用户需要时立即可用。例如，可以预加载下一页的内容或者相关的CSS和JavaScript文件，以减少用户的等待时间。预加载可以通过`link`元素的`rel="preload"`属性或JavaScript中的`fetch()`方法实现。总结起来，这份教程深入浅出地介绍了JavaScript优化中的核心技巧，帮助开发者理解和利用事件流机制，提高代码性能，并通过事件委托和懒加载/预加载策略优化网页资源的加载策略，以提供更好的用户体验。无论是对前端开发人员还是对JavaScript性能优化感兴趣的读者，这份文档都具有很高的实用价值。

在代码所示的页面中，如果点击了button，那么这个点击事件会按如下的顺序传播（Chrome浏览器）：

1. Button

2. Button的父级div

3. body

4. document

5. window

也就是说，click事件首先在

<button> 元素上发生，然后逐级向上传播。这就是事件冒泡。

2.1.1.2 事件捕获

事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则

最后接收到事件。比如说刚才的实例（01.事件冒泡.html），将false参数改为true，变成事件捕获。

(addEventListener最后一个参数，

为

true

则代

表

使

用

事件

捕

获

模

式

，false则表示使用事件冒泡模式。)

实例：

事件发生顺序会是这样的：

1. window

<body>

 <div

    id="parent">

   <button id="child" >click me</button>

 </div>

</body>

 var parent = document.getElementById('parent');

 var child = document.getElementById('child');

 

 child.addEventListener("click", function(e){

   console.log('1. You click child');

 }, true);

 parent.addEventListener("click", function(e){

   console.log('2. You click parent');

 }, true);

 document.body.addEventListener("click", function(e){

   console.log('3. You click body');

 }, true);

 document.addEventListener("click", function(e){

   console.log('4. You click document');

 }, true);

 window.addEventListener("click", function(e){

   console.log('5. You click window');

 }, true);

</script>

剩余12页未读，继续阅读

爱因斯坦乐

粉丝: 226
资源: 23

JavaScript优化：事件流、委托、懒加载与预加载详解

grub2-tools-2.02-0.87.el7.centos.x86_64.rpm

MTPR-630Hb微机型变压器差动保护装置用户手册V2.02.01.pdf

arm64机器安装grub2.02，grub2.02源码编译

ht500ss-v2.02.05

ump2.02 unity开发

GNU GRUB version 2.02

ubuntu启动盘 gnu grub 2.02

高分屏显示修复工具v2.02

下列哪一项是正确的float变量的声明？ A. float foo = 1; B. float foo = 1.0; C. float foo = 2e1; D. float foo = 2.02;

bpmn2.02规范(中文版)

最新资源