IT瘾javascript推荐

8行javascript录制屏幕

Fri, 18 Nov 2022 18:50:05 CST

看到个骚操作，玩了一下，写了个 bookmarklet

  
navigator.mediaDevices.getDisplayMedia({video:true}).then(function(stream){
  const mr=new MediaRecorder(stream,{mimeType:"video/webm;codecs=h264,opus"});
  mr.ondataavailable=function(ev){
    const a=document.createElement('a');a.href=URL.createObjectURL(ev.data);
    a.download ='screen_capture.webm';a.click();
  }; // will be called when .stop() with ev.data as a Blob
  mr.start();
})

这段代码也是很多WebRTC共享白板的实现原理。看起来也很简单，而且不需要额外的权限确认。

如果不需要另存为一个名字，则可以直接 location.assign() 又节约几个字。不知道还有没有办法继续节约代码量？

只是很好奇为啥chrome不支持 .mp4 封装。偏袒自家的 webm ？

Meta开源JavaScript内存泄漏监测工具MemLab

Thu, 22 Sep 2022 11:26:54 CST

一、MemLab简介

上周，Facebook母公司Meta 宣布了开源 MemLab，一个基于 Chromium 的浏览器的 JavaScript 应用程序内存泄漏监测工具。同时，Facebook 技术团队指出：“应用程序的性能和功能正确性问题通常会被用户立即留意到。然而内存泄漏却不一样，它不容易被立即察觉，但它每次都会吃掉一大块内存，使得整个网络会话的响应变得非常慢。”

为了帮助开发人员解决这个问题，Meta 构建了MemLab，它可以自动进行内存泄漏检测并更容易找到泄漏的根本原因。据官方公告称，Meta 内部使用它成功地控制了不可持续的内存增长，并识别了产品和基础设施中的内存泄漏和内存优化机会。目前，Meta 已经在 GitHub 上开源了 MemLab。

Facebook在 2020 年被重新设计为单页应用程序 (SPA)，该应用程序的大部分渲染和导航使用客户端 JavaScript。而 Meta 的大多数其他流行网络应用程序都使用了类似的架构来构建，包括 Instagram 和 Workplace。

虽然这种架构使其能够提供更快的用户交互、更好的开发人员体验和更像应用程序的感觉，但在客户端维护 Web 应用程序状态会使有效管理客户端内存变得更加复杂。且内存泄漏的后果在单页应用程序（SPA）中更为严重，因为用户可能会在较长时间内持续与页面交互，而 MemLab 就是专为这种场景设计的。

在许多情况下，JavaScript 可能会泄漏内存。比如，Facebook 工程师 Liang Gong 和 Glenn Conner 就在公告中谈到，当你向 Chrome 控制台发送一个对象时，Chrome 会对其进行隐藏引用，以防止它被收集。另外，auth0 工程师 Sebastian Peyrott 也曾谈到，其他可能出现泄漏或未绑定内存增长的情况则与意外使用全局变量、忘记计时器或回调以及 DOM 外引用有关。

虽然 Chrome 开发者工具提供了检查 JavaScript 代码的内存行为的基本手段，比如时间线视图和配置文件视图，但这并不直接，也不能自动化。相反，MemLab 则可以很容易地集成到 CI/CD 管道中，Gong 和 Conner 介绍道。

二、工作原理

MemLab 的工作原理是通过预定义的测试场景运行 headless 浏览器并对 JavaScript heap snapshots 进行差异分析来发现内存泄漏。要达到这一目的，需要经过如下几步：

导航到页面并返回；
查找未释放的对象；
显示泄露追踪结果。

据悉，MemLab 使用了一个名为“Puppeteer”的 Node.js 库。它可以控制 Google Chrome 或其它基于 Chromium 内核打造的浏览器，且默认情况下以 headless 模式运行（方便命令行交互）。

Facebook 工程师解释称，MemLab 的工作方式就是导航到一个页面、然后离开。正常情况下，可预计该页面分配的大部分内存也将被释放。但若没有被释放，则意味其存在极高的内存泄露可能性。

我们知道，React 使用存储在树结构中、被称作 Fibers 的对象，来表示内存中的浏览器文档对象模型（DOM）。据该团队所述，这可能是存在“巨大内存泄露”的一个主要原因。拥有强连接图的缺点很是显著，若有任何外部引用指向图的任何部分，就无法对整个图开展垃圾回收。

对于浏览器内存泄漏检测，MemLab 需要开发人员提供的唯一输入是一个测试场景文件，该文件定义了如何通过 overriding Puppeteer API 和 CSS 选择器的三个回调来与网页进行交互。MemLab 会自动对 JavaScript heap 进行差异化处理，完善内存泄漏，并对结果进行汇总。

MemLab 的另一特性，就是提供了 JavaScript 堆的图形视图、启用了用于检查堆快照的 API 。这意味着开发者能够编写开展内存断言的测试，例如声明某个对象将不再存在于内存中。

此外还有一个用于查找重复字符串实例的工具，在某个案例中，团队发现字符串占用了 70% 的堆、且其中半数至少有一个重复的实例。包括 Chrome、Edge、Firefox 在内的浏览器，都有附带内存检查工具。但正如以为开发者在 Hacker News 上吐槽的那样，这些开发工具难以在调试过程中揪出内存泄露的问题。

最后，MemLab 的另一项强大功能，就是可以在测试期间作为命令过程的一部分而运行。这意味着如果代码中引入了严重的泄露，开发者们也能够在投入生产环境前加以捕获。

除了内存泄漏检测之外，MemLab还包括一组用于查找内存优化机会的内置CLI命令和api，并提供如下的功能：

堆内容分解
监测单个对象的内存使用情况
查找重复的字符串实例

比如，监测浏览内存泄漏部分UI。

跟踪UI内存泄漏的整个链路。

三、基本使用

3.1 安装与使用

首先，需要全局安装MemLab插件，安装的命令如下：

  npm install -g memlab

例如下面是找到谷歌Maps中的内存泄漏的例子，我妈可以创建一个场景文件来定义如何与谷歌Maps进行交互，比如将其命名为test-google-maps.js。

  function url() {
  return 'https://www.google.com/maps/@37.386427,-122.0428214,11z';
}


async function action(page) {
  await page.click('button[aria-label="Hotels"]');
}


async function back(page) {
  await page.click('[aria-label="Clear search"]');
}


module.exports = {action, back, url};

现在使用下面的命令运行上面的js代码, 当memlab与web页面进行交互时就会运行内置的泄漏检测器检测内存泄漏。

  memlab run --scenario test-google-maps.js

执行结束之后，Memlab就会打印内存泄漏结果，显示每个泄漏对象集群的一个代表性保留跟踪。

  MemLab found 46 leak(s)
--Similar leaks in this run: 4--
--Retained size of leaked objects: 8.3MB--
[Window] (native) @35847 [8.3MB]
  --20 (element)--->  [InternalNode] (native) @130981728 [8.3MB]
  --8 (element)--->  [InternalNode] (native) @130980288 [8.3MB]
  --1 (element)--->  [EventListener] (native) @131009888 [8.3MB]
  --1 (element)--->  [V8EventListener] (native) @224808192 [8.3MB]
  --1 (element)--->  [eventHandler] (closure) @168079 [8.3MB]
  --context (internal)--->  [<function scope>] (object) @181905 [8.3MB]
  --bigArray (variable)--->  [Array] (object) @182925 [8.3MB]
  --elements (internal)--->  [(object elements)] (array) @182929 [8.3MB]
...

接着，我们就可以通过这些捕获的跟踪信息定位到里面的方法。

当然，我没也可以使用Memlab查看基于从Chromium、Hermes、memlab或任何node.js或electronic .js程序中获取的单个JavaScript堆快照检测到的内存问题。

  memlab view-heap --snapshot <PATH TO .heapsnapshot FILE>

然后，我没可以使用对象的id，比如node-id @28173来精确定位特定的堆对象。

当然，Memlab也支持自定义的检漏器，自定义检漏器时需要在场景文件中添加一个 filterLeak文档。对于目标交互分配的每个未释放的堆对象(节点)将调用filterLeak。

  function filterLeak(node, heap) {
  // ... your leak detector logic
  // return true to mark the node as a memory leak
};

heap是最终JavaScript堆快照的图形表示。

3.2 堆分析与研究

除了检测内存泄露意外，Memlab还提供了很多其他有用的命令，比如查看某个对象在运行的交互过程中的整个链路。

  memlab analyze unbound-object

获取V8/hermes .heapsnapshot文件。

  memlab analyze unbound-object --snapshot-dir <DIR_OF_SNAPSHOT_FILES>

使用memlab analyze查看所有内置内存分析。

  memlab trace --node-id <HEAP_OBJECT_ID>

3.3 Memlab API

Memlab的npm包支持在浏览器中启动端到端运行并检测内存泄漏。

  const memlab = require('memlab');


const scenario = {
    url: () => 'https://www.google.com/maps/@37.386427,-122.0428214,11z',
    action: async (page) => await page.click('button[aria-label="Hotels"]'),
    back: async (page) => await page.click('[aria-label="Clear search"]'),
}
memlab.run({scenario});

3.4 内存断言

Memlab支持在Node.js程序中进行Jest测试，也可以使用图视图API来获得其自身状态的堆图视图，执行自内存检查，并编写各种内存断言。

  import type {IHeapSnapshot} from '@memlab/core';
import {config, takeNodeMinimalHeap, tagObject} from '@memlab/core';
test('memory test', async () => {
  config.muteConsole = true;
  const o1 = {};
  let o2 = {};
  tagObject(o1, 'memlab-mark-1');
  tagObject(o2, 'memlab-mark-2');
  o2 = null;
  const heap: IHeapSnapshot = await takeNodeMinimalHeap();
   //断言函数
  expect(heap.hasObjectWithTag('memlab-mark-1')).toBe(true);
  //断言函数
  expect(heap.hasObjectWithTag('memlab-mark-2')).toBe(false);
}, 30000);

附件： https://github.com/facebookincubator/memlab

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

Sat, 11 Jun 2022 08:00:00 CST

前言

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，即沙箱机制的古往今来。

要实现一个 JavaScript 沙箱，可以有很多种分类方式，比如按照具体的实现方式来区分，就至少包含如下：

基于 Proxy 快照存储 + window 修改的实现
基于 Proxy 代理拦截 + window 激活/卸载的实现
基于普通对象快照存储的 window 属性 diff 实现
基于 iframe + 消息通信的实现
基于 ShadowRealm 提案的实现
基于 with + eval 的简单实现
……

本文主要考虑沙箱机制在实现时所用到的主要 Web 技术，计划大致分为四类实现方案分别介绍，结合之下，本文目录如下：

前言
基于 Proxy 实现的沙箱机制
1. 简要谈谈 Proxy API
2. 基于 Proxy 的沙箱实现考虑
3. 结合微前端框架 qiankun 介绍两类沙箱实现
基于属性 diff 实现的沙箱机制
基于 iframe 实现的沙箱机制
1. 基于 Proxy 及 diff 的沙箱机制边界考虑
2. 利用 iframe 实现沙箱机制的几点思考
3. 一段 iframe 沙箱的示例代码
各类沙箱机制对比
基于 ES 提案 ShadowRealm API 介绍
1. 什么是 JavaScript 的运行环境实例
2. ShadowRealm API 简介
3. ShadowRealm 的错误捕获与更多应用场景
总结
参考

希望通过我自己的项目实践、阅读代码、提案梳理等方式对 JavaScript 隔离（沙箱机制）进行系统整理，其中会结合一些开源框架的实现来辅助解读，但不会针对微前端框架深入介绍，也不会就某一个沙箱机制的具体细节实现（比如如何构建闭包环境、属性读取、DOM 操作等众多边界处理）进行剖析。

如果你想了解关于 CSS 样式隔离的内容可以搜索 Shadow DOM 相关内容进一步查阅；如果你想了解微前端的主子应用加载、运行机制，可以参考 single-spa 文档、qiankun 文档、ShadowRealm 提案等内容；如果你想了解文中涉及的一些概念与 API 用法可以在 MDN 进行搜索查阅，大部分均有对应介绍。

本文在撰写中尽力保证文章的思路流畅和通俗易懂，但由于个人正从事基于微前端方案的开发，可能有些概念会潜意识认为所有读者均已了解，未能详尽每个涉及名词的统一处理或解释，此处针对一些通用的概念进行铺垫：

主应用：在微前端方案中，区分主子应用，主应用通常负责全局资源的加载、隔离、控制运行，用户登陆信息等全局状态的管理等等，也被称为基座、微前端全局环境等；
子应用：微前端方案中可以独立加载运行的一个 Web 应用，通常需要一个完备的隔离环境供其加载，文中提到的沙箱激活/卸载也是为其服务，也称微应用；
沙箱：意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响，英文对应 sandbox，此名词常与 JavaScript 隔离一起使用；
qiankun：一款开源方案，基于 single-spa 的微前端实现库；

以下开始正文。

基于 Proxy 的沙箱机制

Proxy 是当下做 JavaScript 隔离用到的最主要的手段之一，接下来我们详细说说基于 Proxy 的沙箱机制。

简要谈谈 Proxy API

Proxy 是一个标准 Web API，在 ES6 版本中被推出，这个对象可以用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等），我们可以通过一个简单的例子来解释说明 Proxy 的作用：

    const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

在上例中，我们定义了一个 handler，其中包含一个 get 拦截器，它的作用是在属性查找时，如果对象对应属性不存在时返回数值 37，此后我们通过 Proxy 对一个空对象进行了代理，分别打印了其中的 a、b、c 属性，可以发现，其中 c 属性由于不存在而返回了 37。

基于 Proxy 的沙箱实现考虑

既然 Proxy 可以用于代理对象，那么我们同样可以用其代理 window——Web 应用运行中最重要的上下文环境。每个 Web 应用都会与 window 交互，无数的 API 也同样挂靠在 window 上，要达到允许独立运行的微前端环境，首先需要 window 隔开。

在采用 Proxy 作为沙箱机制方案时，主要还是基于 get、set、has、getOwnPropertyDescriptor 等关键拦截器对 window 进行代理拦截（如下如有涉及代码，我们主要关注 get 与 set 两类拦截器）。为了让沙箱的代理拦截完备，除了 window 外，我们通常都需要关注几方面，比如一些难以代理（或者说没必要代理）的 Web API，如 Array、Number、Promise 等，此外还需要保证通过 with、eval、new Function 等方式执行的代码作用域不会逃逸，动态加载的 JavaScript 代码也算一个。

谈到这里，我们首先看看通过 Proxy 进行属性查找时的一些处理逻辑。除了在拦截器中进行一些常规的无需拦截 case 判断外，还需要对 Symbol.unscopables 属性 get 拦截器的返回值做些定义，以方便 with 等方式下代码的执行作用域正常处理，如下是个简单的例子：

    const unscopables = {
  Array: true,
  Object: true,
  String: true,
  Promise: true,
  requestAnimationFrame: true,
  ...
};

// ...

{
  get: (target: FakeWindow, p: PropertyKey): any => {
    // Symbol.unscopables 属性
    if (p === Symbol.unscopables) return unscopables;

    // 无需拦截的 Web API
    if (p === 'eval') {
      return eval;
    }
  }
}

如上代码中，关于 eval 的拦截判断很好理解，这里我们停下简要介绍一下一个概念： Symbol.unscopables。

Symbol.unscopables 属性，指用于指定对象值，其对象自身和继承的从关联对象的 with 环境绑定中排除的属性名称。当我们在 unscopables 对象上将属性设置为 true，将使其 unscopable 并且因此该属性也将不会在词法环境变量中出现。我们来看一个简单例子，以了解其效果：

    const object1 = {
  property1: 42
};

object1[Symbol.unscopables] = {
  property1: true
};

with (object1) {
  console.log(property1);
  // expected output: Error: property1 is not defined
}

注：在微前端环境下，通常需要对一些全局变量与属性进行更全面的梳理，此处可以参考 qiankun 的实现 https://github.com/umijs/qiankun/blob/dbbc9acdb0733b3ab28e0470c969d65b57653ff0/src/sandbox/proxySandbox.ts#L255

结合微前端框架 qiankun 介绍两类沙箱实现

微前端框架 qiankun 中一共存在三类沙箱，基于 Proxy 实现方式不同以及是否支持多实例，可以分为两类：

支持子应用单实例沙箱（LegacySandbox）
支持子应用多实例沙箱（ProxySandbox）

当我们只针对全局运行环境进行代理赋值记录，而不从中取值，那么这样的沙箱只是作为我们记录变化的一种手段，而实际操作仍在主应用运行环境中对 window 进行了读写，因此这类沙箱也只能支持单实例模式，qiankun 在实现上将其命名为 LegacySandbox。

我们先假设我们的沙箱实现上包含这几个变量（此处以 qiankun 实现为例）：

    /** 沙箱期间新增的全局变量 */
private addedPropsMapInSandbox = new Map<PropertyKey, any>();

/** 沙箱期间更新的全局变量 */
private modifiedPropsOriginalValueMapInSandbox = new Map<PropertyKey, any>();

/** 持续记录更新的(新增和修改的)全局变量的 map，用于在任意时刻做 snapshot */
private currentUpdatedPropsValueMap = new Map<PropertyKey, any>();

这类沙箱的激活与卸载思路可以通过如下两个函数代码解释。首先是激活函数，当沙箱被激活时，我们通过曾经记录好的更新过的全局变量（也可以称为快照）来还原子应用所需要的沙箱环境（即上下文）：

    active() {
  if (!this.sandboxRunning) {
    this.currentUpdatedPropsValueMap.forEach(
       (v, p) => this.setWindowProp(p, v)
    );
  }

  this.sandboxRunning = true;
}

等到需要卸载时，沙箱需要做两件事，一是将子应用运行时修改过的全局变量还原，另一个是删除子应用运行时新增的全局变量：

    inactive() {
  this.modifiedPropsOriginalValueMapInSandbox.forEach(
    (v, p) => this.setWindowProp(p, v)
  );
  
  this.addedPropsMapInSandbox.forEach(
    (_, p) => this.setWindowProp(p, undefined, true)
  );

  this.sandboxRunning = false;
}

注：详尽代码可以参考 qiankun 实现 https://github.com/umijs/qiankun/blob/dbbc9acdb0733b3ab28e0470c969d65b57653ff0/src/sandbox/legacy/sandbox.ts#L51-L73

如上所述，LegacySandbox 的思路在于虽然建立了沙箱代理，但在子应用运行过程中，所有的赋值仍旧会直接操作 window 对象，代理所做的事情就是记录变化（形成快照）；而针对激活和卸载，沙箱会在激活时还原子应用的状态，而卸载时还原主应用的状态，以此达到沙箱隔离的目的。

LegacySandbox 由于会修改 window 对象，在多个实例运行时肯定会存在冲突，因此，该沙箱模式只能在单实例场景下使用，而当我们需要同时起多个实例时，ProxySandbox 便登场了。

ProxySandbox 的方案是同时用 Proxy 给子应用运行环境做了 get 与 set 拦截。沙箱在初始构造时建立一个状态池，当应用操作 window 时，赋值通过 set 拦截器将变量写入状态池，而取值也是从状态池中优先寻找对应属性。由于状态池与子应用绑定，那么运行多个子应用，便可以产生多个相互独立的沙箱环境。

由于取值赋值均在建立的状态池上操作，因此，在第一种沙箱环境下激活和卸载需要做的工作，这里也就不需要了。关于状态池的设计，可以参考代码 https://github.com/umijs/qiankun/blob/dbbc9acdb0733b3ab28e0470c969d65b57653ff0/src/sandbox/proxySandbox.ts#L81

基于属性 diff 的沙箱机制

由于 Proxy 为 ES6 引入的 API，在不支持 ES6 的环境下，我们可以通过一类原始的方式来实现所要的沙箱，即利用普通对象针对 window 属性值构建快照，用于环境的存储与恢复，并在应用卸载时对 window 对象修改做 diff 用于子应用环境的更新保存。在 qiankun 中也有该降级方案，被称为 SnapshotSandbox。当然，这类沙箱同样也不能支持多实例运行，原因也相同。

这类方案的主要思路与 LegacySandbox 有些类似，同样主要分为激活与卸载两个部分的操作。

    // iter 为一个遍历对象属性的方法

active() {
  // 记录当前快照
  this.windowSnapshot = {} as Window;
  iter(window, (prop) => {
    this.windowSnapshot[prop] = window[prop];
  });

  // 恢复之前的变更
  Object.keys(this.modifyPropsMap).forEach((p: any) => {
    window[p] = this.modifyPropsMap[p];
  });

  this.sandboxRunning = true;
}

在激活时首先将 window 属性遍历存储起来（作为还原 window 所需的快照），然后在 window 上恢复子应用所需的属性变更，是的，直接修改 window 对象。

    inactive() {
  this.modifyPropsMap = {};

  iter(window, (prop) => {
    if (window[prop] !== this.windowSnapshot[prop]) {
      // 记录变更，恢复环境
      this.modifyPropsMap[prop] = window[prop];
      window[prop] = this.windowSnapshot[prop];
    }
  });

  this.sandboxRunning = false;
}

而等到卸载时，将此时 window 上所包含的属性遍历存储起来（作为以后还原子应用所需的快照），然后从先前保存的 window 对象中将环境恢复。

由于未使用到 Proxy，且只利用 Object 的操作来实现，这个沙箱机制是三类机制中最简单的一种。

注：SnapshotSandbox 参考代码 https://github.com/umijs/qiankun/blob/dbbc9acdb0733b3ab28e0470c969d65b57653ff0/src/sandbox/snapshotSandbox.ts

基于 iframe 的沙箱机制

基于 Proxy 及 diff 的沙箱机制边界考虑

不论是基于 Proxy 还是 diff，其沙箱机制的方案都是通过模拟和代理来实现一个环境隔离的沙箱，只是所有 API 不同。由于是模拟，因此不可避免的在使用中需要考虑一些边界 case，我们简单来看两个问题。首先看一段代码：

    var foo = "hello";

function foo() {}

如上代码大家都很熟悉，在无沙箱环境下两种写法可以自动提升为 [window.foo](http://window.foo)，但是 Proxy 沙箱下这类代码就需要注意，由于代码执行作用域发生了变更，所以生效的环境不再是全局 window，这时通过 proxy 的 get 拦截器大概率就会返回 undefined，于是便会产生疑问“我本地运行是有值的，为什么到微前端里就 undefined 了呢？”，对于后者，诸如 qiankun 框架中可以通过 window.proxy 获取对应上下文来取值达到目的，但前者由于限制，必须显式的定义为 window.foo 否则无法获取。

对于不了解微前端框架的同学来说，这无疑会增加了解成本。对于同类问题，我们再看一个问题描述：

我的子应用新建了一个 iframe 来做些 JavaScript 逻辑，但在里面通过 window.parent.xxx 无法获取子应用 window 上的全局变量？但这个变量实际上是存在的，我在子应用中可以把它打印出来的。

造成这个问题的原因类似，由于 iframe 中的 JavaScript 不在沙箱里执行，会读到外面真实的 window 上。而当你在子应用中定义了一个全局变量，方法是在沙箱里面拦截定义的，也就是方法实现写在沙箱里、方法调用读在沙箱外。解决方法有两种：

把变量做白名单处理，强制写在外面真实的 window 上；
在 iframe 中用 window.parent.proxy 来获取对应的变量；

以上所述的问题源自模拟，既然是模拟那么就可能存在难以抹平的边界情况，那么有没有更好一些的解决方案呢，iframe 虽然有那么多缺点，但他就是浏览器原生提供的一个隔离环境呢，有可能吗？

常规思路下，大家想到的 iframe 都是在页面内起一个 iframe 元素，然后将需要加载的 url 填入进行加载，由于体验上的割裂，这种方式并不为大家认可，这也是为什么基于 Proxy 和 diff 的沙箱机制被提出的原因。

让我们再想想，iframe 都有什么优点？

使用简单，一个 url 即可，不需要其他微前端方案那样手动写入很多钩子以适配在微前端环境中的运行；
利用浏览器的设计，可以实现样式、DOM、JavaScript 代码执行的完美隔离；
页面原则上可以起无数多个 iframe 标签来加载应用，所以可以实现多应用共存；
通过 iframe 实现的沙箱可以绕过 eval 执行的限制，比如当我们的代码中使用了原生 es modules 的写法时（eval 中不支持 import()），如果不做转译，代码便会抛出异常；

基于这个思路，如果我们不用 iframe 来加载应用，而是只将其作为一个 JavaScript 运行环境，问题是不是就解决了？

利用 iframe 实现沙箱机制的几点思考

我们知道，iframe 标签可以创造一个独立的浏览器级别的运行环境，该环境与主环境隔离，并有自己的 window 上下文；在通信机制上，也可以利用 postMessage 等 API 与宿主环境进行通信。具体来说，在执行 JavaScript 代码上，我们不需要做什么处理，但是要让 iframe 成为符合我们要求的沙箱，还需要重新设计。其中，和沙箱机制有关的几点包含：

应用间运行时隔离；
应用间通信；
路由劫持；

我们一一来看看。 首先，是对运行环境的代理与隔离，这也是大多数沙箱必备的基础之一。由于利用了 iframe，所以我们几乎不用担心 JavaScript 的代码运行会给沙箱外环境带来什么影响，因为在 iframe 中运行的 JavaScript 代码都是直接操作 iframe 的 window 上下文，但这里却需要考虑另一方面：如何将一些必要的操作传递出沙箱，因此也需要用到 Proxy 来做一些共享，比如路由、DOM操作等，这涉及到 location、history 等对象。通过将主应用环境下的对象透传给 iframe 中 JavaScript 使用，可以保证子应用在执行操作时，返回前进等操作可以同步到浏览器 top level 层面。此外，对于动态执行的 JavaScript 脚本（比如动态增加一个 script 元素），也需要单独考虑限制作用域，以使 script 中代码在执行时可以对应上具体的全局环境，这里可以通过为 script 包裹一层以锁定作用域内的部分全局变量取值：

    const scriptInstance = document.createElement('script');
const script = `(function(window, self, document, location, history) {
    ${scriptString}\n
  }).bind(window.proxyWindow)(
    window.proxyWindow,
    window.proxyWindow,
    window.proxyShadowDom,
    window.proxyLocation,
    window.proxyHistory,
  );`;

scriptInstance.text = script;
document.head.appendChild(scriptInstance);

其他方面，由于上文已经提到过关于 Proxy 对 get/set 拦截器的实现，本部分不再赘述。

刚刚提到的 DOM 操作，我们在这里多做一些介绍。当 JavaScript 操作 DOM 时，我们肯定需要让其中的操作透传到 iframe 外部进行实现，因为 iframe 里面我们不构建 DOM。如果想在隔离方案上一步到位，这里可以使用 Shadow DOM 作为样式隔离的方案，来构建子应用渲染所需的 DOM 结构，而回到 DOM 操作本身，依旧是通过 Proxy 对 iframe document 进行拦截和替换来实现的，这里依据你的样式隔离方案，来决定 document 究竟是指向主应用中的 Shadow DOM Root 节点，还是其他代理的 document 对象。此外，诸如 MutationObserver 这类的操作也需要通过代理保证在主应用上进行。

其次，再说说通信。一个完备的微前端方案需要考虑主子应用间的通信（与沙箱的通信），这样才可以对框架内的的全局状态或者子应用状态进行感知与响应，我们从同域 iframe 环境看起。

通过如下代码我们可以构建一个同域的 iframe 元素，此时，iframe 内外通信并不会存在障碍，通过各自 window 便能方便的获取对应属性值；因为是同域环境，从中取出对应的 contentWindow便可以对 iframe 内容属性进行随意读取，而与此同时还与外部环境隔离。

    const iframe = document.createElement('iframe',{url:'about:blank'});
document.body.appendChild(iframe);
const sandboxGlobal = iframe.contentWindow;

而如果要单独构建通信机制，也可以利用自定义 props、event 等方式实现，或者通过 Web API 诸如 postMessage 或者 BroadcastChannel 来实现，关于此部分我在曾经的一篇文章中稍有提及，感兴趣的话可以查看《 Service Worker 实践指南》。

说回路由状态，要保证 JavaScript 沙箱环境内与主应用路由状态保持一致，我们有两种实现方案：

让 JavaScript 沙箱内路由变更操作在主应用环境生效；
同步沙箱内路由变化至主应用环境；

其中，针对第一种情况，我们需要做的是将诸如 location 、history 等变量代理到沙箱环境中，在这种情况下，因为我们不关心 iframe 自身的路由变化，便可以自由设置 src 属性，比如 about:blank 的方式来构建 iframe，而在沙箱实现上我们可以通过前述的 Proxy 来拦截实现。

但稍微考虑下实际生产环境便会发现，第一种情况存在的限制较多，最基本的便是对沙箱内网络请求发送的处理，所以这就需要我们考虑第二种情况的实现，在这种操作下，我们的路由变化会同步到 iframe 上下文，所以我们需要针对 iframe 路由添加一个监听器，在监听到变化时处理主应用的路由，以实现两者路由同步。当然，这种情况下，我们需要针对主应用所在域名设计一个 iframe 的同域方案，比如同一域名+自定义 path 或者 hash 的实现就很简单易懂，这样也不存在跨域限制，此处不再展开。

一段 iframe 沙箱的示例代码

以下简单写了一个 iframe 沙箱的实现伪代码，核心依旧在 window 隔离与共享对象的处理上，主要的实现手段依旧是完善 Proxy 的 get/set 拦截器：

    class SandboxWindow {
    constructor(context, frameWindow) {
        return new Proxy(frameWindow, {
            get(target, name) {
                if (name in context) {
                    return context[name];
                } else if(typeof target[name] === 'function' && /^[a-z]/.test(name) ){
                    return target[name].bind && target[name].bind(target);
                } else {
                    return target[name];
                }
            },
            set(target, name, value) {
                if (name in context) {
                    return context[name] = value;
                }
                target[name] = value;
            }
        })
    }
}

// 需要全局共享的变量
const context = { 
    document: window.document, 
    history: window.history, 
    location: window.location,
}

// 创建 iframe
const userInputUrl = '';
const iframe = document.createElement('iframe',{url: userInputUrl});
document.body.appendChild(iframe);
const sandboxGlobal = iframe.contentWindow;

// 创建沙箱
const newSandboxWindow = new SandboxWindow(context, sandboxGlobal);

但需要注意的是，iframe 方案下，JavaScript 沙箱只是其中一部分，还需要通过完备的 HTML/JavaScript 代码拆分等方案辅助达到微前端环境的目的，这部分实现可参考 kuitos 的开源库 import-html-entry；同样的，之前的几类沙箱方案也需要考虑与这些方案组合。

注：在实现上，如果需要区分 iframe 与主应用环境，可以通过代码 window.parent !== window 进行判断。

各类沙箱机制对比

通过对比 Proxy 的两类实现、属性 diff 的一种实现以及 iframe 实现方案，可以发现几类沙箱的主要特点在于（以下部分方案用 qiankun 中对三类沙箱的命名方式作为沙箱机制名称）

	多实例运行	语法兼容	不污染全局环境（主应用）
LegacySanbox	❌	❌	❌
ProxySandbox	✅	❌	✅
SnapshotSandbox	❌	✅	❌
iframe	✅	✅	✅

基于 ES 提案 ShadowRealm 实现

ShadowRealm 是一个 ECMAScript 标准提案，旨在创建一个独立的全局环境，它的全局对象包含自己的内建函数与对象（未绑定到全局变量的标准对象，如 Object.prototype 的初始值），有自己独立的作用域，方案当前处于 stage 3 阶段。提案地址 https://github.com/tc39/proposal-shadowrealm

什么是 JavaScript 的运行环境实例

谈及提案之前，我们简单来看看什么是 Realm，下面是 Alex 附上的一个例子：

    <body>
  <iframe>
  </iframe>
  <script>
    const win = frames[0].window;
    console.assert(win.globalThis !== globalThis); // (A)
    console.assert(win.Array !== Array); // (B)
  </script>
</body>

在前面 iframe 沙箱机制中我们也有介绍，由于每个 iframe 都有一个独立的运行环境，于是在执行时，当前 html 中的全局对象肯定与 iframe的全局对象不相同（A），类似的，全局对象上的 Array与 iframe 中获取到的 Array 也不同（B）。

这就是 realm，一个 JavaScript 运行环境（JavaScript platform）实例：包含其所必须的全局环境及内建函数等。

ShadowRealm API 简介

ShadowRealm API 由一个包含如下函数签名的类实现：

    declare class ShadowRealm {
  constructor();
  evaluate(sourceText: string): PrimitiveValueOrCallable;
  importValue(specifier: string, bindingName: string): Promise<PrimitiveValueOrCallable>;
}

每个 ShadowRealm 实例都有自己独立的运行环境实例，在 realm 中，提案提供了两种方法让我们来执行运行环境实例中的 JavaScript 代码：

.evaluate()：同步执行代码字符串，类似 eval()。
.importValue()：返回一个 Promise 对象，异步执行代码字符串。

通过 evaluate 执行代码与 eval 类似，比如：

    const sr = new ShadowRealm();
console.assert(
  sr.evaluate(`'ab' + 'cd'`) === 'abcd'
);

但存在一些细微的差别，比如执行作用域、调用方式以及传值类型等。例如，如果 .evaluate() 返回一个函数，则该函数会被包装，这样我们就可以从外部调用它，而逻辑在 ShadowRealm 中运行，我们可以通过观察下面的 console.assert 来效果：

    globalThis.realm = 'incubator realm';

const sr = new ShadowRealm();
sr.evaluate(`globalThis.realm = 'child realm'`);

const wrappedFunc = sr.evaluate(`() => globalThis.realm`);
console.assert(wrappedFunc() === 'child realm');

说到另一个 API .importValue()，我们可以利用它导入一个外部模块，它会通过一个 Promise 异步返回其执行内容，和 .evalute()函数一样，这个函数被包装，以允许我们在外部调用，而实际代码在 ShadowRealm 中执行，我们可以看看下面这个例子，很好的解释了这个 API 的功能：

    // main.js
const sr = new ShadowRealm();
const wrappedSum = await sr.importValue('./my-module.js', 'sum');
console.assert(wrappedSum('hi', ' ', 'folks', '!') === 'hi folks!');

// my-module.js
export function sum(...values) {
  return values.reduce((prev, value) => prev + value);
}

ShadowRealm 的错误捕获与更多应用场景

ShadowRealm API 提案暂未针对错误捕获做详细设计，整体看上去比较简洁，因为这些在未来还有可能变化，以下为 Alex 针对当前提案下代码执行错误给出的两个例子，可以看出其中并不包含错误的原始调用堆栈等：

    > new ShadowRealm().evaluate('someFunc(')
SyntaxError: Unexpected end of script

> new ShadowRealm().evaluate(`throw new RangeError('The message')`)
TypeError: Error encountered during evaluation

由于没有实践经历，这里仅对 ShadowRealm 提案及相关概念进行了简要介绍，但可以看出，这个提案的落地可能对于一个更完美的 JavaScript 沙箱设计有所帮助，当然，这个提案的应用场景远不止此，比如：

Web 应用诸如 IDE 或绘图等程序可以运行第三方代码，允许其以插件或者配置的方式引入；
利用 ShadowRealms 建立一个可编程环境，来运行用户的代码；
服务器可以在 ShadowRealms 中运行第三方代码；
在 ShadowRealms 中可以运行测试运行器（Test Runner），这样外部的 JS 执行环境不会受到影响，并且每个套件都可以在新环境中启动（这有助于提高可复用性），这种场景类似于微前端的 JavaScript 沙箱；
网页抓取和网页应用测试等；

总结

如果按照沙箱机制在实现时所用到的主要 Web 技术不同，当下已经论证、开源或者存在实现可能性的 JavaScript 沙箱机制可以分为以下几类：

基于 ES6 API Proxy 实现
基于属性 diff 实现
基于 iframe 实现
基于 ES 提案 ShadowRealm 实现

本文基于个人项目实践、阅读代码梳理等方式对每类沙箱机制均进行了介绍，部分引用了 qiankun 的代码实现，部分写了伪代码解释，部分引用了最新 ECMAScript 提案示例，但仍未能详尽每一处细节，比如没有针对微前端框架深入介绍，也不会就某一个沙箱机制的具体细节实现（比如如何构建闭包环境、属性读取的边界处理等）进行剖析，但这些对于从更大的层面了解微前端机制都不可或缺。

参考

GitHub 上周 JavaScript 趋势榜项目

Mon, 18 May 2020 17:55:40 CST

1. yemount/pose-animator

项目地址： https://github.com/yemount/pose-animator

⭐stars:4237 | forks:354 | 2117 ⭐stars this week

Pose Animator拍摄2D矢量图，并基于PoseNet和FaceMesh的识别结果实时对其包含的曲线进行动画处理。它从计算机图形学中借鉴了基于骨骼的动画的思想，并将其应用于矢量字符。

2. renrenio/renren-fast-vue

项目地址： https://github.com/renrenio/renren-fast-vue

⭐stars:2023 | forks:1062 | 132 ⭐stars this week

renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。

3. zeit/next.js

项目地址： https://github.com/zeit/next.js

⭐stars:48399 | forks:7232 | 483 ⭐stars this week

React SSR 框架

4. discordjs/discord.js

项目地址： https://github.com/discordjs/discord.js

⭐stars:5791 | forks:1447 | 84 ⭐stars this week

强大的 JavaScript 库，可与 Discord API 进行交互

5. openspug/spug

项目地址： https://github.com/openspug/spug

⭐stars:2383 | forks:534 | 476 ⭐stars this week

开源运维平台：面向中小型企业设计的轻量级无Agent的自动化运维平台，整合了主机管理、主机批量执行、主机在线终端、应用发布部署、在线任务计划、配置中心、监控、报警等一系列功能。

6. ccxt/ccxt

项目地址： https://github.com/ccxt/ccxt

⭐stars:13828 | forks:3889 | 88 ⭐stars this week

JavaScript / Python / PHP加密货币交易API，支持超过120个比特币 / 数字货币交换

7. Advanced-Frontend/Daily-Interview-Question

项目地址： https://github.com/Advanced-Frontend/Daily-Interview-Question

⭐stars:18641 | forks:2284 | 207 ⭐stars this week

我是木易杨，公众号「高级前端进阶」作者，每天搞定一道前端大厂面试题，祝大家天天进步，一年后会看到不一样的自己。

8. quasarframework/quasar

项目地址： https://github.com/quasarframework/quasar

⭐stars:14653 | forks:1667 | 77 ⭐stars this week

Quasar Framework-在极短时间内构建高性能 VueJS 用户界面

9. denysdovhan/wtfjs

项目地址： https://github.com/denysdovhan/wtfjs

⭐stars:17262 | forks:1140 | 193 ⭐stars this week

有趣又棘手的 JavaScript 示例列表

10. YMFE/yapi

项目地址： https://github.com/YMFE/yapi

⭐stars:15486 | forks:2619 | 310 ⭐stars this week

YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台

11. agalwood/Motrix

项目地址： https://github.com/agalwood/Motrix

⭐stars:21052 | forks:2625 | 272 ⭐stars this week

一个全功能的下载管理器。

12. jgraph/drawio-desktop

项目地址： https://github.com/jgraph/drawio-desktop

⭐stars:7603 | forks:811 | 322 ⭐stars this week

drawio 桌面版

13. facebook/react

项目地址： https://github.com/facebook/react

⭐stars:148832 | forks:28875 | 514 ⭐stars this week

大名鼎鼎的 React 框架，用于构建用户界面的声明性，高效且灵活的JavaScript库。

14. iamadamdev/bypass-paywalls-chrome

项目地址： https://github.com/iamadamdev/bypass-paywalls-chrome

⭐stars:4799 | forks:359 | 198 ⭐stars this week

绕过付费墙 web 浏览器扩展

15. cypress-io/cypress

项目地址： https://github.com/cypress-io/cypress

⭐stars:20222 | forks:1213 | 227 ⭐stars this week

对浏览器中运行的所有内容进行快速，轻松和可靠的测试。

16. jgraph/drawio

项目地址： https://github.com/jgraph/drawio

⭐stars:16966 | forks:3550 | 296 ⭐stars this week

diagrams.net（以前为draw.io）是一个在线图表绘制网站，在此项目中提供了源代码。

17. twbs/bootstrap

项目地址： https://github.com/twbs/bootstrap

⭐stars:140844 | forks:68838 | 281 ⭐stars this week

最受欢迎的HTML，CSS和JavaScript框架，用于在网络上开发响应式，移动优先项目。

18. mui-org/material-ui

项目地址： https://github.com/mui-org/material-ui

⭐stars:57433 | forks:16064 | 276 ⭐stars this week

React UI 库，组件可以更快，更轻松地进行Web开发。建立自己的设计系统，或从材料设计开始。

19. gatsbyjs/gatsby

项目地址： https://github.com/gatsbyjs/gatsby

⭐stars:44405 | forks:8044 | 228 ⭐stars this week

使用React构建快速，现代化的应用程序和网站

20. microsoft/playwright

项目地址： https://github.com/microsoft/playwright

⭐stars:12773 | forks:370 | 408 ⭐stars this week

节点库可通过单个API自动化Chromium，Firefox和WebKit

21. MarkerHub/eblog

项目地址： https://github.com/MarkerHub/eblog

⭐stars:448 | forks:149 | 100 ⭐stars this week

eblog是一个基于Springboot2.1.2开发的博客学习项目，为了让项目融合更多的知识点，达到学习目的，编写了详细的从0到1开发文档。主要学习包括：自定义Freemarker标签，使用shiro+redis完成了会话共享，redis的zset结构完成本周热议排行榜，t-io+websocket完成即时消息通知和群聊，rabbitmq+elasticsearch完成博客内容搜索引擎等。值得学习的地方很多！

22. goldbergyoni/nodebestpractices

项目地址： https://github.com/goldbergyoni/nodebestpractices

⭐stars:43891 | forks:3974 | 293 ⭐stars this week

Node.js最佳实践列表（2020年5月）

23. grommet/grommet

项目地址： https://github.com/grommet/grommet

⭐stars:6300 | forks:738 | 40 ⭐stars this week

基于react的框架，可在整齐的程序包中提供可访问性，模块化，响应性和主题化

24. egonSchiele/grokking_algorithms

项目地址： https://github.com/egonSchiele/grokking_algorithms

⭐stars:4004 | forks:1558 | 49 ⭐stars this week

《 Grokking算法》源码

25. jonasschmedtmann/complete-javascript-course

项目地址： https://github.com/jonasschmedtmann/complete-javascript-course

⭐stars:3629 | forks:5226 | 54 ⭐stars this week

完整 JavaScript 课程的入门文件，最终项目和常见问题解答

Javascript 面试中经常被问到的三个问题！

Thu, 28 Feb 2019 18:30:00 CST

本文不是讨论最新的 JavaScript 库、常见的开发实践或任何新的 ES6 函数。相反，在讨论 JavaScript 时，面试中通常会提到三件事。我自己也被问到这些问题，我的朋友们告诉我他们也被问到这些问题。

然，这些并不是你在面试之前应该学习的唯一三件事 - 你可以通过多种方式更好地为即将到来的面试做准备 - 但面试官可能会问到下面是三个问题，来判断你对 JavaScript 语言的理解和 DOM 的掌握程度。

让我们开始吧！注意，我们将在下面的示例中使用原生的 JavaScript，因为面试官通常希望了解你在没有 jQuery 等库的帮助下对JavaScript 和 DOM 的理解程度。

问题 1: 事件委托代理

在构建应用程序时，有时需要将事件绑定到页面上的按钮、文本或图像，以便在用户与元素交互时执行某些操作。

如果我们以一个简单的待办事项列表为例，面试官可能会告诉你，当用户点击列表中的一个列表项时执行某些操作。他们希望你用 JavaScript 实现这个功能，假设有如下 HTML 代码:

  <ul id="todo-app">
  <li class="item">Walk the dog</li>
  <li class="item">Pay bills</li>
  <li class="item">Make dinner</li>
  <li class="item">Code for one hour</li>
</ul>

你可能想要做如下操作来将事件绑定到元素:

  document.addEventListener('DOMContentLoaded', function() {
  let app = document.getElementById('todo-app');
  let times = app.getElementsByClassName('item');

  for (let item of items) {
    item.addEventListener('click', function(){
      alert('you clicked on item: ' + item.innerHTML);
    })
  }
})

虽然这在技术上是可行的，但问题是要将事件分别绑定到每个项。这对于目前 4 个元素来说，没什么大问题，但是如果在待办事项列表中添加了 10,000 项(他们可能有很多事情要做)怎么办?然后，函数将创建 10,000 个独立的事件侦听器，并将每个事件监听器绑定到 DOM ，这样代码执行的效率非常低下。

在面试中，最好先问面试官用户可以输入的最大元素数量是多少。例如，如果它不超过 10，那么上面的代码就可以很好地工作。但是如果用户可以输入的条目数量没有限制，那么你应该使用一个更高效的解决方案。

如果你的应用程序最终可能有数百个事件侦听器，那么更有效的解决方案是将一个事件侦听器实际绑定到整个容器，然后在单击它时能够访问每个列表项，这称为 事件委托，它比附加单独的事件处理程序更有效。

下面是事件委托的代码:

  document.addEventListener('DOMContentLoaded', function() {
  let app = document.getElementById('todo-app');

  app.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
      let item = e.target;
      alert('you clicked on item: ' + item.innerHTML)
    }
  })
})

问题 2：在循环中使用闭包

闭包常常出现在面试中，以便面试官衡量你对 JS 的熟悉程度，以及你是否知道何时使用闭包。

闭包基本上是内部函数可以访问其范围之外的变量。闭包可用于实现隐私和创建函数工厂，闭包常见的面试题如下：

编写一个函数，该函数将遍历整数列表，并在延迟3秒后打印每个元素的索引。

经常不正确的写法是这样的：

  const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

如果运行上面代码， 3 秒延迟后你会看到，实际上每次打印输出是 4，而不是期望的 0，1，2，3 。

为了正确理解为什么会发生这种情况，了解为什么会在 JavaScript 中发生这种情况将非常有用，这正是面试官试图测试的内容。

原因是因为 setTimeout 函数创建了一个可以访问其外部作用域的函数（闭包），该作用域是包含索引 i 的循环。经过 3 秒后，执行该函数并打印出 i 的值，该值在循环结束时为 4，因为它循环经过 0,1,2,3,4并且循环最终停止在 4。

实际上有多处方法来正确的解这道题：

  const arr = [10, 12, 15, 21];

for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local){
    return function () {
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000)
}

  const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

问题 3：事件的节流（throttle）与防抖（debounce）

有些浏览器事件可以在短时间内快速触发多次，比如调整窗口大小或向下滚动页面。例如，监听页面窗口滚动事件，并且用户持续快速地向下滚动页面，那么滚动事件可能在 3 秒内触发数千次，这可能会导致一些严重的性能问题。

如果在面试中讨论构建应用程序，出现滚动、窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流（Throttling）来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用 setTimeout 来控制事件的触发频率。

Throttle：第一个人说了算

throttle 的主要思想在于：在某段时间内，不管你触发了多少次回调，都只认第一次，并在计时结束时给予响应。

这个故事里，‘裁判’ 就是我们的节流阀，他控制参赛者吃东西的时机， “参赛者吃东西”就是我们频繁操作事件而不断涌入的回调任务，它受 “裁判” 的控制,而计时器，就是上文提到的以自由变量形式存在的时间信息，它是 “裁判” 决定是否停止比赛的依据，最后，等待比赛结果就对应到回调函数的执行。

总结下来，所谓的“节流”，是通过在一段时间内无视后来产生的回调请求来实现的。只要裁判宣布比赛开始，裁判就会开启计时器，在这段时间内，参赛者就尽管不断的吃，谁也无法知道最终结果。

对应到实际的交互上是一样一样的：每当用户触发了一次 scroll 事件，我们就为这个触发操作开启计时器。一段时间内，后续所有的 scroll 事件都会被当作“参赛者吃东西——它们无法触发新的 scroll 回调。直到“一段时间”到了，第一次触发的 scroll 事件对应的回调才会执行，而“一段时间内”触发的后续的 scroll 回调都会被节流阀无视掉。

现在一起实现一个 throttle：

  // fn 是我们需要包装的事件回调, interval 是时间间隔的阈值
function throttle(fn, interval) {
  // last 为上一次触发回调时间
  let last = 0

  // 将 throttle 处理结果当然函数返回
  return function () {
    // 保留调用时的 this 上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments
    // 记录本次触发回调的时间
    let now = +new Date()

    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = fn.apply(context, args)
    }
  }
}

// 用 throttle来包装 scroll 的回调
const better_scroll = throttle(() => { console.log('触发了滚动事件')}, 1000)
document.addEventListener('scroll', better_scroll)

Debounce：最后一个参赛者说了算

防抖的主要思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

继续大胃王比赛故事，这次换了一种比赛方式，时间不限，参赛者吃到不能吃为止，当每个参赛都吃不下的时候，后面10分钟如果没有人在吃，比赛结束，如果有人在10分钟内还能吃，则比赛继续，直到下一次10分钟内无人在吃时为止。

对比 throttle 来理解 debounce：在 throttle 的逻辑里， ‘裁判’ 说了算，当比赛时间到时，就执行回调函数。而 debounce 认为最后一个参赛者说了算，只要还能吃的，就重新设定新的定时器。

现在一起实现一个 debounce：

  // fn 是我们需要包装事件回调，delay 是每次推迟执行的等待时间
function debounce(fn, delay) {
  // 定时器
  let timer = null

  // 将 debounce 处理结果当作函数返回
  return function () {
    // 保留调用时的 this 上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments

    // 每次事件被触发时，都去清除之前的旧定时器
    if (timer) {
      clearTimeout(timer)
    }
    // 设立新定时器
    timer = setTimeout(function() {
      fn.apply(context, args)
    }, delay)
  }
}

// 用 debounce 来包装 scroll 的回调
const better_scroll = debounce(() => { console.log('发了滚动事件')}, 1000)
document.addEventListener('scroll', better_scroll)

用 Throttle 来优化 Debounce

debounce 的问题在于它“太有耐心了”。试想，如果用户的操作十分频繁——他每次都不等 debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。

为了避免弄巧成拙，我们需要借力 throttle 的思想，打造一个“有底线”的 debounce——等你可以，但我有我的原则：delay 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须要给用户一个响应。这个 throttle 与 debounce “合体”思路，已经被很多成熟的前端库应用到了它们的加强版 throttle 函数的实现中：

  // fn是我们需要包装的事件回调, delay是时间间隔的阈值
function throttle(fn, delay) {
  // last为上一次触发回调的时间, timer是定时器
  let last = 0, timer = null
  // 将throttle处理结果当作函数返回
  
  return function () { 
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments
    // 记录本次触发回调的时间
    let now = +new Date()
    
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last < delay) {
    // 如果时间间隔小于我们设定的时间间隔阈值，则为本次触发操作设立一个新的定时器
       clearTimeout(timer)
       timer = setTimeout(function () {
          last = now
          fn.apply(context, args)
        }, delay)
    } else {
        // 如果时间间隔超出了我们设定的时间间隔阈值，那就不等了，无论如何要反馈给用户一次响应
        last = now
        fn.apply(context, args)
    }
  }
}

// 用新的throttle包装scroll的回调
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)

document.addEventListener('scroll', better_scroll)

参考:

Throttling and Debouncing in JavaScript
The Difference Between Throttling and Debouncing
Examples of Throttling and Debouncing
Remy Sharp’s blog post on Throttling function calls
前端性能优化原理与实践

原文：

https://medium.freecodecamp.o...

你的点赞是我持续分享好东西的动力，欢迎点赞！

一个笨笨的码农，我的世界只能终身学习！

更多内容请关注公众号《大迁世界》！

我从来不理解 JavaScript 闭包，直到有人这样向我解释它... - Java架构—月亮 - 博客园

Fri, 22 Feb 2019 07:14:40 CST

正如标题所述，JavaScript 闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。

最近看国外的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。

准备

在理解闭包之前，有个重要的概念需要先了解一下，就是 js 执行上下文。

这篇文章是执行上下文很不错的入门教程，文章中提到：

当代码在 JavaScript 中运行时，执行代码的环境非常重要，并将概括为以下几点：

全局代码——第一次执行代码的默认环境。

函数代码——当执行流进入函数体时。

(…) —— 我们当作执行上下文是当前代码执行的一个环境与范围。

换句话说，当我们启动程序时，我们从全局执行上下文中开始。一些变量是在全局执行上下文中声明的。我们称之为全局变量。当程序调用一个函数时，会发生什么?

以下几个步骤：

JavaScript 创建一个新的执行上下文，我们叫作本地执行上下文。
这个本地执行上下文将有它自己的一组变量，这些变量将是这个执行上下文的本地变量。
新的执行上下文被推到到执行堆栈中。可以将执行堆栈看作是一种保存程序在其执行中的位置的容器。

函数什么时候结束?当它遇到一个 return 语句或一个结束括号}。

当一个函数结束时，会发生以下情况:

这个本地执行上下文从执行堆栈中弹出。
函数将返回值返回调用上下文。调用上下文是调用这个本地的执行上下文，它可以是全局执行上下文，也可以是另外一个本地的执行上下文。这取决于调用执行上下文来处理此时的返回值，返回的值可以是一个对象、一个数组、一个函数、一个布尔值等等，如果函数没有 return 语句，则返回 undefined。
这个本地执行上下文被销毁，销毁是很重要，这个本地执行上下文中声明的所有变量都将被删除，不在有变量，这个就是为什么称为本地执行上下文中自有的变量。

基础的例子

在讨论闭包之前，让我们看一下下面的代码：

1:let a =3            
2:functionaddTwo(x) {            
3:let ret = x +2            
4:return ret            
5: }            
6:let b = addTwo(a)            
7:console.log(b)

为了理解 JavaScript 引擎是如何工作的，让我们详细分析一下：

在第 1 行，我们在全局执行上下文中声明了一个新变量 a，并将赋值为 3。
接下来就变得棘手了，第 2 行到第 5 行实际上是在一起的。这里发生了什么? 我们在全局执行上下文中声明了一个名为 addTwo的新变量,我们给它分配了什么?一个函数定义。两个括号{}之间的任何内容都被分配给 addTwo，函数内部的代码没有被求值，没有被执行，只是存储在一个变量中以备将来使用。
现在我们在第 6 行。它看起来很简单，但是这里有很多东西需要拆开分析。首先，我们在全局执行上下文中声明一个新变量，并将其标记为 b，变量一经声明，其值即为 undefined。
接下来，仍然在第 6 行，我们看到一个赋值操作符。我们准备给变量 b赋一个新值，接下来我们看到一个函数被调用。当您看到一个变量后面跟着一个圆括号(…)时，这就是调用函数的信号，接着，每个函数都返回一些东西(值、对象或 undefined)，无论从函数返回什么，都将赋值给变量 b。
但是首先我们需要调用标记为 addTwo的函数。JavaScript 将在其全局执行上下文内存中查找名为 addTwo的变量。噢，它找到了一个，它是在步骤 2(或第 2 - 5 行)中定义的。变量 add2包含一个函数定义。注意，变量 a作为参数传递给函数。JavaScript 在全局执行上下文内存中搜索变量 a，找到它，发现它的值是 3，并将数字 3 作为参数传递给函数，准备好执行函数。
现在执行上下文将切换,创建了一个新的本地执行上下文，我们将其命名为“addTwo 执行上下文”，执行上下文被推送到调用堆栈上。在 addTwo 执行上下文中，我们要做的第一件事是什么?
你可能会说，“在 addTwo 执行上下文中声明了一个新的变量 ret”，这是不对的。正确的答案是，我们需要先看函数的参数。在 addTwo 执行上下文中声明一个新的变量 x`，因为值 3 是作为参数传递的，所以变量 x 被赋值为 3。
下一步是:在 addTwo 执行上下文中声明一个新的变量 ret。它的值被设置为 undefined(第三行)。
仍然是第 3 行，需要执行一个相加操作。首先我们需要 x的值，JavaScript 会寻找一个变量 x，它会首先在 addTwo执行上下文中寻找，找到了一个值为 3。第二个操作数是数字 2。两个相加结果为 5 就被分配给变量 ret。
第 4 行，我们返回变量 ret的内容，在 addTwo 执行上下文中查找，找到值为 5，返回，函数结束。
第 4 - 5 行，函数结束。addTwo 执行上下文被销毁，变量 x和 ret被消去了，它们已经不存在了。addTwo 执行上下文从调用堆栈中弹出，返回值返回给调用上下文，在这种情况下，调用上下文是全局执行上下文，因为函数 addTwo 是从全局执行上下文调用的。
现在我们继续第 4 步的内容，返回值 5 被分配给变量 b，程序仍然在第 6 行。
在第 7 行， b的值 5 被打印到控制台了。

对于一个非常简单的程序，这是一个非常冗长的解释，我们甚至还没有涉及闭包。但肯定会涉及的，不过首先我们得绕一两个弯。

词法作用域（Lexical scope）

我们需要理解词法作用域的一些知识。请看下面的例子：

1:let val1 =2            
2:functionmultiplyThis(n) {            
3:let ret = n * val1            
4:return ret            
5: }            
6:let multiplied = multiplyThis(6)            
7:console.log('example of scope:', multiplied)

这里想说明，我们在函数执行上下文中有变量，在全局执行上下文中有变量。JavaScript 的一个复杂之处在于它如何查找变量，如果在函数执行上下文中找不到变量，它将在调用上下文中寻找它，如果在它的调用上下文中没有找到，就一直往上一级，直到它在全局执行上下文中查找为止。(如果最后找不到，它就是 undefined)。

下面列出向个步骤来解释一下（如果你已经熟悉了，请跳过）：

在全局执行上下文中声明一个新的变量 val1，并将其赋值为 2。
行 2 - 5，声明一个新的变量 multiplyThis，并给它分配一个函数定义。
第六行，声明一个在全局执行上下文 multiplied 新变量。
从全局执行上下文内存中查找变量 multiplyThis，并将其作为函数执行，传递数字 6 作为参数。
新函数调用(创建新执行上下文），创建一个新的 multiplyThis 函数执行上下文。
在 multiplyThis 执行上下文中，声明一个变量 n 并将其赋值为 6
第 3 行。在 multiplyThis执行上下文中，声明一个变量 ret。
继续第 3 行。对两个操作数 n 和 val1 进行乘法运算.在 multiplyThis执行上下文中查找变量 n。我们在步骤 6 中声明了它,它的内容是数字 6。在 multiplyThis执行上下文中查找变量 val1。 multiplyThis执行上下文没有一个标记为 val1 的变量。我们向调用上下文查找，调用上下文是全局执行上下文，在全局执行上下文中寻找 val1。哦，是的、在那儿，它在步骤 1 中定义，数值是 2。
继续第 3 行。将两个操作数相乘并将其赋值给 ret变量，6 * 2 = 12，ret 现在值为 12。
返回 ret变量，销毁 multiplyThis执行上下文及其变量 ret 和 n 。变量 val1 没有被销毁，因为它是全局执行上下文的一部分。
回到第 6 行。在调用上下文中，数字 12 赋值给 multiplied 的变量。
最后在第 7 行，我们在控制台中打印 multiplied 变量的值

在这个例子中，我们需要记住一个函数可以访问在它的调用上下文中定义的变量，这个就是词法作用域（Lexical scope）。

返回函数的函数

在第一个例子中，函数 addTwo返回一个数字。请记住，函数可以返回任何东西。让我们看一个返回函数的函数示例，因为这对于理解闭包非常重要。看粟子：

1:let val =7            
2:functioncreateAdder() {            
3:functionaddNumbers(a, b) {            
4:let ret = a + b            
5:return ret            
6:   }            
7:return addNumbers            
8: }            
9:let adder = createAdder()            
10:let sum = adder(val,8)            
11:console.log('example of function returning a function: ', sum)

让我们回到分步分解：

第一行。我们在全局执行上下文中声明一个变量 val并赋值为 7。
行 2 - 8。我们在全局执行上下文中声明了一个名为 createAdder 的变量，并为其分配了一个函数定义。第 3 至 7 行描述了上述函数定义，和以前一样，在这一点上，我们没有直接讨论这个函数。我们只是将函数定义存储到那个变量( createAdder)中。
第 9 行。我们在全局执行上下文中声明了一个名为 adder 的新变量，暂时，值为 undefined。
第 9 行。我们看到括号()，我们需要执行或调用一个函数，查找全局执行上下文的内存并查找名为 createAdder 的变量，它是在步骤 2 中创建的。好吧，我们调用它。
调用函数时，执行到第 2 行。创建一个新的 createAdder执行上下文。我们可以在 createAdder的执行上下文中创建自有变量。js 引擎将 createAdder的上下文添加到调用堆栈。这个函数没有参数，让我们直接跳到它的主体部分.
第 3 - 6 行。我们有一个新的函数声明，我们在 createAdder执行上下文中创建一个变量 addNumbers。这很重要， addnumber只存在于 createAdder执行上下文中。我们将函数定义存储在名为 addNumbers` 的自有变量中。
在第 7 行，我们返回变量 addNumbers的内容。js 引擎查找一个名为 addNumbers的变量并找到它，这是一个函数定义。好的，函数可以返回任何东西，包括函数定义。我们返 addNumbers的定义。第 4 行和第 5 行括号之间的内容构成该函数定义。
返回时， createAdder执行上下文将被销毁。 addNumbers 变量不再存在。但 addNumbers函数定义仍然存在，因为它返回并赋值给了 adder 变量。
第 10 行。我们在全局执行上下文中定义了一个新的变量 sum，先负值为 undefined;
接下来我们需要执行一个函数。哪个函数?是名为 adder变量中定义的函数。我们在全局执行上下文中查找它，果然找到了它，这个函数有两个参数。
让我们查找这两个参数，第一个是我们在步骤 1 中定义的变量 val，它表示数字 7，第二个是数字 8。
现在我们要执行这个函数，函数定义概述在第 3-5 行，因为这个函数是匿名，为了方便理解，我们暂且叫它 adder吧。这时创建一个 adder函数执行上下文，在 adder执行上下文中创建了两个新变量 a 和 b。它们分别被赋值为 7 和 8，因为这些是我们在上一步传递给函数的参数。
第 4 行。在 adder执行上下文中声明了一个名为 ret的新变量,
第 4 行。将变量 a的内容和变量 b的内容相加得 15 并赋给 ret 变量。
ret变量从该函数返回。这个匿名函数执行上下文被销毁，从调用堆栈中删除，变量 a、 b和 ret不再存在。
返回值被分配给我们在步骤 9 中定义的 sum变量。
我们将 sum的值打印到控制台。
如预期，控制台将打印 15。我们在这里确实经历了很多困难，我想在这里说明几点。首先，函数定义可以存储在变量中，函数定义在程序调用之前是不可见的。其次，每次调用函数时，都会(临时)创建一个本地执行上下文。当函数完成时，执行上下文将消失。函数在遇到 return 或右括号}时执行完成。

码部署后可能存在的 BUG 没法实时知道，事后为了解决这些 BUG，花了大量的时间进行 log 调试，这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。

最后,一个闭包

看看下面的代码，并试着弄清楚会发生什么。

1:functioncreateCounter() {            
2:let counter =0            
3:const myFunction =function() {            
4:     counter = counter +1            
5:return counter            
6:   }            
7:return myFunction            
8: }            
9:const increment = createCounter()            
10:const c1 = increment()            
11:const c2 = increment()            
12:const c3 = increment()            
13:console.log('example increment', c1, c2, c3)

现在，我们已经从前两个示例中掌握了它的诀窍，让我们按照预期的方式快速执行它：

行 1 - 8。我们在全局执行上下文中创建了一个新的变量 createCounter，并赋值了一个的函数定义。
第 9 行。我们在全局执行上下文中声明了一个名为 increment的新变量。
第 9 行。我们需要调用 createCounter函数并将其返回值赋给 increment变量。
行 1 - 8。调用函数，创建新的本地执行上下文。
第 2 行。在本地执行上下文中，声明一个名为 counter的新变量并赋值为 0;
行 3 - 6。声明一个名为 myFunction的新变量，变量在本地执行上下文中声明,变量的内容是为第 4 行和第 5 行所定义。
第 7 行。返回 myFunction变量的内容，删除本地执行上下文。变量 myFunction和 counter不再存在。此时控制权回到了调用上下文。
第 9 行。在调用上下文(全局执行上下文)中， createCounter返回的值赋给了 increment，变量 increment现在包含一个函数定义内容为 createCounter返回的函数。它不再标记为 myFunction`，但它的定义是相同的。在全局上下文中，它是的标记为 labeledincrement。
第 10 行。声明一个新变量(c1)。
继续第 10 行。查找 increment变量，它是一个函数并调用它。它包含前面返回的函数定义，如第 4-5 行所定义的。
创建一个新的执行上下文。没有参数。开始执行函数。
第 4 行。counter=counter + 1。在本地执行上下文中查找 counter变量。我们只是创建了那个上下文，从来没有声明任何局部变量。让我们看看全局执行上下文。这里也没有 counter变量。Javascript 会将其计算为 counter = undefined + 1，声明一个标记为 counter的新局部变量，并将其赋值为 number 1，因为 undefined 被当作值为 0。
第 5 行。我们变量 counter的值(1)，我们销毁本地执行上下文和 counter变量。
回到第 10 行。返回值(1)被赋给 c1。
第 11 行。重复步骤 10-14，c2 也被赋值为 1。
第 12 行。重复步骤 10-14，c3 也被赋值为 1。
第 13 行。我们打印变量 c1 c2 和 c3 的内容。

你自己试试，看看会发生什么。你会将注意到，它并不像从我上面的解释中所期望的那样记录 1,1,1。而是记录 1,2,3。这个是为什么?

不知怎么滴， increment函数记住了那个 cunter的值。这是怎么回事?

counter是全局执行上下文的一部分吗?尝试 console.log(counter)，得到 undefined 的结果,显然不是这样的。

也许，当你调用 increment时，它会以某种方式返回它创建的函数(createCounter)?这怎么可能呢?变量 increment包含函数定义，而不是函数的来源，显然也不是这样的。

所以一定有另一种机制。闭包，我们终于找到了，丢失的那块。

它是这样工作的，无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包。闭包包含在函数创建时作用域中的所有变量，它类似于背包。函数定义附带一个小背包，它的包中存储了函数定义创建时作用域中的所有变量。

所以我们上面的解释都是错的，让我们再试一次，但是这次是正确的。

1:functioncreateCounter() {            
2:let counter =0            
3:const myFunction =function() {            
4:     counter = counter +1            
5:return counter            
6:   }            
7:return myFunction            
8: }            
9:const increment = createCounter()            
10:const c1 = increment()            
11:const c2 = increment()            
12:const c3 = increment()            
13:console.log('example increment', c1, c2, c3)

同上，行 1 - 8。我们在全局执行上下文中创建了一个新的变量 createCounter，它得到了指定的函数定义。
同上，第 9 行。我们在全局执行上下文中声明了一个名为 increment的新变量。
同上，第 9 行。我们需要调用 createCounter函数并将其返回值赋给 increment变量。
同上，行 1 - 8。调用函数，创建新的本地执行上下文。
同上，第 2 行。在本地执行上下文中，声明一个名为 counter的新变量并赋值为 0 。
行 3 - 6。声明一个名为 myFunction的新变量，变量在本地执行上下文中声明,变量的内容是另一个函数定义。如第 4 行和第 5 行所定义，现在我们还创建了一个闭包，并将其作为函数定义的一部分。闭包包含作用域中的变量，在本例中是变量 counter(值为 0)。
第 7 行。返回 myFunction变量的内容,删除本地执行上下文。 myFunction和 counter不再存在。控制权交给了调用上下文，我们返回函数定义和它的闭包，闭包中包含了创建它时在作用域内的变量。
第 9 行。在调用上下文(全局执行上下文)中， createCounter返回的值被指定为 increment，变量 increment现在包含一个函数定义(和闭包),由 createCounter 返回的函数定义,它不再标记为 myFunction，但它的定义是相同的,在全局上下文中，称为 increment。
第 10 行。声明一个新变量(c1)。
继续第 10 行。查找变量 increment，它是一个函数，调用它。它包含前面返回的函数定义,如第 4-5 行所定义的。(它还有一个带有变量的闭包)。
创建一个新的执行上下文，没有参数，开始执行函数。
第 4 行。counter = counter + 1，寻找变量 counter，在查找本地或全局执行上下文之前，让我们检查一下闭包，瞧，闭包包含一个名为 counter的变量，其值为 0。在第 4 行表达式之后，它的值被设置为 1。它再次被储存在闭包里，闭包现在包含值为 1 的变量 counter。
第 5 行。我们返回 counter的值，销毁本地执行上下文。
回到第 10 行。返回值(1)被赋给变量 c1。
第 11 行。我们重复步骤 10-14。这一次，在闭包中此时变量 counter的值是 1。它在第 12 步设置的，它的值被递增并以 2 的形式存储在递增函数的闭包中,c2 被赋值为 2。
第 12 行。重复步骤 10-14, c3被赋值为 3。
第 13 行。我们打印变量 c1 c2 和 c3 的值。

您可能会问，是否有任何函数具有闭包，甚至是在全局范围内创建的函数?答案是肯定的。在全局作用域中创建的函数创建闭包，但是由于这些函数是在全局作用域中创建的，所以它们可以访问全局作用域中的所有变量，闭包的概念并不重要。

当函数返回函数时，闭包的概念就变得更加重要了。返回的函数可以访问不属于全局作用域的变量，但它们仅存在于其闭包中。

闭包不是那么简单

有时候闭包在你甚至没有注意到它的时候就会出现，你可能已经看到了我们称为部分应用程序的示例，如下面的代码所示：

let c =4;            
const addX =x => n => n + x;            
const addThree = addX(3);            
let d = addThree(c);            
console.log("example partial application", d);

如果箭头函数让您感到困惑，下面是同样效果：

let c =4;            
functionaddX(x) {            
returnfunction(n) {            
return n + x;            
};            
}            
const addThree = addX(3);            
let d = addThree(c);            
console.log("example partial application", d);

我们声明一个能用加法函数 addX，它接受一个参数(x)并返回另一个函数。返回的函数还接受一个参数并将其添加到变量 x中。

变量 x是闭包的一部分，当变量 addThree在本地上下文中声明时，它被分配一个函数定义和一个闭包，闭包包含变量 x。

所以当 addThree被调用并执行时，它可以从闭包中访问变量 x以及为参数传递变量 n并返回两者的和 7。

总结

我将永远记住闭包的方法是通过背包的类比。当一个函数被创建并传递或从另一个函数返回时，它会携带一个背包。背包中是函数声明时作用域内的所有变量。

【JavaScript】获取页面停留时间并提交 - 枫芸志

Sat, 20 Jan 2018 09:47:36 CST

花了点时间研究了下JavaScript获取页面停留时间并提交的方法，小结一下。

《页面停留时间为什么为0》中介绍Google Analytic的算法是：当发现一个访问者进入一个网站访问了第一个页面时，会记录下他的访问时间。等到他访问第二个页面时，记录下第二个时间，用第二个时间和第一个时间的差值作为这个访问者在第一个页面的停留时间。以此类推，每个页面的停留时间就是用户访问下个页面时的时间减去他访问这个页面时的时间，并加入到这个页面总的停留时间中。这个方法在诸多统计方法里，是最简单的，也比较合理，并且计算量最小。但有个问题，就是用户访问的最后一个页面，它没有下一个页面，那么怎么计算它的停留时间呢？用户访问的最后一个页面的停留时间被认为是0。

下面是自己google一番后找到的两种实现方法。原理相同，皆是在页面加载后JS记录一个开始时间，在离开页面时（跳转到别的页面或是页面刷新，不包括页面关闭）记录结束时间，减一下就是页面停留时间，利用最简单的异步提交方式提交数据。

方法一代码如下：1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取页面停留时间并提交-1</title>
<script language=JavaScript>
var start = new Date();;
var end;
window.onbeforeunload = function(){
   end = new Date();
   var len = (end.getTime() - start.getTime()) / 1000;
   var img = new Image();
   img.src = "log.php?visitlength=" + len + "&visitpage=1.html";
}
</script>
</head>
<body>
<h2>JavaScript获取页面停留时间并提交-1</h2>
  <a href="1.html">JavaScript获取页面停留时间并提交-1</a><br /><br />
  <a href="2.html">JavaScript获取页面停留时间并提交-2</a><br /><br />
  <a href="http://witmax.cn">晴枫</a>
</body>
</html>

方法二代码如下：2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取页面停留时间并提交-2</title>
<script language=JavaScript>
var start;
var end;
function load() {
   start=new Date();
}
function unload() {
   end=new Date();
   var len = (end.getTime() - start.getTime()) / 1000;
   var img = new Image();
   img.src = "log.php?visitlength=" + len + "&visitpage=2.html";
}
</script>
</head>
<body onload="load()" onunload="unload()">
<h2>JavaScript获取页面停留时间并提交-2</h2>
  <a href="1.html">JavaScript获取页面停留时间并提交-1</a><br /><br />
  <a href="2.html">JavaScript获取页面停留时间并提交-2</a><br /><br />
  <a href="http://witmax.cn">晴枫</a>制作
</body>
</html>

服务器端采用PHP记录提交的数据，代码如下：log.php

<?php

$visittime = date("Y-m-d H:i:s");
$visitlength = $_GET['visitlength'];
$visitpage = $_GET['visitpage'];
$log = file_get_contents("log.txt");
file_put_contents("log.txt", $log."\n".$visittime ." " .$visitlength ." " .$visitpage );

?>

以上两种方法效果相同，缺陷也是一样，就是通过关闭标签页的方式关闭页面不会提交数据，暂未找到更好的解决方案。

打包了下源码，需要的点击 JS获取页面停留时间并提交的源码下载

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【JavaScript】获取页面停留时间并提交》

标签： Javascript

巧用 Img / JavaScript 采集页面数据-云栖社区

Fri, 19 Jan 2018 08:29:09 CST

我们发送重要邮件时为了确认对方已读，都会在邮件中设置一个“读取回执"标签以确定对方时候读信。

这种模式用途很广，例如：

发送传单时，确保对方已读
推广网页时，多少用户做了点击
移动App运营活动页面，分析用户访问情况

对这类个性化的采集与统计，针对站长CNZZ、百度统计，移动的Talking Data、友盟等都无法胜任。主要难点在于：

个性化需求难满足：用户产生行为并非移动端场景，其中会包括一些运营个性化需求字段，例如：来源、渠道、环境、行为等参数
开发难度大/成本高：为完成一次数据采集、分析需求，首先需要购买云主机，公网IP，开发数据接收服务器，消息中间件等，并且通过互备保障服务高可用；接下来需要开发服务端并进行测试
使用不容易：数据达到服务端后，还需要工程师先清洗结果并导入数据库，生成运营需要的数据
无法弹性：无法预估用户的使用量，因此需要预留很大的资源池

从以上几点看，当一个面向内容投放的运营需求来了后，如何能以很快捷的手段满足这类用户行为采集、分析需求是一个很大的挑战。

日志服务提供 Web Tracking/JS/Tracking Pixel SDK就是为解决以上轻量级埋点采集场景而生，我们可以在1分钟时间内完成埋点和数据上报工作。此外日志服务每账号*每月提供 500MB 免费额度，让你不花钱也能办事。

方案简介

这里引入采集 + 分析方案基于阿里云日志服务，该服务是针对日志类数据的一站式服务，无需开发就能快捷完成海量日志数据的采集、消费、投递以及查询分析等功能，提升运维、运营效率。服务功能包括：

LogHub：实时采集与消费。与Blink、Flink、Spark Streaming、Storm、Kepler打通。
数据投递：LogShipper。与MaxCompute、E-MapReduce、OSS、FunctionCompute打通
查询与实时分析：LogSearch/Analytics。与DataV，Grafana，Zipkin，Tableua等打通。

采集端介绍

日志服务提供 30+数据采集方式，针对服务器、移动端、嵌入式设备及各种开发语言都提供完整的解决方案，比较典型有：

Logtail：针对X86服务器设计Agent
Android/iOS：针对移动端SDK
Producer Library：面向受限CPU/内存智能设备

这里介绍的轻量级采集方案（Web Tracking），该方案只需一个http get请求即可将数据传输至日志服务Logstore端，适应各种无需任何验证的静态网页，广告投放，宣传资料，移动端数据采集。相比其他日志采集方案，特点如下：

WebTracking接入步骤

Web Tracking（也叫Tracking Pixel）术语来自于HTML语法中的图片标签：我们可以在页面上嵌入一个0 Pixel图片，该图片默认对用户不可见，当访问该页面显示加载图片时，会顺带发起一个Get请求到服务端，这个时候就会把参数传给服务端。

Web Tracking使用步骤如下：

为Logstore打开Web Tracking标签（Logstore默认不允许匿名写，在使用前需要先开通Logstore的Web Tracking开关）

通过埋点方式向Logstore写入数据，有三种选择：

直接通过HTTP Get方式上报数据

              curl --request GET 'http://${project}.${sls-host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2'

通过嵌入HTML 下Image标签，当页面方式时自动上报数据

              <img src='http://${project}.${sls-host}/logstores/${logstore}/track.gif?APIVersion=0.6.0&key1=val1&key2=val2'/>
or
<img src=‘http://${project}.${sls-host}/logstores/${logstore}/track_ua.gif?APIVersion=0.6.0&key1=val1&key2=val2’/> 
track_ua.gif除了将自定义的参数上传外，在服务端还会将http头中的UserAgent、referer也作为日志中的字段。

通过Java Script SDK 上报数据

              <script type="text/javascript" src="loghub-tracking.js" async></script>

var logger = new window.Tracker('${sls-host}','${project}','${logstore}');
logger.push('customer', 'zhangsan');
logger.push('product', 'iphone 6s');
logger.push('price', 5500);
logger.logger();

详细步骤参见WebTracking接入文档。

案例：内容多渠道推广

当我们有一个新内容时（例如新功能、新活动、新游戏、新文章），作为运营人员总是迫不及待地希望能尽快传达到用户，因为这是获取用户的第一步、也是最重要的一步。

以游戏发行作为例子：

市场很大一笔费用进行游戏推广，例如投放了1W次广告
广告成功加载的有2000人次，约占20%
其中点击的有800人次
最终下载并注册账号试玩的往往少之又少

从以上可见，能够准确、实时地获得内容推广有效性对于业务非常重要。为了打到整体推广目标，运营人员往往会会挑选各个渠道来进行推广，例如：

用户站内信（Mail），官网博客（Blog），首页文案（Banner等）
短信，用户Email，传单等
新浪微博，钉钉用户群，微信公众账号，知乎论坛，今日头条等新媒体

方案设计

我们日志服务中创建一个Logstore（例如叫：myclick），并开启WebTracking功能

为需要宣传的文档（article=1001) 面对每个宣传渠道增加一个标示，并生成Web Tracking标签（以Img标签为例），如下：

站内信渠道(mailDec)：

              <img src="http://example.cn-hangzhou.log.aliyuncs.com/logstores/myclick/track_ua.gif?APIVersion=0.6.0&from=mailDec&article=1001" alt="" title="">

官网渠道(aliyunDoc)：

              <img src="http://example.cn-hangzhou.log.aliyuncs.com/logstores/myclick/track_ua.gif?APIVersion=0.6.0&from=aliyundoc&article=1001" alt="" title="">

用户邮箱渠道(email)：

              <img src="http://example.cn-hangzhou.log.aliyuncs.com/logstores/myclick/track_ua.gif?APIVersion=0.6.0&from=email&article=1001" alt="" title="">

              其他更多渠道可以在from参数后加上，也可以在URL中加入更多需要采集的参数

将img标签放置在宣传内容中，就可以散布出去了，我们也可以去散步喝咖啡了

采集日志分析

在完成埋点采集后，我们使用日志服务 LogSearch/Analytics功能可以对海量日志数据进行实时查询与分析。在结果分析可视化上，除自带Dashboard外，还支持 DataV、 Grafana、Tableua等对接方式，我们这里做一些基本的演示：

以下是截止目前采集日志数据，我们可以在搜索框中输入关键词进行查询：

也可以在查询后输入SQL进行秒级的实时分析并可视化：

除了在日志服务中分析外，

以下是我们对用户点击/阅读日志的实时分析：

当前投放总流量与阅读数

      * | select count(1) as c

每个小时阅读量的曲线

      * | select count(1) as c, date_trunc('hour',from_unixtime(__time__)) as time group by time order by time desc limit 100000

每种渠道阅读量的比例

      * | select count(1) as c, f group by f desc

阅读量来自哪些设备

      * | select count_if(ua like '%Mac%')  as mac, count_if(ua like '%Windows%')  as win, count_if(ua like '%iPhone%')  as ios, count_if(ua like '%Android%')  as android

阅读量来自哪些省市

      * | select ip_to_province(__source__) as province, count(1) as c group by province order by c desc limit 100

更多字段和分析场景可以参见分析语法与最佳实践

最终可以将这些实时数据配置到一个实时刷新Dashboard中，效果如下:

写在最后

当你看完本文时，可以留意这行文字下有个不可见Img标签将这次访问记录下来了，找找看吧：）

使用JavaScript和MQTT开发物联网应用

Tue, 27 Jun 2017 02:00:02 CST

如果说Java和C#哪个是最好的开发语言，无疑会挑起程序员之间的相互怒怼，那如果说JavaScript是动态性最好的语言，相信大家都不会有太大的争议。随着越来越多的硬件平台和开发板开始支持JavaScript，JavaScript在硬件端以及物联网领域有了新的机会。

IoT应用开发的数据链路

图1是一个智能家居物联平台的数据链路。

图1 智能家居物联平台的数据链路

一般来说，可以把IoT应用分为如图所示的四层。

client层：指的是IoT设备，可以是冰箱、空调，也可以是一些温湿度传感器。
gateway层：大多数场景中gateway是家里的WiFi路由器，也有小部分是基于Zigbee或蓝牙的网关设备。智能生活场景中的gateway数量相对于工业领域要少很多，在工业领域存在大量的边缘计算放在gateway层进行处理（雾计算）。
cloud云层：这里是集中处理业务的地方。
应用层：这一层是直接与用户打交道的地方，可以是通过电脑的Web浏览器、手机App，也可以是有屏幕的智能设备的显示器。随着语音技术的发展，无屏设备也可以通过语音交互，作为一个应用存在于物联网的交互层。

物联设备（下文统称为client），可以是单个设备或多个设备组成的应用场景。比如冰箱把运行的功耗数据、库存数据、温度数据采集，通过gateway发送到cloud层，cloud层收集数据后进行异常判断，做智能模式推荐等业务处理后到application层进行展现和交互。用户可以通过冰箱的设备数据进行模式选择，还可以做一些与设备无关的增值服务，比如听音乐、买菜等，这就是一个智能冰箱的数据链路。还有些client是成组智能场景的，比如温湿度传感器将数据上传到cloud，经过处理和加工，动态控制家中空调的温度，调节空气净化器的运行模式等。这么描述好像没有体现出cloud层的作用，那如果运行模式是用户预先配置好的呢？如“当温度超过25度，请帮我打开空调”，这些业务都可以通过cloud层进行处理。

client层的连接方式有WiFi、Bluetooth、Zigbee，而MQTT是为了让物联网设备更加互联互通而出现的应用层数据协议。

MQTT+JavaScript

MQTT是一个长连接的通讯应用层协议，最大的特点是数据精简、消息可靠、Publish-Subscribe模式灵活易用。MQTT已经成为IoT传输的标准协议，应用非常广泛。

图2中Client指的是物联网设备。Client通过对Topic的订阅和发布数据管理应用中的数据流动，而Broker是MQTT应用中用于管理Topic的角色。Server是物联网应用中的服务端，用于处理业务逻辑。

图2 MQTT的数据链路图

MQTT被广泛使用的一个重要的原因是MQTT的生态非常完善，同时也支持JavaScript。因此图2所示的所有链路和模块，都可以通过JavaScript实现。

图3 JavaScript在MQTT架构中常用的架构

JavaScript在MQTT架构中常用的框架

mosca（ https://github.com/mcollina/mosca）
mosca是一个用JavaScript实现的MQTT Broker。不仅如此，mosca还增加了对数据库，如Redis、MongoDB的支持，用来实现消息数据的存储。

MQTT.js（ https://github.com/mqttjs/MQTT.js）
MQTT.js是官网推荐的JavaScript实现的Client端。

KOA和Express
这两者都是非常主流的Node版本的Server，简单易用。

实战物联网应用

这节我们运用之前介绍的框架，自己动手完成一个简单的物联网应用。应用场景如图4所示，温度传感器用于接收温度，并把文档通过MQTT发送到Server端，在Server端进行业务处理，根据温度计算出穿衣提示，通过MQTT把数据发送到特定的Topic，App订阅Topic获取数据后进行展现。

图4 “穿衣提示”业务场景框架

Broker端的实现

Broker端使用mosca，参考网页 https://github.com/mcollina/mosca。

安装mosca。

  nmp install mosca --save

启动mosca。这里需要注意，如果本地没有配置MongoDB，则需要把ascoltatore中的内容全部注释掉。

  var mosca = require('mosca');

var ascoltatore = {
  //using ascoltatore
  // type: 'mongo',
  // url: 'mongodb://localhost:27017/mqtt',
  // pubsubCollection: 'ascoltatori',
  // mongo: {}
};

var settings = {
  port: 1883,
  backend: ascoltatore
};

var server = new mosca.Server(settings);

server.on('clientConnected', function(client) {
    console.log('client connected', client.id);
});

// fired when a message is received
server.on('published', function(packet, client) {
  console.log('Published', packet.payload); //{"clientId":"mqttjs_02fea7b4","topic":"/tips"}
  // console.log('>>>packet', packet); //{"clientId":"mqttjs_02fea7b4","topic":"/tips"}
});

server.on('ready', setup);

// fired when the mqtt server is ready
function setup() {
  console.log('Mosca server is up and running');
}

代码完成后，启动文件，本地的一个Broker就跑在localhost的1883端口上了。

Client端的温度传感器实现

Client使用MQTT.js实现，参考网页 https://github.com/mqttjs/MQTT.js

安装

  npm install mqtt --save

启动

  var mqtt = require('mqtt');
var client  = mqtt.connect('mqtt://localhost:1883');

client.on('connect', function () {
   console.log('>>> connected')
   // client.subscribe('/tips')
   setInterval(
        ()=>{client.publish('/temperature', '30');},
        3000
    );

})

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
})

// client.end();

执行Node index后Client就启动了，可以看到在MQTT.connect方法中连接了上一节中启动的Broker地址，连接成功后，Client会输出日志，“>>> connected”，Broker的控制台也会输出Client的连接信息。

这里模拟了温度传感器，定时3秒向/temperature的Topic中发送温度数据。

本节的温度器可以在电脑中使用Node方式运行，也可以运行在支持JavaScript的开发板中，如RUFF、NodeMCU、Raspberry Pi，并且可以使用真实的传感器。

Server的实现

Server使用MQTT.js订阅Client发送到/temperature Topic的数据进行处理，把处理后的数据转译成JSON发送到另一业务主题/tips中。

实现代码如下：

  'use strict'

const mqtt = require('mqtt');
var client  = mqtt.connect('mqtt://localhost:1883');

client.on('connect', function () {
   console.log('>>> connected');
   client.subscribe('/temperature');
})

client.on('message', function (topic, message) {
  var temperature = parseInt(message.toString());
  var data = {temperature};

  if (temperature >= 60) {
        data.tips = "热... 500服务器故障";
  }
  else if (temperature >= 50) {
        data.tips = "今天天气非常热，建议不要穿衣服了";
  }
  else if (temperature >= 40) {
        data.tips = "今天天气十分的热，建议穿短袖T恤+短裤";
  }
  else if (temperature >= 30) {
        data.tips = "今天天气有点的热，建议穿短袖T恤";
  }
  else if (temperature >= 0) {
        data.tips = "今天天气正好，可以穿上一件薄衣服";
  }
  else if (temperature >= -10) {
        data.tips = "今天天气十分寒冷，棉袄可以穿上一件";    
  }
  else {
        data.tips = "今天天气十分十分寒冷，棉袄可以穿上二件";  
  }
  client.publish('/tips', JSON.stringify(data));
  // if (temperature+1) {}
  // message is Buffer
  console.log(JSON.stringify(data));
})

App的实现

Demo的App使用KOA启动一个Web，在Web中展现当前温度对应的穿衣提示，通过订阅tips获取数据。

安装koa

  $ npm install koa

实现代码

  'use strict'

const Koa = require('koa');
const mqtt = require('mqtt');
const app = new Koa();


var msg = {temperature:"-",tips:""};
// response
app.use(ctx => {
  ctx.body = "当前温度:" + msg.temperature + "度" + "\n" + '穿衣提示:'+msg.tips + "\n"  ;
});

app.listen(3000);

//mqtt
var client  = mqtt.connect('mqtt://localhost:1883');

client.on('connect', function () {
   console.log('>>> connected');
   client.subscribe('/tips');
})

client.on('message', function (topic, message) {
  var data = JSON.parse(message.toString());
  console.log(message.toString()); 
  console.log(data.tips); 
  msg = data;

  // if (temperature+1) {}
  // message is Buffer
  // let str = message.toString();
  // let data = JSON.parse(message);
  // console.log(data.tips);
  // msg =  message.toString();
})

Demo小节

本章给出了一个简单的物联网业务的业务场景和实现逻辑，其中Client也可以运行在电脑上进行Demo查看，或是跑在真实物联设备或开发版上。如图5，笔者使用RUFF开发板实现了一次。

图5 Demo硬件演示

完整Demo代码已经分享在github中，大家可以输入URL下载。
https://github.com/coolnameismy/javascript-mqtt-demo-wearingTip

总结

本文和大家交流了物联网应用的一般数据链路、MQTT协议的架构，并基于MQTT实现了一个简单的物联网应用。

现在正是前端工程师的大好机会，越来越多的嵌入式设备都开始支持JavaScript，原因是现在有很多JavaScript引擎可以把JavaScript转换成各种平台的底层代码，比较有名的有Jerryscript、Duktape等。随着越来越多的JavaScript工程师进入嵌入式开发的领域，嵌入式应用开发也会出现前后端分离的情况（应用开发或是驱动开发），类似于Web开发的前后端分离。前端关注在应用、创意、数据链路、用户体现上，而后端则关心GPIO、I2C的底层数据接口和驱动，平台兼容性等方向。

作者：tangxiaoyin 发表于2017/6/26 18:00:02 原文链接

阅读：1954 评论：2 查看评论

JavaScript 启动性能瓶颈分析与解决方案

Mon, 13 Feb 2017 22:28:59 CST

JavaScript 启动性能瓶颈分析与解决方案翻译自 Addy Osmani 的 JavaScript Start-up Performance，从属于笔者的 Web 前端入门与工程实践。本文已获得原作者授权，为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。随着现代 Web 技术的发展与用户交互复杂度的增加，我们的网站变得日益臃肿，也要求着我们不断地优化网站性能以保证友好的用户体验。本文作者则着眼于 JavaScript 启动阶段优化，首先以大量的数据分析阐述了语法分析、编译等步骤耗时占比过多是很多网站的性能瓶颈之一。然后作者提供了一系列用于在现代浏览器中进行性能评测的工具，还分别从开发者工程实践与 JavaScript 引擎内部实现的角度阐述了应当如何提高解析与编译速度。

在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 <script>标签后会瞬时完成解析操作，不过这很明显是痴人说梦。下图是对于 V8 引擎工作原理的概述：

下面我们深入其中的关键步骤进行分析。

到底是什么拖慢了我们应用的启动时间？

在启动阶段，语法分析，编译与脚本执行占据了 JavaScript 引擎运行的绝大部分时间。换言之，这些过程造成的延迟会真实地反应到用户可交互时延上；譬如用户已经看到了某个按钮，但是要好几秒之后才能真正地去点击操作，这一点会大大影响用户体验。

上图是我们使用 Chrome Canary 内置的 V8 RunTime Call Stats 对于某个网站的分析结果；需要注意的是桌面浏览器中语法解析与编译占用的时间还是蛮长的，而在移动端中占用的时间则更长。实际上，对于 Facebook, Wikipedia, Reddit 这些大型网站中语法解析与编译所占的时间也不容忽视：

上图中的粉色区域表示花费在 V8 与 Blink's C++ 中的时间，而橙色和黄色分别表示语法解析与编译的时间占比。Facebook 的 Sebastian Markbage 与 Google 的 Rob Wormald 也都在 Twitter 发文表示过 JavaScript 的语法解析时间过长已经成为了不可忽视的问题，后者还表示这也是 Angular 启动时主要的消耗之一。

随着移动端浪潮的涌来，我们不得不面对一个残酷的事实：移动端对于相同包体的解析与编译过程要花费相当于桌面浏览器2~5倍的时间。当然，对于高配的 iPhone 或者 Pixel 这样的手机相较于 Moto G4 这样的中配手机表现会好很多；这一点提醒我们在测试的时候不能仅用身边那些高配的手机，而应该中高低配兼顾：

上图是部分桌面浏览器与移动端浏览器对于 1MB 的 JavaScript 包体进行解析的时间对比，显而易见的可以发现不同配置的移动端手机之间的巨大差异。当我们应用包体已经非常巨大的时候，使用一些现代的打包技巧，譬如代码分割，TreeShaking，Service Workder 缓存等等会对启动时间有很大的影响。另一个角度来看，即使是小模块，你代码写的很糟或者使用了很糟的依赖库都会导致你的主线程花费大量的时间在编译或者冗余的函数调用中。我们必须要清醒地认识到全面评测以挖掘出真正性能瓶颈的重要性。

JavaScript 语法解析与编译是否成为了大部分网站的瓶颈？

我曾不止一次听到有人说，我又不是 Facebook，你说的 JavaScript 语法解析与编译到
底会对其他网站造成什么样的影响呢？对于这个问题我也很好奇，于是我花费了两个月的时间对于超过 6000 个网站进行分析；这些网站囊括了 React，Angular，Ember，Vue 这些流行的框架或者库。大部分的测试是基于 WebPageTest 进行的，因此你可以很方便地重现这些测试结果。 光纤接入的桌面浏览器大概需要 8 秒的时间才能允许用户交互，而 3G 环境下的 Moto G4 大概需要 16 秒才能允许用户交互。

大部分应用在桌面浏览器中会耗费约 4 秒的时间进行 JavaScript 启动阶段（语法解析、编译、执行）：

而在移动端浏览器中，大概要花费额外 36% 的时间来进行语法解析：

另外，统计显示并不是所有的网站都甩给用户一个庞大的 JS 包体，用户下载的经过 Gzip 压缩的平均包体大小是 410KB，这一点与 HTTPArchive 之前发布的 420KB 的数据基本一致。不过最差劲的网站则是直接甩了 10MB 的脚本给用户，简直可怕。

通过上面的统计我们可以发现，包体体积固然重要，但是其并非唯一因素，语法解析与编译的耗时也不一定随着包体体积的增长而线性增长。总体而言小的 JavaScript 包体是会加载地更快（忽略浏览器、设备与网络连接的差异），但是同样 200KB 的大小，不同开发者的包体在语法解析、编译上的时间却是天差地别，不可同日而语。

现代 JavaScript 语法解析 & 编译性能评测

Chrome DevTools

打开 Timeline( Performance panel ) > Bottom-Up/Call Tree/Event Log 就会显示出当前网站在语法解析/编译上的时间占比。如果你希望得到更完整的信息，那么可以打开 V8 的 Runtime Call Stats。在 Canary 中，其位于 Timeline 的 Experims > V8 Runtime Call Stats 下。

Chrome Tracing

打开 about:tracing 页面，Chrome 提供的底层的追踪工具允许我们使用 disabled-by-default-v8.runtime_stats来深度了解 V8 的时间消耗情况。V8 也提供了详细的指南来介绍如何使用这个功能。

WebPageTest

WebPageTest 中 Processing Breakdown 页面在我们启用 Chrome > Capture Dev Tools Timeline 时会自动记录 V8 编译、EvaluateScript 以及 FunctionCall 的时间。我们同样可以通过指明 disabled-by-default-v8.runtime_stats的方式来启用 Runtime Call Stats。

更多使用说明参考我的 gist。

User Timing

我们还可以使用 Nolan Lawson 推荐的 User Timing API来评估语法解析的时间。不过这种方式可能会受 V8 预解析过程的影响，我们可以借鉴 Nolan 在 optimize-js 评测中的方式，在脚本的尾部添加随机字符串来解决这个问题。我基于 Google Analytics 使用相似的方式来评估真实用户与设备访问网站时候的解析时间：

DeviceTiming

Etsy 的 DeviceTiming 工具能够模拟某些受限环境来评估页面的语法解析与执行时间。其将本地脚本包裹在了某个仪表工具代码内从而使我们的页面能够模拟从不同的设备中访问。可以阅读 Daniel Espeset 的 Benchmarking JS Parsing and Execution on Mobile Devices 一文来了解更详细的使用方式。

我们可以做些什么以降低 JavaScript 的解析时间？

减少 JavaScript 包体体积。我们在上文中也提及，更小的包体往往意味着更少的解析工作量，也就能降低浏览器在解析与编译阶段的时间消耗。
使用代码分割工具来按需传递代码与懒加载剩余模块。这可能是最佳的方式了，类似于 PRPL这样的模式鼓励基于路由的分组，目前被 Flipkart, Housing.com 与 Twitter 广泛使用。
Script streaming: 过去 V8 鼓励开发者使用 async/defer来基于 script streaming实现 10-20% 的性能提升。这个技术会允许 HTML 解析器将相应的脚本加载任务分配给专门的 script streaming 线程，从而避免阻塞文档解析。V8 推荐尽早加载较大的模块，毕竟我们只有一个 streamer 线程。
评估我们依赖的解析消耗。我们应该尽可能地选择具有相同功能但是加载地更快的依赖，譬如使用 Preact 或者 Inferno 来代替 React，二者相较于 React 体积更小具有更少的语法解析与编译时间。Paul Lewis 在最近的一篇文章中也讨论了框架启动的代价，与 Sebastian Markbage 的说法不谋而合：最好地评测某个框架启动消耗的方式就是先渲染一个界面，然后删除，最后进行重新渲染。第一次渲染的过程会包含了分析与编译，通过对比就能发现该框架的启动消耗。

如果你的 JavaScript 框架支持 AOT（ahead-of-time）编译模式，那么能够有效地减少解析与编译的时间。Angular 应用就受益于这种模式：

现代浏览器是如何提高解析与编译速度的？

不用灰心，你并不是唯一纠结于如何提升启动时间的人，我们 V8 团队也一直在努力。我们发现之前的某个评测工具 Octane 是个不错的对于真实场景的模拟，它在微型框架与冷启动方面很符合真实的用户习惯。而基于这些工具，V8 团队在过去的工作中也实现了大约 25% 的启动性能提升：

本部分我们就会对过去几年中我们使用的提升语法解析与编译时间的技巧进行阐述。

代码缓存

Chrome 42 开始引入了所谓的代码缓存的概念，为我们提供了一种存放编译后的代码副本的机制，从而当用户二次访问该页面时可以避免脚本抓取、解析与编译这些步骤。除以之外，我们还发现在重复访问的时候这种机制还能避免 40% 左右的编译时间，这里我会深入介绍一些内容：

代码缓存会对于那些在 72 小时之内重复执行的脚本起作用。
对于 Service Worker 中的脚本，代码缓存同样对 72 小时之内的脚本起作用。
对于利用 Service Worker 缓存在 Cache Storage 中的脚本，代码缓存能在脚本首次执行的时候起作用。

总而言之，对于主动缓存的 JavaScript 代码，最多在第三次调用的时候其能够跳过语法分析与编译的步骤。我们可以通过 chrome://flags/#v8-cache-strategies-for-cache-storage来查看其中的差异，也可以设置 js-flags=profile-deserialization运行 Chrome 来查看代码是否加载自代码缓存。不过需要注意的是，代码缓存机制仅会缓存那些经过编译的代码，主要是指那些顶层的往往用于设置全局变量的代码。而对于类似于函数定义这样懒编译的代码并不会被缓存，不过 IIFE 同样被包含在了 V8 中，因此这些函数也是可以被缓存的。

Script Streaming

Script Streaming允许在后台线程中对异步脚本执行解析操作，可以对于页面加载时间有大概 10% 的提升。上文也提到过，这个机制同样会对同步脚本起作用。

这个特性倒是第一次提及，因此 V8 会允许所有的脚本，即使阻塞型的 <script src=''>脚本也可以由后台线程进行解析。不过缺陷就是目前仅有一个 streaming 后台线程存在，因此我们建议首先解析大的、关键性的脚本。在实践中，我们建议将 <script defer>添加到 <head>块内，这样浏览器引擎就能够尽早地发现需要解析的脚本，然后将其分配给后台线程进行处理。我们也可以查看 DevTools Timeline 来确定脚本是否被后台解析，特别是当你存在某个关键性脚本需要解析的时候，更需要确定该脚本是由 streaming 线程解析的。

语法解析 & 编译优化

我们同样致力于打造更轻量级、更快的解析器，目前 V8 主线程中最大的瓶颈在于所谓的非线性解析消耗。譬如我们有如下的代码片：

  (function (global, module) { … })(this, function module() { my functions })

V8 并不知道我们编译主脚本的时候是否需要 module这个模块，因此我们会暂时放弃编译它。而当我们打算编译 module时，我们需要重分析所有的内部函数。这也就是所谓的 V8 解析时间非线性的原因，任何一个处于 N 层深度的函数都有可能被重新分析 N 次。V8 已经能够在首次编译的时候搜集所有内部函数的信息，因此在未来的编译过程中 V8 会忽略所有的内部函数。对于上面这种 module形式的函数会是很大的性能提升，建议阅读 The V8 Parser(s) — Design, Challenges, and Parsing JavaScript Better来获取更多内容。V8 同样在寻找合适的分流机制以保证启动时能在后台线程中执行 JavaScript 编译过程。

预编译 JavaScript？

每隔几年就有人提出引擎应该提供一些处理预编译脚本的机制，换言之，开发者可以使用构建工具或者其他服务端工具将脚本转化为字节码，然后浏览器直接运行这些字节码即可。从我个人观点来看，直接传送字节码意味着更大的包体，势必会增加加载时间；并且我们需要去对代码进行签名以保证能够安全运行。目前我们对于 V8 的定位是尽可能地避免上文所说的内部重分析以提高启动时间，而预编译则会带来额外的风险。不过我们欢迎大家一起来讨论这个问题，虽然 V8 目前专注于提升编译效率以及推广利用 Service Worker 缓存脚本代码来提升启动效率。我们在 BlinkOn7 上与 Facebook 以及 Akamai 也讨论过预编译相关内容。

Optimize JS 优化

类似于 V8 这样的 JavaScript 引擎在进行完整的解析之前会对脚本中的大部分函数进行预解析，这主要是考虑到大部分页面中包含的 JavaScript 函数并不会立刻被执行。

预编译能够通过只处理那些浏览器运行所需要的最小函数集合来提升启动时间，不过这种机制在 IIFE 面前却反而降低了效率。尽管引擎希望避免对这些函数进行预处理，但是远不如 optimize-js这样的库有作用。optimize-js 会在引擎之前对于脚本进行处理，对于那些立即执行的函数插入圆括号从而保证更快速地执行。这种预处理对于 Browserify, Webpack 生成包体这样包含了大量即刻执行的小模块起到了非常不错的优化效果。尽管这种小技巧并非 V8 所希望使用的，但是在当前阶段不得不引入相应的优化机制。

总结

启动阶段的性能至关重要，缓慢的解析、编译与执行时间可能成为你网页性能的瓶颈所在。我们应该评估页面在这个阶段的时间占比并且选择合适的方式来优化。我们也会继续致力于提升 V8 的启动性能，尽我所能！

加快JavaScript加载和执行效率

Tue, 31 Jan 2017 08:00:00 CST

概览

无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。一个典型的例子就是在页面中使用document.write()。

JavaScript 代码内嵌示例

<html>
<head>
    <title>Source Example</title>
</head>
<body>
    <p>
    <script type="text/javascript">
        document.write("Today is " + (new Date()).toDateString());
    </script>
    </p>
</body>
</html>

当浏览器遇到<script>标签时，当前 html 页面无从获知 JavaScript 是否会向<p> 标签添加内容，或引入其他元素，或甚至移除该标签。因此，这时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。

脚本位置

HTML 4 规范指出 <script> 标签可以放在 HTML 文档的<head>或<body>中，并允许出现多次。web 开发人员一般习惯在 <head> 中加载外链的 JavaScript，接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。

低效率脚本位置示例

<html>
<head>
    <title>Source Example</title>
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    <script type="text/javascript" src="script3.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Hello world!</p>
</body>
</html>

然而这种常规的做法却隐藏着严重的性能问题。在清单 2 的示例中，当浏览器解析到 <script> 标签（第 4 行）时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的 styles.css 样式文件和<body>标签都无法被加载，由于<body>标签无法被加载，那么页面自然就无法渲染了。因此在该 JavaScript 代码完全执行完之前，页面都是一片空白。

由于脚本会阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。

推荐的代码放置位置示例

<html>
<head>
    <title>Source Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Hello world!</p>

    <!-- Example of efficient script positioning -->
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    <script type="text/javascript" src="script3.js"></script>
</body>
</html>

这段代码展示了在 HTML 文档中放置<script>标签的推荐位置。尽管脚本下载会阻塞另一个脚本，但是页面的大部分内容都已经下载完成并显示给了用户，因此页面下载不会显得太慢。这是优化 JavaScript 的首要规则：将脚本放在底部。

组织脚本

由于每个 <script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的 <script>标签数量有助于改善这一情况。这不仅针对外链脚本，内嵌脚本的数量同样也要限制。浏览器在解析 HTML 页面的过程中每遇到一个 <script>标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。

这个问题在处理外链 JavaScript 文件时略有不同。考虑到 HTTP 请求会带来额外的性能开销，因此下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。也就是说，减少页面中外链脚本的数量将会改善性能。

通常一个大型网站或应用需要依赖数个 JavaScript 文件。您可以把多个文件合并成一个，这样只需要引用一个 <script>标签，就可以减少性能消耗。文件合并的工作可通过离线的打包工具或者一些实时的在线服务来实现。

需要特别提醒的是，把一段内嵌脚本放在引用外链样式表的 <link>之后会导致页面阻塞去等待样式表的下载。这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息。因此，建议不要把内嵌脚本紧跟在 <link>标签后面。

无阻塞的脚本

减少 JavaScript 文件大小并限制 HTTP 请求数在功能丰富的 Web 应用或大型网站上并不总是可行。Web 应用的功能越丰富，所需要的 JavaScript 代码就越多，尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器。

无阻塞脚本的秘诀在于，在页面加载完成后才加载 JavaScript 代码。这就意味着在 window对象的 onload事件触发后再下载脚本。有多种方式可以实现这一效果。

延迟加载脚本

HTML 4 为 <script>标签定义了一个扩展属性： defer。 Defer属性指明本元素所含的脚本不会修改 DOM，因此代码能安全地延迟执行。 defer属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中， defer属性会被直接忽略，因此 <script>标签会以默认的方式处理，也就是说会造成阻塞。然而，如果您的目标浏览器支持的话，这仍然是个有用的解决方案。

defer 属性使用方法示例

<script type="text/javascript" src="script1.js" defer></script>

带有 defer属性的 <script>标签可以放置在文档的任何位置。对应的 JavaScript 文件将在页面解析到 <script>标签时开始下载，但不会执行，直到 DOM 加载完成，即 onload事件触发前才会被执行。当一个带有 defer属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。

任何带有 defer属性的 <script>元素在 DOM 完成加载之前都不会被执行，无论内嵌或者是外链脚本都是如此。清单 5 的例子展示了 defer属性如何影响脚本行为：

defer 属性对脚本行为的影响

<html>
<head>
    <title>Script Defer Example</title>
</head>
<body>
    <script type="text/javascript" defer>
        alert("defer");
    </script>
    <script type="text/javascript">
        alert("script");
    </script>
    <script type="text/javascript">
        window.onload = function(){
            alert("load");
        };
    </script>
</body>
</html>

这段代码在页面处理过程中弹出三次对话框。不支持 defer属性的浏览器的弹出顺序是：“defer”、“script”、“load”。而在支持 defer属性的浏览器上，弹出的顺序则是：“script”、“defer”、“load”。请注意，带有 defer属性的 <script>元素不是跟在第二个后面执行，而是在 onload事件被触发前被调用。

如果您的目标浏览器只包括 Internet Explorer 和 Firefox 3.5，那么 defer脚本确实有用。如果您需要支持跨领域的多种浏览器，那么还有更一致的实现方式。

HTML 5 为 <script>标签定义了一个新的扩展属性： async。它的作用和 defer一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。但是有一点需要注意，在有 async的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async就很有可能出现错误。

动态脚本元素

文档对象模型（DOM）允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。 <script>元素与页面其他元素一样，可以非常容易地通过标准 DOM 函数创建：

通过标准 DOM 函数创建<script>元素

var script = document.createElement ("script");
   script.type = "text/javascript";
   script.src = "script1.js";
   document.getElementsByTagName("head")[0].appendChild(script);

新的 <script>元素加载 script1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在 <head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了 Firefox 和 Opera，他们将等待此前的所有动态脚本节点执行完毕）。当脚本是“自运行”类型时，这一机制运行正常，但是如果脚本只包含供页面其他脚本调用调用的接口，则会带来问题。这种情况下，您需要跟踪脚本下载完成并是否准备妥善。可以使用动态 <script>节点发出事件得到相关信息。

Firefox、Opera, Chorme 和 Safari 3+会在 <script>节点接收完成之后发出一个 onload事件。您可以监听这一事件，以得到脚本准备好的通知：

通过监听 onload 事件加载 JavaScript 脚本

var script = document.createElement ("script")
script.type = "text/javascript";

//Firefox, Opera, Chrome, Safari 3+
script.onload = function(){
    alert("Script loaded!");
};

script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

Internet Explorer 支持另一种实现方式，它发出一个 readystatechange事件。 <script>元素有一个 readyState属性，它的值随着下载外部文件的过程而改变。 readyState有五种取值：

微软文档上说，在 <script>元素的生命周期中， readyState的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个 readyState值所表示的最终状态并不一致，有时 <script>元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在 readystatechange事件中检查这两种状态，并且当其中一种状态出现时，删除 readystatechange事件句柄（保证事件不会被处理两次）：

通过检查 readyState 状态加载 JavaScript 脚本

var script = document.createElement("script")
script.type = "text/javascript";

//Internet Explorer
script.onreadystatechange = function(){
     if (script.readyState == "loaded" || script.readyState == "complete"){
           script.onreadystatechange = null;
           alert("Script loaded.");
     }
};

script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

大多数情况下，您希望调用一个函数就可以实现 JavaScript 文件的动态加载。下面的函数封装了标准实现和 IE 实现所需的功能：

通过函数进行封装

function loadScript(url, callback){
    var script = document.createElement ("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

此函数接收两个参数：JavaScript 文件的 URL，和一个当 JavaScript 接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步，设置 src属性，并将 <script>元素添加至页面。此 loadScript()函数使用方法如下：

loadScript()函数使用方法

loadScript("script1.js", function(){
    alert("File is loaded!");
});

您可以在页面中动态加载很多 JavaScript 文件，但要注意，浏览器不保证文件加载的顺序。所有主流浏览器之中，只有 Firefox 和 Opera 保证脚本按照您指定的顺序执行。其他浏览器将按照服务器返回它们的次序下载并运行不同的代码文件。您可以将下载操作串联在一起以保证他们的次序，如下：

通过 loadScript()函数加载多个 JavaScript 脚本

loadScript("script1.js", function(){
    loadScript("script2.js", function(){
        loadScript("script3.js", function(){
            alert("All files are loaded!");
        });
    });
});

此代码等待 script1.js 可用之后才开始加载 script2.js，等 script2.js 可用之后才开始加载 script3.js。虽然此方法可行，但如果要下载和执行的文件很多，还是有些麻烦。如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。

动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

使用 XMLHttpRequest(XHR)对象

此技术首先创建一个 XHR 对象，然后下载 JavaScript 文件，接着用一个动态 <script>元素将 JavaScript 代码注入页面。清单 12 是一个简单的例子：

通过 XHR 对象加载 JavaScript 脚本

var xhr = new XMLHttpRequest();
xhr.open("get", "script1.js", true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement ("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};
xhr.send(null);

此代码向服务器发送一个获取 script1.js 文件的 GET 请求。 onreadystatechange事件处理函数检查 readyState是不是 4，然后检查 HTTP 状态码是不是有效（2XX 表示有效的回应，304 表示一个缓存响应）。如果收到了一个有效的响应，那么就创建一个新的 <script>元素，将它的文本属性设置为从服务器接收到的 responseText字符串。这样做实际上会创建一个带有内联代码的 <script>元素。一旦新 <script>元素被添加到文档，代码将被执行，并准备使用。

这种方法的主要优点是，您可以下载不立即执行的 JavaScript 代码。由于代码返回在 <script>标签之外（换句话说不受 <script>标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDN 下载（CDN 指"内容投递网络（Content Delivery Network）"，所以大型网页通常不采用 XHR 脚本注入技术。

总结

减少 JavaScript 对性能的影响有以下几种方法：

通过以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。

原文来自：https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/

补充js加载函数：

function loadJs(url, callback, charset) {
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    if ( !!charset) script.charset = "utf-8";
    script.src = url;
    script.onload = script.onreadystatechange = function() {
        var f = script.readyState;
        if (f && f != "loaded" && f != "complete") return;
        script.onload = script.onreadystatechange = null;
        head.removeChild(script) if (callback) {
            callback() || callback
        };
    };
    head.appendChild(script);
}

// js同步加载
function getScripts(i, linkArray, fn) {
    env || getEnv();
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = linkArray[i];
    var head = document.head || document.getElementsByTagName('head')[0];
    head.appendChild(script);

    if (env.ie && 'onreadystatechange' in script && !('draggable' in script)){ //ie浏览器使用以下方式加载
        script.onreadystatechange = function () {
          if (/loaded|complete/.test(script.readyState)) {
            script.onreadystatechange = null;
            if(i === linkArray.length-1) {
                if (fn) {
                    fn();
                }
            } else {
                getScripts(++i, linkArray, fn);
            }
          }
        };
    }else{
        script.onload = function() {
            if(i === linkArray.length-1) {
                if (fn) {
                    fn();
                }
            } else {
                getScripts(++i, linkArray, fn);
            }
        };
    }
}

// js存在依赖关系 依次加载
getScripts(0, [
    'http://caibaojian.com/demo/base.js',
    'http://caibaojian.com/demo/reset.js'], function() {
     alert('callback');
});

Rhino -- 基于java的javascript实现

Mon, 13 Jun 2016 00:38:37 CST

这几天突然对js引擎非常感兴趣，大概了解了一下，记下来备忘。javascript引擎大家比较熟悉的应该是当前比较火的Chrome V8引擎。以快速闻名。v8基于c++开发。这里就不多阐述了。另外一个是基于java的Rhino引擎，这个想来大家不是很了解。下面来简单介绍一下。

Rhino简介

(简介这部分是抄的)

Rhino 是一种使用 Java 语言编写的 JavaScript 的开源实现，原先由Mozilla开发，现在被集成进入JDK 6.0。与其他很多语言一样，Rhino 是一种动态类型的、基于对象的脚本语言，它可以简单地访问各种 Java 类库。Rhino 从 JavaScript 中借用了很多语法，让程序员可以快速编写功能强大的程序。最为明显的区别是，Rhino 不再使用语句结束符( ; )，放宽了变量声明规则，并且极大地简化了修改和检索对象属性的语法（没有求助于调用存取方法）。

由于 Rhino 是 JavaScript 的一种基于 Java 的实现，所以对于 Java 开发人员来说，它应该特别易于使用。JavaScript 的（以及 Rhino 的）语法非常类似于 Java 编程语言。这两种语言都采用了与 Java 编程语言相似的循环和条件结构，并且遵循类似的语法模式来表示这些结构。

虽然 Rhino 与本系列文章中介绍的其他编程语言具有很多共同点，但对于 Java 平台上的编程而言，它也有独特之处（可能有时有些不同的地方）。Rhino 是一种 基于原型的（prototype-based）语言，而不是一种 基于类的（class-based）语言。在 Rhino 中，您可以构建对象，而不是类。除了类的对象实例之外，这样做还可以让您避免构建和操作类的开发、部署和执行成本。正如您将在文中发现的那样，诸如 Rhino 这类基于原型的语言在开发和运行基于 GUI 的应用程序时尤其有效。

如何使用Rhino

你可以去Rhino的主页下载最新的源代码和文档，解压开之后有一个js.jar 这就是Rhino的库文件。Rhino应用方式我分为console，js调java,java调js三种。下面来一一阐述。

一 console　　shell命令
相信很多技术猿们习惯使用酷酷的console控制台来敲打shell命令。可这些一般都是服务端语言。现在你也可以在控制台中敲到js代码了。用法很简单。首先要将js.jar文件放入windows的java\jdk1.6.0\jre\lib\ext目录，mac的 /System/Library/Java/Extensions/目录下。

然后你就可以在命令行中敲打

java  org.mozilla.javascript.tools.shell.Main

然后你就会看到像这样的输出：

Rhino 1.7 release 4 2012 06 18
js>

这样你就可以调试js代码了，这里你既可以加载js文件来运行，也可以直接运行js语法语句,并且Rhino借用了java中很多的基础语法,使我们写起代码来更easy。下面我们来试试看。

直接写代码，效果如下：

js> var a={'name':'zhangwen','age':30}
js> a.name
zhangwen
js> a.age
30

新建一个test.js文件,内容如下：

function test(str){
   var name=str;
   print(name);
}

然后在console中输入:

js> load('test.js');
js> test('awen');  
awen
js>

体验了这两种方式后感觉是不是很酷?

二 Rhino中调用JAVA

不说废话，直接上代码：

js> var date=new java.util.Date();
js> date
Mon Jul 16 17:04:07 CST 2012
js> java.lang.Math.PI
3.141592653589793

当然，你也先导入包，importPackage(java.util)（相当于java中的import package）那么代码中就不用写类名的包路径了，var date=new Date();不知道细心地同学发现没有。在javascript中也有原生的Date，那这样我们就应该避免这样的写法，防止代码中混乱。

Rhino实现Java接口：

js> var obj={run:function(){print("\nrunning...");}}
js> var r=new java.lang.Runnable(obj);
js> var t=new java.lang.Thread(r);
js> t.start();
js> 
running...

Rhino创建Java 数组

js> var array=java.lang.reflect.Array.newInstance(java.lang.String, 2);  
js> array[0]="恩";     
恩
js> array[1]="哦";
哦
js> java.util.Arrays.toString(array);
[恩, 哦]

三 Java对象操纵JavaScript

import org.mozilla.javascript.Context;
import org.mozilla.javascript.Scriptable;

public static void main(String[] args) {
   Context ctx=Context.enter();
   Scriptable scope=ctx.initStandardObjects();
   
   String jsStr="100*20/10";
   Object result=ctx.evaluateString(scope, jsStr, null, 0,null); 
   System.out.println("result="+result);
}

http://www.cnblogs.com/cczw/archive/2012/07/16/2593957.html

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

JavaScript 方法的4种调用模式

Wed, 03 Feb 2016 08:00:00 CST

函数（Function）是JavaScript的基本模块单元，JavaScript的代码重用，信息隐藏，对象组合等都可以借助函数来实现。 JavaScript中的函数有4种调用模式：

方法调用（Method Invocation Pattern）
函数调用（Function Invocation Pattern）
构造函数调用（Constructor Invocation Pattern）
apply调用（Apply Invocation Pattern）

与其他语言不通，JavaScript的函数是一种特殊的对象（事实上，JavaScript函数是一级对象）。这意味着函数可以有属性，可以有方法，也可以传参、返回、赋值给变量、加入数组。与对象不同的是函数可以被调用。

既然是对象便会有原型。我们知道通过花括号语法创建的对象的原型是 Object.prototype。通过函数语法（ function关键字或 new Function()）创建的函数，其原型自然是 Function.prototype。而 Function.prototype的原型是 Object.prototype。

注意上述『原型』指的是原型链上的隐式原型，区别于 prototype原型属性。

调用模式

我们知道在函数里可见的名称包括：函数体内声明的变量、函数参数、来自外部的闭包变量。此外还有两个： this和 arguments。

this在面向对象程序设计中非常重要，而它的值在JavaScript中取决于 调用模式。 JavaScript中的函数有4种调用模式：方法调用、函数调用、构造函数调用、apply调用。

arguments是一个类数组变量（array like），拥有 length属性并可以取下标，它存着所有参数构成的有序数组。在JavaScript中，函数调用与函数签名不一致（个数不正确、类型不正确定）时不会产生运行时错。少了的参数会被置为 undefined，多了的参数会被忽略。

方法调用模式

在面向对象程序设计中，当函数（Function）作为对象属性时被称为方法（Method）。方法被调用时 this会被绑定到对应的对象。在JavaScript中有两种语法可以完成方法调用： a.func()和 a['func']()。

   var obj = {
    val: 0,
    count: function(i){
        this.val += i;
        console.log(this.val);
    }
};

obj.count();    // 1
obj.count();    // 2

值得注意的是， this到 obj的绑定属于极晚绑定（very late binding），绑定发生在调用的那一刻。这使得JavaScript函数在被重用时有极大的灵活性。

函数调用模式

当函数不是对象属性时，它就会被当做函数来调用，比如 add(2,3)。此时 this绑定到了全局对象 global。

在[那些 JavaScript 的优秀特性][elegant-js]一文中曾提到， JavaScript的编译（预处理）需要 global对象来链接所有全局名称。

其实 this绑定到 global是JavaScript的一个设计错误（可以说是最严重的错误），它导致了对象方法不能直接调用内部函数来做一些辅助工作，因为内不函数里的 this的绑定到了 global。所以如果要重新设计语言，方法调用的 this应该绑定到上一级函数的 this。

然而共有方法总是需要调用内部辅助函数，于是产生了这样一个非常普遍的解决方案：

   man.love = function(){
    var self = this;
    function fuck(){
        self.happy++;
    }
    function marry(){
        self.happy--;
    }
    fuck() && marry();
}

有些场景下用 Function.prototype.bind会更加方便：

   man.love = function(){
    function fuck(girl1, girl2, ...){
        this.happy++;
    }
    fuck.bind(this)();
    ...
}

构造函数调用模式

Classically inspired syntax obscures the language’s true prototypal natur.

JavaScript中，那些用来 new对象的函数成为构造函数。

JavaScript采用原型继承方式。这意味着一个对象可以从另一个对象直接继承属性， JavaScript是class free的~ 但JavaScript为了迎合主流的基于类声明的继承方式，同时也给出了构造函数机制：使用 new关键字，便会创建一个对象，根据 prototype属性创建原型链，并以该对象为 this执行指定的（构造）函数。

   function Man(name, age){
    this.sex = 'man';
    this.name = name;
    this.age = age;
}
Man.prototype.fuck = function(girl1, girl2, ...){}
var man = new Man();
man.fuck();

当构造函数有很多参数时，它们的顺序很难记住，所以通常使用对象进行传参：

   var man = new Man({
    name: 'bob',
    age: 18
});

给参数起名字以达到顺序无关的做法在Python中也存在，但JavaScript的对象传参还将带来另一个好处： JSON兼容。因为JavaScript常常需要数据库（例如MongoDB）或网络（ application/json）传来的JSON数据，这一点使得对象构造非常方便。

Apply 调用模式

JavaScript函数是一种特殊的对象，而对象可以有属性和方法。其中的 apply方法提供了一个更加特殊的调用方式。它接受两个参数：第一个是该函数要绑定的 this，第二个是参数数组。

   var args = [girl1, girl2];
var animal = new Animal();
Man.prototype.fuck.apply(animal, args);

Apply使得一个方法可以用不同的对象对象来调用，比如 animal也可以用 Man的方式来 fuck。

[elegant-js]: {% post_url 2016-01-18-elegant-javascript %}

javaScript跨浏览器事件处理程序

Tue, 25 Aug 2015 21:45:38 CST

最近在阅读 javascript高级程序设计，事件这一块还是有很多东西要学的，就把一些思考和总结记录下。
在事件处理，事件对象，阻止事件的传播等方法或对象存在着浏览器兼容性问题，开发过程中最好编写成一个通用的事件处理工具。

  (function(){
    var EU = {};
    //...
    //在这里添加一些通用的事件处理方法
    //...
    window.EventUtil = EU;
})();

事件处理程序

事件的绑定主要为IE8以下浏览器做兼容处理：

IE8以下只支持事件冒泡
IE事件处理使用 attachEvent detachEvent

绑定事件

  EU.addHandler = function(element,type,handler){
    //DOM2级事件处理，IE9也支持
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
        //type加'on'
        //IE9也可以这样绑定
        element.attachEvent('on' + type,handler);
    }
    //DOM0级事件处理步，事件流也是冒泡
    else{
        element['on' + type] = handler;
    }
};

取消绑定事件

和绑定事件的处理基本一致，有一个注意点：

传入的 handler必须与绑定事件时传入的相同（指向同一个函数）

  EU.removeHandler = function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler);
    }
    else if(element.attachEvent){
       element.detachEvent('on' + type,handler);
    }
    else{
        //属性置空就可以
        element['on' + type] = null;
    }
};

事件对象

注意点：

IE下 event是全局对象，通过 window.event取得

  EU.getEvent = function(event){
    return event || window.event;
}

事件的目标

注意点:

IE下通过 attachEvent绑定事件，内部 this并非触发事件的 DOM,而是window;
通过目标对象来获取 DOM节点，IE下是 srcElement属性，等同于其他浏览器的 target属性

  EU.addTarget = function(event){
    return event.target || event.srcElement;
}

阻止默认事件

  EU.preventDefault = function(event){
    if(event.preventDefault){
        event.preventDefault();
    }
    //IE下处理
    else{
        event.returnValue = false; //默认为true
    }
}

关于事件默认行为

阻止事件传播

  EU.stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    //IE下处理
    else{
        event.cancelBubble = true;//默认为false，注意区分于returnValue
    }
}

注意点：

阻止的是 DOM层级间的事件传播

比如：对于一个DOM元素，同时绑定捕获事件与冒泡事件，如果在捕获阶段使用 stopPropagation,不会阻断冒泡事件的执行；

Demo地址： http://runjs.cn/detail/hyrdjfyj

如果对子元素和父元素以冒泡形式都绑定'click'事件，在子元素的事件处理中使用 stopPropagation阻止事件传播,父元素绑定的 click事件不会执行。
Demo地址： http://runjs.cn/detail/sf0t1bso

BrowserBackdoor：一款基于JavaScript WebSocket的后门套装

Mon, 04 Jul 2016 14:00:54 CST

*免责声明：本站提供的安全工具仅供安全测试、安全研究用途，禁止非法使用

BrowserBackdoor是一款基于Electron框架的后门安全测试工具，使用JavaScript WebSocket来连接监听器。配套的BrowserBackdoorServer是一个WebSocket服务器，用于监听WebSocket连接并创建用于向远程服务器发送命令的命令行接口。

FreeBuf百科：

Electron 框架的前身是 Atom Shell，可以让你写使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。Electron 是开源的，由 GitHub 维护，有一个活跃的社区。最重要的是，Electron 应用服务构建和运行在 Mac，Windows 和 Linux。

BrowserBackdoor中的JavaScript后门支持所有WebSockets的浏览器，可通过Electron API执行下列操作：

1、打开浏览器窗口，详见 server/modules/openURL.js文件。

2、更改并读取剪贴板，详见 server/modules/readClipboard.js和 server/modules/writeClipboard.js

3、访问跨平台操作系统的通知和OS X或Windows平台上的 Tray

4、截屏，详见 server/modules/screenshot.js

5、执行任意系统命令，详见 server/modules/execCommand.js

6、在启动时运行，详见 client/main.js（）和 server/modules/manageStartup.js

用例

客户端应用程序会在后台运行，如果需要检查它的运行，可以按“CommandOrControl+Alt+\”（OS X平台上用Command，Windows/Linux平台上用Control，也可以在main.js文件中更改快捷键）来选择启用或禁用启动。

具体用例说明可在命令行中输入“help”。

安装

BrowserBackdoor要求在NodeJS平台上并使用NPM工具进行安装。BrowserBackdoorServer则要求在Ruby 2.1+环境中并且具备Gem包。

BrowserBackdoor可以在所有支持Electron的设备中运行，当前支持的平台有Windows 32/64，OS X 64，Linux 32/64。BrowserBackdoorServer在Ubuntu 14.04、Debian 8和Kali Linux平台上测试通过。

首先需要克隆Git资源库：

git clone https://github.com/IMcPwn/browser-backdoor

cd browser-backdoor

安装并运行BrowserBackdoor Electron：

cd client

npm install

# Configure index.html and main.js before the next command

npm start

创建全平台的可执行文件

cd client

npm install electron-packager -g

electron-packager . –all

安装并运行BrowserBackdoorServer：

cd server

gem install bundler

bundle install

# Configure config.yml before the next command

ruby bbsconsole.rb

命令行截图

默认配置的命令行界面：

帮助界面（文本内容会随着时间改变）：

会话打开的状态（本例中包含3个会话）：

向所有会话发送命令:

向指定的会话发送命令：

下载地址

BrowserBackdoor下载地址： github

*原文地址： kitploit，安小白编译，转载请注明来自FreeBuf黑客与极客（FreeBuf.COM）

[总结贴] 十个 JavaScript 中易犯的小错误

Mon, 25 May 2015 15:46:39 CST

序言

在今天，JavaScript已经成为了网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。

如果初次打交道，很多人会觉得js很简单。确实，对于很多有经验的工程师，或者甚至是初学者而言，实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScript的许多细节规定会让你的网页出现很多意想不到的bug，搞懂这些bug，对于成为一位有经验的JS开发者很重要。

常见错误一：对于this关键词的不正确引用

我曾经听一位喜剧演员说过：

“我从未在这里，因为我不清楚这里是哪里，是除了那里之外的地方吗？”

这句话或多或少地暗喻了在js开发中开发者对于this关键字的使用误区。This指代的是什么？它和日常英语口语中的this是一个意思吗？

随着近些年js编程不断地复杂化，功能多样化，对于一个程序结构的内部指引、引用也逐渐变多起来

下面让我们一起来看这一段代码：

  Game.prototype.restart = function () {   this.clearLocalStorage(); 

    this.timer = setTimeout(function(){     this.clearBoard();        }, 0);

 };

运行上面的代码将会出现如下错误：

  Uncaught TypeError: undefined is not a function

这是为什么？this的调用和它所在的环境密切相关。之所以会出现上面的错误，是因为当你在调用 setTimeout()函数的时候, 你实际调用的是window.setTimeout(). 因此，在 setTimeout() 定义的函数其实是在window背景下定义的，而window中并没有 clearBoard() 这个函数方法。

下面提供两种解决方案。第一种比较简单直接的方法便是，把this存储到一个变量当中，这样他就可以在不同的环境背景中被继承下来：

  Game.prototype.restart = function () {   this.clearLocalStorage();  

 var self = this;

this.timer = setTimeout(function(){     self.clearBoard();}, 0); };

第二种方法便是用bind()的方法，不过这个相比上一种要复杂一些，对于不熟悉bind()的同学可以在微软官方查看它的使用方法： https://msdn.microsoft.com/zh-cn/library/ff841995

  Game.prototype.restart = function () {   this.clearLocalStorage(); 

this.timer = setTimeout(this.reset.bind(this), 0); };      

Game.prototype.reset = function(){     this.clearBoard();};

上面的例子中，两个this均指代的是Game.prototype。

常见错误二：传统编程语言的生命周期误区

另一种易犯的错误，便是带着其他编程语言的思维，认为在JS中，也存在生命周期这么一说。请看下面的代码：

  for (var i = 0; i < 10; i++) {   /* ... */ } console.log(i);

如果你认为在运行console.log() 时肯定会报出 undefined 错误，那么你就大错特错了。我会告诉你其实它会返回 10吗。

当然，在许多其他语言当中，遇到这样的代码，肯定会报错。因为i明显已经超越了它的生命周期。在for中定义的变量在循环结束后，它的生命也就结束了。但是在js中，i的生命还会继续。这种现象叫做 variable hoisting。

而如果我们想要实现和其他语言一样的在特定逻辑模块中具有生命周期的变量，可以用let关键字。

常见错误三：内存泄露

内存泄露在js变成中几乎是一个无法避免的问题。如果不是特别细心的话，在最后的检查过程中，肯定会出现各种内存泄露问题。下面我们就来举例说明一下：

  var theThing = null; 

var replaceThing = function () { 



    var priorThing = theThing; 

    var unused = function () { 

              if (priorThing) {       console.log("hi");     }   

   }; 

   theThing = {     longStr: new Array(1000000).join('*'),  // 

              someMethod: function () {       console.log(someMessage);     }   
   }; 
};   
setInterval(replaceThing, 1000);

如果运行上面的代码，你会发现你已经造成了大量的内存泄露，每秒泄露1M的内存，显然光靠GC（垃圾回收器）是无法帮助你的了。由上面的代码来看，似乎是longstr在每次replaceThing调用的时候都没有得到回收。这是为什么呢？

每一个theThing结构都含有一个longstr结构列表。每一秒当我们调用 replaceThing, 它就会把当前的指向传递给 priorThing. 但是到这里我们也会看到并没有什么问题，因为 priorThing 每回也是先解开上次函数的指向才会接受新的赋值。并且所有的这一切都是发生在 replaceThing 函数体当中，按常理来说当函数体结束之后，函数中的本地变量也将会被GC回收，也就不会出现内存泄露的问题了，但是为什么会出现上面的错误呢？

这是因为longstr的定义是在一个闭包中进行的，而它又被其他的闭包所引用，js规定，在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。关于在JS中的内存泄露问题可以查看 http://javascript.info/tutorial/memory-leaks#memory-management-in-java...

常见错误四:比较运算符

JavaScript中一个比较便捷的地方，便是它可以给每一个在比较运算的结果变量强行转化成布尔类型。但是从另一方面来考虑，有时候它也会为我们带来很多不便，下面的这些例子便是一些一直困扰很多程序员的代码实例：

  console.log(false == '0'); 

console.log(null == undefined); 

console.log(" \t\r\n" == 0); 

console.log('' == 0);  // And these do too! 

if ({}) // ... 

if ([]) // ...

最后两行的代码虽然条件判断为空（经常会被人误认为转化为false），但是其实不管是{ }还是[ ]都是一个实体类，而任何的类其实都会转化为true。就像这些例子所展示的那样，其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 === 和 !== 来替代== 和 !=，以此来避免发生强制类型转化。. ===和!== 的用法和之前的== 和 != 一样，只不过他们不会发生类型强制转换。另外需要注意的一点是，当任何值与 NaN 比较的时候，甚至包括他自己，结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:

  console.log(NaN == NaN);    // false 

console.log(NaN === NaN);   // false 

console.log(isNaN(NaN));    // true

常见错误五：低效的DOM操作

js中的DOM基本操作非常简单，但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments ：

  var div = document.getElementsByTagName("my_div");  

var fragment = document.createDocumentFragment(); 

 for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true));

直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来，再把它们全部添加上去就会高效很多。

常见错误六：在for循环中的不正确函数调用

请大家看以下代码：

  var elements = document.getElementsByTagName('input');

var n = elements.length; 

for (var i = 0; i < n; i++) {     

elements[i].onclick = function() {         

console.log("This is element #" + i);     }; }

运行以上代码，如果页面上有10个按钮的话，点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。这是因为当点击事件被触发的时候，for循环早已执行完毕，i的值也已经从0变成了。

我们可以通过下面这段代码来实现真正正确的效果：

  var elements = document.getElementsByTagName('input'); 

var n = elements.length; 

var makeHandler = function(num) {  // outer function

      return function() { 

console.log("This is element #" + num);      }; }; 

for (var i = 0; i < n; i++) 

{     elements[i].onclick = makeHandler(i+1); }

在这个版本的代码中， makeHandler 在每回循环的时候都会被立即执行，把i＋1传递给变量num。外面的函数返回里面的函数，而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。

常见错误七：原型继承问题

很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：

  BaseObject = function(name) {     

if(typeof name !== "undefined") 

{         this.name = name;     } 

else 

{         this.name = 'default'     } };

这段代码看起来很简单。如果你有name值，则使用它。如果没有，则使用 ‘default’:

  var firstObj = new BaseObject(); 

var secondObj = new BaseObject('unique');  

console.log(firstObj.name);  // -> 结果是'default' 

console.log(secondObj.name); // -> 结果是 'unique'

但是如果我们执行delete语句呢:

  delete secondObj.name;

我们会得到:

  console.log(secondObj.name); // -> 结果是 'undefined'

但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单，如果我们能够使用原型继承的话:

  BaseObject = function (name) 

{     if(typeof name !== "undefined") 

{         this.name = name;     } };  

BaseObject.prototype.name = 'default';

在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时，如果构造函数被调用时没有参数，则会自动设置为 default。相同地，如果name 属性被从BaseObject移出，系统将会自动寻找原型链，并且获得 'default'值：

   var thirdObj = new BaseObject('unique'); 

 console.log(thirdObj.name);  

 delete thirdObj.name;

 console.log(thirdObj.name);  // -> 结果是 'default'

常见错误八：为实例方法创建错误的指引

我们来看下面一段代码:

  var MyObject = function() {} 

 MyObject.prototype.whoAmI = function() {     

console.log(this === window ? "window" : "MyObj"); }; 

 var obj = new MyObject();

现在为了方便起见，我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():

  var whoAmI = obj.whoAmI;

接下来为了确保一切都如我们所预测的进行，我们可以将 whoAmI 打印出来:

  console.log(whoAmI);

结果是：

  function () {     console.log(this === window ? "window" : "MyObj"); }

没有错误！

但是现在我们来查看一下两种引用的方法：

  obj.whoAmI();  // 输出 "MyObj" (as expected) 

whoAmI();      // 输出 "window" (uh-oh!)

哪里出错了呢？

原理其实和上面的第二个常见错误一样，当我们执行 var whoAmI = obj.whoAmI;的时候，新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj！

正确的编码方式应该是：

  var MyObject = function() {}  

MyObject.prototype.whoAmI = function() {     

      console.log(this === window ? "window" : "MyObj"); }; 

var obj = new MyObject(); 

obj.w = obj.whoAmI;   // still in the obj namespace  obj.whoAmI();  // 输出 "MyObj" (as expected) 

obj.w();       // 输出 "MyObj" (as expected)

常见错误九：用字符串作为setTimeout 或者 setInterval的第一个参数

首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。

  setInterval("logTime()", 1000); 

setTimeout("logMessage('" + msgValue + "')", 1000);

另一种方法是直接将函数作为参数传递进去：

  setInterval(logTime, 1000);   

setTimeout(function() { 

logMessage(msgValue); }, 1000);

常见错误十：忽略 “strict mode”的作用

“strict mode” 是一种更加严格的代码检查机制，并且会让你的代码更加安全。当然，不选择这个模式并不意味着是一个错误，但是使用这个模式可以确保你的代码更加准确无误。

下面我们总结几条“strict mode”的优势：

让Debug更加容易：在正常模式下很多错误都会被忽视掉，“strict mode”模式会让Debug极致更加严谨。
防止默认的全局变量：在正常模式下，给一个为经过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下，我们取消了这个默认机制。
取消this的默认转换：在正常模式下，给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下，我们取消了这个默认机制。
防止重复的变量声明和参数声明：在strict模式下进行重复的变量声明会被抱错，如 (e.g., var object = {foo: "bar", foo: "baz"};) 同时，在函数声明中重复使用同一个参数名称也会报错，如 (e.g., function foo(val1, val2, val1){}),
让eval()函数更加安全。
当遇到无效的delete指令的事后报错：delete指令不能对类中未有的属性执行，在正常情况下这种情况只是默默地忽视掉，而在strict模式是会报错的。

结语

正如和其他的技术语言一样，你对JavaScript了解的的越深，知道它是如何运作，为什么这样运作，你才会熟练地掌握并且运用这门语言。相反地，如果你缺少对JS模式的认知的话，你就会碰上很多的问题。了解JS的一些细节上的语法或者功能将会有助于你提高编程的效率，减少变成中遇到的问题。

原文地址： http://www.toptal.com/javascript/10-most-common-javascript-mistakes
译文地址： http://1ke.co/course/136?utm_source=segment&utm_medium=1&utm_c...

统治Web的JavaScript准备要接管桌面了

Sat, 14 May 2016 22:09:30 CST

编者按：曾几何时，通信网络曾经活跃过许多协议，那些协议在不同的场景下都有各自的优势。但是后来 TCP/IP 随着互联网的崛起而异军突起，最终形成一统天下的格局。而原本被视为不入流的 Web 前端玩具 JavaScript 现在似乎也在复制着类似的路径，先是渗透到 web 后端开发，然后甚至开始入侵到桌面了。最流行语言 JavaScript 会变成编程界的世界语吗？

创建于 1995年的 JavaScript 原本是想给苍白的网页在<blink>标记以外再增加一点生气的。但现在它的用处已经远远超出了当时的意图。像 Google、Facebook 这样的公司都用 JavaScript 来开发复杂的、类桌面的 web 应用；自从 2009年推出了 Node.js 之后，它还成为了开发服务器端最受欢迎的语言之一（连续很多年雄踞最受欢迎编程语言）。时至今日，甚至连 web 也容纳不下 JavaScript 的雄才大略了：现在，它正在开始向桌面应用进军。

Electron 是 GitHub 开发的一个软件开发平台，它可以让开发者用 JavaScript 加上 HTML、CSS 等 web 技术来创建跨平台（可运行于 Windows、Mac OS X 以及 Linux）运行的桌面应用。近日该公司刚刚发布了第一款完整版的 Eletron。但是业界的一些大拿早已用上这一工具来让 JavaScript 冲出浏览器了。

微软去年发布的一款代码编辑器 Visual Studio Code 就是用 Eletron 开发的。协作聊天工具的独角兽 Slack 的桌面客户端也是用 Eletron 开发的。初创企业 Nylas（以前的 Inbox）的整个邮件客户端都是用 Eletron 开发的。甚至 Brave 这家由 JavaScript 创造者 Brendan Eich 创建的公司也用 Electron 开发了一整个 web 浏览器。

为什么在开发桌面应用有无数选择的情况下那么多公司会选择 JavaScript 呢？不妨想想 JavaScript 在服务器端的崛起。Node.js 出来以前开发者也已经有了很多开发服务器端应用的利器了。但是由于开发者可以使用同一门语言来开发前端（浏览器）和后端（服务器），使得 JavaScript 变得非常流行。事实表明，在 web 上采用通用语是很有用的。而 JavaScript 的无所不在使得将它移植到桌面成为了自然之举。

面向每一个人开放

许多使用 Electron 的公司都在开发开源软件，也就是说，谁都可以查看和修改里面的代码。而理解你开放的代码的人越多，可以为其贡献 bug 修补和新功能的人就越多。通过利用 JavaScript，这些公司向了解 JavaScript 但不熟悉 C++ 等传统桌面编程语言的 web 开发者打开了一道大门。

比方说初创企业 Jibo 就用 Electron 来开发自己的机器人个人助理，因为这支团队希望第三方替自己的机器人写软件时可用更容易些。“我们希望把门槛降到尽可能的低，” Jobo 开发者 Jonathan Ross 说：“所以我们马上想到应该向游戏开发者和 web 开发者推销。”

这也是起初做 Electron 的一大原因。Electron 原先是做来给开发 Atom 当平台用的，后者是 GitHub 创建的一款文本编辑器。GitHub 联合创始人 Chris Wanstrath 说，他之所以用 JavaScript 来做文本编辑器是希望 web 开发者合适的时候能够对其进行定制。“我自己可以 hack 我的编辑器是一回事，” Wanstrath 说：“但是能够使用别人写的插件却要强大得多。”

当然，跑相当于 web 浏览器的应用也有不好的地方。“跑 Electron 应用的负载相当的大，” Nylas 的首席前端开发者 Ben Gotow 说。但是权衡之下还是值得的，因为 Electron 能做的不仅仅是提供使用一门流行语言的能力。用 JavaScript 创建桌面应用使得开发者可以选择海量的免费代码库和框架，免去了大量乏味枯燥的编码工作。比方说登录系统就不用再写了，网上有大量开源的身份验证库可供选择。

“我们仅用 1年的时间就搞定了邮件客户端，那是相当惊人的了，” Gotow 说。

极客产物

用 web 技术开发桌面应用的想法并不新鲜。Adobe 的 AIR 系统就可以让开发者利用其 Flash 平台开发桌面应用，另一家小公司 Appcelerator（现在专注于移动 app 的开发）也曾经提供过利用 HTML 和 JavaScript 开发桌面应用的工具。最近又有一支开发者团队做出了 NW.js，也就是之前 Node Webkit。

但是到了 2014年的时候，GitHub 团队发现所有的可用选择都没了，于是他们做了极客都会做的事情：自己写一个然后发布给全世界。“我们认为做出的好应用应该给大家一起用，” GitHub 产品 VP Kakul Srivastava 这样说。

GitHub Electron 团队的 JessicaLord 则说 Electron 要比之前的那些工具都要高效。Electron 捆绑了 Chromium（Google 浏览器 Chrome 的开源版），但是对其进行了瘦身。这使得该团队集成 Google 的新功能变得更加容易，因为这样每次 Chromium 发布新版时他们就不需要对每个部分都要进行测试来看看是否会导致 Electron 功能出问题了。

GitHub 的努力似乎收到了回报。从 2年前推出项目至今，Electron 贡献者的数量已经超过了 300。其下载量也已经突破百万大关。但是竞争也日趋激烈。NW.js 还在不断改进，而 Facebook 也发布了自己的 JavaScript 框架 React Native，开发者可以使用后者来开发 Windows、Xbox 以及 Android 等各种平台的应用。

无论开发者最终决定使用哪种框架或者平台，显然 JavaScript 都已经在桌面找到了安身之所。对于用户来说，在线和离线之间的界限早就已经模糊了。现在对于代码来说也是一样的。

如何抵御基于JavaScript的DDoS攻击

Fri, 01 May 2015 13:58:53 CST

DDoS攻击技术正在快速演化，最近出现的基于JavaScript的DDoS攻击具有一个与众不同的特点：任何有浏览器的设备都可能参与攻击，其潜在攻击规模接近无限。现代网站的绝大多数互动采用的都是JavaScript。JavaScript脚本可直接植入HTML中，或者是从远程服务器载入。JavaScript攻击主要发生在共享JavaScript脚本在第三方服务器上被替换，或者是在传输过程中被中间人替换。对于屏蔽服务器上被替换的脚本，目前HTTP还没有相关机制，但W3C已经提出了名叫子资源完整性的新功能，使用哈希值验证脚本，如果哈希值不匹配浏览器可以阻止其运行。支持子资源完整性的浏览器暂时还只有Chrome和Firefox。对于传输过程中脚本被中间人替换成恶意代码，全面启用HTTPS是唯一有用的方法。

javaScript高级技巧

Sun, 16 Aug 2015 10:05:40 CST

一、变量作用域和闭包
注意： uncaught refereceError：is not defined 和 undefined 不是一样

js是函数级作用域,在内部的变量，函数内部都能访问，函数外部不能访问函数内部的变量，函数内部能访问外部的变量

注意：在函数里声明变量，都会提到函数的最前面

如何可以在函数外部拿到函数内部的变量，就需要使用闭包(注意使用，闭包会造成内存泄露)

代码例子

function test(){

   var k = 1000;
   return function(){
       return k ;
   }
}

var t = test()();//t的值是1000;

二、this的使用（谁调用this就指向谁）

代码例子
闭包的使用
this.m=1000;
var obj = {
   m:100,
   test : function(){
          alert(this.m);//值是100
          return function(){
              alert(this.m);//值是1000
          }
   }
}
执行 (obj.test())();

面向切面的使用
this.a=1000;
function test(){
this.a = 1;
}
test.prototype.geta = function(){ //将方法挂在原型上
return this.a;
}
执行
var p = new test();
console.log(p.geta());//值是1

三、按值传递

1、如果将Stirng、number、boolean作为变量传递给函数，函数内部的修改不会影响外面的变量值。
2、如果将object、或者array传递给函数，函数内部的修改会影响外面的变量值。

四、通过原型链继承（面向对象）

function People(){

}
People.prototype.say = function(){
alert("hello world")
}

function Student(){

}

var super = Student.prototype.say;

Student.prototype.say = function(){
    super.call(this)//子类调用父类的方法
    alert("stu-hello");
}

Student.prototype = new People();//通过原型链来继承
var s = new Student();
s.say();

五、面向对象封装
(function(){

var n = "ime" (只能在内部使用变量)
function People(){

}
People.prototype.say = function(){
   alert("hello world")
}

window.People = People ;(对外提供一个接口)
})()

六、DOM事件处理

1、DOM0级事件处理，如果多次绑定一个事件，那么事件会被覆盖。
2、DOM2级事件处理，一个事件多次绑定，并不会覆盖，是依次执行。
3、阻止事件冒泡：event.stopPropagation();
4、阻止默认行为：如超链接标签的默认行为是连接到其他界面,event.preventDefault()可以阻止。

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

JavaScript性能优化小知识总结

Wed, 04 Mar 2015 09:56:23 CST

JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下JavaScript性能优化方面的知识点，绝对是干货。

前言

一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。

鉴于想让自己有一个提升，进不了一个更加广阔的天地，总得找一个属于自己的居所好好生存，所以平时会有意无意的去积累一些使用jQuerry的常用知识，特别是对于性能要求这一块，总是会想是不是有更好的方式来实现。

下面是我总结的一些小技巧，仅供参考。(我先会说一个总标题，然后用一小段话来说明这个意思再最后用一个demo来简单言明)

避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

        function search() {
            //当我要使用当前页面地址和主机域名
            alert(window.location.href + window.location.host);
        }
        //最好的方式是如下这样  先用一个简单变量保存起来
        function search() {
            var location = window.location;
            alert(location.href + location.host);
        }

定时器

如果针对的是不断运行的代码， 不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器

        var timeoutTimes = 0;
        function timeout() {
            timeoutTimes++;
            if (timeoutTimes < 10) {
                setTimeout(timeout, 10);
            }
        }
        timeout();
        //可以替换为：
        var intervalTimes = 0;
        function interval() {
            intervalTimes++;
            if (intervalTimes >= 10) {
                clearInterval(interv);
            }
        }
        var interv = setInterval(interval, 10);

字符串连接

如果要连接多个字符串，应该少使用+=，如

s+=a;

s+=b;

s+=c;

应该写成s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后 使用join方法连接起来

        var buf = [];
        for (var i = 0; i < 100; i++) {
            buf.push(i.toString());
        }
        var all = buf.join("");

避免with语句

和函数类似，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在 能不使用with语句的时候尽量不要使用with语句。

 with (a.b.c.d) {
            property1 = 1;
            property2 = 2;
        }
        //可以替换为：
        var obj = a.b.c.d;
        obj.property1 = 1;
        obj.property2 = 2;

数字转换成字符串

般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

(“” +) > String() > .toString() > new String()

浮点数转换成整型

很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()

各种类型转换

var myVar = "3.14159",
        str = "" + myVar, //  to string  
        i_int = ~ ~myVar,  //  to integer  
        f_float = 1 * myVar,  //  to float  
        b_bool = !!myVar,  /*  to boolean - any string with length 
                                and any number except 0 are true */
        array = [myVar];  //  to array

如果定义了toString()方法来进行类型转换的话，推荐 显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

多个类型声明

在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间，就如上面代码一样，上面代码格式也挺规范，让人一看就明了。

插入迭代器

如var name=values[i]; i++;前面两条语句可以写成var name=values[i++]

使用直接量

var aTest = new Array(); //替换为
        var aTest = [];
        var aTest = new Object; //替换为
        var aTest = {};
        var reg = new RegExp(); //替换为
        var reg = /../;
        //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
        var oFruit = new O;
        oFruit.color = "red";
        oFruit.name = "apple";
        //前面的代码可用对象字面量来改写成这样：
        var oFruit = { color: "red", name: "apple" };

使用DocumentFragment优化多次append

一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。

for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            document.body.appendChild(el);
        }
        //可以替换为：
        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);

使用一次innerHTML赋值代替构建dom元素

对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);
        //可以替换为：
        var html = [];
        for (var i = 0; i < 1000; i++) {
            html.push('<p>' + i + '</p>');
        }
        document.body.innerHTML = html.join('');

通过模板元素clone，替代createElement

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写HTML来创建节点，其实这样做，1无法保证代码的有效性2字符串操作效率低，所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点

        var frag = document.createDocumentFragment();
        for (var i = 0; i < 1000; i++) {
            var el = document.createElement('p');
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);
        //替换为：
        var frag = document.createDocumentFragment();
        var pEl = document.getElementsByTagName('p')[0];
        for (var i = 0; i < 1000; i++) {
            var el = pEl.cloneNode(false);
            el.innerHTML = i;
            frag.appendChild(el);
        }
        document.body.appendChild(frag);

使用firstChild和nextSibling代替childNodes遍历dom元素

        var nodes = element.childNodes;
        for (var i = 0, l = nodes.length; i < l; i++) {
            var node = nodes[i];
            //……
        }
        //可以替换为：
        var node = element.firstChild;
        while (node) {
            //……
            node = node.nextSibling;

删除DOM节点

删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存。另外，在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点

使用事件代理

任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理，使用这个知识就可以将事件处理程序附加到更高的地方负责多个目标的事件处理，同样， 对于内容动态增加并且子节点都需要相同的事件处理函数的情况，可以把事件注册提到父节点上，这样就不需要为每个子节点注册事件监听了。另外，现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听

重复使用的调用结果，事先保存到局部变量

        //避免多次取值的调用开销
        var h1 = element1.clientHeight + num1;
        var h2 = element1.clientHeight + num2;
        //可以替换为：
        var eleHeight = element1.clientHeight;
        var h1 = eleHeight + num1;
        var h2 = eleHeight + num2;

注意NodeList

最小化访问NodeList的次数可以极大的改进脚本的性能

        var images = document.getElementsByTagName('img');
        for (var i = 0, len = images.length; i < len; i++) {

        }

编写JavaScript的时候一定要知道何时返回NodeList对象，这样可以最小化对它们的访问

进行了对getElementsByTagName()的调用
获取了元素的childNodes属性
获取了元素的attributes属性
访问了特殊的集合，如document.forms、document.images等等

要了解了当使用NodeList对象时，合理使用会极大的提升代码执行速度

优化循环

可以使用下面几种方式来优化循环

减值迭代

大多数循环使用一个从0开始、增加到某个特定值的迭代器，在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效

简化终止条件

由于每次循环过程都会计算终止条件，所以必须保证它尽可能快，也就是说避免属性查找或者其它的操作，最好是将循环控制量保存到局部变量中，也就是说对数组或列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。

        var list = document.getElementsByTagName('p');
        for (var i = 0; i < list.length; i++) {
            //……
        }

        //替换为：
        var list = document.getElementsByTagName('p');
        for (var i = 0, l = list.length; i < l; i++) {
            //……
        }

简化循环体

循环体是执行最多的，所以要确保其被最大限度的优化

使用后测试循环

在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以，就应该尽量少用。for(;;)和while循环，while循环的效率要优于for(;;)，可能是因为for(;;)结构的问题，需要经常跳转回去。

        var arr = [1, 2, 3, 4, 5, 6, 7];
        var sum = 0;
        for (var i = 0, l = arr.length; i < l; i++) {
            sum += arr[i];
        }

        //可以考虑替换为：

        var arr = [1, 2, 3, 4, 5, 6, 7];
        var sum = 0, l = arr.length;
        while (l--) {
            sum += arr[l];
        }

最常用的for循环和while循环都是前测试循环，而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。

展开循环

当循环次数是确定的，消除循环并使用多次函数调用往往会更快。

避免双重解释

如果要提高代码性能，尽可能避免出现需要按照JavaScript解释的字符串，也就是

尽量少使用 eval 函数

使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间，而且使用Eval带来的安全性问题也是不容忽视的。

不要使用 Function 构造器

不要给setTimeout或者setInterval传递字符串参数

        var num = 0;
        setTimeout('num++', 10);
        //可以替换为：
        var num = 0;
        function addNum() {
            num++;
        }
        setTimeout(addNum, 10);

缩短否定检测

       if (oTest != '#ff0000') {
            //do something
        }
        if (oTest != null) {
            //do something
        }
        if (oTest != false) {
            //do something
        }
        //虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
        if (!oTest) {
            //do something
        }

条件分支

将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数
在同一条件子的多（>2）条件分支时，使用switch优于if：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。
使用三目运算符替代条件分支

        if (a > b) {
            num = a;
        } else {
            num = b;
        }
        //可以替换为：
        num = a > b ? a : b;

使用常量

重复值:任何在多处用到的值都应该抽取为一个常量
用户界面字符串:任何用于显示给用户的字符串，都应该抽取出来以方便国际化
URLs:在Web应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的URL
任意可能会更改的值:每当你用到字面量值的时候，你都要问一下自己这个值在未来是不是会变化，如果答案是“是”，那么这个值就应该被提取出来作为一个常量。

避免与null进行比较

由于JavaScript是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与null进行比较的代码，尝试使用以下技术替换

如果值应为一个引用类型，使用instanceof操作符检查其构造函数
如果值应为一个基本类型，作用typeof检查其类型
如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上

避免全局量

全局变量应该全部字母大写，各单词之间用_下划线来连接。尽可能避免全局变量和函数, 尽量减少全局变量的使用，因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话，后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉（overwrite）你的。

//糟糕的全局变量和全局函数
var current = null;
function init(){
//...
}
function change() {
    //...
}
function verify() {
    //...
}
//解决办法有很多，Christian Heilmann建议的方法是：
//如果变量和函数不需要在“外面”引用，那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
var current = null;
function init() {
    //...
}
function change() {
    //...
}
function verify() {
    //...
}
})();
//如果变量和函数需要在“外面”引用，需要把你的变量和函数放在一个“命名空间”中
//我们这里用一个function做命名空间而不是一个var，因为在前者中声明function更简单，而且能保护隐私数据
myNameSpace = function() {
    var current = null;

    function init() {
        //...
    }

    function change() {
        //...
    }

    function verify() {
        //...
    }

//所有需要在命名空间外调用的函数和属性都要写在return里面
    return {
        init: init,
        //甚至你可以为函数和属性命名一个别名
        set: change
    };
};

尊重对象的所有权

因为JavaScript可以在任何时候修改任意对象，这样就可以以不可预计的方式覆写默认的行为，所以如果你不负责维护某个对象，它的对象或者它的方法，那么你就不要对它进行修改，具体一点就是说：

不要为实例或原型添加属性
不要为实例或者原型添加方法
不要重定义已经存在的方法
不要重复定义其它团队成员已经实现的方法，永远不要修改不是由你所有的对象，你可以通过以下方式为对象创建新的功能:
创建包含所需功能的新对象，并用它与相关对象进行交互
创建自定义类型，继承需要进行修改的类型，然后可以为自定义类型添加额外功能

循环引用

如果循环引用中包含DOM对象或者ActiveX对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。

简单的循环引用：

        var el = document.getElementById('MyElement');
        var func = function () {
            //…
        }
        el.func = func;
        func.element = el;

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();

init在执行的时候，当前上下文我们叫做context。这个时候，context引用了el，el引用了function，function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用：

1) 置空dom对象

       function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替换为：
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            el = null;
        }
        init();

将el置空，context中不包含对dom对象的引用，从而打断循环应用。

如果我们需要将dom对象返回，可以用如下方法：

        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            return el;
        }
        init();
        //可以替换为：
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
            try {
                return el;
            } finally {
                el = null;
            }
        }
        init();

2) 构造新的context

        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替换为：
        function elClickHandler() {
            //……
        }
        function init() {
            var el = document.getElementById('MyElement');
            el.onclick = elClickHandler;
        }
        init();

把function抽到新的context中，这样，function的context就不包含对el的引用，从而打断循环引用。

通过javascript创建的dom对象，必须append到页面中

IE下，脚本创建的dom对象，如果没有append到页面中，刷新页面，这部分内存是不会回收的！

        function create() {
            var gc = document.getElementById('GC');
            for (var i = 0; i < 5000; i++) {
                var el = document.createElement('div');
                el.innerHTML = "test";
                //下面这句可以注释掉，看看浏览器在任务管理器中，点击按钮然后刷新后的内存变化
                gc.appendChild(el);
            }
        }

释放dom元素占用的内存

将dom元素的innerHTML设置为空字符串，可以释放其子元素占用的内存。

在rich应用中，用户也许会在一个页面上停留很长时间，可以使用该方法释放积累得越来越多的dom元素使用的内存。

释放javascript对象

在rich应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。

对象：obj = null

对象属性：delete obj.myproperty

数组item：使用数组的splice方法释放数组中不用的item

避免string的隐式装箱

对string的方法调用，比如’xxx’.length，浏览器会进行一个隐式的装箱操作，将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时，采用如下写法：

var myString = new String(‘Hello World’);

松散耦合

1、解耦HTML/JavaScript

JavaScript和HTML的紧密耦合：直接写在HTML中的JavaScript、使用包含内联代码的<script>元素、使用HTML属性来分配事件处理程序等

HTML和JavaScript的紧密耦合：JavaScript中包含HTML，然后使用innerHTML来插入一段html文本到页面

其实应该是保持层次的分离，这样可以很容易的确定错误的来源，所以我们应确保HTML呈现应该尽可能与JavaScript保持分离

2、解耦CSS/JavaScript

显示问题的唯一来源应该是CSS，行为问题的唯一来源应该是JavaScript，层次之间保持松散耦合才可以让你的应用程序更加易于维护，所以像以下的代码element.style.color=”red”尽量改为element.className=”edit”，而且不要在css中通过表达式嵌入JavaScript

3、解耦应用程序/事件处理程序

将应用逻辑和事件处理程序相分离：一个事件处理程序应该从事件对象中提取，并将这些信息传送给处理应用逻辑的某个方法中。这样做的好处首先可以让你更容易更改触发特定过程的事件，其次可以在不附加事件的情况下测试代码，使其更易创建单元测试

性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快

通过将case语句按照最可能到最不可能的顺序进行组织

3、位运算较快

当进行数字运算时，位运算操作要比任何布尔运算或者算数运算快

4、巧用 || 和 && 布尔运算符

        function eventHandler(e) {
            if (!e) e = window.event;
        }
        //可以替换为：
        function eventHandler(e) {
            e = e || window.event;
        }

        if (myobj) {
            doSomething(myobj);
        }
        //可以替换为：
        myobj && doSomething(myobj);

避免错误应注意的地方

1、每条语句末尾须加分号

在if语句中，即使条件表达式只有一条语句也要用{}把它括起来，以免后续如果添加了语句之后造成逻辑错误

2、使用+号时需谨慎

JavaScript 和其他编程语言不同的是，在 JavaScript 中，’+'除了表示数字值相加，字符串相连接以外，还可以作一元运算符用，把字符串转换为数字。因而如果使用不当，则可能与自增符’++’混淆而引起计算错误

        var valueA = 20;
        var valueB = "10";
        alert(valueA + valueB);     //ouput: 2010 
        alert(valueA + (+valueB));  //output: 30 
        alert(valueA + +valueB);    //output:30 
        alert(valueA ++ valueB);     //Compile error

3、使用return语句需要注意

一条有返回值的return语句不要用()括号来括住返回值，如果返回表达式，则表达式应与return关键字在同一行，以避免压缩时，压缩工具自动加分号而造成返回与开发人员不一致的结果

        function F1() {
            var valueA = 1;
            var valueB = 2;
            return valueA + valueB;
        }
        function F2() {
            var valueA = 1;
            var valueB = 2;
            return
            valueA + valueB;
        }
        alert(F1());  //output: 3 
        alert(F2());  //ouput: undefined

==和===的区别

避免在if和while语句的条件部分进行赋值，如if (a = b)，应该写成if (a == b)，但是在比较是否相等的情况下，最好使用全等运行符，也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换

        var valueA = "1";
        var valueB = 1;
        if (valueA == valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Equal"
        if (valueA === valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Not equal"

不要使用生偏语法

不要使用生偏语法，写让人迷惑的代码，虽然计算机能够正确识别并运行，但是晦涩难懂的代码不方便以后维护

函数返回统一类型

虽然JavaScript是弱类型的，对于函数来说，前面返回整数型数据，后面返回布尔值在编译和运行都可以正常通过，但为了规范和以后维护时容易理解，应保证函数应返回统一的数据类型

总是检查数据类型

要检查你的方法输入的所有数据，一方面是为了安全性，另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢，而是因为他们很忙，并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

何时用单引号，何时用双引号

虽然在JavaScript当中，双引号和单引号都可以表示字符串, 为了避免混乱，我们建议在HTML中使用双引号，在JavaScript中使用单引号，但为了兼容各个浏览器，也为了解析时不会出错，定义JSON对象时，最好使用双引号

部署

用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问
部署之前推荐使用压缩工具将JS文件压缩
文件编码统一用UTF-8
JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以 <script src=”filename.js”> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的，则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小，无益于代码的压缩和缓存的使用。另外，<script src=”filename.js”> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。

永远不要忽略代码优化工作，重构是一项从项目开始到结束需要持续的工作，只有不断的优化代码才能让代码的执行效率越来越好

高性能JavaScript模板引擎原理解析

Sun, 01 Mar 2015 22:00:04 CST

随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。

本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理，包括新一代 javascript 模板引擎 artTemplate 的特性实现原理，欢迎共同探讨。

artTemplate 介绍

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。

artTemplate 这一切都在 1.7kb(gzip) 中实现！

javascript 模板引擎基本原理

虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。

关于动态执行 javascript 字符串，本文以一段模板代码举例：

这是一段非常朴素的模板写法，其中，”” 为 closeTag (逻辑语句闭合标签)，若 openTag 后面紧跟 “=” 则会输出变量的内容。

HTML语句与变量输出语句被直接输出，解析后的字符串类似：

语法分析完毕一般还会返回渲染方法：

渲染测试：

在上面 render 方法中，模板变量赋值采用了 with 语句，字符串拼接采用数组的 push 方法以提升在 IE6、7 下的性能，jQuery 作者 john 开发的微型模板引擎 tmpl 是这种方式的典型代表，参见： http://ejohn.org/blog/javascript-micro-templating/

由原理实现可见，传统 javascript 模板引擎中留下两个待解决的问题：

1、性能：模板引擎渲染的时候依赖 Function 构造器实现，Function 与 eval、setTimeout、setInterval 一样，提供了使用文本访问 javascript 解析引擎的方法，但这样执行 javascript 的性能非常低下。

2、调试：由于是动态执行字符串，若遇到错误调试器无法捕获错误源，导致模板 BUG 调试变得异常痛苦。在没有进行容错的引擎中，局部模板若因为数据异常甚至可以导致整个应用崩溃，随着模板的数目增加，维护成本将剧增。

artTemplate 高效的秘密

1、预编译

在上述模板引擎实现原理中，因为要对模板变量进行赋值，所以每次渲染都需要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值过程却是在渲染之前完成的，这种方式称之为“预编译”。artTemplate 模板编译器会根据一些简单的规则提取好所有模板变量，声明在渲染函数头部，这个函数类似：

这个自动生成的函数就如同一个手工编写的 javascript 函数一样，同等的执行次数下无论 CPU 还是内存占用都有显著减少，性能近乎极限。

值得一提的是：artTemplate 很多特性都基于预编译实现，如沙箱规范与自定义语法等。

2、更快的字符串相加方式

很多人误以为数组 push 方法拼接字符串会比 += 快，要知道这仅仅是 IE6-8 的浏览器下。实测表明现代浏览器使用 += 会比数组 push 方法快，而在 v8 引擎中，使用 += 方式比数组拼接快 4.7 倍。所以 artTemplate 根据 javascript 引擎特性采用了两种不同的字符串拼接方式。

artTemplate 调试模式原理

前端模板引擎不像后端模板引擎，它是动态解析，所以调试器无法定位到错误行号，而 artTemplate 通过巧妙的方式让模板调试器可以精确定位到引发渲染错误的模板语句，例如：

artTemplate 支持两种类型的错误捕获，一是渲染错误(Render Error)与编译错误(Syntax Error)。

1、渲染错误

渲染错误一般是因为模板数据错误或者变量错误产生的，渲染的时候只有遇到错误才会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，编译后的函数类似：

当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。

2、编译错误

编译错误一般是模板语法错误，如不合格的套嵌、未知语法等。由于 artTemplate 没有进行完整的词法分析，故无法确定错误源所在的位置，只能对错误信息与源码进行原文输出，供开发者判断。

开源节流

artTemplate 基于开源协议发布，无论是商业公司还是个人都可以免费在项目中使用，欢迎共同完善。

下载地址：

https://github.com/aui/artTemplate

在线预览：

http://aui.github.com/artTemplate/

网易前端云课堂，JavaScript程序设计：JS调试

Tue, 08 Dec 2015 08:41:20 CST

本节主要通过一个加法器，介绍JS如何调试。先上代码：

test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>

<div>
    <h2>计算器</h2>

    <div>
        <input type="text" id="num1">
        <span>+</span>
        <input type="text" id="num2">
        <span>=</span>
        <span id="result"></span>
        <button id="add">计算</button>
    </div>
</div>
<script src="./demo.js"></script>
</body>
</html>

demo.js

/**
 * Created by yanzi on 15/12/8.
 */
var num1 = document.getElementById("num1"),
    num2 = document.getElementById("num2"),
    result = document.getElementById("result"),
    btn_add = document.getElementById("add");

btn_add.addEventListener("click", onAddClick, false);
function onAddClick(){
    var a = parseInt(num1.value),
    b = parseInt(num2.value);
    var sum = add(a, b);
    result.innerHTML = sum;
}

/**
 *
 * @param a
 * @param b
 * @returns {*}
 */
function add(a, b){
    return a+b;
}

效果：

课堂摘要：

1，一般调试JS，打印信息有如下三种：

a，用alert，缺点是每次都弹框

b,用console.log，这个数据量小还可以

c,加断点调试

2,在JS里，如果变量前面加var，表示局部变量，function里如果不带var表示全局变量。因此一般情况下变量前面带var.

3,一般在chrome调试器里，elements看代码，在source目录下进行调试。在该模式下，点击js里每一行即可以加断点。

4，调试模式下最右边的四个按钮分别是：下一个断点处，单步执行，进到下一函数，跳出函数。基本所有的调试工具都有这四种。

5，断点模式下，在console里输入变量就可以看到当前值，同时可以随意对值进行修改。

作者：yanzi1225627 发表于2015/12/8 0:41:20 原文链接

阅读：74 评论：0 查看评论

iOS中UIWebView与其中网页的javascript的交互

Thu, 10 Dec 2015 01:38:55 CST

首发：个人博客，更新&纠错&回复

1.本地语言调js的方式与android中的方式类似，也是向WebView控件发送要调用的js语句

2. 但js调本地语言，则不是像android那样直接调一个全局变量的方法，而是通过location.href=xx://yy这样的方式触发UIWebViewDelegate接口实现者的webView shouldStartLoadWithRequest navigationType方法，该方法应该判断目标路径（即xx://yy）的schema（即xx）是否实际是要调用swift，如果是，则按约定执行之，并返回false阻止网页路径变化，如果不是要调用swift，则返回true，让改网页继续正常加载目标url。

android和iOS对比，它们都用了伪url的技术，但android是在本地语言调js时使用了伪url（该url的schema为javascript），而iOS是js调本地语言时使用了伪url（该url是自定义的标识），这个错落很有意思。

swift代码：

import UIKit

class ViewController: UIViewController, UIWebViewDelegate {



  @IBOutlet weak var theWebView: UIWebView!



  override func viewDidLoad() {

   //加载本地html

  let res = NSBundle.mainBundle().pathForResource("index",ofType:"html")

  let url = NSURL(fileURLWithPath: res!);

  let request = NSURLRequest(URL: url);

  self.theWebView.loadRequest(request);

  self.theWebView.delegate = self;

  }



   //让js可以调用swift

  func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {

  //判断是不是js在调用swift，如果是，则处理并返回false

  if(request.URL!.scheme == "myschema"){

  let host = request.URL!.host;

  if(host == "go"){

  let query = request.URL!.query!;

  print(query);

  let split = query.componentsSeparatedByString("=");

  let text = split[1];

  self.theWebView.stringByEvaluatingJavaScriptFromString("changeContent(\"" + text + "\")");

  }

  return false;

  }else{

  return true;

  }

  }



   //swift调用js

  @IBAction func btnClicked(sender: AnyObject) {

  self.theWebView.stringByEvaluatingJavaScriptFromString("changeContent(\"123\")");

  }

}

网页代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

</head>

<body>

  <span id="theSpan"></span>

  <button onclick="doIt()">js调用swift</button>

  <input type="text" id="t">

  <script>

   //让swift可以调用js

  function changeContent(str){

  document.getElementById('theSpan').innerHTML = str;

  }

   //js调用swift

  function doIt(){

  document.location.href = "myschema://go?a=" + document.getElementById("t").value;

  }

  </script>

</body>

</html>

长期欢迎项目合作机会介绍，项目收入10%用于酬谢介绍人。新浪微博： @冷镜，QQ： 908789432。

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

不可错过的javascript迷你库

Tue, 29 Dec 2015 08:00:00 CST

最近看着下自己的 github star，把我吓坏了，手贱党，收藏癖的我都收藏了300+个仓库了，是时候整理一下了。

Unix主张kiss，小而美被实践是最好用的，本文将介绍笔者收集的一些非常赞的开源库。

这些库的共性是非常小，而且功能单一。

cookie.js

如果你操作过cookie的接口，那么你一定会感觉这东西的规范真的是太复杂了，根本记不住啊，其实你是对的，因为cookie的接口设计的是有问题的，也就是说设计的太底层了，根本不友好，那么来试试这个js库吧。

store.js

再来说说浏览器的localStore吧，这东西太赞了，可惜尼玛每个浏览器都实现的各不相同，我也是醉了，如果你也有同样的烦恼，不如来试试这个迷你库，它有更简单的api，最重要的是他解决了跨浏览器问题，甚至解决了低版本浏览器(ie6)不支持localStore的问题。

data.js

data.js 是带有消息通知的数据中心，我称其为会说话的数据。旨在让编程变得简单，世界变得美好

如果你使用模块化编程，或者在node环境下的话，你一定纠结过不同模块间到底如何共享数据的问题（虽然这是反模式），全局变量。。。那么试试这个迷你库吧，简单可以来，会让你消除上面的烦恼问题，同时他还支持消息，当数据更新时，会发出消息。

template.js

template.js 一款javascript模板引擎，简单，好用。

lodJS

JavaScript模块加载器，基于AMD。迄今为止，对AMD理解最好的实现

favico.js

在favico上添加数字书不是很nice，点击下面的官网查看效果，这肯定要逼死强迫症了。

官网。

Modernizr

这个就不过多解释了，各种html css js检测器，功能检测哦。

Move.js

如果你操作过css3的属性，一定会觉得非常痛苦的，那不如来试试合格，css3动画瞬间变得简单了。

Keypress

一定记不住键盘上每个键的键位码吧，来试试这个，直观的展示，再也不需要记忆了。

device.js

你想检测用户的设备，试试这个吧，比jq.browser全面多了。

is.js

迷你检查库，这个几乎涵盖了全部的各种检测。

es5-shim

还没使用es5，只能鄙视你了，担心兼容性，用这个吧，主要是为了es6打基础啊。

es6-promise

promise太好用了，兼容性问题靠这个全解决了。

parallax

先来看个视差效果的 demo，是不是很赞，如果你也想实现这个效果，那么来试试这个吧。

notie.js

还在使用弹窗通知用户，太low了，快来试试这款非阻塞式，小清新的通知插件吧，对移动端有好，界面好到爆炸啊。

share.js

一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。

如果你收购了分享组件的烦恼，那么来试试这个对移动端有好的分享组件吧，界面优美，看起来很赞。

demo

mathjs

js自带的数学运算不能满足你的需求了，那试试这个，扩展了很多数学运算。

这里是官网。

总结

本文介绍的只是作者收集的一小部分而已，作者将会保持时时更新的，如果你有什么推荐的欢迎反馈给我。

最后向大家推荐依稀 microjs，这里收集了太多小而美的库，自己来淘宝吧。

你有必要知道的 25 个 JavaScript 面试题

Sat, 19 Dec 2015 00:55:23 CST

你有必要知道的 25 个 JavaScript 面试题

1、使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端？如何避免这种弊端？

使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof)：

  let obj = {};
let arr = [];

console.log(typeof obj === 'object');  //true
console.log(typeof arr === 'object');  //true
console.log(typeof null === 'object');  //true

从上面的输出结果可知， typeof bar === "object" 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === "[object Object]" 来避免这种弊端：

  let obj = {};
let arr = [];

console.log(Object.prototype.toString.call(obj));  //[object Object]
console.log(Object.prototype.toString.call(arr));  //[object Array]
console.log(Object.prototype.toString.call(null));  //[object Null]

另外，为了珍爱生命，请远离 ==：

而 [] === false 是返回 false 的。

2、下面的代码会在 console 输出神马？为什么？

  (function(){
  var a = b = 3;
})();

console.log("a defined? " + (typeof a !== 'undefined'));   
console.log("b defined? " + (typeof b !== 'undefined'));

这跟变量作用域有关，输出换成下面的：

  console.log(b); //3
console,log(typeof a); //undefined

拆解一下自执行函数中的变量赋值：

  b = 3;
var a = b;

所以 b 成了全局变量，而 a 是自执行函数的一个局部变量。

3、下面的代码会在 console 输出神马？为什么？

  var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

第一个和第二个的输出不难判断，在 ES6 之前，JavaScript 只有函数作用域，所以 func 中的 IIFE 有自己的独立作用域，并且它能访问到外部作用域中的 self，所以第三个输出会报错，因为 this 在可访问到的作用域内是 undefined，第四个输出是 bar。如果你知道闭包，也很容易解决的：

  (function(test) {
            console.log("inner func:  this.foo = " + test.foo);  //'bar'
            console.log("inner func:  self.foo = " + self.foo);
}(self));

如果对闭包不熟悉，可以戳此：从作用域链谈闭包

4、将 JavaScript 代码包含在一个函数块中有神马意思呢？为什么要这么做？

换句话说，为什么要用立即执行函数表达式（Immediately-Invoked Function Expression）。

IIFE 有两个比较经典的使用场景，一是类似于在循环中定时输出数据项，二是类似于 JQuery/Node 的插件和模块开发。

  for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

上面的输出并不是你以为的0，1，2，3，4，而输出的全部是5，这时 IIFE 就能有用了：

  for(var i = 0; i < 5; i++) {
    (function(i) {
      setTimeout(function() {
        console.log(i);  
      }, 1000);
    })(i)
}

而在 JQuery/Node 的插件和模块开发中，为避免变量污染，也是一个大大的 IIFE：

  (function($) { 
        //代码
 } )(jQuery);

5、在严格模式('use strict')下进行 JavaScript 开发有神马好处？

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

6、下面两个函数的返回值是一样的吗？为什么？

  function foo1()
{
  return {
      bar: "hello"
  };
}

function foo2()
{
  return
  {
      bar: "hello"
  };
}

在编程语言中，基本都是使用分号（;）将语句分隔开，这可以增加代码的可读性和整洁性。而在JS中，如若语句各占独立一行，通常可以省略语句间的分号（;），JS 解析器会根据能否正常编译来决定是否自动填充分号：

  var test = 1 + 
2
console.log(test);  //3

在上述情况下，为了正确解析代码，就不会自动填充分号了，但是对于 return 、 break、 continue 等语句，如果后面紧跟换行，解析器一定会自动在后面填充分号(;)，所以上面的第二个函数就变成了这样：

  function foo2()
{
  return;
  {
      bar: "hello"
  };
}

所以第二个函数是返回 undefined。

7、神马是 NaN，它的类型是神马？怎么测试一个值是否等于 NaN?

NaN 是 Not a Number 的缩写，JavaScript 的一种特殊数值，其类型是 Number，可以通过 isNaN(param) 来判断一个值是否是 NaN：

  console.log(isNaN(NaN)); //true
console.log(isNaN(23)); //false
console.log(isNaN('ds')); //true
console.log(isNaN('32131sdasd')); //true
console.log(NaN === NaN); //false
console.log(NaN === undefined); //false
console.log(undefined === undefined); //false
console.log(typeof NaN); //number
console.log(Object.prototype.toString.call(NaN)); //[object Number]

ES6 中， isNaN() 成为了 Number 的静态方法： Number.isNaN().

8、解释一下下面代码的输出

  console.log(0.1 + 0.2);   //0.30000000000000004
console.log(0.1 + 0.2 == 0.3);  //false

JavaScript 中的 number 类型就是浮点型，JavaScript 中的浮点数采用IEEE-754 格式的规定，这是一种二进制表示法，可以精确地表示分数，比如1/2，1/8，1/1024，每个浮点数占64位。但是，二进制浮点数表示法并不能精确的表示类似0.1这样的简单的数字，会有舍入误差。

由于采用二进制，JavaScript 也不能有限表示 1/10、1/2 等这样的分数。在二进制中，1/10(0.1)被表示为 0.00110011001100110011…… 注意 0011 是无限重复的，这是舍入误差造成的，所以对于 0.1 + 0.2 这样的运算，操作数会先被转成二进制，然后再计算：

  0.1 => 0.0001 1001 1001 1001…（无限循环）
0.2 => 0.0011 0011 0011 0011…（无限循环）

双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串 0.0100110011001100110011001100110011001100…因浮点数小数位的限制而截断的二进制数字，这时候，再把它转换为十进制，就成了 0.30000000000000004。

对于保证浮点数计算的正确性，有两种常见方式。

一是先升幂再降幂：

  function add(num1, num2){
  let r1, r2, m;
  r1 = (''+num1).split('.')[1].length;
  r2 = (''+num2).split('.')[1].length;

  m = Math.pow(10,Math.max(r1,r2));
  return (num1 * m + num2 * m) / m;
}
console.log(add(0.1,0.2));   //0.3
console.log(add(0.15,0.2256)); //0.3756

二是是使用内置的 toPrecision() 和 toFixed() 方法， 注意，方法的返回值字符串。

  function add(x, y) {
    return x.toPrecision() + y.toPrecision()
}
console.log(add(0.1,0.2));  //"0.10.2"

9、实现函数 isInteger(x) 来判断 x 是否是整数

可以将 x 转换成10进制，判断和本身是不是相等即可：

  function isInteger(x) { 
    return parseInt(x, 10) === x; 
}

ES6 对数值进行了扩展，提供了静态方法 isInteger() 来判断参数是否是整数：

  Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

JavaScript能够准确表示的整数范围在 -2^53 到 2^53 之间（不含两个端点），超过这个范围，无法精确表示这个值。ES6 引入了 Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限，并提供了 Number.isSafeInteger() 来判断整数是否是安全型整数。

10、在下面的代码中，数字 1-4 会以什么顺序输出？为什么会这样输出？

  (function() {
    console.log(1); 
    setTimeout(function(){console.log(2)}, 1000); 
    setTimeout(function(){console.log(3)}, 0); 
    console.log(4);
})();

这个就不多解释了，主要是 JavaScript 的定时机制和时间循环，不要忘了，JavaScript 是单线程的。详解可以参考从setTimeout谈JavaScript运行机制。

11、写一个少于 80 字符的函数，判断一个字符串是不是回文字符串

  function isPalindrome(str) {
    str = str.replace(/\W/g, '').toLowerCase();
    return (str == str.split('').reverse().join(''));
}

这个题我在 codewars 上碰到过，并收录了一些不错的解决方式，可以戳这里： Palindrome For Your Dome

12、写一个按照下面方式调用都能正常工作的 sum 方法

  console.log(sum(2,3));   // Outputs 5
console.log(sum(2)(3));  // Outputs 5

针对这个题，可以判断参数个数来实现：

  function sum() {
  var fir = arguments[0];
  if(arguments.length === 2) {
    return arguments[0] + arguments[1]
  } else {
    return function(sec) {
       return fir + sec;
    }
  }
   
}

13、根据下面的代码片段回答后面的问题

  for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}

1、点击 Button 4，会在控制台输出什么？

2、给出一种符合预期的实现方式

1、点击5个按钮中的任意一个，都是输出5

2、参考 IIFE。

14、下面的代码会输出什么？为什么？

  var arr1 = "john".split(''); j o h n
var arr2 = arr1.reverse(); n h o j
var arr3 = "jones".split(''); j o n e s
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

会输出什么呢？你运行下就知道了，可能会在你的意料之外。

MDN 上对于 reverse() 的描述是酱紫的：

Description

The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array.

reverse() 会改变数组本身，并返回原数组的引用。

slice 的用法请参考： slice

15、下面的代码会输出什么？为什么？

  console.log(1 +  "2" + "2");
console.log(1 +  +"2" + "2");
console.log(1 +  -"1" + "2");
console.log(+"1" +  "1" + "2");
console.log( "A" - "B" + "2");
console.log( "A" - "B" + 2);

输出什么，自己去运行吧，需要注意三个点：

多个数字和数字字符串混合运算时，跟操作数的位置有关

  console.log(2 + 1 + '3'); / /‘33’
console.log('3' + 2 + 1); //'321'

数字字符串之前存在数字中的正负号(+/-)时，会被转换成数字

  console.log(typeof '3');   // string
console.log(typeof +'3');  //number

同样，可以在数字前添加 ''，将数字转为字符串

  console.log(typeof 3);   // number
console.log(typeof (''+3));  //string

对于运算结果不能转换成数字的，将返回 NaN

  console.log('a' * 'sd');   //NaN
console.log('A' - 'B');  // NaN

这张图是运算转换的规则

16、如果 list 很大，下面的这段递归代码会造成堆栈溢出。如果在不改变递归模式的前提下修善这段代码？

  var list = readHugeList();

var nextListItem = function() {
    var item = list.pop();

    if (item) {
        // process the list item...
        nextListItem();
    }
};

原文上的解决方式是加个定时器：

  var list = readHugeList();

var nextListItem = function() {
    var item = list.pop();

    if (item) {
        // process the list item...
        setTimeout( nextListItem, 0);
    }
};

解决方式的原理请参考第10题。

17、什么是闭包？举例说明

可以参考此篇：从作用域链谈闭包

18、下面的代码会输出什么？为啥？

  for (var i = 0; i < 5; i++) {
  setTimeout(function() { console.log(i); }, i * 1000 );
}

请往前面翻，参考第4题，解决方式已经在上面了

19、解释下列代码的输出

  console.log("0 || 1 = "+(0 || 1));
console.log("1 || 2 = "+(1 || 2));
console.log("0 && 1 = "+(0 && 1));
console.log("1 && 2 = "+(1 && 2));

逻辑与和逻辑或运算符会返回一个值，并且二者都是短路运算符：

逻辑与返回第一个是 false 的操作数或者最后一个是 true的操作数

  console.log(1 && 2 && 0);  //0
console.log(1 && 0 && 1);  //0
console.log(1 && 2 && 3);  //3

如果某个操作数为 false，则该操作数之后的操作数都不会被计算

逻辑或返回第一个是 true 的操作数或者最后一个是 false的操作数

  console.log(1 || 2 || 0); //1
console.log(0 || 2 || 1); //2
console.log(0 || 0 || false); //false

如果某个操作数为 true，则该操作数之后的操作数都不会被计算

如果逻辑与和逻辑或作混合运算，则逻辑与的优先级高：

  console.log(1 && 2 || 0); //2
console.log(0 || 2 && 1); //1
console.log(0 && 2 || 1); //1

在 JavaScript，常见的 false 值：

  0, '0', +0, -0, false, '',null,undefined,null,NaN

要注意 空数组([])和 空对象({}):

  console.log([] == false) //true
console.log({} == false) //false
console.log(Boolean([])) //true
console.log(Boolean({})) //true

所以在 if 中， [] 和 {} 都表现为 true：

20、解释下面代码的输出

  console.log(false == '0')
console.log(false === '0')

请参考前面第14题运算符转换规则的图。

21、解释下面代码的输出

  var a={},
    b={key:'b'},
    c={key:'c'};

a[b]=123;
a[c]=456;

console.log(a[b]);

输出是 456，参考原文的解释：

The reason for this is as follows: When setting an object property, JavaScript will implicitly stringify the parameter value. In this case, since b and c are both objects, they will both be converted to [object Object]. As a result, a[b] anda[c] are both equivalent to a[[object Object]] and can be used interchangeably. Therefore, setting or referencing a[c] is precisely the same as setting or referencing a[b].

22、解释下面代码的输出

  console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10));

结果是10的阶乘。这是一个递归调用，为了简化，我初始化 n=5，则调用链和返回链如下：

23、解释下面代码的输出

  (function(x) {
    return (function(y) {
        console.log(x);
    })(2)
})(1);

输出1，闭包能够访问外部作用域的变量或参数。

24、解释下面代码的输出，并修复存在的问题

  var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

将 getSecretIdentity 赋给 stoleSecretIdentity，等价于定义了 stoleSecretIdentity 函数：

  var stoleSecretIdentity =  function (){
        return this._name;
}

stoleSecretIdentity 的上下文是全局环境，所以第一个输出 undefined。若要输出 John Doe，则要通过 call 、 apply 和 bind 等方式改变 stoleSecretIdentity 的 this 指向(hero)。

第二个是调用对象的方法，输出 John Doe。

25、给你一个 DOM 元素，创建一个能访问该元素所有子元素的函数，并且要将每个子元素传递给指定的回调函数。

函数接受两个参数：

DOM
指定的回调函数

原文利用深度优先搜索(Depth-First-Search) 给了一个实现：

  function Traverse(p_element,p_callback) {
   p_callback(p_element);
   var list = p_element.children;
   for (var i = 0; i < list.length; i++) {
       Traverse(list[i],p_callback);  // recursive call
   }
}

文章参考：

25 Essential JavaScript Interview Questions

JavaScript中的立即执行函数表达式

 Javascript 严格模式详解

声明：文中对问题的回答仅代表博主个人观点

转载请注明：淡忘~浅思 » 你有必要知道的 25 个 JavaScript 面试题

JavaScript 异步机制及应用入门教程

Mon, 29 Jun 2015 02:54:29 CST

1. 异步与同步技术研究

(1). 概念介绍

异步: asynchronous 简写async
同步: synchronous 简写sync

用比方来比喻
异步就是: N个人同时起跑, 起点和出发时间相同, 在起跑时不去关心其他人会啥时候跑完～尼玛这不废话吗？大家都才起跑怎么知道别人多就跑完.
同步就是: N个人接力跑, 起点和出发时间不同, 且后一个人会等待前一个人跑完才能继续跑, 也就是要关心前一个人的结果（上一行代码的返回值）.

(2). JS里面的异步/同步

JS运行场景多数是在用户浏览器上, 程序效率优劣会直接影响用户的体验交互. 比如一个网站, 在用户注册时, 会ajax校验输入再发提交表单, 如果用同步就可能会一直卡着等待ajax响应, 好几秒结束后再跳到注册结果页, 这个体验将是非常糟糕的.

说到JS的异步, 不得不提及一个非常有代表意义函数了.

  JavaScript  var url = '/action/';
var data = 'i=1';
xmlHTTP = new XMLHttpRequest();
xmlHTTP.nonce = nonce;
xmlHTTP.open("POST", url);
xmlHTTP.onreadystatechange = function(a) {
    if(a.target.readyState!=4)return false;
    try{
        console.log(a.target.responseText)
    }catch(e){
        return false;
    }
};
xmlHTTP.send(data);

或者在jQuery写作:

  JavaScript  $.ajax({
    url: '/action/',
    type: 'POST',
    data: 'i=1',
    success: function(responseText){
        console.log(responseText);
    }
})

上面的无论是 xmlHTTP.onreadystatechange, 还是 success, 在JavaScript中均称为 回调方法,
以原生JS的 XMLHttpRequest为例, xmlHTTP变量是个 XMLHttpRequest对象, 他的 onreadystatechange是在每次请求响应状态发生变化时会触发的一个函数/方法, 然后在发出请求 xmlHTTP.send(data)的时候, JS并不会理会 onreadystatechange方法, 而当改送请求到达服务器, 开始响应或者响应状态改变时会调用 onreadystatechange方法:

也就是
1) 请求发出
2) 服务器开始响应数据
3) 执行回调方法, 可能执行多次

以jQuery版为例, $.ajax本身是个函数, 唯一一个参数是{...} 这个对象, 然后回调方法 success是作为这个对象的一个属性传入$.ajax的.
$.ajax()先将数据post到'/action/', 返回结果后再调用 success(如果发生错误会调用 error).
也就是

   1) 请求发出
 2) 服务器开始响应数据
 3) 响应结束执行回调方法

然后作为函数$.ajax, 是函数就应该有返回值(哪怕没有return也会返回undefined), 他本身的返回值是多少呢?
分为 async:true和 async:false两个版本:

async:true版本:

  JavaScript  $.ajax({'url':'a.html', type:'GET', async:true})
> Object {readyState: 1}

async:false版本:

  JavaScript  $.ajax({'url':'robots.txt', type:'GET', false})
> Object {readyState: 4, responseText: "<!DOCTYPE HTML PUBLIC ...", status: 200, statusText: "OK"}

我们可以直接看到, async:true异步模式下, jquery/javascript未将结果返回... 而async:false就将结果返回了.

然后问题就来了, 为什么async:true未返回结果呢?
答案很简单:
因为在返回的时候, 程序不可能知道结果. 异步就是指不用等此操作执行出结果再往下执行, 也就是返回的值中未包含结果.

留下一个问题, 我们是不是为了程序流程的简单化而使用同步呢?

(3). 异步的困惑

先帖一段代码:
a.php

  php  <?php
sleep(1);      // 休息一秒钟
echo '{}';

page.js

  JavaScript  for( i = 1; i <= 4; i++ ){
    $.ajax({
    url: 'a.php',
    type: 'POST',
    dataType: 'json',
    data: {data: i},
    async: true,         // 默认即为异步
    success: function(json) {
            console.log(i + ': ' + json); // 打印
        }
    });
}

你们猜猜 打印的那行会最终打印出什么内容?
是

  1: {}
2: {}
3: {}
4: {}

吗？

错！

输出的将是:

  4: {}
4: {}
4: {}
4: {}

你TM在逗我？
没有, 这并不是JS的BUG, 也不是jQuery的BUG.
这是因为, PHP休息了一秒, 而js异步地循环从1到4, 远远用不到1秒.
然后在1秒钟后, 才开始返回数据, 触发 success, 此时此刻 i已经自增成了4.
自然而然地, 第一次 console.log(i...)就是4, 第二次也是, 第三次也是, 第四次也是.
那么如果我们希望程序输出也1,2,3,4这样输出怎么办呢?

两种方案:

1) 让后端输出i

a.php

  php  <?php
sleep(1);
echo '{i: ' . $_POST['data'] . '}'; // 这一行改了

page.js

  JavaScript  for( i = 1; i <= 4; i++ ){
    $.ajax({
    url: 'a.php',
    type: 'POST',
    dataType: 'json',
    data: {data: i},
    async: true,
    success: function(json) {
            console.log(json.i + ': ' + json); // 这一行改了
        }
    });
}

2) 给回调的事件对象赋属性

a.php

  php  保持原代码不变

page.js

  JavaScript  for( i = 1; i <= 4; i++ ){
    ajaxObj = $.ajax({          // 将ajax赋给ajaxObj
        url: 'a.php',
        type: 'POST',
        dataType: 'json',
        data: {data: i},
        async: true,
        success: function(json, status, obj) {    // 增加回调参数, jQuery文档有说第三个参数就是ajax方法产生的对象.
                console.log(obj.i + ': ' + json); // 从jQuery.ajax返回的对象中取i
        }
    });
    ajaxObj.i = i;            // 给ajaxObj赋属性i 值为循环的i 
}

  有可能你会感到困惑, 为何可以给ajaxObj设置一个i属性然后在回调时用第三个回调参数的i属性呢?

jQuery.ajax文档中写到:

  jQuery.ajax( [settings ] )
settings
...
success: Function( Anything data, String textStatus, jqXHR jqXHR )
第1个参数就是响应的文本/HTML/XML/数据/json之类的, 跟你的dataType设置有关
第2个参数就是status状态, 如success
第3个参数就是jqXHR, 也就是jQuery的XMLHttpRequest对象, 当然, 在这里就是$.ajax()生成的对象, 也就是事件的触发者本身, 
给本身设置一个属性(ajaxObj.i = i), 然后再调用本身的回调时, 使用本身的那个属性(obj.i), 当然会保持一致了.

然后
1)输出的结果将是

  1: {i:1}
2: {i:2}
3: {i:3}
4: {i:4}

2)输出的结果将是

  1: {}
2: {}
3: {}
4: {}

虽然略有区别, 但两者均可达到要求. 若要论代码的逼格, 相信你一定会被第二个方案给震惊的.
凭什么你给ajaxObj赋个属性就可以在 success中用了呢?

请看 (4). 异步的回调机制

(4). 异步的回调机制 ------ 事件

一个有经验的JavaScript程序员一定会将js回调用得得心应手.
因为JavaScript天生异步, 异步的好处是顾及了用户的体验, 但坏处就是导致流程化循环或者递归的逻辑明明在别的语言中无任何问题, 却在js中无法取得期待的值...
而JavaScript异步在设计之初就将这一点考虑到了. 任何流行起来的JS插件方法, 如jQuery的插件, 一定考虑到了这一点了的.

举个例子.

  ajaxfileupload插件, 实现原理是将选择的文件$.clone到一个form中, form的target设置成了一个页面中的iframe, 然后定时取iframe的contents().body, 即可获得响应的值.
如果要支持multiple文件上传(一些现代化的浏览器支持), 还是得要用`XMLHttpRequest`

如下面代码:

  $('input#file').on('change', function(e){
    for(i = 0; i < e.target.files.length; i++ ){
        var data = new FormData();
        data.append("file", e.target.files[i]);
        xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open("POST", s.url);
        xmlHTTP.onreadystatechange = function(a) { // a 为 事件event对象
            if(a.target.readyState!=4)return false; // a.target为触发这个事件的对象 即xmlHTTP (XMLHttpRequest) 对象
            try{
                console.log(a.target.responseText);
            }catch(e){
                return false;
            }
        };
        xmlHTTP.send(data);
    }
})

你可以很明显地知道, 在 onreadystatechange调用且走到 console.log(a.target.responseText)时, 如果服务器不返回文件名, 我们根本并不知道返回的是哪个文件的URL. 如果根据i去取的话, 那么很容易地, 我们只会取到始终1个或几个, 并不能保证准确.
那么我们应该怎么去保证在 console.log(a.target.responseText)时能知道我信上传的文件的基本信息呢?

  $('input#file').on('change', function(e){
    for(i = 0; i < e.target.files.length; i++ ){
        var data = new FormData();
        data.append("file", e.target.files[i]);
        xmlHTTP = new XMLHttpRequest();
        xmlHTTP.file = e.target.files[i];
        xmlHTTP.open("POST", s.url);
        xmlHTTP.onreadystatechange = function(a) {
            if(a.target.readyState!=4)return false;
            try{
                console.log(a.target.file);         //这儿是上面`xmlHTTP.file = e.target.files[i]` 赋进去的
                console.log(a.target.responseText);
            }catch(e){
                return false;
            }
        };
        xmlHTTP.send(data);
    }
})

是不是很简单?

2. 展望

(1). Google对同步JavaScript的态度

在你尝试在chrome打开的页面中执行 async: false的代码时, chrome将会警告你:

  Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

(2). 职场展望

异步和事件将是JavaScript工程师必备技能

[完]
Reference:

  1.《Javascript异步编程的4种方法》     http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
2.《什么是 Event Loop？》            http://www.ruanyifeng.com/blog/2013/10/event_loop.html
3.《JavaScript 运行机制详解：再谈Event Loop》 http://www.ruanyifeng.com/blog/2014/10/event-loop.html

【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

Wed, 24 Jun 2015 12:13:19 CST

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行。

有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然后，选择一个合适的游戏引擎是一个不小的挑战，它有时能帮你完成项目或突破项目瓶颈。

为了让你的选择变的容易，我们已经通过分析大多数JavaScript 3D游戏引擎在今天的市场并列出了十大游戏引擎来帮助您用JavaScript创建非常棒的HTML5,WebGL游戏。

1. Babylon.js

毫无疑问，Babylon.JS是最好的JavaScript3D游戏引擎，它能创建可以出售的专业级游戏。
Babylon.JS是David Catuhe对3D游戏引擎热爱的结果，他在用DirectX, OpenGL, 和Silverlight创建3D游戏引擎方面是经验丰富，并最终自己完成了一个游戏引擎。
Babylon.js的一些核心功能包含了场景图与灯光、摄像机、材料和网格、碰撞引擎、物理引擎、音频引擎和优化引擎。
这是一个 Babylon.js试验场，你可以拿你手边的游戏来试试这个游戏引擎。

2.Three.js

Three.js是另一个广泛应用并且功能强大的JavaScript 3D库，从创建简单的3D动画到创建交互的3D游戏，它都能实现。
Threejs带来的不仅是支持WebGL渲染，也支持SVG、Canvas和CSS3D渲染。然而，从游戏的角度来看，你可以只关注Threejs的WebGL渲染。
获取Three.js 3D引擎的源代码— github

3. Turbulenz

Turbulenz是最好的游戏引擎之一，在2009年，当HTML5和WebGL还在酝酿时，它已经被推出。直到2013年，Turbulenz才基于MIT协议拥抱开源。
Turbulenz包含了很多功能，例如2d物理、3d物理、声音、视频和其他服务,如排行榜、multichat,支付和用户数据。
了解更多： biz.turbulenz.com
获取源代码： turbulenz_engine

4. Famo.us

在HTML5 3D发展的市场中，Famo.us占据了非常重要的地位，并且它是最好的JavaScript 3D开源框架之一。对于famo.us，最好的事情就是包装了3D布局引擎，其完全继承了3D物理驱动的动画引擎。
了解更多— famo.us/docs
获取源代码— famous

5. PlayCanvas.js

PlayCanvas是一个基于 WebGL游戏引擎的企业级开源JavaScript框架，它有许多的开发工具能帮你快速创建3D游戏。PlayCanvas.js由一个专业社区创建，最初并不是开源的，但现在你可以在github上fork PlayCanvas.js，然后在你的下一个3D游戏项目中免费使用。
它还提供了能在浏览器中云心的云编辑器，开始使用PalyCanvas和导航到编辑器的URL一样容易。
了解更多— playcanvas.com
获取源代码— playcanvas/engine

6. Goo Engine

来自于GOO技术家族，Goo引擎有一组功能强大的JavaScript API，可通过使用HTML5和WebGL创建任何3D事物。有一个在线的编辑器goocreate，可以运行在Goo引擎上，并封装了一些功能，例如视觉三维编辑器,材质编辑器、脚本和容易发布选项等。
你可以通过支付一些相关的许可费用，在浏览器中使用在线编辑器。
尽管编辑器需要一些费用，但是Goo引擎是绝对免费的，你可以下载它并在你的3D项目中使用。
了解更多—- labs.gooengine.com
获取源代码— code.gooengine.com

7. CooperLicht

对于创建基于浏览器的游戏，CopperLIcht是最出色的3D引擎之一，也是CopperCube 3D游戏编辑器的后端引擎。
CopperCube是一个支持创建3D游戏和动画所需要的所有功能的编辑器，但是，它并不开源，需要一些相关的许可费用。
了解更多— ambiera.com/copperlicht

8. Voxel.JS

Voxel.Js是开源的，基于JavaScript的一个3D游戏引擎，自从它发布以来，社区成长非常快。如果你喜欢模块化方法，Voxel是一个不错的选择。
Voxel-engine是创建3D游戏的核心模块，其它模块可以根据需要插入。到目前为止，已经有超过200个扩展在npm上发布。
了解更多— maxogden/voxel-engine

9. Blend4Web

在2014年，Blend4Web作为开源的3D框架而发布，它高度集成了Triumph的3D内容创建工具“Blender”，并且本地支持Blender的节点材料、粒子系统、bullet物理引擎和其他功能。
获取源代码— blend4web.com/en/downloads

10. Enchant.js

Enchant.js是一个模块化的、面向对象的JavaScript框架，可用HTML5创建简单的APP和游戏。它是基于MIT协议开源的，因此开源免费使用。3D动画和游戏开源使用额外的插件（基于WebGL）创建。
获取源代码– wise9/enchant.js

本文根据@Nicolas Bevacqua的《best-3d-javascript-game-engines-frameworks-webgl-html5》所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://noeticforce.com/best-3d-javascript-game-engines-frameworks-webgl-html5

淡忘~浅思猜你喜欢
怎么对HTML 5的特性做检测？	HTML 5：绘制旋转的太极图	【译】利用HTML 5中的Menu和Menuitem元素快速创建菜单	初识HTML 5：关于它的三个三	HTML 5 API的”前生今世”
无觅

转载请注明：淡忘~浅思 » 【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

JavaScript内存优化

Tue, 17 Mar 2015 17:55:16 CST

相对C/C++ 而言，我们所用的JavaScript 在内存这一方面的处理已经让我们在开发中更注重业务逻辑的编写。但是随着业务的不断复杂化，单页面应用、移动HTML5 应用和Node.js 程序等等的发展，JavaScript 中的内存问题所导致的卡顿、内存溢出等现象也变得不再陌生。

1. 语言层面的内存管理

1.1 作用域

作用域(scope)是JavaScript 编程中一个非常重要的运行机制，在同步JavaScript 编程中它并不能充分引起初学者的注意，但在异步编程中，良好的作用域控制技能成为了JavaScript 开发者的必备技能。另外，作用域在JavaScript 内存管理中起着至关重要的作用。

在JavaScript中，能形成作用域的有函数的调用、 with语句和全局作用域。如以下代码为例：

   var foo = function() {
  var local = {};
};
foo();
console.log(local); //=> undefined

var bar = function() {
  local = {};
};
bar();
console.log(local); //=> {}

这里我们定义了 foo()函数和 bar()函数，他们的意图都是为了定义一个名为 local的变量。但最终的结果却截然不同。

在 foo()函数中，我们使用 var语句来声明定义了一个 local变量，而因为函数体内部会形成一个作用域，所以这个变量便被定义到该作用域中。而且 foo()函数体内并没有做任何作用域延伸的处理，所以在该函数执行完毕后，这个 local变量也随之被销毁。而在外层作用域中则无法访问到该变量。

而在 bar()函数内， local变量并没有使用 var语句进行声明，取而代之的是直接把 local作为全局变量来定义。故外层作用域可以访问到这个变量。

   local = {};
// 这里的定义等效于
global.local = {};

1.2 作用域链

在JavaScript编程中，你一定会遇到多层函数嵌套的场景，这就是典型的作用域链的表示。如以下代码所示：

   function foo() {
  var val = 'hello';

  function bar() {
    function baz() {
      global.val = 'world;'
    }
    baz();
    console.log(val); //=> hello
  }
  bar();
}
foo();

根据前面关于作用域的阐述，你可能会认为这里的代码所显示的结果是 world，但实际的结果却是 hello。很多初学者在这里就会开始感到困惑了，那么我们再来看看这段代码是怎么工作的。

由于JavaScript 中，变量标识符的查找是从当前作用域开始向外查找，直到全局作用域为止。所以JavaScript 代码中对变量的访问只能向外进行，而不能逆而行之。

baz()函数的执行在全局作用域中定义了一个全局变量 val。而在 bar()函数中，对 val这一标识符进行访问时，按照从内到外厄德查找原则：在 bar函数的作用域中没有找到，便到上一层，即 foo()函数的作用域中查找。

然而，使大家产生疑惑的关键就在这里：本次标识符访问在 foo()函数的作用域中找到了符合的变量，便不会继续向外查找，故在 baz()函数中定义的全局变量 val并没有在本次变量访问中产生影响。

1.3 闭包

我们知道JavaScript 中的标识符查找遵循从内到外的原则。但随着业务逻辑的复杂化，单一的传递顺序已经远远不能满足日益增多的新需求。

我们先来看看下面的代码：

   function foo() {
  var local = 'Hello';
  return function() {
    return local;
  };
}
var bar = foo();
console.log(bar()); //=> Hello

这里所展示的让外层作用域访问内层作用域的技术便是闭包(Closure)。得益于高阶函数的应用，使 foo()函数的作用域得到『延伸』。

foo()函数返回了一个匿名函数，该函数存在于 foo()函数的作用域内，所以可以访问到 foo()函数作用域内的 local变量，并保存其引用。而因这个函数直接返回了 local变量，所以在外层作用域中便可直接执行 bar()函数以获得 local变量。

闭包是JavaScript 的高级特性，我们可以借助它来实现更多更复杂的效果来满足不同的需求。但是要注意的是因为把带有内部变量引用的函数带出了函数外部，所以该作用域内的变量在函数执行完毕后的并不一定会被销毁，直到内部变量的引用被全部解除。所以闭包的应用很容易造成内存无法释放的情况。

2. JavaScript 的内存回收机制

这里我将以Chrome 和Node.js 所使用的，由Google 推出的V8 引擎为例，简要介绍一下JavaScript 的内存回收机制，更详尽的内容可以购买我的好朋友朴灵的书《深入浅出Node.js 》进行学习，其中『内存控制』一章中有相当详细的介绍。

在V8 中，所有的JavaScript 对象都是通过『堆』来进行内存分配的。

当我们在代码中声明变量并赋值时，V8 就会在堆内存中分配一部分给这个变量。如果已申请的内存不足以存储这个变量时，V8 就会继续申请内存，直到堆的大小达到了V8 的内存上限为止。默认情况下，V8 的堆内存的大小上限在64位系统中为1464MB，在32位系统中则为732MB，即约1.4GB 和0.7GB。

另外，V8 对堆内存中的JavaScript 对象进行分代管理：新生代和老生代。新生代即存活周期较短的JavaScript 对象，如临时变量、字符串等；而老生代则为经过多次垃圾回收仍然存活，存活周期较长的对象，如主控制器、服务器对象等。

垃圾回收算法一直是编程语言的研发中是否重要的一环，而V8 中所使用的垃圾回收算法主要有以下几种：

Scavange 算法：通过复制的方式进行内存空间管理，主要用于新生代的内存空间；
Mark-Sweep 算法和Mark-Compact 算法：通过标记来对堆内存进行整理和回收，主要用于老生代对象的检查和回收。

PS: 更详细的V8 垃圾回收实现可以通过阅读相关书籍、文档和源代码进行学习。

我们再来看看JavaScript 引擎在什么情况下会对哪些对象进行回收。

2.1 作用域与引用

初学者常常会误认为当函数执行完毕时，在函数内部所声明的对象就会被销毁。但实际上这样理解并不严谨和全面，很容易被其导致混淆。

引用(Reference)是JavaScript 编程中十分重要的一个机制，但奇怪的是一般的开发者都不会刻意注意它、甚至不了解它。引用是指『代码对对象的访问』这一抽象关系，它与C/C++ 的指针有点相似，但并非同物。引用同时也是JavaScript 引擎在进行垃圾回收中最关键的一个机制。

一下面代码为例：

   // ......
var val = 'hello world';
function foo() {
  return function() {
    return val;
  };
}
global.bar = foo();
// ......

阅读完这段代码，你能否说出这部分代码在执行过后，有哪些对象是依然存活的么？

根据相关原则，这段代码中没有被回收释放的对象有 val和 bar()，究竟是什么原因使他们无法被回收？

JavaScript 引擎是如何进行垃圾回收的？前面说到的垃圾回收算法只是用在回收时的，那么它是如何知道哪些对象可以被回收，哪些对象需要继续生存呢？答案就是JavaScript 对象的引用。

JavaScript 代码中，哪怕是简单的写下一个变量名称作为单独一行而不做任何操作，JavaScript 引擎都会认为这是对对象的访问行为，存在了对对象的引用。为了保证垃圾回收的行为不影响程序逻辑的运行，JavaScript 引擎就决不能把正在使用的对象进行回收，不然就乱套了。所以判断对象是否正在使用中的标准，就是是否仍然存在对该对象的引用。但事实上，这是一种妥协的做法，因为JavaScript 的引用是可以进行转移的，那么就有可能出现某些引用被带到了全局作用域，但事实上在业务逻辑里已经不需要对其进行访问了，应该被回收，但是JavaScript 引擎仍会死板地认为程序仍然需要它。

如何用正确的姿势使用变量、引用，正是从语言层面优化JavaScript 的关键所在。

3. 优化你的JavaScript

终于进入正题了，非常感谢你秉着耐心看到了这里，经过上面这么多介绍，相信你已经对JavaScript 的内存管理机制有了不错的理解，那么下面的技巧将会让你如虎添翼。

3.1 善用函数

如果你有阅读优秀JavaScript 项目的习惯的话，你会发现，很多大牛在开发前端JavaScript 代码的时候，常常会使用一个匿名函数在代码的最外层进行包裹。

   ;(function() {
  // 主业务代码
})();

有的甚至更高级一点：

   ;(function(win, doc, $, undefined) {
  // 主业务代码
})(window, document, jQuery);

甚至连如RequireJS, SeaJS, OzJS 等前端模块化加载解决方案，都是采用类似的形式：

   // RequireJS
define(['jquery'], function($) {
  // 主业务代码
});

// SeaJS
define('module', ['dep', 'underscore'], function($, _) {
  // 主业务代码
});

如果你说很多Node.js 开源项目的代码都没有这样处理的话，那你就错了。Node.js 在实际运行代码之前，会把每一个.js 文件进行包装，变成如下的形式：

   (function(exports, require, module, __dirname, __filename) {
  // 主业务代码
});

这样做有什么好处？我们都知道文章开始的时候就说了，JavaScript中能形成作用域的有函数的调用、 with语句和全局作用域。而我们也知道，被定义在全局作用域的对象，很有可能是会一直存活到进程退出的，如果是一个很大的对象，那就麻烦了。比如有的人喜欢在JavaScript中做模版渲染：

   <?php
  $db = mysqli_connect(server, user, password, 'myapp');
  $topics = mysqli_query($db, "SELECT * FROM topics;");
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>你是猴子请来的逗比么？</title>
</head>
<body>
  <ul id="topics"></ul>
  <script type="text/tmpl" id="topic-tmpl">
    <li class="topic">
      <h1><%=title%></h1>
      <p><%=content%></p>
    </li>
  </script>
  <script type="text/javascript">
    var data = <?php echo json_encode($topics); ?>;
    var topicTmpl = document.querySelector('#topic-tmpl').innerHTML;
    var render = function(tmlp, view) {
      var complied = tmlp
        .replace(/\n/g, '\\n')
        .replace(/<%=([\s\S]+?)%>/g, function(match, code) {
          return '" + escape(' + code + ') + "';
        });

      complied = [
        'var res = "";',
        'with (view || {}) {',
          'res = "' + complied + '";',
        '}',
        'return res;'
      ].join('\n');

      var fn = new Function('view', complied);
      return fn(view);
    };

    var topics = document.querySelector('#topics');
    function init()     
      data.forEach(function(topic) {
        topics.innerHTML += render(topicTmpl, topic);
      });
    }
    init();
  </script>
</body>
</html>

这种代码在新手的作品中经常能看得到，这里存在什么问题呢？如果在从数据库中获取到的数据的量是非常大的话，前端完成模板渲染以后， data变量便被闲置在一边。可因为这个变量是被定义在全局作用域中的，所以JavaScript引擎不会将其回收销毁。如此该变量就会一直存在于老生代堆内存中，直到页面被关闭。

可是如果我们作出一些很简单的修改，在逻辑代码外包装一层函数，这样效果就大不同了。当UI渲染完成之后，代码对 data的引用也就随之解除，而在最外层函数执行完毕时，JavaScript引擎就开始对其中的对象进行检查， data也就可以随之被回收。

3.2 绝对不要定义全局变量

我们刚才也谈到了，当一个变量被定义在全局作用域中，默认情况下JavaScript 引擎就不会将其回收销毁。如此该变量就会一直存在于老生代堆内存中，直到页面被关闭。

那么我们就一直遵循一个原则：绝对不要使用全局变量。虽然全局变量在开发中确实很省事，但是全局变量所导致的问题远比其所带来的方便更严重。

使变量不易被回收；
多人协作时容易产生混淆；
在作用域链中容易被干扰。

配合上面的包装函数，我们也可以通过包装函数来处理『全局变量』。

3.3 手工解除变量引用

如果在业务代码中，一个变量已经确切是不再需要了，那么就可以手工解除变量引用，以使其被回收。

   var data = { /* some big data */ };
// blah blah blah
data = null;

3.4 善用回调

除了使用闭包进行内部变量访问，我们还可以使用现在十分流行的回调函数来进行业务处理。

   function getData(callback) {
  var data = 'some big data';

  callback(null, data);
}

getData(function(err, data) {
  console.log(data);
});

回调函数是一种后续传递风格(Continuation Passing Style, CPS)的技术，这种风格的程序编写将函数的业务重点从返回值转移到回调函数中去。而且其相比闭包的好处也不少：

如果传入的参数是基础类型（如字符串、数值），回调函数中传入的形参就会是复制值，业务代码使用完毕以后，更容易被回收；
通过回调，我们除了可以完成同步的请求外，还可以用在异步编程中，这也就是现在非常流行的一种编写风格；
回调函数自身通常也是临时的匿名函数，一旦请求函数执行完毕，回调函数自身的引用就会被解除，自身也得到回收。

3.5 良好的闭包管理

当我们的业务需求(如循环事件绑定、私有属性、含参回调等)一定要使用闭包时，请谨慎对待其中的细节。

循环绑定事件可谓是JavaScript 闭包入门的必修课，我们假设一个场景：有六个按钮，分别对应六种事件，当用户点击按钮时，在指定的地方输出相应的事件。

   var btns = document.querySelectorAll('.btn'); // 6 elements
var output = document.querySelector('#output');
var events = [1, 2, 3, 4, 5, 6];

// Case 1
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function(evt) {
    output.innerText += 'Clicked ' + events[i];
  };
}

// Case 2
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(index) {
    return function(evt) {
      output.innerText += 'Clicked ' + events[index];
    };
  })(i);
}

// Case 3
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function(event) {
    return function(evt) {
      output.innerText += 'Clicked ' + event;
    };
  })(events[i]);
}

这里第一个解决方案显然是典型的循环绑定事件错误，这里不细说，详细可以参照我给一个网友的回答；而第二和第三个方案的区别就在于闭包传入的参数。

第二个方案传入的参数是当前循环下标，而后者是直接传入相应的事件对象。事实上，后者更适合在大量数据应用的时候，因为在JavaScript的函数式编程中，函数调用时传入的参数是基本类型对象，那么在函数体内得到的形参会是一个复制值，这样这个值就被当作一个局部变量定义在函数体的作用域内，在完成事件绑定之后就可以对 events变量进行手工解除引用，以减轻外层作用域中的内存占用了。而且当某个元素被删除时，相应的事件监听函数、事件对象、闭包函数也随之被销毁回收。

3.6 内存不是缓存

缓存在业务开发中的作用举足轻重，可以减轻时空资源的负担。但需要注意的是，不要轻易将内存当作缓存使用。内存对于任何程序开发来说都是寸土寸金的东西，如果不是很重要的资源，请不要直接放在内存中，或者制定过期机制，自动销毁过期缓存。

4. 检查JavaScript 的内存使用情况

在平时的开发中，我们也可以借助一些工具来对JavaScript 中内存使用情况进行分析和问题排查。

4.1 Blink / Webkit 浏览器

在Blink / Webkit 浏览器中（Chrome, Safari, Opera etc.），我们可以借助其中的Developer Tools 的Profiles 工具来对我们的程序进行内存检查。

4.2 Node.js 中的内存检查

在Node.js 中，我们可以使用node-heapdump 和node-memwatch 模块进行内存检查。

   var heapdump = require('heapdump');
var fs = require('fs');
var path = require('path');
fs.writeFileSync(path.join(__dirname, 'app.pid'), process.pid);
// ...

在业务代码中引入node-heapdump 之后，我们需要在某个运行时期，向Node.js 进程发送SIGUSR2 信号，让node-heapdump 抓拍一份堆内存的快照。

   $ kill -USR2 (cat app.pid)

这样在文件目录下会有一个以 heapdump-<sec>.<usec>.heapsnapshot格式命名的快照文件，我们可以使用浏览器的Developer Tools中的Profiles工具将其打开，并进行检查。

5. 小结

很快又来到了文章的结束，这篇分享主要向大家展示了以下几点内容：

JavaScript 在语言层面上，与内存使用息息相关的东西；
JavaScript 中的内存管理、回收机制；
如何更高效地使用内存，以至于让出产的JavaScript 能更有拓展的活力；
如何在遇到内存问题的时候，进行内存检查。

原帖url： http://lifemap.in/javascript-memory-optimize/

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

Chrome开发者工具之JavaScript内存分析

Fri, 13 Mar 2015 08:00:04 CST

内存泄漏是指计算机可用内存的逐渐减少。当程序持续无法释放其使用的临时内存时就会发生。JavaScript的web应用也会经常遇到在原生应用程序中出现的内存相关的问题，如泄漏和溢出，web应用也需要应对 垃圾回收停顿。

尽管JavaScript使用垃圾回收进行自动内存管理，但有效的(effective)内存管理依然很重要。在这篇文章中我们将探讨分析JavaScript web应用中的内存问题。在学习有关特性时请确保尝试一下相关案例以提高你对这些工具在实践中如何工作的认识。请阅读内存 101(Memory 101)页面来帮助你熟悉这篇文章中用到的术语。 注意：我们将要用到的某些特性目前仅对 Chrome Canary版浏览器可用。我们推荐使用这个版本来获得最佳的工具，以分析你的应用程序的内存问题。

你需要思考的问题

总体来说，当你觉得你遇到了内存泄漏问题时，你需要思考三个问题：

我的页面是否占用了过多的内存? - Timeline内存查看工具(Timeline memory view) 和 Chrome任务管理(Chrome task manager) 能帮助你确认你是否使用了过多的内存。Memory view 能跟踪页面渲染过程中DOM节点计数，documents文档计数和JS事件监听计数。作为一个经验法则：避免对不再需要用到的DOM元素的引用，移除不需要的事件监听并且在存储你可能不会用到的大块数据时要留意。
我的页面有没有内存泄漏? - 对象分配跟踪(Object allocation tracker)通过实时查看JS对象的分配来帮助你定位泄漏。你也可以使用堆分析仪(Heap Profiler)生成JS堆快照，通过分析内存图和比较快照之间的差异，来找出没有被垃圾回收清理掉的对象。
我的页面垃圾强制回收有多频繁? - 如果你的页面垃圾回收很频繁，那说明你的页面可能内存使用分配太频繁了。 Timeline内存查看工具(Timeline memory view) 能够帮助你发现感兴趣的停顿。

术语和基本概念

本小节介绍在 内存分析时使用的常用术语，这些术语在为其它语言做内存分析的工具中也适用。这里的术语和概念用在了堆分析仪(Heap Profiler)UI工具和相关的文档中。

这些能够帮助我们熟悉如何有效的使用内存分析工具。如果你曾用过像Java、.NET等语言的内存分析工具的话，那么这将是一个复习。

对象大小(Object sizes)

把内存想象成一个包含基本类型(像数字和字符串)和对象(关联数组)的图表。它可能看起来像下面这幅一系列相关联的点组成的图。

一个对象有两种使用内存的方法：

对象自身直接使用
隐含的保持对其它对象的引用，这种方式会阻止垃圾回收(简称GC)对那些对象的自动回收处理。

当你使用DevTools中的堆分析仪(Heap Profiler，用来分析内存问题的工具，在DevTools的”Profile”标签下)时，你可能会惊喜的发现一些显示各种信息的栏目。其中有两项是： 直接占用内存(Shallow Size)和 占用总内存(Retained Size)，那它们是什么意思呢？

直接占用内存(Shallow Size，不包括引用的对象占用的内存)

这个是对象本身占用的内存。

典型的JavaScript对象都会有保留内存用来描述这个对象和存储它的直接值。一般，只有数组和字符串会有明显的直接占用内存(Shallow Size)。但字符串和数组常常会在渲染器内存中存储主要数据部分，仅仅在JavaScript对象栈中暴露一个很小的包装对象。

渲染器内存指你分析的页面在渲染的过程中所用到的所有内存：页面本身的内存 + 页面中的JS堆用到的内存 + 页面触发的相关工作进程(workers)中的JS堆用到的内存。然而，通过阻止垃圾自动回收别的对象，一个小对象都有可能间接占用大量的内存。

占用总内存(Retained Size，包括引用的对象所占用的内存)

一个对象一但删除后它引用的依赖对象就不能被 GC根(GC root)引用到，它们所占用的内存就会被释放，一个对象占用总内存包括这些依赖对象所占用的内存。

GC根是由 控制器(handles)组成的，这些控制器(不论是局部还是全局)是在建立由build-in函数(native code)到V8引擎之外的JavaScript对象的引用时创建的。所有这些控制器都能够在堆快照的 GC roots(GC根) > Handle scope 和 GC roots > Global handlers中找到。如果不深入了解浏览器的实现原理，在这篇文章中介绍这些控制器可能会让人不能理解。GC根和控制器你都不需要过多关心。

有很多内部的GC根对用户来说都是不重要的。从应用的角度来说有下面几种情况：

Window 全局对象 (所有iframe中的)。在堆快照中有一个distance字段，它是从window对象到达对应对象的最短路径长度。
由所有document能够遍历到的DOM节点组成的文档DOM树。不是所有节点都会被对应的JS引用，但有JS引用的节点在document存在的情况下都会被保留。
有很多对象可能是在调试代码时或者DevTools console中(比如：console中的一些代码执行结束后)创建出来的。

注意：我们推荐用户在创建堆快照时，不要在console中执行代码，也不要启用调试断点。

内存图由一个根部开始，可能是浏览器的 window对象或Node.js模块 Global对象。这些对象如何被内存回收不受用户的控制。

不能被GC根遍历到的对象都将被内存回收。

注意：直接占用内存和占用总内存字段中的数据是用字节表示的。

对象的占用总内存树

之前我们已经了解到，堆是由各种互相关联的对象组成的网状结构。在数字领域，这种结构被称为图或内存图。图是由 边缘(edges)连接着的 节点(nodes)组成的，他们都被贴了标签。

节点(Nodes) ( 或对象) 节点的标签名是由创建他们的 构造(constructor)函数的名称确定
边缘(Edges) 标签名就是属性名

本文档的后面你将了解到如何使用堆分析仪生成快照。从下图的堆分析仪生成的快照中，我们能看到距离(distance)这个字段：是指对象到GC根的距离。如果同一个类型的所有对象的距离都一样，而有一小部分的距离却比较大，那么就可能出了些你需要进行调查的问题了。

支配对象(Dominators)

支配对象就像一个树结构，因为每个对象都有一个支配者。一个对象的支配者可能不会直接引用它支配的对象，就是说，支配对象树结构不是图中的生成树。

在上图中：

节点1支配节点2
节点2支配节点3，4和6
节点3支配节点5
节点5支配节点8
节点6支配节点7

在下图的例子中，节点 #3是 #10的支配者，但 #7也在每个从GC到 #10的路经中都出现了。像这样，如果B对象在每个从根节点到A对象的路经中都出现，那么B对象就是A对象的支配对象。

V8介绍

在本节，我们将描述一些内存相关的概念，这些概念是和 V8 JavaScript虚拟机(V8 VM 或VM)有关的。当分析内存时，了解这些概念对理解堆快照是有帮助的。

JavaScript对象描述

有三个原始类型：

数字(Numbers) (如 3.14159..)
布尔值(Booleans) (true或false)
字符型(Strings) (如 ‘Werner Heisenberg’)

它们不会引用别的值，它们只会是叶子节点或终止节点。

数字(Numbers)以下面两种方式之一被存储：

31位整数直接值，称做： 小整数(small integers)( SMIs)，或
堆对象，引用为堆值。堆值是用来存储不适合用SMI形式存储的数据，像 双精度数(doubles)，或者当一个值需要被 打包(boxed)时，如给这个值再设置属性值。

字符型数据会以下面两种方式存储：

VM堆，或
外部的 渲染器内存中。这时会创建一个包装对象用来访问存储的位置，比如，Web页面包存的脚本资源和其它内容，而不是直接复制至VM堆中。

新创建的JavaScript对象会被在JavaScript堆上(或 VM堆)分配内存。这些对象由V8的垃圾回收器管理，只要还有一个强引用他们就会在内存中保留。

本地对象是所有不在JavaScript堆中的对象，与堆对象不同的是，在它们的生命周期中，不会被V8垃圾加收器处理，只能通过JavaScript包装对象引用。

连接字符串是由一对字符串合并成的对象，是合并后的结果。 连接字符串只在有需要时合并。像一连接字符串的子字符串需要被构建时。

比如：如果你连接 a和 b，你得到字符串(a, b)这用来表示连接的结果。如果你之后要再把这个结果与 d连接，你就得到了另一个连接字符串((a, b), d)。

数组(Arrays) - 数组是数字类型键的对象。它们在V8引擎中存储大数据量的数据时被广泛的使用。像字典这种有键-值对的对象就是用数组实现的。

一个典型的JavaScript对象可以通过两种数组类型之一的方式来存储：

命名属性，和
数字化的元素

如果只有少量的属性，它们会被直接存储在JavaScript对象本身中。

Map - 一种用来描述对象类型和它的结构的对象。比如，maps会被用来描述对象的结构以实现对对象属性的快速访问

对象组

每个本地对象组都是由一组之间相互关联的对象组成的。比如一个DOM子树，每个节点都能访问到它的父元素，下一个子元素和下一个兄弟元素，它们构成了一个关联图。需要注意的是本地元素没有在JavaScript堆中表现－这就是它们的大小是零的原因，而它的包装对象被创建了。

每个包装对象都会有一个到本地对象的引用，用来传递对这些本地对象的操作。这些本地对象也有到包装对象的引用。但这并不会创造无法收回的循环，GC是足够智能的，能够分辨出那些已经没有引用包装对象的本地对象并释放它们的。但如果有一个包装对象没有被释放那它将会保留所有对象组和相关的包装对象。

先决条件和有用提示

Chrome 任务管理器

注意： 当使用Chrome做内存分析时，最好设置一个洁净的测试环境

打开Chrome的内存管理器，观察内存字段，在一个页面上做相关的操作，你可以很快定位这个操作是否会导致页面占用很多内存。你可以从Chrome菜单 > 工具或按Shift + Esc，找到内存管理器。

打开后，在标头右击选用 JavasScript使用的内存这项。

通过DevTools Timeline来定位内存问题

解决问题的第一步就是要能够证明问题存在。这就需要创建一个可重现的测试来做为问题的基准度量。没有可再现的程序，就不能可靠的度量问题。换句话说如果没有基准来做为对比，就无法知道是哪些改变使问题出现的。

时间轴面版(Timeline panel)对于发现程序什么时候出了问题很用帮助。它展示了你的web应用或网站加载和交互的时刻。所有的事件：从加载资源到解JavaScript，样式计算，垃圾回收停顿和页面重绘。都在时间轴上表示出来了。

当分析内存问题时，时间轴面版上的 内存视图(Memory view)能用来观察：

使用的总内存 – 内存使用增长了么?
DOM节点数
文档(documents)数
注册的事件监听器(event listeners)数

更多的关于在内存分析时，定位内存泄漏的方法，请阅Zack Grossbart的 Memory profiling with the Chrome DevTools

证明一个问题的存在

首先要做的事情是找出你认为可能导致内存泄漏的一些动作。可以是发生在页面上的任何事件，鼠标移入，点击，或其它可能会导致页面性能下降的交互。

在时间轴面版上开始记录(Ctrl+E 或 Cmd+E)然后做你想要测试的动作。想要强制进行垃圾回收点面版上的垃圾筒图标( )。

下面是一个内存泄漏的例子，有些点没有被垃圾回收：

如果经过一些反复测试后，你看到的是锯齿状的图形(在内存面版的上方)，说明你的程序中有很多短时存在的对象。而如果一系列的动作没有让内存保持在一定的范围，并且DOM节点数没有返回到开始时的数目，你就可以怀疑有内存泄漏了。

一旦确定了存在内存上的问题，你就可以使用 分析面板(Profiles panel)上的 堆分析仪(heap profiler)来定位问题的来源。

例子: 尝试一下 memory growth的例子，能帮助你有效的练习通过时间轴分析内存问题。

内存回收

内存回收器(像V8中的)需要能够定位哪些对象是 活的(live)，而那些被认为是死的(垃圾 )的对象是 无法引用到的(unreachable)。

如果 垃圾回收 (GC)因为JavaScript执行时有逻辑错误而没有能够回收到垃圾对象，这些垃圾对象就无法再被重新回收了。像这样的情况最终会让你的应用越来越慢。

比如你在写代码时，有的变量和事件监听器已经用不到了，但是却仍然被有些代码引用。只要引用还存在，那被引用的对象就无法被GC正确的回收。

当你的应用程序在运行中，有些DOM对象可能已经更新/移除了，要记住检查引用了DOM对象的变量并将其设null。检查可能会引用到其它对象(或其它DOM元素)的对象属性。双眼要盯着可能会越来越增长的变量缓存。

堆分析仪

拍一个快照

在Profiles面板中，选择 Take Heap Snapshot，然后点击 Start或者按Cmd + E或者Ctrl + E：

快照最初是保存在渲染器进程内存中的。它们被按需导入到了DevTools中，当你点击快照按钮后就可以看到它们了。当快照被载入DevTools中显示后，快照标题下面的数字显示了能够被引用到的(reachable)JavaScript对象占有内存总数。

例子：尝试一下 garbage collection in action的例子，在时间轴(Timeline)面板中监控内存的使用。

清除快照

点击Clear all按钮图标( )，就能清除掉所有快照：

注意：关闭DevTools窗口并不能从渲染内存中删除掉收集的快照。当重新打开DevTools后，之前的快照列表还在。

记住我们之前提到的，当你生成快照时你可以强制执行在DevTools中GC。当我们拍快照时，GC是自动执行的。在时间轴(Timeline)中点击垃圾桶(垃圾回收)按钮( )就可以轻松的执行垃圾回收了。

例子：尝试一下 scattered objects并用堆分析仪(Heap Profiler)分析它。你可以看到(对象)项目的集合。

切换快照视图

一个快照可以根据不同的任务切换视图。可以通过如图的选择框切换：

下面是三个默认视图：

Summary(概要) - 通过构造函数名分类显示对象；
Comparison(对照) - 显示两个快照间对象的差异；
Containment(控制) - 可用来探测堆内容；

Dominators(支配者)视图可以在Settings面板中开启 – 显示 dominators tree. 可以用来找到内存增长点。

通过不同颜色区分对象

对象的属性和属性值有不同的类型并自动的通过颜么进行了区分。每个属性都是以下四种之一：

a:property - 通过名称索引的普通属性，由.(点)操作符，或[](中括号)引用，如["foo bar"]；
0:element - 通过数字索引的普通属性，由[](中括号)引用；
a:context var - 函数内的属性，在函数上下文内，通过名称引用；
a:system prop - 由JavaScript VM 添加的属性，JavaScript代码不能访问。

命名为 System的对象没有对应的JavaScript类型。它们是JavaScript VM对象系统内置的。V8将大多数内置对象和用户JS对象放在同一个堆中。但它们只是V8的内部对象。

视图详解

Summary view(概要视图)

打开一个快照，默认是以概要视图显示的，显示了对象总数，可以展开显示具体内容： Initially, a snapshot opens in the Summary view, displaying object totals, which can be expanded to show instances:

第一层级是”总体”行，它们显示了：

Constructor(构造函数)表示所有通过该构造函数生成的对象
对象的实例数在Objects Count列上显示
Shallow size列显示了由对应构造函数生成的对象的 shallow sizes(直接占用内存)总数
Retained size列展示了对应对象所占用的最大内存
Distance列显示的是对象到达GC根的最短距离

展开一个总体行后，会显示所有的对象实例。没一个实例的直接占用内存和占用总内存都被相应显示。@符号后的数字不对象的唯一ID，有了它你就可以逐个对象的在不同快照间作对比。

例子：尝试这个例子(在新tab标签中打开)来了解如何使用概要视图。

记住黄色的对象被JavaScript引用，而红色的对象是由黄色背景色引用被分离了的节点。

Comparison view(对照视图)

该视图用来对照不同的快照来找到快照之间的差异，来发现有内存泄漏的对象。来证明对应用的某个操作没有造成泄漏(比如：一般一对操作和撤消的动作，像找开一个document，然后关闭，这样是不会造成泄漏的)，你可以按以下的步骤尝试：

在操作前拍一个堆快照；
执行一个操作(做你认为会造成泄漏的动作)；
撤消之前的操作(上一个操作相反的操作，多重复几次)；
拍第二个快照，将视图切换成对照视图，并同快照1进行对比。

在对照视图下，两个快照之间的不同就会展现出来了。当展开一个总类目后，增加和删除了的对象就显示出来了：

例子：尝试例子(在新tab标签中打开)来了解如何使用对照视图来定位内存泄漏。

Containment view(控制视图)

控制视图可以称作对你的应用的对象结构的”鸟瞰视图(bird’s eys view)”。它能让你查看function内部，跟你的JavaScript对象一样的观察VM内部对象，能让你在你的应用的非常低层的内存使用情况。

该视图提供了几个进入点：

DOMWindow 对象 - 这些对象是JavaScript代码的”全局”对象；
GC根 - VM的垃圾回收器真正的GC根；
Native对象 - 浏览器对象对”推入”JavaScript虚拟机中来进行自动操作，如：DOM节点，CSS规则(下一节会有详细介绍。)

下图是一个典型的控制视图：

例子：尝试例子(在新tab标签中打开)来了解如何使用控制视图来查看闭包内部和事件处理。

关于闭包的建议

给函数命名对你在快照中的闭包函数间作出区分会很用帮助。如：下面的例子中没有给函数命名：

function createLargeClosure() {
  var largeStr = new Array(1000000).join(’x’);

  var lC = function() { // this is NOT a named function
    return largeStr;
  };

  return lC;
}

而下面这个有给函数命名：

function createLargeClosure() {
  var largeStr = new Array(1000000).join(’x’);

  var lC = function lC() { // this IS a named function
    return largeStr;
  };

  return lC;
}

例子：尝试这个例子 why eval is evil来分析内存中闭包的影响。你可能也对尝试下面这个例子，记录 heap allocations(堆分配)有兴趣。

揭露DOM内存泄漏

这个工具独一无二的一点是展示了浏览器原生对象(DOM节点，CSS规则)和JavaScript对象之间的双向引用。这能帮助你发现因为忘记解除引用游离的DOM子节点而导致的难以发觉的内存泄漏。

DOM内存泄漏可能会超出你的想象。看下下面的例子 – #tree对象什么时候被GC呢？

var select = document.querySelector;
  var treeRef = select("#tree");
  var leafRef = select("#leaf");
  var body = select("body");

  body.removeChild(treeRef);

  //#tree can’t be GC yet due to treeRef
  treeRef = null;

  //#tree can’t be GC yet due to indirect
  //reference from leafRef

  leafRef = null;
  //#NOW can be #tree GC

#leaf代表了对它的父节点的引用(parentNode)它递归引用到了 #tree，所以，只有当leafRef被nullified后 #tree代表的整个树结构才会被GC回收。

例子：尝试 leaking DOM nodes来了解哪里DOM节点会内存泄漏并如何定位。你也可以看一下这个例子： DOM leaks being bigger than expected。

查看Gonzalo Ruiz de Villa的文章 Finding and debugging memory leaks with the Chrome DevTools来阅读更多关于DOM内存泄漏和内存分析的基础。

原生对象在Summary和Containment视呼中更容易找到 – 有它们专门的类目：

例子：尝试下这个例子(在新tab标签中打开)来了解如何将DOM树分离。

支配者视图(Dominators view)

支配者视图显示了堆图的支配者树。支配者视图跟控制(Containment)视图很像，但是没有属性名。这是因为支配者可能会是一个没有直接引用的对象，就是说这个支配者树不是堆图的生成树。但这是个有用的视图能帮助我们很快的定位内存增长点。

注意：在Chrome Canary中，支配者视图能够在DevTools中的Settings > Show advanced heap snapshot properties 开启，重启DevTools生效。

例子：尝试这个例子(在新tab标签中打开)来练习如何找到内存增长点。可以进一步尝试下一个例子 retaining paths and dominators。

对象分配跟踪器

对象跟踪器整合了 heap profiler的快照增量更新分析和Timeline面板的记录。跟其它工具一样，记录对象的堆配置需要启动记录，执行一系列操作，然后停止记录然后进行分析。

对象跟踪器不间断的记录堆快照(频率达到了每50毫秒！)，结束时记录最后一个快照。该堆分配分析器显示对象在哪被创建并定位它的保留路径。

开启并使用对象分析器

开始使用对象分析器： 1. 确认你使用的是最新版的 Chrome Canary。

打开DeveTools并点击齿轮图标(译者：没明白这步有什么用)。
现在，打开Profiler面板，你就能看到”Record Heap Allocations”的选项。

上面的柱条表示在堆中生成的新对象。高度就对应了相应对象的大小，它的颜色表示了这个对象是否在最后拍的那个快照中还在：蓝色柱表示在timeline最后这个对象还在，灰色柱表示这个对象在timeline中生成，但结束前已经被内存回收了。

上面的例子中，一个动作执行了10次。同一个程序保留了5个对象，所以最后5个蓝色柱条被保留了。但这最后留下的柱存在潜在的问题。你可以用timeline上的滑动条缩小到那个特定的快照并找到这个分配的对象。

点击一个堆中的对象就能在堆快照的下面部分显示它的保留总内存树。检查这个对象的保留总内存树能够给你足够的信息来了解为什么这个对象没有被回收，然后你就能对代码做相应的修改来去掉不必要的引用。

内存分析FAQ

问：我不能看到对象的所有属性，我也看到它们的非字符串值！为什么？

并非所有属性都完整的保存在JavaScript堆中。其中有些是通过执行原生代码的getters方法来获取的。这些属性没有在堆快照中捕获，是为了防止对getters方法的调用和避免程序状态的改变，如果这些getters方法不是”纯(pure)”的functions。同样，非字符串的值，如数字，没有被捕获是为了减少快照的大小。

问：@ 符号后面的数字是什么意思 – 是地址还是ID呢？这个ID值真的是唯一的么？

这是对象ID。显示对象的地址没有意义，因为一个对象会在垃圾回收的时候被移除。这些对象IDs是真正的IDs – 就是说，它们在不同的快照间是唯一表示的。这样就可以的堆状态间进行精确的对比。维持这些IDs会给GC流程增加额外的开支，但这仅在记录第一次堆快照时分配 – 如果堆分析仪没有用到，就不会有额外的开支。

问：”死”(无法引用到的)对象被包含在快照中了么？

没有，只有可以引用到的对象才会显示在快照中。而且，拍快照前都会先自动执行GC操作。

注意：在写这篇文章的时候，我们计划在拍快照的时候不再GC，防止堆尺寸的减少。现在已经是这样了，但垃圾对象依然显示在快照之外。

问：GC根是由什么组成的？

由很多部分组成：

原生对象图；
符号表；
VM线程中的栈；
编辑缓存；
控制器上下文；
全局控制器。

问：我得知可以使用Heap Profiler和Timeline Memory view来检测内存泄漏。但我应该先用哪个工具呢？

Timeline面版，是在你第一次使用你的页面发现速度变慢了时用来论断过多的内存使用。网站变慢是比较典型的内存泄漏的信号，但也可能是其它的原因 – 可能是有渲染或网络传输方面的瓶颈，所以要确保解决你网页的真正问题。

论断是否是内存问题，就打开Timeline面板和Memory标签。点击record按钮，然后在你的应用上重复几次你认为可能导致内存泄漏的操作。停止记录。你应用的内存使用图就生成出来了。如果内存的使用一直在增长(而没有相应的下降)，这就表明你的应用可能有内存泄漏了。

一般一个正常的应用的内存使用图形是锯齿状的，因为内存使用后又会被垃圾回收器回收。不用担心这种锯齿形 – 因为总是会因为JavaScript而有内存的消耗，甚至一个空的 requestAnimationFrame也会造成这种锯齿形，这是无法避免的。只要不是那种分配了持续很多内存的形状，那就表明生成了很多内存垃圾。

上图的增长线是需要你警惕的。在诊断分析的时候Memory标签中的DOM node counter，Document counter和Event listener count也是很有用的。DOM节点数是使用的原生内存不会影响JavaScript内存图。

一旦你确认你的应用有内存泄漏，堆分析仪就可以用来找到内存泄漏的地方。

问：我发现堆快照中有的DOM节点的数字是用红色标记为”Detached DOM tree”，而其它的是黄色的，这是什么意思呢？

你会发现有不同的颜色。红色的节点(有着深色的背景)没有从JavaScript到它们的直接的引用，但它们是分离出来的DOM结构的一部分，所以他们还是在内存中保留了。有可能有一个节点被JavaScript引用到了(可能是在闭包中或者一个变量)，这个引用会阻止整个DOM树被内存回收。

黄色节点(黄色背景)有JavaScript的直接引用。在同一个分离的DOM树中查看一个黄色的节点来定位你的JavaScript的引用。就可能看到从DOM window到那个节点的属性引用链(如： window.foo.bar[2].baz)。

下面的动态图显示了分离节点的处理过程：

例子：尝试这个例子 detached nodes你可以查看节点在Timeline中的生命周期，然后拍堆快照来找到分离的节点。

问：直接占用内存(Shallow Size)和占用总内存(Retained Size)分别代表什么，它们的区别是什么？

是这样的，对象可以在内存中以两种方式存在(be alive) – 直接的被别一个可访问的(alive)对象保留(window和document对象总是可访问的)或被原生对象(象DOM对象)隐含的包留引用。后一种方式会因为阻止对象被GC自动回收，而有导制内存泄泥漏的可能。对象自身占用的内存被称为直接占用内存(通常来说，数组和字符串会保留更多的直接占用内存(shallow size))。

一个任意大小的对象可以通过阻止其它对象内存被回收在保留很大的内存使用。当一个对象被删除后(它造成的一些依赖就无法被引用了)能够释放的内存的大小被称有占用总内存(retained size)。

问：constructor和retained字段下有很多的数据。我应该从哪开始调查我是的否遇到了内存泄漏呢？

一般来说最好是从通过retainers排序的第一个对象开始，retainers之间是通过距离排序的(是指到window对象的距离)。

距离最短的对象有可能是首选的可能导致内存泄漏的对象。

问：Summary, Comparison, Dominators 和 Containment这些视图之间的不同是什么？

你可以通过切换视图来体验它们的区别。

Summary(概要)视图能帮你通过构造函数分组寻找对象(和对象的内存使用)。该视图对找出DOM内存泄漏很有帮助。
Comparison(对照)视图能够通过显示哪些对象内存被正确的回收了来搜寻内存泄漏。通常在一个操作前后记录两个(或更多)的内存使用快照。它是通过察看释放的内存和引用数目的差导来察看是否有内存泄漏，并找到原因。
Containment(控制)视图对对象结构有更好的展示，帮助我们分析全局作用域(如 window)中对象引用情况来找到是什么保留了这些对象。它能让你分析闭包并深入到对象更深层去查看。
Dominators(支配者)视图能用来帮助我们确认没有多余的对象还挂在某个位置(如那些被引用了的)，和确认对象的删除/垃圾回收真正起了作用。

问：堆分析仪中的constructor(一组)内容代表什么？

(global property) - 全局对象(像 ‘window’)和引用它的对象之间的中间对象。如果一个对象由构造函数Person生成并被全局对象引用，那么引用路径就是这样的：[global] > (global property) > Person。这跟一般的直接引用彼此的对象不一样。我们用中间对象是有性能方面的原因，全局对象改变会很频繁，非全局变量的属性访问优化对全局变量来说并不适用。
(roots) - constructor中roots的内容引用它所选中的对象。它们也可以是由引擎自主创建的一些引用。这个引擎有用于引用对象的缓存，但是这些引用不会阻止引用对象被回收，所以它们不是真正的强引用(FIXME)。
(closure) - 一些函数闭包中的一组对象的引用
(array, string, number, regexp) - 一组属性引用了Array,String,Number或正则表达式的对象类型
(compiled code) - 简单来说，所有东西都与compoled code有关。Script像一个函数，但其实对应了<script>的内容。SharedFunctionInfos (SFI)是函数和compiled code之间的对象。函数通常有内容，而SFIS没有(FIXME)。
HTMLDivElement, HTMLAnchorElement, DocumentFragment 等 – 你代码中对elements或document对象的引用。

在你的程序的生命周期中生成的很多其它的对象，包括事件监听器或自定义对象，可以在下面的controllers中找到：

问：我在做内存分析时需要关闭Chrome里可能会产生影响的什么功能么？

我们建议在用Chrome DevTools做内存分析时，你可以使用关闭所有扩展功能的隐身模式，或设置用户文件夹为( --user-data-dir="")后再打开Chrome。

应用，扩展甚至console中的记录都会对你的分析有潜在的影响，如果你想让你的分析可靠的话，禁用这些吧。

写在最后的话

今天的JavaScript引擎已经具有很强的能力，能够自动回收代码产生的内存垃圾。就是说，它们只能做到这样了，但我们的应用仍然被证明会因为逻辑错误而产生内存泄漏。使用相应的工具来找到应用的瓶颈，记住，不要靠猜 – 测试它。

帮助实例

诊断内存泄漏

尽管很多内容在本文章中已经提到了，但一系列测试内存相关的问题的例子还是很有用的，下面是一组DOM节点内存泄漏的例子。你可能希望在测试你的更复杂的页面或应用前先用这些例子做试验。

原生体验挡不住！JavaScript开源跨平台框架NativeScript

Tue, 10 Mar 2015 16:27:09 CST

NativeScript 是一款使用 JavaScript 语言来构建跨平台原生移动应用的开源框架，支持 iOS、Android 和 Windows Phone。且 NativeScript 的使用没有过多繁杂的要求，只需使用自己已经掌握的 JavaScript 和 CSS 技能就能开发出真正具有原生用户体验的移动应用。

作为免费开源项目的 NativeScript，它的源码已经托管至 Github 上，让开发者可以没有任何门槛约束的随意使用。除了无需学习新的编程语言，使用大家所熟识的 JavaScript 编码及 CSS 打造应用样式外，NativeScript 的强大之处还有使用跨平台的 UI 抽象、共享业务逻辑和第三方原生库。

100% 访问原生平台 API：整个原生平台功能在 JavaScript 层都是可用的。

基于 ECMAScript5+JavaScript 和 CSS 标准：使用现有的技能构建原生应用。

100% 共享代码：基于一次编码，构建 Android、iOS 和 Windows Phone 应用。

使用 NativeScript 开发的应用展示：

Amroo：

Amroo 是一款专为养宠物的人员打造的应用，当你要出差或是度假时，可以通过这款应用找到可以帮你照看宠物的人。简单直观的界面设计与功能，都是通过 NativeScript 实现的，你也可以试试。

Tasks：

Tasks 是用于规划和监督事情进程的任务管理应用，它的构建当然也是来自 NativeScript 技术。

传送门： NativeScript 官网、 Github 托管地址

本文链接

IT瘾javascript推荐

8行javascript录制屏幕

Meta开源JavaScript内存泄漏监测工具MemLab

一、MemLab简介

二、工作原理

三、基本使用

3.1 安装与使用

3.2 堆分析与研究

3.3 Memlab API

3.4 内存断言

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

前言

基于 Proxy 的沙箱机制

简要谈谈 Proxy API

基于 Proxy 的沙箱实现考虑

结合微前端框架 qiankun 介绍两类沙箱实现

基于属性 diff 的沙箱机制

基于 iframe 的沙箱机制

基于 Proxy 及 diff 的沙箱机制边界考虑

利用 iframe 实现沙箱机制的几点思考

一段 iframe 沙箱的示例代码

各类沙箱机制对比

基于 ES 提案 ShadowRealm 实现

什么是 JavaScript 的运行环境实例

ShadowRealm API 简介

ShadowRealm 的错误捕获与更多应用场景

总结

参考

GitHub 上周 JavaScript 趋势榜项目

1. yemount/pose-animator

2. renrenio/renren-fast-vue

3. zeit/next.js

4. discordjs/discord.js

5. openspug/spug

6. ccxt/ccxt

7. Advanced-Frontend/Daily-Interview-Question

8. quasarframework/quasar

9. denysdovhan/wtfjs

10. YMFE/yapi

11. agalwood/Motrix

12. jgraph/drawio-desktop

13. facebook/react

14. iamadamdev/bypass-paywalls-chrome

15. cypress-io/cypress

16. jgraph/drawio

17. twbs/bootstrap

18. mui-org/material-ui

19. gatsbyjs/gatsby

20. microsoft/playwright

21. MarkerHub/eblog

22. goldbergyoni/nodebestpractices

23. grommet/grommet

24. egonSchiele/grokking_algorithms

25. jonasschmedtmann/complete-javascript-course

Javascript 面试中经常被问到的三个问题！

问题 1: 事件委托代理

问题 2： 在循环中使用闭包

问题 3：事件的节流（throttle）与防抖（debounce）

Throttle： 第一个人说了算

Debounce： 最后一个参赛者说了算

用 Throttle 来优化 Debounce

我从来不理解 JavaScript 闭包，直到有人这样向我解释它... - Java架构—月亮 - 博客园

准备

基础的例子

词法作用域（Lexical scope）

返回函数的函数

最后,一个闭包

闭包不是那么简单

总结

【JavaScript】获取页面停留时间并提交 - 枫芸志

巧用 Img / JavaScript 采集页面数据-云栖社区

方案简介

采集端介绍

WebTracking接入步骤

案例：内容多渠道推广

方案设计

采集日志分析

以下是我们对用户点击/阅读日志的实时分析：

写在最后

使用JavaScript和MQTT开发物联网应用

问题 2：在循环中使用闭包

Throttle：第一个人说了算

Debounce：最后一个参赛者说了算