负责任地编写JavaScript代码（三）

原文地址：alistapart.com/article/res… 原文做者：Jeremy Wagner 译者：龚亮声明：本翻译仅作学习交流使用，转载请注明来源javascript

针对网站上存在的 JavaScript 问题，你已经尝试了全部可能解决它的方法。好比，尽量地依赖 Web 平台，避免使用 Babel ，使用较小的框架替代方案，对应用程序代码作极致化精简。然而，速度仍是不够快。当网站没法像设计师和开发人员所指望的那样发挥做用时，不可避省得让咱们反思： “咱们没有作到什么?” “咱们写的代码能作什么?” “咱们架构的哪些部分没有达到预期?” 至关一部分性能问题源于咱们本身的代码，然而把责任所有归咎于咱们本身会赤裸裸地忽略一个事实：至关大一部分性能问题是由外部因素致使的。css

当与第三方碰撞的时候

便利老是要付出代价的，咱们对 web 的集体偏好也破坏了它，特别是 JavaScript，它的使用方式代表了一种快速增加的趋势，即外包咱们（第一方）不想作的任何事情。有时这是一个必要的决定。在许多状况下，它具备完美的财务和运营意义。java

不要误会，使用第三方 JavaScript 永远不会便宜。这是一个魔鬼的交易，供应商使用能解决你问题的解决方案来诱惑你，却没有明确地提醒你，你几乎没法控制解决方案带来的反作用。若是第三方供应商给他们的产品新增了功能或者改变了基础架构，你将首当其冲受到这些变更的影响。那些使用你网站的人会感到沮丧，他们不会努力克服因为糟糕的用户体验而带来的烦恼。除非彻底移除供应商提供的解决方案，不然你只能减轻而非彻底消除使用它带来的影响。web

在本篇文章中，咱们所采用的技术方法要比上一部分中略有减小。咱们将更多地谈论第三方供应商的人性方面，而后咱们将介绍一些有关如何解决这类问题的技术途径。跨域

便利性带来的阻碍

当咱们谈论当今 Web 糟糕的状态时，咱们中的一些人很快指出了开发人员的便利性在致使此问题中的做用。虽然我赞成开发人员的便利性会损害用户体验，但这只是将网站变得迟缓、混乱的便利性之一。浏览器

操做上的便利性可能会成为很是棘手的技术债务的先兆，当咱们没法独自解决一个广泛存在的问题时，这些便利性就是咱们所追求的。它们表明了在缺少架构灵活性或足够的开发资源的状况下解决问题的第三方解决方案。bash

每当出现不便之处时，就应该讨论如何以一种全面的方式解决它。因此，让咱们从更人性化的角度来谈谈如何处理这种状况。服务器

问题的关键是痛苦

第三方供应商介入的缘由是痛苦。当一个组织的决策者对某个问题感到足够痛苦时，他们会作一件很是人性化的事情，那就是找到最快的方法让痛苦消失。微信

市场老是会找到解决这些痛点的方法，即便这种方法是不可持续的，甚至毫无用处。Web 可访问性覆盖（旨在自动修复可访问性问题的第三方脚本）是最严重的违法者。首先，你花钱去买一个解决不了任何问题的解决方案。而后，当该“解决方案”损害了你网站的可用性时，你须要付出的就远不止以前那么点了。这并非抹黑某些第三方供应商提供的工具的有用性，而是说明第三方解决方案的采用是如何发生的，即便那些客观上很糟糕的工具也是如此。markdown

A Chrome performance trace of a long task kicked off by a third party’s web accessibility overlay script. The task occupies the main thread for roughly 600 ms on a 2017 Retina MacBook.

所以，当一个供应商承诺解决咱们面临的很是痛苦的问题时，极可能有人会采纳解决方案。若是这我的在公司的地位足够高，且在决策过程当中没彻底绕过他的话，他就会对其余人施加下行压力，迫使他们购买。相反，当那些处于压力之下的人缺少足够的资源来建立必要的特性时，也会出现采用第三方解决方案的状况。

不管如何，把你的同事汇集在一块儿，共同制定一个解决和减轻你面临的问题的计划是值得的。

建立一个缓解计划

不管第三方解决方案多么不明智，一旦组织中的人员采用了它，你在强制更改过程当中遇到的困难将取决于该解决方案的需求有多迫切。事实上，你不该该试图让解决方案的支持者相信他们的决定是错误的。这样的努力几乎老是拔苗助长，会让人们以为受到了攻击，对你所说的话更加抵触。更糟糕的是，这些努力可能会致使人们彻底不倾听对方的意见，从而产生激烈的争吵，从而滋生出更严重的问题。

若是有必要的话，我本身也常常这么作，在你的同事之间发牢骚表示同情，但把你的不满放在一边，拿出一个缓解计划，引导你的同事走向更好的结果。具体方法的具体细节将取决于第三方自己和组织的结构，但其实质可能相似于如下一系列问题。

该解决方案解决什么问题？

选择第三方解决方案是有缘由的，这个问题将帮助你肯定采用该解决方案的理由是否合理。有些决策是在全部必要的人都不在的时候作出的。你可能处于这样一种境地：你必须对那个决策的后果作出反应。这个问题的答案会引导你天然而然地跟进。

咱们打算使用该解决方案多长时间？

该问题将帮助你肯定解决方案的保质期。它是以临时解决方案的形式引入，在解决了问题后（例如在可访问性覆盖的状况下）将其移除吗？仍是以长期解决方案的形式引入，例如A / B测试套件提供的数据？另外一种可能性是解决方案永远没法完全的移除，由于它起着相当重要的做用，就像分析脚本同样。这就像在游泳池里扔床垫：扔进去容易，但拖出来几乎是不可能的。

在任何状况下，若是你不询问便没法肯定第三方脚本是否会继续存在。实际上，若是你发现解决方案是临时的，则能够制定计划，一旦解决了问题，便最终将其从网站中删除。

若是出现问题，谁是联络人？

当第三方解决方案就位时，在出现问题时必须有人做为联络人。

我已经看到了第三方脚本失控时会发生的事情（太常见了）。例如，因为市场营销人员没有清除旧的标记或完成A / B测试致使标记管理器或A / B测试框架的 JavaScript 缓慢且隐式地增加。正是因为这些缘由，你的网站上目前使用的第三方解决方案的责任须要由组织中的特定人员承担。在每种状况下，该责任人承担的责任都会有所不一样，但可能包括：

按期监视第三方脚本的占用空间；
进行维护以确保第三方脚本不会失控；
偶尔举行会议，讨论该供应商与你的组织的关系的将来；
识别多个第三方之间的功能重叠，以及是否能够消除潜在的冗余；
关注正在进行的研究，特别是鉴别速度更快的替代方案，这些替代方案能够更好地替代速度较慢的第三方脚本。

在这种状况下，责任感毫不是同事所承担麻烦的、苛刻的义务，而应该是一种鼓励同事保持优秀思想道德素质的练习。由于若是没有责任感，第三方脚本对你网站的不良影响将被忽略，直到它变成房间里使人不快的食人魔，再也没法忽略。为第三方解决方案分配责任人能够帮助防止这种状况的发生。

确保负责任地使用第三方解决方案

若是你可以制定一个缓解计划，并让每一个人都参与进来，那么确保负责任地使用第三方解决方案的工做就能够开始了。幸运的是，实际的技术工做将比试图与人争论更容易。因此，若是你已经作到了这一步，你所须要的就是时间和坚持。

仅加载必要的内容

这看起来是显而易见的，仅加载必要的内容。从我看到的未使用的第一方 JavaScript 的加载量（更不用说第三方 JavaScript）来看，这显然是一个问题。这就像试图经过将杂物塞入壁橱来打扫房间同样。不管是否实际须要它们，在每一个页面上都加载第三方脚本的状况并很多见，所以请联系你的联络人以找出哪些页面须要哪些第三方脚本。

例如，我一个老客户使用一个流行的第三方工具在多个品牌网站上得到一个指定产品的零售商列表。它展现了清晰的价值，但该脚本只须要出如今网站的产品详细信息页面上。实际上，它经常被加载到每一个页面。从不属于此脚本的页面中剔除此脚本能够显著提升非产品详细信息页面的性能。

弄清楚哪些页面须要哪些第三方脚本须要你作一些非技术性的工做。实际上，你必须从办公桌前站起来，与被指派负责你正在处理的第三方解决方案的人进行交谈。这对我来讲是一项很是困难的工做，但当真诚的合做发生，并最终实现良好的结果时，这是值得的。

自托管你的第三方脚本

这个建议绝对不是秘密。我甚至在本系列的前一篇文章中提到过它，在这里我仍然建议：你应该尽量多地自行托管第三方资源。这是否可行取决于所讨论的第三方脚本。

你是从Google的托管库，cdnjs或其它相似的托管库中获取某个框架吗？如今就自我托管那个资源。

Casper找到了一种方法来自我托管他们的优化脚本，并显着减小了开始渲染时间。这确实令人们意识到，第三方资源的一个主要危害是，它们仅存在于其余服务器上，这是咱们遇到的最糟糕的性能瓶颈之一。

若是你但愿自托管分析解决方案或相似类型的脚本，则自托管它的难度更高。你可能会发现，有些第三方脚本根本没法自托管，但这并不意味着不值得花时间去解决。若是你发现自托管不是第三方脚本的选项，不要担忧，你还能够尝试其余缓解方法。

减小跨域链接的延迟

若是你不能自托管第三方脚本，那么最好是预先链接到托管它们的服务器。WebPageTest 的链接视图很是出色地向你展现了网站从哪些服务器收集资源，以及与这些服务器创建链接所需的延迟。

WebPageTest’s Connection View shows all the different servers a page requests resources from during load.

预链接是让浏览器在发现它们以前就创建了到第三方服务器的链接，可以有效的减小延迟。解析HTML须要时间，并且解析器常常被样式表和其余脚本阻塞。若是你不能自托管第三方脚本，那么预链接就很是有意义。

也许不预加载第三方脚本

正如Andy Davies所指出的，资源预加载一开始听起来很难以想象，直到你考虑到它可能会拔苗助长。若是你不熟悉预加载，那么它与预链接相似，它指示浏览器更快地获取特定的资源。

预加载的缺点是，虽然它能够确保尽快加载资源，但它会更改该资源的发现顺序。每当咱们这样作时，咱们都在暗指其余资源不那么重要，包括对渲染甚至核心功能相当重要的资源。

能够确定的是，你的大多数第三方代码对网站功能的重要性不如你本身的代码。也就是说，若是必须预加载第三方资源，请确保仅对页面呈现起到相当重要的第三方脚本执行此操做。

若是你发现你的网站的初始呈现依赖于第三方脚本，请参考你的缓解计划，看看你能够作些什么来消除或改善你对它的依赖。依靠第三方来实现核心功能历来都不是一个好主意，由于你将大量控制权交给了那些可能并不关心你的最佳利益的人。

延迟加载非必需的第三方脚本

最好的请求就是没有请求。若是你有一个不须要当即加载的第三方脚本，请考虑使用Intersection Observer来延迟加载它。这是滚动到 viewport 中时延迟加载Facebook Like按钮的示例:

let loadedFbScript = false;

const intersectionListener = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if ((entry.isIntersecting || entry.intersectionRatio) && !loadedFbScript) {
      const scriptEl = document.createElement("script");

      scriptEl.defer = true;
      scriptEl.crossOrigin = "anonymous";
      scriptEl.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
      scriptEl.onload = () => {
        loadedFbScript = true;
      };
      
      document.body.append(scriptEl);
    }
  });
});

intersectionListener.observe(document.querySelector(".fb-like"));
复制代码

在上面的代码片断中，咱们首先设置一个变量来跟踪是否加载了Facebook SDK JavaScript。而后，建立一个IntersectionListener来检查观察到的元素是否在 viewport 中，以及 Facebook SDK 是否已经加载。若是 SDK JavaScript 没有被加载，对它的引用将被注入到DOM中，这将引起对它的请求。

你不能延迟加载每一个第三方脚本。其中一些须要在页面加载时执行。不管如何，请作一些检查工做，看看是否能够延迟加载一部分第三方JavaScript。

当我建议延迟加载第三方脚本时，我从同事那里听到的一个常见问题是，它会延迟第三方提供的任何交互。这是一个合理的问题，由于当你延迟加载任何内容时，资源加载可能会出现明显的延迟。在某种程度上，你能够经过资源预取来解决这个问题。这与咱们前面讨论过的预加载不一样。预取会消耗至关数量的数据，可是预取资源的优先级较低，而且不太可能与关键资源争夺带宽。

在这个问题上

密切关注第三方 JavaScript 须要一种近乎高度警戒的责任感。当你意识到技术债务的糟糕表现时，你会很天然地陷入这样一种状态：你会像对待其余技术债务同样对待它。

依靠第三方来进行重构是一项须要你按期执行的工做，好比清理标记管理器和A/B测试、整合第三方解决方案、移除任何再也不须要的解决方案，以及应用上面讨论的编码技术。此外，你须要与你的团队合做，以循环的方式解决这个技术债务。这种工做不能被自动化，须要你与实际的人进行面对面、同步的对话。

若是你已经习惯于周期性地执行“cleanup sprints”制度，那么这就是你处理与性能相关的技术债务的时间和空间，无论它涉及到第三方代码仍是第一方代码。特性开发是有时间的，但这段时间不该该包含你的所有工做时间。只专一于功能开发的开发团队注定会被技术债务彻底消耗掉，这是不可避免的。

所以，在本系列的第四部分（也是最后一部分）中，咱们将讨论在流程的上下文中负责地使用JavaScript意味着什么。在这里，咱们将探讨如何将您的组织联合起来，使您的网站更快、更容易访问，从而使每一个人、任何地方都更容易使用。

若是你以为这篇内容对你有价值，请点赞，并关注咱们的官网和咱们的微信公众号(WecTeam)，每周都有优质文章推送：

img10.360buyimg.com/wq/jfs/t1/4…