【React 源码阅读】Scheduler

1 背景

React 在 18 版本引入了 Concurrent 模式，而这个模式则是用 Scheduler 这个包实现的。
在这篇文章里，我们来看下它的实现原理是什么。

2 前置知识

在正式阅读源码之前，我们还是有一些前置的知识需要了解的，分别是：

  • 小顶堆：Scheduler 内用来进行优先级排序的数据结构
  • 浏览器事件循环机制：Scheduler 实现的底层原理

2.1 小顶堆

堆是一棵完全二叉树，即除了最后一层外，所有层都完全填满，且最后一层的节点尽可能靠左排列。
最小堆：每个节点的值都小于或等于其子节点的值（父节点 ≤ 子节点）。

graph TD
    A(( 1 )) --> B(( 2 ))
    A --> C(( 3 ))
    B --> D(( 4 ))
    B --> E(( 5 ))
    C --> F(( 6 ))
    C --> G(( 7 ))
    D --> H(( 8 ))
    D --> I(( 9 ))

通常用数组实现，假设节点索引为 i：

  • 左子节点：2i+1
  • 右子节点：2i+2
  • 父节点：(i - 1)/2

2.1.2 建堆

  1. 节点 push 到数组末尾
  2. 比较节点与父节点大小，如果比父节点小，那么节点往上浮直至到达堆顶，否则固定在后面的位置

2.1.3 出堆

  1. 将堆顶的节点替换为堆底的节点
  2. 堆顶节点跟左节点比较大小，若堆顶节点大则交换直至到达堆底
  3. 否则堆顶节点跟右节点比较大小，若堆顶节点大则交换直至到达堆底
  4. 若以上两个条件都不满足，那么保持目标节点在原位置不变

2.1.4 完整代码

type Heap = Array;
type Node = {
  id: number,
  sortIndex: number,
  ...
};

export function push(heap: Heap, node: T): void {
  const index = heap.length;
  heap.push(node);
  siftUp(heap, node, index);
}

export function peek(heap: Heap): T | null {
  return heap.length === 0 ? null : heap[0];
}

export function pop(heap: Heap): T | null {
  if (heap.length === 0) {
    return null;
  }
  const first = heap[0];
  const last = heap.pop();
  if (last !== first) {
    // $FlowFixMe[incompatible-type]
    heap[0] = last;
    // $FlowFixMe[incompatible-call]
    siftDown(heap, last, 0);
  }
  return first;
}

function siftUp(heap: Heap, node: T, i: number): void {
  let index = i;
  while (index > 0) {
    const parentIndex = (index - 1) >>> 1;
    const parent = heap[parentIndex];
    if (compare(parent, node) > 0) {
      // The parent is larger. Swap positions.
      heap[parentIndex] = node;
      heap[index] = parent;
      index = parentIndex;
    } else {
      // The parent is smaller. Exit.
      return;
    }
  }
}

function siftDown(heap: Heap, node: T, i: number): void {
  let index = i;
  const length = heap.length;
  const halfLength = length >>> 1;
  while (index < halfLength) {
    const leftIndex = (index + 1) * 2 - 1;
    const left = heap[leftIndex];
    const rightIndex = leftIndex + 1;
    const right = heap[rightIndex];

    // If the left or right node is smaller, swap with the smaller of those.
    if (compare(left, node) < 0) {
      if (rightIndex < length && compare(right, left) < 0) {
        heap[index] = right;
        heap[rightIndex] = node;
        index = rightIndex;
      } else {
        heap[index] = left;
        heap[leftIndex] = node;
        index = leftIndex;
      }
    } else if (rightIndex < length && compare(right, node) < 0) {
      heap[index] = right;
      heap[rightIndex] = node;
      index = rightIndex;
    } else {
      // Neither child is smaller. Exit.
      return;
    }
  }
}

function compare(a: Node, b: Node) {
  // Compare sort index first, then task id.
  const diff = a.sortIndex - b.sortIndex;
  return diff !== 0 ? diff : a.id - b.id;
}

时间复杂度：

  • 插入/删除最大（最小）值：O(log⁡n)
  • 建堆：O(n)
  • 堆排序：O(nlog⁡n)

2.1.5 总结

最后，我们对比一下其他排序的方式

数据结构 查找最小任务 插入任务 删除任务 适用性
小顶堆（React 使用） ✅ O(1) → 堆顶 ✅ O(log n) ✅ O(log n) ✅ 高效 + 支持动态优先级调度
数组（遍历找最小） ❌ O(n) ✅ O(1) ❌ O(n) ❌ 查找最小任务慢
链表（按时间排序） ✅ O(1)（头部是最小） ❌ O(n) 插入需遍历 ❌ O(n) 删除中间节点 ❌ 插入慢，重排复杂
队列（FIFO） ❌ 仅支持先进先出 ✅ O(1) ✅ O(1) ❌ 无法排序，完全不适合

2.2 浏览器事件循环机制

事件循环的流程：

  1. 执行宏任务
  2. 执行同步任务
  3. 遇到宏任务就放到宏任务队列，遇到微任务就放到微任务队列
  4. 如果执行完同步任务，就清空微任务队列
  5. 从宏任务队列拿出一个宏任务执行，继续以上步骤

用图来看的话更加清晰一些：

如果我们站在浏览器渲染的角度上来看的话，流程是这样的：

gantt
  dateFormat  HH:mm:ss
  axisFormat  %S

  section 宏任务（Macro Task）
  执行宏任务         :macro, 00:00:00, 2s

  section 微任务（Micro Task）
  清空微任务队列     :micro, after macro, 0.5s

  section requestAnimationFrame
  rAF 回调执行       :raf, after micro, 0.2s

  section 渲染（Repaint / Reflow）
  浏览器渲染         :render, after raf, 0.3s

  section requestIdleCallback
  执行 rIC 回调（如有空闲） :ric, after render, 0.8s

2.2.1 requestIdleCallback

requestIdleCallback 可以在浏览器空闲的时间里去执行，文档上对它的描述如下：

为什么 React 不直接使用 requestIdleCallback 来实现 Scheduler 呢？主要有以下几个问题：

  • 不确定性高：浏览器有可能根本没有空闲时间
  • 兼容性问题：有些浏览器根本不支持

2.2.2 requestAnimationFrame

从上面的图可以知道，requestAnimationFrame 是在浏览器渲染前执行的，那么 React 为什么不用它来实现呢？主要原因是：

  1. requestAnimationFrame + setTimeout 的方法不可控
  2. requestAnimationFrame 在页面处于后台时会挂起，等页面激活了才会重新启动

2.2.3 微任务

我们知道微任务也参与了事件循环，那么为什么不用微任务呢？\
原因很简单，因为微任务有几个问题：

  1. 执行顺序不可控：微任务之间没有优先级关系，先来了就先执行
  2. 无法中断：比如说我在当前的微任务里不想执行了，想要到下一个事件循环里的微任务再执行是做不到的
  3. 可能会阻塞渲染

2.2.4 宏任务

宏任务的特点：在事件循环的最开始执行\
浏览器里常见的宏任务有：

  • setTimeout
  • setInterval
  • MessageChannel

为什么 React 里面不是用 setTimeout 把 task 放到宏任务里呢？原因是，当 setTimeout 嵌套调用被安排了 5 次之后，浏览器就会强制执行 4ms 的最小超时。

其实这个 4ms 的间隔是无法接受的，因为 React 设置的分片时间也就 5ms。
同样的，setInterval 也会有类似的问题。

2.2.4.1 MessageChannel

一方面 MessageChannel 使用的是消息通道机制，比 setTimeout 要更快并且基本没有延迟：

const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;
schedulePerformWorkUntilDeadline = () => {
  port.postMessage(null);
};

另外一方面，浏览器兼容性也是非常好，基本上都是支持的：

因此，最终 React 选择使用 MessageChannel 来实现 Scheduler 也就不奇怪了。

2.2.5 总结

调度方式 描述 优缺点
requestIdleCallback 浏览器空闲时执行的回调 ❌ 不确定性高：可能根本不触发❌ 浏览器兼容性差（低端机、老浏览器）
requestAnimationFrame 渲染前调用，适合做视觉同步 ❌ 只能每帧一次，受帧率限制❌ 页面隐藏时会挂起，调度中断❌ 与 setTimeout 组合不可控
微任务（Promise.then） 每个宏任务后立即执行 ❌ 无法中断：一旦开始就必须执行完❌ 无优先级控制❌ 会阻塞主线程、渲染卡顿
setTimeout / setInterval 传统的异步任务调度方式（宏任务） ❌ 最小延迟 ≥ 4ms（嵌套 5 层以上）❌ 精度不够，无法满足时间片（如 5ms）要求
MessageChannel ✅ 现代浏览器提供的快速任务通道 ✅ 几乎无延迟（比 setTimeout 快）✅ 支持跨标签页、后台运行✅ 可搭配 performance.now() 实现时间切片✅ 浏览器兼容性非常好

3 源码阅读

3.1 初始化

unstable_scheduleCallback 是一个入口函数，它的参数包含：

  • priorityLevel：优先级
  • callback：回调任务

  • options

    • delay: 延迟

3.1.1 根据优先级分配超时时间

一开始就会根据 priorityLevel 来分配 timeout，优先级越高 timeout 越小。换句话说，优先级越高就要越早执行，否则就会超时。

var currentTime = getCurrentTime();

var startTime;
if (typeof options === 'object' && options !== null) {
  var delay = options.delay;
  if (typeof delay === 'number' && delay > 0) {
    startTime = currentTime + delay;
  } else {
    startTime = currentTime;
  }
} else {
  startTime = currentTime;
}

var timeout;
switch (priorityLevel) {
  case ImmediatePriority:
    // Times out immediately
    timeout = -1;
    break;
  case UserBlockingPriority:
    // Eventually times out
    timeout = userBlockingPriorityTimeout;
    break;
  case IdlePriority:
    // Never times out
    timeout = maxSigned31BitInt;
    break;
  case LowPriority:
    // Eventually times out
    timeout = lowPriorityTimeout;
    break;
  case NormalPriority:
  default:
    // Eventually times out
    timeout = normalPriorityTimeout;
    break;
}

3.1.2 设置 task

后续这里会初始化一个 task，代码如下：

var expirationTime = startTime + timeout;

var newTask: Task = {
  id: taskIdCounter++,
  callback,
  priorityLevel,
  startTime,
  expirationTime,
  sortIndex: -1,
};

3.1.3 分配任务到对应的队列中

这一步是最后一步，也是最开始的一步：把 task 放到指定的队列中：

if (startTime > currentTime) {
  // This is a delayed task.
  newTask.sortIndex = startTime;
  push(timerQueue, newTask);
  if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
    // All tasks are delayed, and this is the task with the earliest delay.
    if (isHostTimeoutScheduled) {
      // Cancel an existing timeout.
      cancelHostTimeout();
    } else {
      isHostTimeoutScheduled = true;
    }
    // Schedule a timeout.
    requestHostTimeout(handleTimeout, startTime - currentTime);
  }
} else {
  newTask.sortIndex = expirationTime;
  push(taskQueue, newTask);
  if (enableProfiling) {
    markTaskStart(newTask, currentTime);
    newTask.isQueued = true;
  }
  // Schedule a host callback, if needed. If we're already performing work,
  // wait until the next time we yield.
  if (!isHostCallbackScheduled && !isPerformingWork) {
    isHostCallbackScheduled = true;
    requestHostCallback();
  }
}
  • 当 startTime > currentTime 时，newTask 会被 push 到 timerQueue 队列里，这时它的 sortIndex 为 startTime。
  • 当 startTime <= currentTime 时，newTask 会被 push 到 taskQueue 队列里，这时它的 sortIndex 为 expirationTime

看到这里我们可以认为：

  • 即将开始的 task 会被放到 taskQueue，而还没开始的 task 会被放到 timerQueue
  • timerQueue 里的 task 优先级是按照 startTime 来标识的，越早开始优先级越高
  • taskQueue 里的 task 优先级是按照 expirationTime 来标识的，越早过期优先级越高

而前面提到 expirationTime = startTime + timeout，因而我们可以认为：\
即使有些 task 比较早开始，但是如果它本身的优先级不高，最终在 taskQueue 里的优先级也会被排在其他 task 后面。

3.2 timerQueue

前面提到，timerQueue 主要是用来存放一些延迟的任务，主要和下面这段代码有关：

if (startTime > currentTime) {
  // This is a delayed task.
  newTask.sortIndex = startTime;
  push(timerQueue, newTask);
  if (peek(taskQueue) === null && newTask === peek(timerQueue)) {
    // All tasks are delayed, and this is the task with the earliest delay.
    if (isHostTimeoutScheduled) {
      // Cancel an existing timeout.
      cancelHostTimeout();
    } else {
      isHostTimeoutScheduled = true;
    }
    // Schedule a timeout.
    requestHostTimeout(handleTimeout, startTime - currentTime);
  }
}

当且仅当 taskQueue 队列为空且 newTask 在 timerQueue 队头里时会执行 requestHostTimeout 方法。
并且呢，在执行 requestHostTimeout 之前，还会判断下 isHostTimeoutScheduled 是否为 true，如果为 true 就会调用 cancelHostTimeout

3.2.1 cancelHostTimeout

这个函数非常简单：

function cancelHostTimeout() {
  // $FlowFixMe[not-a-function] nullable value
  localClearTimeout(taskTimeoutID);
  taskTimeoutID = ((-1: any): TimeoutID);
}

其中 localClearTimeout 其实就是 clearTimeout：

const localClearTimeout =
  typeof clearTimeout === 'function' ? clearTimeout : null;

3.2.2 requestHostTimeout

这个函数其实也是比较简单：

function requestHostTimeout(
  callback: (currentTime: number) => void,
  ms: number,
) {
  // $FlowFixMe[not-a-function] nullable value
  taskTimeoutID = localSetTimeout(() => {
    callback(getCurrentTime());
  }, ms);
}

就是一个普通的 setTimeout 函数封装的。

3.2.3 handleTimeout

看完上面的代码，我们在回到这句代码：

requestHostTimeout(handleTimeout, startTime - currentTime);

很容易可以明白，它的作用其实就是在延迟 startTime - currentTime 之后，执行一下 handleTimeout 方法。

function handleTimeout(currentTime: number) {
  isHostTimeoutScheduled = false;
  advanceTimers(currentTime);

  if (!isHostCallbackScheduled) {
    if (peek(taskQueue) !== null) {
      isHostCallbackScheduled = true;
      requestHostCallback();
    } else {
      const firstTimer = peek(timerQueue);
      if (firstTimer !== null) {
        requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
      }
    }
  }
}

简单梳理下，它做了这些事情：

  1. 调用 advanceTimers 方法，并传入 currentTime
  2. 如果 taskQueue 队列不为空，执行 requestHostCallback 方法
  3. 否则，从 timerQueue 里取出一个 timer， 之后执行 requestHostTimeout 方法
3.2.3.1 advanceTimers

照例先看代码：

function advanceTimers(currentTime: number) {
  // Check for tasks that are no longer delayed and add them to the queue.
  let timer = peek(timerQueue);
  while (timer !== null) {
    if (timer.callback === null) {
      // Timer was cancelled.
      pop(timerQueue);
    } else if (timer.startTime <= currentTime) {
      // Timer fired. Transfer to the task queue.
      pop(timerQueue);
      timer.sortIndex = timer.expirationTime;
      push(taskQueue, timer);
      if (enableProfiling) {
        markTaskStart(timer, currentTime);
        timer.isQueued = true;
      }
    } else {
      // Remaining timers are pending.
      return;
    }
    timer = peek(timerQueue);
  }
}

简单梳理下这里的逻辑：

  1. 从 timerQueue 里取出一个 timer
  2. 如果 timer.callback 为空，那么就把它从 timerQueue 里移除

  3. 如果 startTime <= currentTime

    1. 说明 timer 即将开始了，将它从 timerQueue 里移除
    2. 设置 timer.sortIndex = timer.expirationTime
    3. 将它 push 到 taskQueue 里
  4. 否则直接结束循环
  5. 如果循环没有结束，那么继续从 timerQueue 里取出一个 timer 并重复以上步骤

总结一下 advanceTimers 的作用：

  • 去掉无效的 timer
  • 及时将到期的 timer 从 timerQueue 放到 taskQueue 里
3.2.3.2 requestHostCallback

这个函数不复杂：

function requestHostCallback() {
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    schedulePerformWorkUntilDeadline();
  }
}

里面调用的其实是 schedulePerformWorkUntilDeadline 这个方法：

let schedulePerformWorkUntilDeadline;
if (typeof localSetImmediate === 'function') {
  // Node.js and old IE.
  // There's a few reasons for why we prefer setImmediate.
  //
  // Unlike MessageChannel, it doesn't prevent a Node.js process from exiting.
  // (Even though this is a DOM fork of the Scheduler, you could get here
  // with a mix of Node.js 15+, which has a MessageChannel, and jsdom.)
  // https://github.com/facebook/react/issues/20756
  //
  // But also, it runs earlier which is the semantic we want.
  // If other browsers ever implement it, it's better to use it.
  // Although both of these would be inferior to native scheduling.
  schedulePerformWorkUntilDeadline = () => {
    localSetImmediate(performWorkUntilDeadline);
  };
} else if (typeof MessageChannel !== 'undefined') {
  // DOM and Worker environments.
  // We prefer MessageChannel because of the 4ms setTimeout clamping.
  const channel = new MessageChannel();
  const port = channel.port2;
  channel.port1.onmessage = performWorkUntilDeadline;
  schedulePerformWorkUntilDeadline = () => {
    port.postMessage(null);
  };
} else {
  // We should only fallback here in non-browser environments.
  schedulePerformWorkUntilDeadline = () => {
    // $FlowFixMe[not-a-function] nullable value
    localSetTimeout(performWorkUntilDeadline, 0);
  };
}

可以看到 schedulePerformWorkUntilDeadline 其实是做了一下兼容性处理：

  • 如果当前 Nodejs 或者老 IE，那么就用 localSetImmediate 方法
  • 如果当前环境支持 MessageChannel 那么就直接用它
  • 否则就退而求其次使用 setTimeout 方法
3.2.3.3 performWorkUntilDeadline

schedulePerformWorkUntilDeadline 方法里调的其实就是 performWorkUntilDeadline：

const performWorkUntilDeadline = () => {
  if (enableRequestPaint) {
    needsPaint = false;
  }
  if (isMessageLoopRunning) {
    const currentTime = getCurrentTime();
    // Keep track of the start time so we can measure how long the main thread
    // has been blocked.
    startTime = currentTime;

    // If a scheduler task throws, exit the current browser task so the
    // error can be observed.
    //
    // Intentionally not using a try-catch, since that makes some debugging
    // techniques harder. Instead, if `flushWork` errors, then `hasMoreWork` will
    // remain true, and we'll continue the work loop.
    let hasMoreWork = true;
    try {
      hasMoreWork = flushWork(currentTime);
    } finally {
      if (hasMoreWork) {
        // If there's more work, schedule the next message event at the end
        // of the preceding one.
        schedulePerformWorkUntilDeadline();
      } else {
        isMessageLoopRunning = false;
      }
    }
  }
};

梳理一下逻辑：

  • 调用 flushWork 并将返回值赋值给 hasMoreWork
  • 如果说 hasMoreWork 为 true，那么就继续调用 schedulePerformWorkUntilDeadline 方法
  • 否则就把 isMessageLoopRunning 标记为 false
3.2.3.4 flushWork

flushWork 这段代码比较多，但是核心的其实只有两个地方，其他都是一些开关的逻辑：

function flushWork(initialTime: number) {
  if (enableProfiling) {
    markSchedulerUnsuspended(initialTime);
  }

  // We'll need a host callback the next time work is scheduled.
  isHostCallbackScheduled = false;
  if (isHostTimeoutScheduled) {
    // We scheduled a timeout but it's no longer needed. Cancel it.
    isHostTimeoutScheduled = false;
    cancelHostTimeout();
  }

  isPerformingWork = true;
  const previousPriorityLevel = currentPriorityLevel;
  try {
    if (enableProfiling) {
      try {
        return workLoop(initialTime);
      } catch (error) {
        if (currentTask !== null) {
          const currentTime = getCurrentTime();
          // $FlowFixMe[incompatible-call] found when upgrading Flow
          markTaskErrored(currentTask, currentTime);
          // $FlowFixMe[incompatible-use] found when upgrading Flow
          currentTask.isQueued = false;
        }
        throw error;
      }
    } else {
      // No catch in prod code path.
      return workLoop(initialTime);
    }
  } finally {
    currentTask = null;
    currentPriorityLevel = previousPriorityLevel;
    isPerformingWork = false;
    if (enableProfiling) {
      const currentTime = getCurrentTime();
      markSchedulerSuspended(currentTime);
    }
  }
}

首先就是这一段：

// We'll need a host callback the next time work is scheduled.
isHostCallbackScheduled = false;
if (isHostTimeoutScheduled) {
  // We scheduled a timeout but it's no longer needed. Cancel it.
  isHostTimeoutScheduled = false;
  cancelHostTimeout();
}

如果当前有定时器在跑的话，isHostTimeoutScheduled 直接标记成 false 并且调 cancelHostTimeout 函数来清除掉定时器。

其次就是这一段：

return workLoop(initialTime)
3.2.3.5 workLoop

这段代码非常多，可以先看一下：

function workLoop(initialTime: number) {
  let currentTime = initialTime;
  advanceTimers(currentTime);
  currentTask = peek(taskQueue);
  while (currentTask !== null) {
    if (!enableAlwaysYieldScheduler) {
      if (currentTask.expirationTime > currentTime && shouldYieldToHost()) {
        // This currentTask hasn't expired, and we've reached the deadline.
        break;
      }
    }
    // $FlowFixMe[incompatible-use] found when upgrading Flow
    const callback = currentTask.callback;
    if (typeof callback === 'function') {
      // $FlowFixMe[incompatible-use] found when upgrading Flow
      currentTask.callback = null;
      // $FlowFixMe[incompatible-use] found when upgrading Flow
      currentPriorityLevel = currentTask.priorityLevel;
      // $FlowFixMe[incompatible-use] found when upgrading Flow
      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
      if (enableProfiling) {
        // $FlowFixMe[incompatible-call] found when upgrading Flow
        markTaskRun(currentTask, currentTime);
      }
      const continuationCallback = callback(didUserCallbackTimeout);
      currentTime = getCurrentTime();
      if (typeof continuationCallback === 'function') {
        // If a continuation is returned, immediately yield to the main thread
        // regardless of how much time is left in the current time slice.
        // $FlowFixMe[incompatible-use] found when upgrading Flow
        currentTask.callback = continuationCallback;
        if (enableProfiling) {
          // $FlowFixMe[incompatible-call] found when upgrading Flow
          markTaskYield(currentTask, currentTime);
        }
        advanceTimers(currentTime);
        return true;
      } else {
        if (enableProfiling) {
          // $FlowFixMe[incompatible-call] found when upgrading Flow
          markTaskCompleted(currentTask, currentTime);
          // $FlowFixMe[incompatible-use] found when upgrading Flow
          currentTask.isQueued = false;
        }
        if (currentTask === peek(taskQueue)) {
          pop(taskQueue);
        }
        advanceTimers(currentTime);
      }
    } else {
      pop(taskQueue);
    }
    currentTask = peek(taskQueue);
    if (enableAlwaysYieldScheduler) {
      if (currentTask === null || currentTask.expirationTime > currentTime) {
        // This currentTask hasn't expired we yield to the browser task.
        break;
      }
    }
  }
  // Return whether there's additional work
  if (currentTask !== null) {
    return true;
  } else {
    const firstTimer = peek(timerQueue);
    if (firstTimer !== null) {
      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
    }
    return false;
  }
}

这里大概的逻辑是：

  1. 调用 advanceTimers 及时将到时的 timer 放到 taskQueue 里
  2. 从 taskQueue 里取出一个 task
  3. 如果当前的分片时间 >= 5ms，那么就立刻退出循环并返回 false
  4. 如果 task.callback 不是一个 function 就将它从 taskQueue 里移除掉
  5. 如果 task.callback 是一个 function，那么就调用一下 callback 方法并拿到 continuationCallback
  6. 如果 continuationCallback 是一个 function，无论分片时间还剩余多少，这时候就要立刻将线程交还给主线程，此时会直接退出循环并返回 true，表示还有 task 没有执行完
  7. 否则如果当前的 task 和 taskQueue 堆顶的 task 为同一个，就执行一下 pop 去掉堆顶的 task
  8. 同时，再次调用一次 advanceTimers，及时将到时的 timer 放到 taskQueue 里
  9. 重新从 taskQueue 里取出 task 并重复以上步骤
  10. 循环结束后:
  • 如果 currentTask !== null 则返回 true，表示还有 task 没有执行完毕
  • 如果 currentTask == null，那么就从 timerQueue 里取出一个 timer，并调用 `
    requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime)，最终返回 false，表示已经执行完所有 task`

3.2.4 小结

上面提到了好几个关键的方法：

  • cancelHostTimeout
  • requestHostTimeout
  • handleTimeout
  • advanceTimers
  • requestHostCallback
  • performWorkUntilDeadline
  • flushWork
  • workLoop

在最后我们再来梳理一遍 timerQueue 整体的逻辑:

  1. 满足 startTime > currentTime 的 task 会被 push 到 timerQueue 里，之后会有一个定时器来执行 handleTimeout 方法。如果在这之前已经有定时器在跑了，那就会把它取消掉。
  2. handleTimeout 这里的逻辑，相当于是有一个轮询会一直从 timerQueue 里找到到时的任务放到 taskQueue 里，一旦 taskQueue 不为空就会执行 requestHostCallback
  3. requestHostCallback 会调用 schedulePerformWorkUntilDeadline 并发出一个宏任务，通常我们理解它会在下一个事件循环的开头里执行。

  4. 在宏任务里的函数，会依次执行

    • performWorkUntilDeadline
    • flushWork
    • workLoop
  5. 最后在 workLoop 里会不断从 taskQueue 里拿出 task 来执行，执行之前如果发现分片时间 >= 5ms 就会立刻退出循环并返回 true。如果发现执行结果返回的是 continuationCallback 也同样会马上退出循环并返回 true
  6. 最后如果发现依然还有 task，就会继续调用 schedulePerformWorkUntilDeadline 并重复以上动作

3.3 taskQueue

入口这里的 taskQueue 逻辑主要是这些：

newTask.sortIndex = expirationTime;
push(taskQueue, newTask);
if (enableProfiling) {
  markTaskStart(newTask, currentTime);
  newTask.isQueued = true;
}
// Schedule a host callback, if needed. If we're already performing work,
// wait until the next time we yield.
if (!isHostCallbackScheduled && !isPerformingWork) {
  isHostCallbackScheduled = true;
  requestHostCallback();
}

可以看出这里就是做两件事情：

  1. 将 task 放入 taskQueue
  2. 调用 requestHostCallback

requestHostCallback 这个函数的逻辑已经在上面说过了，这里就不再赘述了。

4. 总结

在 React 18 引入的 Concurrent 模式中，调度系统的核心实现依赖于 Scheduler 包。通过小顶堆对任务进行优先级排序，再结合浏览器的事件循环机制，尤其是高效且兼容性好的 MessageChannel，实现了可中断、可恢复的任务执行模型。本文从小顶堆的数据结构开始，逐步剖析了 Scheduler 的调度策略、延迟任务处理、任务执行分片以及整个调度链路中的关键方法与队列交互逻辑，帮助我们更清晰地理解 React 是如何「在合适的时间做合适的事情」的。

你可能感兴趣的:(【React 源码阅读】Scheduler)

  • 19.0-《超越感觉》-说服他人 SAM52
    Becausethoughtfuljudgmentsdeservetobeshared,andthewaytheyarepresentedcanstronglyinfluencethewayothersreacttothem.因为经过深思熟虑的判断值得分享，而这些判断的呈现方式会强烈影响其他人对它们的反应。Bylearningtheprinciplesofpersuasionandapplying
  • 全面解析：Spring Gateway如何优雅处理微服务的路由转发？ 万猫学社 gatewayjavaspring
    SpringGateway简介SpringGateway，这是一个基于Spring5、SpringBoot2和ProjectReactor的API网关。它旨在为微服务架构提供一个简单、有效的统一的API路由、限流、熔断等功能。在微服务的世界里，SpringGateway就像一个交通警察，负责指挥和引导各个微服务之间的交通。相较于其他的网关技术，比如Nginx、Zuul等，SpringGateway
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • Vue3组合API初体验 DTcode7 Vue实战指南VUEHTMLwebvue框架前端
    Vue3组合API初体验基本概念与作用说明示例一：使用ref创建响应式数据示例二：使用reactive创建响应式对象示例三：使用computed计算属性示例四：使用watch监听数据变化示例五：使用provide/inject进行父子组件间通信功能使用思路与实际开发技巧1.何时使用ref与reactive？2.如何在组合式API中保持逻辑的清晰？3.如何处理异步操作？随着Vue3的发布，组合式AP
  • 第七篇 快速开始-序 深圳都这么冷
    快速开始欢迎使用React文档！本页将向您介绍您每天会用到的80%的React概念。本章内容预告如何创建和嵌套组件如何添加标记和样式如何显示数据如何渲染条件表达式和列表表达式如何响应事件和更新屏幕如何在组件之间共享数据创建和嵌套组件React应用程序由组件组成。组件是UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。React组件是返回标记的JavaScri
  • maven指定子项目打包
    Maven多个mudule只编译、打包指定module在多module的maven项目中，如果每次打包整个工程显得有些冗余和笨重。例如A,B,P的继承关系为P|—–A|—–B即P包含A,B的module，每次打包P都会将A,B都打包。假如我只修改了A模块，那么每次都要将B都一块打包吗？当然不是，maven提供了自定义参数：-pl,--projectsBuildspecifiedreactorpro
  • React组件中的this指向问题
    在React组件中，函数定义方式影响this指向的核心原因是箭头函数与普通函数的作用域绑定规则不同，具体差异如下：1.普通函数（function定义）需要手动bind(this)的原因当用function在组件内定义方法时：classMyComponentextendsReact.Component{handleClick(){console.log(this);//若未绑定，此处this为und
  • kubeadm部署安装K8S集群及核心概念-02
    Kubernetes组件介绍KubernetesCluster由Master和Node组成，节点上运行着若干Kubernetes服务。Master节点Master是KubernetesCluster的大脑，运行着如下Daemon服务：kube-apiserver、kube-scheduler、kube-controller-manager、etcd和Pod网络（例如flannel）。APIServ
  • Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验 掘金安东尼 字节阿里rust前端wasm
    如果你正在寻找一个能用Rust写前端、桌面应用、移动应用甚至WebAssembly的统一框架，Dioxus是目前生态中最具潜力的选择之一。为什么需要Dioxus？随着WebAssembly（WASM）与Rust的发展，越来越多开发者开始思考：Rust是否能做“全栈”？是否能有像React一样的组件模型？是否可以用Rust写桌面GUI，甚至Web前端？Dioxus正是这个愿景下的产物。它是一个受Re
  • IntelliJ IDEA 高效开发指南：从基础操作到高级技巧 zqmgx13291 intellij-ideajavaide
    一、IDEA概述与环境配置1.1IDEA的核心优势智能代码辅助：基于上下文的代码补全（Ctrl+Space）、方法参数提示、错误实时检测全栈开发支持：内置Java/Python/JavaScript等20+语言支持，框架集成（SpringBoot/Vue/React）工具链集成：版本控制（Git/SVN）、数据库（MySQL/PostgreSQL）、容器（Docker/K8s）一站式开发性能优化：
  • k8s 的基本原理、架构图、使用步骤和注意事项
    Kubernetes（k8s）是一个开源的容器编排平台，用于自动化部署、扩展和管理容器化应用。以下是其基本原理、使用步骤和注意事项的总结：一、k8s基本原理核心架构Master节点：控制集群的核心组件，包括：APIServer：所有操作的入口，提供RESTfulAPI。Scheduler：将Pod分配到合适的Node。ControllerManager：维护集群状态（如副本数、故障检测）。etcd
  • react class和function 如何模拟vue中的 双向绑定 监听 computed的方式
    在React中，类组件和函数组件的写法有所不同。你提到的「双向绑定」、「监听」和「computed（计算属性）」这几个概念，原本来源于Vue，但在React中我们也可以通过特定方式实现类似功能。下面我将分别介绍：1.类组件中的双向绑定在类组件中，要实现双向绑定（如表单输入），我们通常使用state和onChange：importReactfrom'react';classMyFormextends
  • PostGIS面试题及详细答案120道之 （021-030 ） 还是大剑师兰特 大剑师postgis面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录21.为什么要在PostGIS中使用空间索引？22.PostGIS支持哪些类型的
  • Java面试题及详细答案120道之（081-100） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录81.Java中的`ConcurrentHashMap`与`HashMap`在并
  • Openlayers 面试题及答案180道（41-60） 还是大剑师兰特 #前后端面试题大剑师Openlayers面试题Openlayers示例Openlayers教程
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.如何在OpenLayers中加载WFS数据？42.在OpenLayers中
  • CSS面试题及详细答案140道之（41-60） 还是大剑师兰特 前后端面试题css前端大剑师CSS面试CSS示例
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.如何在不使用额外标记的情况下隐藏文本但保留其可访问性？42.解释`text
  • 2025年02月13日 · Go生态洞察：可扩展的 WebAssembly 应用 猫头虎 #Go生态洞察golangwasm开发语言后端go1.19gobeego
    2025年02月13日·Go生态洞察：可扩展的WebAssembly应用摘要大家好，我是猫头虎。本篇文章将带领大家深入剖析Go1.24在WebAssembly（Wasm）领域的最新特性：go:wasmexport指令、WASIReactor构建模式、丰富类型支持及其限制，并通过示例代码演示如何在实际项目中灵活运用。关键词：WebAssembly、WASI、Go1.24、go:wasmexport、
  • 每天一个前端小知识 Day 17 - 微前端架构实战与 Module Federation
    微前端架构实战与ModuleFederation为什么要微前端？✅传统SPA的问题：问题描述构建时间越来越长单体应用构建缓慢，难以增量部署多团队协作困难不同业务线互相依赖紧耦合技术栈难以迁移老项目技术债，无法局部替换✅微前端目标：像微服务一样拆前端系统各子应用独立开发、独立部署、独立运行支持多技术栈共存（React+Vue+原生）核心架构方案一览架构方式技术实现适用场景iframe方式每个子应用独
  • 你的一个箭头函数让我找了几天 JsLin_
    同事的h5的相关内容给我接手了，上线后发现好多手机浏览器不显示内容，就是这个问题断断续续找了有两个星期的时间，迫使我把他的h5相关的内容用react重构了一遍，重构完又发现一大堆事情。先抱怨下吧首先，一个网站的域名竟然不指定首页？大图片资源不压缩？找了一段时间，没找到原因，迫使我把它的代码用react重构了，也正好练练手。重构完了之后，发现运维那里的以前的工程nginx部署没有指定主页，才发现官网
  • python apscheduler简单使用方法 MartinYangHJ python数据库
    1.‌检查触发器类型和参数‌APScheduler支持多种触发器（interval、cron、date），不同的触发器配置可能导致立即执行。‌场景1：使用interval触发器‌默认情况下，interval触发器会立即执行一次，然后按间隔重复。如果不需要立即执行，需设置start_date为未来的时间：fromapscheduler.schedulers.blockingimportBlockin
  • python之APScheduler ༒࿈十三༙྇࿈༒ pythonpythonlinux前端
    APScheduler是一个用于Python的高级任务调度库，可以在任何Python环境中使用。它提供了各种灵活的方式来定义和执行定时任务，支持多种调度方式，包括固定时间间隔、固定日期时间、CRON表达式等。首先，需要使用pip安装APScheduler库：pipinstallapscheduler下面是一个使用APScheduler的简单示例：fromapscheduler.schedulers
  • python使用APScheduler进行定时任务,任务调度 sssugarr python
    介绍APScheduler（AdvancedPythonScheduler）是一个非常强大的调度库，它允许我们在特定的时间间隔、特定的时间点或特定的日期执行任务。它支持多种调度器，例如基于日期、时间间隔和Cron表达式的调度。安装首先，我们需要安装APScheduler。可以使用以下命令通过pip进行安装：pipinstallapscheduler基本用法APScheduler的主要组件包括：触发
  • 面试复盘：为什么Vue2的data数据量大时内存开销大？ neon1204 前端面试面试前端javascriptvue.js
    背景描述今天前端技术面试中，面试官针对Vue2的源码和性能方面提问：“当data中存储大量数据时，为什么内存开销显著增加？”。本文复盘梳理我的回答思路：一、核心机制：Object.defineProperty的递归与闭包Vue2的响应式系统通过递归遍历data中的每个属性，将其转换为getter/setter。这一过程在源码中由defineReactive函数实现，其内存开销主要来自以下三点：1.
  • React入门指南——指北指南（第二节） 逢着 react.js前端前端框架
    React实践：创建你的第一个待办事项列表在前面的章节中，我们学习了React的核心概念（组件、Props、State等）。本节将通过一个实际案例——创建待办事项列表（TodoList），帮助你巩固这些概念，并掌握React中处理用户交互、动态数据的基本方法。案例目标我们将构建一个简单但功能完整的待办事项应用，包含以下功能：输入框中输入文本，点击按钮添加新的待办项；显示所有待办项的列表；点击单个待
  • React入门学习——指北指南（第三节） 逢着 react.js学习前端
    React组件在前面的内容中，我们了解了React的基础知识和入门案例。本节将深入探讨React中最核心的概念之一——组件。组件是构建React应用的基础，理解组件的工作原理和使用方法，对于掌握React开发至关重要。什么是组件？在React中，组件是具有独立功能和UI的可复用代码块。可以将组件看作是构建用户界面的“积木”，通过组合不同的组件，能够搭建出复杂的页面。组件就像一个函数，它可以接收输入
  • Java面试题及详细答案120道之（041-060） 还是大剑师兰特 前后端面试题大剑师java面试题
    《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux…。前后端面试题-专栏总目录文章目录一、本文面试题目录41.什么是工厂模式？简单工厂、工厂方法、抽象工厂的区别？42.Java中的泛型
  • 快速梳理遗留项目 lixzest pythonjavac++
    梳理一个别人写的代码项目是开发者常遇到的任务，尤其是接手遗留项目或团队协作时。以下是系统化的步骤和技巧，帮助快速理解项目结构和逻辑：1.了解项目背景项目目标：与产品经理或前任开发者沟通，明确项目用途（如电商系统、数据分析工具等）。技术栈：确认语言（Python/Java/Go等）、框架（Spring/Django/React等）、数据库（MySQL/MongoDB等）。文档检查：优先阅读READM
  • 如何实现零成本裂变?微信推客带货小程序开发功能模式全解析 开发加微信：hedian116 微信
    引言在当今社交电商蓬勃发展的背景下，微信推客系统作为一种基于社交关系的分销模式，其技术实现和架构设计值得开发者深入探讨。本文将从技术角度分析微信推客系统的核心组件和实现原理，避免商业营销，专注于技术层面的分享。一、微信推客系统的基本架构1.1前端架构微信推客系统通常采用混合开发模式：小程序前端：使用WXML+WXSS+JavaScript技术栈H5页面：Vue.js或React框架实现跨平台兼容原
  • React Native启动android报错 Failed to install the app. Command failed with exit code 1: gradlew.b（亲测有效） 安心不心安 ReactNative学习笔记reactnativeandroidreact.js
    一、原因react-nativerun-android或npxreact-nativestart命令的默认行为是：编译APK（通过Gradle）。安装APK到设备（通过adbinstall）。启动应用（通过adbshellamstart）。如果模拟器未提前启动：adb可能找不到设备，导致安装步骤失败。错误可能表现为Noconnecteddevices!或INSTALL_FAILED。二、解决方法注
  • 算法在前端框架中的集成
    引言算法是前端开发中提升性能和用户体验的重要工具。随着Web应用复杂性的增加，现代前端框架如React、Vue和Angular提供了强大的工具集，使得将算法与框架特性（如状态管理、虚拟DOM和组件化）无缝集成成为可能。从排序算法优化列表渲染到动态规划提升复杂计算效率，算法的集成能够显著改善应用的响应速度和资源利用率。本文将探讨如何将常见算法（排序、搜索和动态规划）集成到前端框架中，重点介绍框架特性
  • 遍历dom 并且存储（将每一层的DOM元素存在数组中） 换个号韩国红果果 JavaScripthtml
    数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
  • Android+Jquery Mobile学习系列(9)-总结和代码分享 白糖_ JQuery Mobile
    目录导航   经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。   个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
  • impala参考资料 dayutianfei impala
    记录一些有用的Impala资料   1. 入门资料 >>官网翻译：     http://my.oschina.net/weiqingbin/blog?catalog=423691   2. 实用进阶 >>代码&架构分析：     Impala/Hive现状分析与前景展望：http
  • JAVA 静态变量与非静态变量初始化顺序之新解 周凡杨 java静态非静态顺序
    今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
  • 跳出iframe返回外层页面 g21121 iframe
    在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。 首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
  • JAVA多线程监听JMS、MQ队列 510888780 java多线程
    背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。 对于上面提到的方法2使用一个监听器开启多线
  • 第一个SpringMvc例子 布衣凌宇 spring mvc
    第一步：导入需要的包； 第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
  • 我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
    PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
  • 通过XSD验证XML antlove xmlschemaxsdvalidationSchemaFactory
    1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
  • 文本流与字符集 百合不是茶 PrintWrite()的使用字符集名字 别名获取
    文本数据的输入输出;           输入;数据流,缓冲流         输出;介绍向文本打印格式化的输出PrintWrite();   package 文本流; import java.io.FileNotFound
  • ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
            正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
  • java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 javajvmjdb
            用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。         现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
  • 【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
    在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
  • cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
        由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
  • 动态页面正文部分中文乱码排障一例 ronin47
    公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。 不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。 因为有做过系统调整，所以第一反应就是新上
  • java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
    import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
  • 从100PV到1亿级PV网站架构演变 cfyme 网站架构
    一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的 架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
  • [宇宙时代]宇宙时代的GIS是什么？ comsci Gis
           我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的          宇宙是一个高维时空
  • 详解create database命令 czmmiao database
    完整命令 CREATE DATABASE mynewdb   USER SYS IDENTIFIED BY sys_password   USER SYSTEM IDENTIFIED BY system_password   LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
  • 几句不中听却不得不认可的话 datageek
    1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
  • 1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
    原文地址：http://www.kafka0102.com/2010/08/281.html   因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
  • xcode6 Auto layout and size classes dcj3sjt126com ios
    官方GUI   https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html   iOS中使用自动布局（一）   http://www.cocoachina.com/ind
  • 通过PreparedStatement批量执行sql语句【sql语句相同，值不同】 梦见x光 sql事务批量执行
    比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) {    String sql = "inseret into customer(id
  • 程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
    一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear   二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
  • NGINX IXHONG nginx
    pcre 编译安装 nginx conf/vhost/test.conf   upstream admin { server 127.0.0.1:8080; }   server {                 listen       80; &
  • 设计模式--工厂模式 kerryg 设计模式
    工厂方式模式分为三种：   1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。   2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。   3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
  • Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd javaspringbeanxml
    1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。 通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
  • 解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centosvim
    有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？ 答案是肯定的，设置下缩进格式就可以了，非常简单： 在用户的根目录下 直接vi  ~/.vimrc文件 然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
  • netty大并发请求问题 tianzhihehe netty
    多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
  • Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
    我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。 我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。 经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他