如何记录页面加载时间
通过三种方法记录页面加载时间：1. 纯前端时间戳，记录从脚本开始到页面加载完成的时间，但忽略网络延迟等；2. 配合后端记录连接建立到加载完成的时间，但增加后端负担且部分时间未覆盖；3. 使用 HTML5 的 PerformanceTiming.navigationStart 提供更全面的时间记录，但存在兼容性限制，仅支持 IE9+。
分类： JavaScript
节流和去抖的简单实现
介绍了两种控制函数执行频率的方法：节流和去抖。节流通过设定间隔时间，限制高频函数的执行频率，避免过多压力；实现方式为记录上次执行时间，与当前时间比较，决定是否执行。去抖则在连续触发中仅执行一次，通过延时定时器实现，防止频繁 DOM 操作。两者通过不同策略优化性能。
async & await 同时触发（等待）多个异步操作
介绍了使用 async-await 和 Promise.all() 同时触发多个异步操作的最佳实践。通过 Promise.all() 合并多个 Promise 实例，可以提高效率，只有所有操作完成后才会返回 fulfilled 状态。示例代码展示了如何并行等待多个异步任务完成并依次输出结果。
使用事件委托提高性能
介绍了事件委托的概念及其在动态更新元素上的高效应用，通过将子元素的事件绑定到父元素上减少性能消耗。示例展示了如何使用 matches() 方法精确匹配目标子元素，同时说明了部分事件如 focus 和 blur 无法直接使用事件委托，但可用 focusin 和 focusout 替代。
DOM 节点的唯一性
解释了 DOM 节点无法同时存在于多个位置的问题，并通过 cloneNode() 方法创建节点副本以避免指针关联。示例展示了 appendChild() 导致节点位置变化的情况，以及使用 cloneNode(true) 深度克隆节点以实现纯粹添加元素的效果。
使用 Axios 上传媒体文件
介绍了 FormData 接口用于异步上传文件的功能，支持 append()、getAll() 和 delete() 方法操作键值对，可添加 Blob 或 File 数据。Blob 表示类文件对象，可通过 URL.createObjectURL() 创建链接。实战部分展示了使用 axios 上传 WebM 文件的具体实现方法。
监听 scroll 使元素产生吸顶效果
介绍了滚动像素值的获取方式 (window.pageYOffset 和 Element.scrollTop)、滚动事件的监听与移除方法，并通过示例展示了吸顶效果的实现。还讨论了 CSS 属性 position: sticky 的特性及其兼容性问题，建议慎用该属性于生产环境中，同时提供相关参考资料供深入学习。
URLSearchParams 配合 Axios 提交重复的参数
介绍了 URLSearchParams 接口的功能及用法，包括 append 和 set 方法的区别、键值遍历方式以及与 axios 的结合使用。append 可插入重复值，set 会覆盖同名键值，配合 for...of 可轻松遍历键值对，示例展示了如何生成查询字符串并发送 HTTP 请求。
Vue.js 组件通信
介绍了 Vue 中组件通信的多种方式，包括父组件通过 props 向子组件传值、子组件使用 $emit 向父组件发送事件、自定义组件的 v-model 实现双向绑定，以及利用 Vue 实例作为事件中转站实现任意组件间通信。提供了具体代码示例，清晰展示实现方法与应用场景。
使用 postMessage + iframe 实现跨域通信
介绍了 window.postMessage() 方法的用途及语法，阐明其在跨源通信中的安全性和灵活性。通过示例展示了消息发送和接收的实现，强调 targetOrigin 的重要性以及验证 event.origin 以确保敏感信息的安全传输。