使用 requestIdleCallback 优化埋点数据上报

一、什么是 requestIdleCallback

requestIdleCallback 接收回调函数,在浏览器的空闲时段调用,这样既不阻塞关键性事件,又能保证低优任务的时效性。

二、使用 requestIdleCallback

可以像使用 setTimeout 一样使用 requestIdleCallback,区别是 requestIdleCallback 中的回调函数可以接收当前剩余空闲时间,以便合理利用这段时间来处理队列任务。一般会在回调函数内再次调用 requestIdleCallback,以便在下次空闲时间段继续执行剩余的任务。

"使用 requestIdleCallback 优化埋点数据上报"继续阅读

读书笔记:《JavaScript高级程序设计》 - [美]Nicholas C·Zakas 著 / 李松峰 曹力 译

版次:2012 年 3 月第 1 版

4 变量、作用域和内存问题

4.1 基本类型和引用类型的值

4.1.4 检测类型

如果变量是给定引用类型的实例,那么 instanceof 操作符就会返回 true

4.3 垃圾收集

找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔,周期性地执行这一操作。

"读书笔记:《JavaScript高级程序设计》 - [美]Nicholas C·Zakas 著 / 李松峰 曹力 译"继续阅读

节流和去抖的简单实现

一、节流

高频率的函数执行会给浏览器和服务器太大压力,设置一个间隔时间可以优化执行频率,记录上一次(初始)函数执行的时间,与此次执行时间比较;如果这个差值在设置的间隔时间内则定时执行,否则立即执行;如果在这个间隔时间内反复触发函数则无视。

"节流和去抖的简单实现"继续阅读

使用事件委托提高性能

当需要在大量元素上绑定事件的时候,特别是在动态更新的元素上,这个绑定是既麻烦又消耗性能的一件事。比较好的做法是在它们共同的父级元素上绑定一个事件,在事件冒泡阶段触发相应的效果。这种把一个元素的响应事件函数委托给另一个元素的用法便叫事件委托。

"使用事件委托提高性能"继续阅读

读书笔记:《高性能JavaScript》 - Nicholas C.Zakas 著 / 丁琛 译 / 赵泽欣 审校

出版时间:2010 年 11 月

1 加载和执行

  • 当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情。事实上,多数浏览器使用单一进程来处理用户界面(UI)刷新和 JavaScript 脚本执行,所以同一时刻只能做一件事。
  • defer 属性仅当 src 属性声明时才生效。
  • 通常来讲,把新创建的 <script> 标签添加到 <head> 标签里比添加到 <body> 里更保险,尤其是在页面加载过程中执行代码时更是如此。当 <body> 中的内容没有全部加载完成时,IE 可能会抛出一个“操作已中止”的错误信息。

"读书笔记:《高性能JavaScript》 - Nicholas C.Zakas 著 / 丁琛 译 / 赵泽欣 审校"继续阅读