[Web翻译]放弃对IE11的支持是渐进式的提升TL;DR 如果你必须选择，你应该优先考虑没有JavaScript的用户

原文地址：blog.carlmjohnson.net/post/2020/t…

原文作者：blog.carlmjohnson.net

发布时间：2020年11月11日

TL;DR 如果你必须选择，你应该优先考虑没有JavaScript的用户，而不是使用旧JavaScript的用户。

如果你是一个正在工作的Web开发人员，可能早就该停止将你的现代JavaScript移植到Internet Explorer的ES5中了。任何花费在让您的JavaScript在IE11中工作的时间或精力都是浪费的，这些时间可以更好地用于为没有JavaScript的用户创造更好的体验。将您的资源从Internet Explorer移到没有JavaScript的用户面前，将让您提高网站的SEO和可访问性，同时为大家提供更好的体验。

首先，关于这个建议是给谁的一些说明。我假设你正在为一个没有质量保证测试部门的小团队工作，制作一个专注于内容的网站。如果你有一个大型的团队，实际进行IE11的QA测试，这个建议可能不适用你的情况。如果你只是为了好玩而做个人项目，你应该在几年前就已经放弃了ES5。如果你做的更多的是应用而不是内容网站，你可能应该在几年前就把IE11砍掉，但计算方法更复杂，而且是针对具体网站的。

为什么要放弃对IE11 JavaScript的支持？

首先，根据Google Analytics的数据，Internet Explorer占我工作流量的比例不到1%。人们有时会把这个问题转开，认为1%的大数也是一个大数。如果你有1亿次点击，1%就是100万次点击! 但反过来说，9900万次点击不是Internet Explorer，也不是针对Internet Explorer的优化所能帮助的。更重要的是这个数字一直在持续下降。即使就在我的工作网站存在的一年半时间里，它也在下降。以前是接近2%。除此之外，在公司/企业设置之外，这些使用Internet Explorer浏览你的网站的电脑大多也会安装Chrome浏览器，大约100%的用户也会拥有一部智能手机，如果他们的电脑不能正确显示你的网站，他们可以用它来浏览。有关的电脑会很旧，而且性能很差，假设你真的能在第一时间让JavaScript运行的话。

让我们将其与我们可以优化的其他用户进行对比。视障读者的数量是稳定的，如果没有一些医疗技术上的突破，他们的数量是不会下降的。如果网站在他们面前的设备中无法运行，视障读者不能随便使用其他设备。事实上，即使是身体视力正常的用户，在开车或走路时也会出现障碍，在我看来，随着语音助手的普及和使用的便捷，视力正常的用户让网站朗读给他们听最终会成为普遍现象，这是不可避免的。另外，在法律上也必须为视障读者提供合理的便利。

没有JavaScript的用户是另一个重要的考虑因素。正如Jake Archibald所说："当你的用户在下载你的JS时，他们都是非JS的。" 而且要记住，有时候，你的用户的连接会掉线，JavaScript永远不会加载。但除此之外，像Opera Mini这样的浏览器和NoScript这样的扩展程序或过于激进的广告拦截器已经和Internet Explorer的用户差不多了，而且它们不会消失。很难估计JavaScript被破坏或禁用的人数，但似乎每年都很稳定，因为根本原因不可能改变，不像IE11的使用情况。年复一年，旧电脑会被更换，IE11也会逐渐消失。而不喜欢广告和连接不好则会一直存在。还有就是你的网站最重要的用户没有JavaScript：网络蜘蛛和搜索引擎。虽然理论上Google确实会在执行JavaScript的同时使用无头浏览器来搜刮网站，但实际上，如果你优化你的内容，使之在没有JavaScript的情况下也能工作，你还是会获得更好的SEO效果，而且还有其他非Google的蜘蛛，你可能也想让它们抓取你的网站，比如为聊天和社交媒体添加链接预览的微浏览器。

如果你正在运行一个没有QA团队的小网站，可能值得现在就去Browserling看看你是否一开始就在Internet Explorer中工作。Browserling可以让你在有限的时间内免费从你自己的浏览器中运行一个带有Internet Explorer的虚拟电脑，所以这可能是最简单的方法，在不需要安装任何东西的情况下对你的Internet Explorer支持进行快速的低努力烟雾测试。只要打开一个标签页，看看你的网站，看看结果是否让你吃惊。

我见过一些开发者（尤其是我自己）因为认为Babel和Autoprefixer已经解决了IE11的所有问题而被烧死。您可能已经放弃了对IE11的支持，只是您还不知道而已。我工作的网站在IE浏览器中断了几个月的时间，却没有读者投诉。我重新设计的一个网站在重新设计后，只接到一个读者咨询，说是一个小部件在IE11中坏了。当我告诉读者尝试用Chrome浏览器加载页面时，他似乎很满意。最近，IE11在我的网站上出现了一些可怕的渲染错误，一连几天或几个月，引发的读者投诉为零。如果我自己不进行QA，就没有人会帮我做。

如果你认为你的代码可以工作，但没有实际的QA测试，这可能会导致最糟糕的两个世界：代码臃肿的额外的IE11，仍然不工作，反正。仅仅移植到ES5是不够的，你还需要对你使用的每一个缺失的DOM API进行填充，这可能是一个非常复杂和臃肿的命题。

基本上，你可能想要支持的目标网络平台有三个。

现代浏览器
没有JavaScript的浏览器
Internet Explorer 11 (如果你支持<11, 😱)

如果你试图支持IE11，但没有真正进行QA测试，你可能最终只能在现代浏览器中工作。争取既支持现代浏览器，又支持无JS浏览器，并且真正成功，总比尝试支持IE11而默默失败要好。

除了优化IE11，你还应该做什么？

网络是建立在逐步增强的基础上的。为传统浏览器提供 "足够好 "的服务，并为你的大部分用户群保存增强功能。

2017年，Philip Walton提倡JavaScript的 "module/nomodule "模式。这可以简化为今天的 "模块/最低限度 "模式。Walton写道。

大多数开发者认为<script type="module">是加载ES模块的方式（当然这是事实），但<script type="module">还有一个更直接、更实用的用途--加载具有ES2015+功能的普通JavaScript文件，并且知道浏览器可以处理它！

这就是为什么<script type="module">可以在浏览器中使用。

换句话说，每个支持<script type="module">的浏览器也支持您所熟知和喜爱的大多数ES2015+功能。

本质上，如果你将脚本元素的类型属性设置为未知值，浏览器将直接忽略该脚本。这样做的效果是，IE11将忽略任何<script type="module">标签的内容。而现代浏览器则会忽略<script nomodule>标签的内容。这样就可以大致将你的JavaScript瞄准它的目标平台。

Walton继续提倡用Webpack创建两个版本的同一JavaScript捆绑包。给现代浏览器发送一个较小的、特定模块的ES2015版本，而给老的浏览器发送一个较大的、转码的、多填充的ES5版本。

正如我在上面写的那样，我认为仅仅使用Babel将你的JavaScript变成ES5，如果没有持续的QA警惕，是不能相信它能真正发挥作用的。您的代码中一个看似微不足道的变化可能会悄悄地破坏IE11的支持，除非您不断地重新检查IE11，否则您可能在几个月或几年内都不会知道。与其采取这种徒劳无功的推倒重来的策略，我主张尽量少给IE11用户发送JavaScript，最好是一个都不发，但实际操作起来，可能只是你的广告和分析，然后实际测试它是否有效。

第一步是决定你的组织优先级是什么。如今，大多数软件工程师都熟悉最小可行产品的概念。你愿意提供给IE用户的最低可行体验是什么？也许你还没有准备好完全抛弃他们，只提供一个破碎的页面和一个 "在Chrome浏览器中最佳浏览 "的图标。但你可能愿意说，只要他们浏览你的广告，你就不在乎他们是否能绕过付费墙或不能评论文章。在我的情况下，我希望使用Internet Explorer的读者能够阅读我的文章，并出现在我的分析中。其他的一切，我都愿意削减或牺牲，以腾出资源来创造更好的无JS体验。如果这是我最起码的可行体验，我将创建它，并测试它是否真的有效，然后停止迭代，这样我就不会因为我未来对增强型现代浏览器体验的改变而不小心破坏它。

为ES5用户制作一个单独的体验，而不是仅仅回传你的现代JS，这看起来好像更费劲，但其实不然。现代前端JavaScript的整个要点是，所有的东西都被分解成小模块，并在开发中被导入和捆绑。所以，这里是我的ES5/IE11构建的整个入口点。

import "../utils/add-listeners.js";

// eslint-disable-next-line no-console
console.warn("could not load enhancements");
document.body.classList.add("has-old-js");

一旦导入被加载、Babel'd和minifed，它的体积就会达到17KB（真正的KB，不是月球重量！）。基本上，所有的监听器都是添加一些分析和JavaScript来使菜单汉堡包按钮工作。.has-old-js类会触发一个CSS实用类来有条件地显示和隐藏东西。HTML中的<noscript>标签也是如此，模块脚本上的onerror handler也是如此。这让我可以向现代浏览器展示一种体验，并向其他人展示第二种后备体验。因为这段代码基本上是一成不变的，所以我不用担心新的JavaScript功能会在我背后巧妙地破坏IE11。因为它只是一个普通的<noscript>标签，我可以在普通的浏览器中测试它，只需短暂地关闭JavaScript。我可以只对它进行一次QA，然后相信它能随着网站新功能的推出而继续工作。只要IE11用户继续出现在我的分析结果中，我就会知道它仍然在工作。

我的JavaScript入口点的增强版导入了相同的监听器文件，自然，但它也导入了十几个不同的小增强模块。最后它的体积是51KB，比IE11版本大了3倍，但还是比jQuery小了40%。(谢谢你，Alpine.js!)它是由ESBuild捆绑的，并且利用了一些小型化的技巧，比如保留模板字面和箭头函数。通过Babel for ES5移植运行它，即使没有任何polyfills，也会增加30% 的大小。在他用自己博客的JavaScript进行测试时，Philip Walton发现ES2015+版本的大小约为ES5版本的一半。重要的是，将ES5支持降到最低可行的体验，可以为你的所有用户节省资源，无论他们是否使用现代浏览器。

具体技术取自我的工作现场

像现在所有的新闻网站一样，Spotlight PA有一个很大的模态屏幕，当你开始阅读一篇文章时，会提示你注册我们的新闻通讯。(是的，是的，你可以尽情的抱怨，实际上人们确实因为这个提示而注册了时事通讯。这就是我们展示它的原因）。) 对于IE11该怎么做？很简单：什么也不用做。尽管这个提示对于为我们的电子报吸引新读者很有用，但我们没有理由担心有1%的读者可能在某个浏览器中看不到这个提示。我们有其他文字表明有一个通讯，很可能读者会在一个更好的浏览器中回来，比如他们的手机，然后看到模式。我们的简讯1%的增长很容易被周而复始的噪音所淹没，比起追逐IE11用户，有很多更好的方法来提高简讯的增长。第一个主要的方法是做渐进式的增强，就是直接省略不必要的网站增强。

假设你真的用IE11浏览了spotlightpa.org/newsletters 。在那个页面上，我们显示了一些小的图形来推广每一个不同的新闻通讯，当你点击图形时，它就会增长到显示一个特定新闻通讯的注册表格。如何在没有JavaScript的情况下复制这种情况呢？进行渐进式增强的第二种主要方式是选择性地显示静态布局。无JavaScript的体验是，隐藏的盒子已经被展开，而不是点击显示一个表单。我有两个实用类，.no-js-only和.no-js-hide，我可以根据一个元素对无js用户是适用还是不适用，用这两个类来选择性的显示或隐藏这个元素。页面看起来有点杂乱，所有的注册表都已经显示出来了，但基本上还是可以使用的。

定期/通讯/页面

No-JS /newsletter/page

同样的，在一篇文章的底部，我们有三个相关文章的列表和一个 "阅读更多 "按钮。如果你有现代JavaScript，"阅读更多 "按钮使用AJAX将更多的文章链接和缩略图添加到列表中。如果你没有JavaScript，"阅读更多 "按钮就是一个新闻档案的链接。第三种主要的渐进式增强方式是在不能依靠动态HTML时添加链接。

我们网站上的搜索按钮会打开一个模态，通过AJAX与Algolia一起工作，但如果你没有JavaScript，它就会变成一个链接到spotlightpa.org/search ，它只是为你提供了一个表单，将一个site:www.spotlightpa.org前缀的搜索提交给Google。第四种技术则是让别人来解决你的问题。作为这个技术的另一个例子，我们有一个用Vue写的捐赠表格，落到将读者发送到捐赠处理器的默认站点。我们把Vue表单写成了他们支付网关的前端，因为支付处理网站有点笨拙和丑陋，但作为最后的手段，它已经足够好了。

所有这些技术的优点是，当需要测试你的网站的无JavaScript版本时，你需要做的只是在你已经用于开发的浏览器中暂时关闭JavaScript，而不是跳槽到一个足够好的环境中运行一个垂死的浏览器，以进行实际的开发而不是单纯的烟雾测试。

通过一些小的省略和链接，你可以创建一个在ES6+的现代浏览器中运行良好的网站，在没有JavaScript的浏览器中也可以接受。对于没有资源进行大量QA的团队来说，这种方法更具有可持续性，对于非标准浏览器的用户来说也更有利。试图在IE11中重新创建在现代浏览器中已经可以使用的功能，是一项注定要被忽视的吃力不讨好的工作。创造性地找到新的方法，在没有JavaScript的情况下实现足够的功能，是一种挑战和乐趣。你会对你想出的东西感到惊讶。

帮助你的IE11用户的最好方法是为你的非JS用户提供良好的体验，并与他们分享这种体验，而不是向他们发送未经测试且存在错误的体验，这也会拖慢使用现代浏览器的用户的体验。

感谢News Nerdery和Dan Simmons-Ritchie对本文草稿的反馈。

#accessibility #frontend #Internet Explorer #JavaScript #News Nerdery #Philip Walton #programming #progressive enhancement #Spotlight PA #web development

通过www.DeepL.com/Translator（免费版）翻译