JavaScript代码风格参考指南

码必须尽可能的清晰和易读。

这实际上是一种编程艺术 —— 以一种正确并且人们易读的方式编码来完成一个复杂的任务。一个良好的代码风格大大有助于实现这一点。

一、语法

下面是一个备忘单，其中列出了一些建议的规则（详情请参阅下文）：

现在，让我们详细讨论一下这些规则和它们的原因吧。

没有什么规则是“必须”的
没有什么规则是“刻在石头上”的。这些是风格偏好，而不是宗教教条。

二、花括号

在大多数的 JavaScript 项目中，花括号以 “Egyptian” 风格（译注：“egyptian” 风格又称 K&R 风格 — 代码段的开括号位于一行的末尾，而不是另起一行的风格）书写，左花括号与相应的关键词在同一行上 — 而不是新起一行。左括号前还应该有一个空格，如下所示：

if (condition) {
  // do this
  // ...and that
  // ...and that
}

单行构造（如 if (condition) doSomething()）也是一个重要的用例。我们是否应该使用花括号？如果是，那么在哪里？

下面是这几种情况的注释，你可以自己判断一下它们的可读性：

初学者常这样写。非常不好！这里不需要花括号：if (n < 0) {alert(`Power ${n} is not supported`);}
拆分为单独的行，不带花括号。永远不要这样做，添加新行很容易出错：if (n < 0) alert(`Power ${n} is not supported`);
写成一行，不带花括号 — 如果短的话，也是可以的：if (n < 0) alert(`Power ${n} is not supported`);
最好的方式：if (n < 0) { alert(`Power ${n} is not supported`); }

对于很短的代码，写成一行是可以接受的：例如 if (cond) return null。但是代码块（最后一个示例）通常更具可读性。

三、行的长度

没有人喜欢读一长串代码，最好将代码分割一下。

例如：

// 回勾引号 ` 允许将字符串拆分为多行
let str=`
  ECMA International's TC39 is a group of JavaScript developers,
  implementers, academics, and more, collaborating with the community
  to maintain and evolve the definition of JavaScript.
`;

对于 if 语句：

if (
  id===123 &&
  moonPhase==='Waning Gibbous' &&
  zodiacSign==='Libra'
) {
  letTheSorceryBegin();
}

一行代码的最大长度应该在团队层面上达成一致。通常是 80 或 120 个字符。

四、缩进

有两种类型的缩进：

水平方向上的缩进：2 或 4 个空格。一个水平缩进通常由 2 或 4 个空格或者 “Tab” 制表符（key Tab）构成。选择哪一个方式是一场古老的圣战。如今空格更普遍一点。选择空格而不是 tabs 的优点之一是，这允许你做出比 “Tab” 制表符更加灵活的缩进配置。例如，我们可以将参数与左括号对齐，像下面这样：

show(parameters,
     aligned, // 5 spaces padding at the left
     one,
     after,
     another
  ) {
  // ...
}

垂直方向上的缩进：用于将代码拆分成逻辑块的空行。即使是单个函数通常也被分割为数个逻辑块。在下面的示例中，初始化的变量、主循环结构和返回值都被垂直分割了：

function pow(x, n) {
  let result=1;
  //              <--
  for (let i=0; i < n; i++) {
    result *=x;
  }
  //              <--
  return result;
}

插入一个额外的空行有助于使代码更具可读性。写代码时，不应该出现连续超过 9 行都没有被垂直分割的代码。

五、分号

每一个语句后面都应该有一个分号。即使它可以被跳过。

有一些编程语言的分号确实是可选的，那些语言中也很少使用分号。但是在 JavaScript 中，极少数情况下，换行符有时不会被解释为分号，这时代码就容易出错。更多内容请参阅代码结构一章的内容。

如果你是一个有经验的 JavaScript 程序员，你可以选择像 StandardJS 这样的无分号的代码风格。否则，最好使用分号以避免可能出现的陷阱。大多数开发人员都应该使用分号。

六、嵌套的层级

尽量避免代码嵌套层级过深。

例如，在循环中，有时候使用 continue 指令以避免额外的嵌套是一个好主意。

例如，不应该像下面这样添加嵌套的 if 条件：

for (let i=0; i < 10; i++) {
  if (cond) {
    ... // <- 又一层嵌套
  }
}

我们可以这样写：

for (let i=0; i < 10; i++) {
  if (!cond) continue;
  ...  // <- 没有额外的嵌套
} //多用这种风格。

使用 if/else 和 return 也可以做类似的事情。

例如，下面的两个结构是相同的。

第一个：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
  } else {
    let result=1;

    for (let i=0; i < n; i++) {
      result *=x;
    }

    return result;
  }
}

第二个：

function pow(x, n) {
  if (n < 0) {
    alert("Negative 'n' not supported");
    return;
  }

  let result=1;

  for (let i=0; i < n; i++) {
    result *=x;
  }

  return result;
}

但是第二个更具可读性，因为 n < 0 这个“特殊情况”在一开始就被处理了。一旦条件通过检查，代码执行就可以进入到“主”代码流，而不需要额外的嵌套。

七、函数位置

如果你正在写几个“辅助”函数和一些使用它们的代码，那么有三种方式来组织这些函数。

在调用这些函数的代码的上方声明这些函数：

// function declarations
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// the code which uses them
let elem=createElement();
setHandler(elem);
walkAround();

先写调用代码，再写函数

// the code which uses the functions
let elem=createElement();
setHandler(elem);
walkAround();

// --- helper functions ---
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

混合：在第一次使用一个函数时，对该函数进行声明。

大多数情况下，第二种方式更好。

这是因为阅读代码时，我们首先想要知道的是“它做了什么”。如果代码先行，那么在整个程序的最开始就展示出了这些信息。之后，可能我们就不需要阅读这些函数了，尤其是它们的名字清晰地展示出了它们的功能的时候。

八、风格指南

风格指南包含了“如果编写”代码的通用规则，例如：使用哪个引号、用多少空格来缩进、一行代码最大长度等非常多的细节。

当团队中的所有成员都使用相同的风格指南时，代码看起来将是统一的。无论是团队中谁写的，都是一样的风格。

当然，一个团队可以制定他们自己的风格指南，但是没必要这样做。现在已经有了很多制定好的代码风格指南可供选择。

一些受欢迎的选择：

Google JavaScript 风格指南
Airbnb JavaScript 风格指南
Idiomatic.JS
StandardJS
还有很多……

如果你是一个初学者，你可以从本章中上面的内容开始。然后你可以浏览其他风格指南，并选择一个你最喜欢的。

九、自动检查器

检查器（Linters）是可以自动检查代码样式，并提出改进建议的工具。

它们的妙处在于进行代码风格检查时，还可以发现一些代码错误，例如变量或函数名中的错别字。因此，即使你不想坚持某一种特定的代码风格，我也建议你安装一个检查器。

下面是一些最出名的代码检查工具：

JSLint — 第一批检查器之一。
JSHint — 比 JSLint 多了更多设置。
ESLint — 应该是最新的一个。

它们都能够做好代码检查。我使用的是 ESLint。

大多数检查器都可以与编辑器集成在一起：只需在编辑器中启用插件并配置代码风格即可。

例如，要使用 ESLint 你应该这样做：

安装 Node.JS。
使用 npm install -g eslint 命令（npm 是一个 JavaScript 包安装工具）安装 ESLint。
在你的 JavaScript 项目的根目录（包含该项目的所有文件的那个文件夹）创建一个名为 .eslintrc 的配置文件。
在集成了 ESLint 的编辑器中安装/启用插件。大多数编辑器都有这个选项。

下面是一个 .eslintrc 文件的例子：

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "no-console": 0,
    "indent": 2
  }
}

这里的 "extends" 指令表示我们是基于 “eslint:recommended” 的设置项而进行设置的。之后，我们制定我们自己的规则。

你也可以从网上下载风格规则集并进行扩展。有关安装的更多详细信息

此外，某些 IDE 有内置的检查器，这非常方便，但是不像 ESLint 那样可自定义。

十、总结

本文描述的（和提到的代码风格指南中的）所有语法规则，都旨在帮助你提高代码可读性。它们都是值得商榷的。

当我们思考如何写“更好”的代码的时候，我们应该问自己的问题是：“什么可以让代码可读性更高，更容易被理解？”和“什么可以帮助我们避免错误？”这些是我们讨论和选择代码风格时要牢记的主要原则。

阅读流行的代码风格指南，可以帮助你了解有关代码风格的变化趋势和最佳实践的最新想法。

来了~欢迎转发、收藏，记得点个赞呗。^_^

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

清单 1 JavaScript 代码内嵌示例

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

1.脚本位置

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

清单 2 低效率脚本位置示例

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

图 1 JavaScript 文件的加载和执行阻塞其他文件的下载

我们可以发现一个有趣的现象：第一个 JavaScript 文件开始下载，与此同时阻塞了页面其他文件的下载。此外，从 script1.js 下载完成到 script2.js 开始下载前存在一个延时，这段时间正好是 script1.js 文件的执行过程。每个文件必须等到前一个文件下载并执行完成才会开始下载。在这些文件逐个下载过程中，用户看到的是一片空白的页面。

从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。这是个好消息，因为<script>标签在下载外部资源时不会阻塞其他<script>标签。遗憾的是，JavaScript 下载过程仍然会阻塞其他资源的下载，比如样式文件和图片。尽管脚本的下载过程不会互相影响，但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。因此，尽管最新的浏览器通过允许并行下载提高了性能，但问题尚未完全解决，脚本阻塞仍然是一个问题。

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

清单 3 推荐的代码放置位置示例

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

这是优化 JavaScript 的首要规则：将脚本放在底部。

2.组织脚本

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

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

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

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

3.无阻塞的脚本

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

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

3.1延迟加载脚本

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

清单 4 defer 属性使用方法示例

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

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

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

清单 5 defer 属性对脚本行为的影响

这段代码在页面处理过程中弹出三次对话框。不支持 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 就很有可能出现错误。

3.2动态脚本元素

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

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

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

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

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

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

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

· "uninitialized"：默认状态

· "loading"：下载开始

· "loaded"：下载完成

· "interactive"：下载完成但尚不可用

· "complete"：所有数据已经准备好

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

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

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

清单 9 通过函数进行封装

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

清单 10 loadScript()函数使用方法

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

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

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

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

3.3使用 XMLHttpRequest(XHR)对象

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

清单 12 通过 XHR 对象加载 JavaScript 脚本

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

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

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

4.总结

一般而言，减少 JavaScript 对性能的影响有以下几种方法：

· A.将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。

· B.尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。

· C.采用无阻塞下载 JavaScript 脚本的方法：

· a-使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；

· b-使用动态创建的<script>元素来下载并执行代码；

· c-使用 XHR 对象下载 JavaScript 代码并注入页面中。

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

看完了，别忘了收藏、转发、点个赞，更别忘了要关注本号！^_^

在，终于有可能在浏览器中运行人脸识别了！通过本文，我将介绍face-api，它是一个构建在tensorflow.js core的JavaScript模块，它实现了人脸检测、人脸识别和人脸地标检测三种类型的CNN。

我们首先研究一个简单的代码示例，以用几行代码立即开始使用该包。

第一个face-recognition.js，现在又是一个包？

如果你读过关于人脸识别与其他的NodeJS文章：（https://medium.com/@muehler.v/node-js-face-recognition-js-simple-and-robust-face-recognition-using-deep-learning-ea5ba8e852），你可能知道，不久前，我组装了一个类似的包（face-recognition.js）。

起初，我没有想到在javascript社区中对脸部识别软件包的需求如此之高。对于很多人来说，face-recognition.js似乎是一个不错的免费使用且开源的替代付费服务的人脸识别服务，就像微软或亚马逊提供的一样。其中很多人问，是否可以在浏览器中完全运行完整的人脸识别管道。

在这里，我应该感谢tensorflow.js！我设法使用tfjs-core实现了部分类似的工具，这使你可以在浏览器中获得与face-recognition.js几乎相同的结果！最好的部分是，不需要设置任何外部依赖关系，可以直接使用。并且，它是GPU加速的，在WebGL上运行操作。

这使我相信，JavaScript社区需要这样的浏览器包！你可以用这个来构建自己的各种各样的应用程序。;）

如何用深度学习解决人脸识别问题

如果你希望尽快开始，也可以直接去编码。但想要更好地理解face-api.js中用于实现人脸识别的方法，我强烈建议你看一看，这里有很多我经常被问到的问题。

简单地说，我们真正想要实现的是，识别一个人的面部图像（input image）。我们这样做的方式是为每个我们想要识别的人提供一个（或多个）图像，并标注人名（reference data）。现在我们将它们进行比较，并找到最相似的参考图像。如果两张图片足够相似，我们输出该人的姓名，否则我们输出“unknown”。

听起来不错吧！然而，还是存在两个问题。首先，如果我们有一张显示多个人的图片，我们想要识别所有的人，该怎么办？其次，我们需要能够获得这种类型的两张人脸图像的相似性度量，以便比较它们......

人脸检测

第一个问题的答案是人脸检测。简而言之，我们将首先找到输入图像中的所有人脸。对于人脸检测，face-api.js实现了SSD（Single Shot Multibox Detector），它基本上是基于MobileNetV1的CNN，只是在网络顶部叠加了一些额外的盒预测层。

网络返回每个人脸的边界框及其相应的分数，即每个边界框显示一个人脸的可能性。分数用于过滤边界框，因为图像中可能根本不包含任何人脸。请注意，即使只有一个人检索边界框，也应执行人脸检测。

人脸标志检测和人脸对齐

第一个问题解决了！但是，我们希望对齐边界框，这样我们就可以在每个框的人脸中心提取出图像，然后将它们传递给人脸识别网络，这会使人脸识别更加准确！

为此，face-api.js实现了一个简单的CNN，它返回给定人脸图像的68个点的人脸标志：

从地标位置，边界框可以准确的包围人脸。在下图，你可以看到人脸检测的结果（左）与对齐的人脸图像（右）的比较：

人脸识别

现在我们可以将提取并对齐的人脸图像提供给人脸识别网络，这个网络基于类似ResNet-34的架构并且基本上与dlib中实现的架构相对应。该网络已经被训练学习将人脸的特征映射到人脸描述符（descriptor ，具有128个值的特征矢量），这通常也被称为人脸嵌入。

现在回到我们最初的比较两个人脸的问题：我们将使用每个提取的人脸图像的人脸描述符并将它们与参考数据的人脸描述符进行比较。也就是说，我们可以计算两个人脸描述符之间的欧氏距离，并根据阈值判断两个人脸是否相似（对于150 x 150大小的人脸图像，0.6是一个很好的阈值）。使用欧几里德距离的方法非常有效，当然，你也可以使用任何你选择的分类器。以下gif通过欧几里德距离将两幅人脸图像进行比较：

学完了人脸识别的理论，我们可以开始编写一个示例。

编码

在这个简短的例子中，我们将逐步了解如何在以下显示多人的输入图像上进行人脸识别：

包括脚本

首先，从 dist/face-api.js或者dist/face-api.min.js的minifed版本中获取最新的构建且包括脚本：

<script src=“face-api.js”> </ script>

链接：https://github.com/justadudewhohacks/face-api.js/tree/master/dist

如果你使用npm：

npm i face-api.js

加载模型数据

根据应用程序的要求，你可以专门加载所需的模型，但要运行完整的端到端示例，我们需要加载人脸检测，人脸标识和人脸识别模型。模型文件在repo上可用，下方链接中找到。

https://github.com/justadudewhohacks/face-api.js/tree/master/weights

已经量化了模型权重，将模型文件大小减少了75％，以便使你的客户端仅加载所需的最小数据。此外，模型权重被分割成最大4MB的块，以允许浏览器缓存这些文件，使得它们只需加载一次。

模型文件可以简单地作为静态资源（static asset）提供给你的Web应用程序，可以在其他地方托管它们，可以通过指定文件的路径或url来加载它们。假设你在models目录中提供它们并且资源在public/models下：

const MODEL_URL='/models'
await faceapi.loadModels(MODEL_URL)

或者，如果你只想加载特定模型：

const MODEL_URL='/models'
await faceapi.loadFaceDetectionModel(MODEL_URL)
await faceapi.loadFaceLandmarkModel(MODEL_URL)
await faceapi.loadFaceRecognitionModel(MODEL_URL)

从输入图像接收所有面孔的完整描述

神经网络接受HTML图像，画布或视频元素或张量作为输入。要使用score> minScore检测输入的人脸边界框，我们只需声明：

const minConfidence=0.8
const fullFaceDescriptions=await faceapi.allFaces(input, minConfidence)

完整的人脸描述检测结果(边界框+分数)、人脸标志以及计算出的描述符。正如你所看到的，faceapi.allFaces在前面讨论过的所有内容都适用于我们。但是，你也可以手动获取人脸位置和标志。如果这是你的目标，github repo上有几个示例。

请注意，边界框和标志位置是相对于原始图像/媒体大小。如果显示的图像尺寸与原始图像尺寸不一致，则可以调整它们的尺寸：

const resized=fullFaceDescriptions.map(fd=> fd.forSize(width, height))

我们可以通过将边界框绘制到画布中来可视化检测结果：

fullFaceDescription.forEach((fd, i)=> {
 faceapi.drawDetection(canvas, fd.detection, { withScore: true })
})

脸部可以显示如下：

fullFaceDescription.forEach((fd, i)=> {
 faceapi.drawLandmarks(canvas, fd.landmarks, { drawLines: true })
})

通常，我所做的可视化工作是在img元素的顶部覆盖一个绝对定位的画布，其宽度和高度相同（参阅github示例以获取更多信息）。

人脸识别

现在我们知道如何在给定输入图像的情况下检索所有人脸的位置和描述符，即，我们将得到一些图像，分别显示每个人并计算他们的人脸描述符。这些描述符将成为我们的参考数据。

假设我们有一些可用的示例图像，我们首先从url获取图像，然后使用faceapi.bufferToImage从其数据缓冲区创建HTML图像元素：

// fetch images from url as blobs
const blobs=await Promise.all(
 ['sheldon.png' 'raj.png', 'leonard.png', 'howard.png'].map(
 uri=> (await fetch(uri)).blob()
 )
)
// convert blobs (buffers) to HTMLImage elements
const images=await Promise.all(blobs.map(
 blob=> await faceapi.bufferToImage(blob)
))

接下来，对于每个图像，我们定位主体的面部并计算人脸描述符，就像我们之前在输入图像时所做的那样：

const refDescriptions=await Promsie.all(images.map(
 img=> (await faceapi.allFaces(img))[0]
))
const refDescriptors=refDescriptions.map(fd=> fd.descriptor)

现在，我们要做的一切就是遍历输入图像的人脸描述，并在参考数据中找到距离最近的描述符：

const sortAsc=(a, b)=> a - b
const labels=['sheldon', 'raj', 'leonard', 'howard']
const results=fullFaceDescription.map((fd, i)=> {
 const bestMatch=refDescriptors.map(
 refDesc=> ({
 label: labels[i],
 distance: faceapi.euclideanDistance(fd.descriptor, refDesc)
 })
 ).sort(sortAsc)[0]
 
 return {
 detection: fd.detection,
 label: bestMatch.label,
 distance: bestMatch.distance
 }
})

如前所述，我们在此使用欧氏距离作为相似性度量，结果表明工作得很好。我们最终得到了在输入图像中检测到的每个人脸的最佳匹配。

最后，我们可以将边界框与标签一起绘制到画布中以显示结果：

// 0.6 is a good distance threshold value to judge
// whether the descriptors match or not
const maxDistance=0.6
results.forEach(result=> {
 faceapi.drawDetection(canvas, result.detection, { withScore: false })
 
 const text=`${result.distance < maxDistance ? result.className : 'unkown'} (${result.distance})`
 const { x, y, height: boxHeight }=detection.getBox()
 faceapi.drawText(
 canvas.getContext('2d'),
 x,
 y + boxHeight,
 text
 )
})

以上我希望你首先了解如何使用api。另外，我建议查看repo中的其他示例。

来自：ATYUN

在线咨询

上一篇：号外：CSS3也可以如此优雅-图片无缝滚动（纯手打）
下一篇：javascript有什么用，从web后端谈JS的三

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商