🪵 事件与生命周期
在JavaScript中，事件是指文档或浏览器窗口中发生的事情，如用户操作（点击、滚动、按键等）、网络请求、定时器触发等。这些事件可以被JavaScript代码监听和处理，从而使网页具有交互性。
事件的基础知识
-
事件类型：
理解不同类型的事件，如click,mouseover,keydown,load,resize等。 熟悉不同事件类型的特性和应用场景。 -
事件监听：
掌握如何使用addEventListener和removeEventListener来注册和移除事件 监听器。 理解事件处理函数的工作原理及其参数（通常是一个事件对象）。 -
事件对象：
理解事件对象的属性和方法，如type,target,preventDefault(),stopPropagation()等。 熟悉如何使用事件对象来获取事件的详细信息和控制事件的行为。 -
事件冒泡和捕获：
理解事件流的两个阶段：冒泡（bubbling）和捕获（capturing）。 掌握如何利用事件冒泡和捕获来处理复杂的事件逻辑。 -
事件委托：
学习事件委托（event delegation）的概念和用法，它允许在父元素上捕获子元素的事件。 理解事件委托的优点，如减少内存使用和简化事件管理。 -
自定义事件：
学习如何创建和触发自定义事件，使用CustomEvent构造函数。 理解自定义事件的应用场景和好处。 -
移动端事件处理：
掌握针对移动设备的事件，如touchstart,touchmove,touchend。 理解移动端事件与桌面端事件的差异和优化技巧。 -
异步事件和事件循环：
理解JavaScript的事件循环机制，以及它如何影响异步事件处理。 学习如何处理异步事件，例如在Promise或async/await中使用事件。 -
性能考虑：
理解过多事件监听器可能对性能的影响。 学习如何优化事件处理，例如通过节流（throttling）和防抖（debouncing）技术。
页面的生命周期
在JavaScript编程中，页面的生命周期指的是从页面开始加载直到页面被完全卸载的整个过程。了解和掌握这个生命周期对于前端开发工程师来说非常重要，因为它影响着资源的加载、脚本的执行、用户体验的优化以及内存和其他资源的管理。
-
加载事件（Loading Events）：
DOMContentLoaded：当HTML被完全加载和解析完成时触发，不等待CSS、图片、iframe的加载。load：当整个页面及所有依赖资源如样式表和图片都已完成加载时触发。 理解这两个事件的区别对于优化加载时间和用户体验至关重要。 -
激活事件（Activation Events）：
beforeunload：在窗口、文档或其资源即将卸载时触发。常用于提示用户保存更改。unload：当页面完全卸载时触发。用于执行清理任务，如关闭数据库连接。 -
可见性更改（Visibility Change）：
visibilitychange事件：当文档的可见性更改时触发，如用户切换标签页。 掌握这一事件有助于节省资源，例如暂停不在视图中的动画。 -
错误处理：
error事件：用于全局错误处理，可以捕获加载资源时的错误。 -
性能优化：
理解不同生命周期事件对性能的影响。 利用生命周期事件来优化首次加载、渲染性能以及资源管理。 -
异步操作与生命周期：
管理和同步页面生命周期与异步操作（如网络请求）。 -
服务工作线程（Service Workers）：
理解Service Workers的生命周期对PWA（Progressive Web Apps）开发至关重要。 -
页面状态管理：
理解如何在页面的不同生命周期阶段维护状态。 -
调试和测试：
学习如何调试生命周期事件，例如使用浏览器的开发者工具。 -
跨浏览器兼容性：
了解不同浏览器可能对生命周期事件的支持和实现有所不同。
掌握这些知识点可以帮助前端开发者编写更高效、更可靠的代码，优化页面加载和运行性能，并提高用户体验。