停止对 Internet Explorer 的支持意味着什么对 Maersk.com 客户和开发者的支持。
我叫 Steve Workman，是 Maersk.com 的首席工程师。Maersk 是集成式供应链物流领域的全球领先者，118 年来一直帮助客户在全球范围内运输商品，20 多年来在线预订服务。在 Microsoft 于 2022 年 6 月正式停止支持 Internet Explorer (IE) 后，@Maersk 于 2022 年 5 月初在面向客户的系统上正式停止支持 IE。这标志着网络新时代的结束，新的时代也开始了。
我于 2018 年加入了 Maersk，我的第一个项目是构建一个新的全局导航栏。它必须具备以下特点：完全可测试、易于在全球范围内部署和更新（无需停机）、移动优先、响应迅速、支持多个品牌、可配置、本地化为 11 种语言...并且支持 IE9。
2018 年，Windows 7 及其默认浏览器 IE9 仍然非常受欢迎，Windows 10 和 IE11 仅在 2020 年初才达到临界数量（根据统计计数器）。查看数据后，我们发现大量交易来自使用 IE9 或更糟糕的是 IE11 兼容模式的客户。这些流量明显偏向新兴市场以及 Maersk 客户群快速增长的地区。
如果导航菜单不起作用，则很难找到登录按钮。如果登录失败，他们将无法预订集装箱，而您突然就遇到了由旧版浏览器导致的严重问题。
为解决此问题，我们对导航组件和所有未来的 Web 应用采取了渐进增强的做法。我们会让它“正常运行”，但可能需要使用大量的 polyfill 和限制才能实现这一点。例如，IE 不支持 Fetch API，但我们为这些浏览器提供了可追溯到 IE10 的 polyfill。对于 IE9，我们在单独的文件中编写了 XMLHttpRequest 调用，以便仅在无法对 fetch 进行多重填充的情况下加载。
在停止支持 IE9 时，我们只剩下几个客户，因此可以轻松地从我们的应用程序中删除此代码，不用付出太多努力，就可以为使用现代浏览器的用户带来最大的好处。
随着 Maersk 的数字化转型不断推进，我们使用 VueJS 为网站的许多部分构建了微前端。Vue 具有许多可让其适应未来的功能，从适用于高级树摇和软件包优化的出色预设配置，到现代模式（可构建两个版本的应用：一个版本使用最新的 ES 模块语法，适用于长效浏览器；另一个版本适用于不理解 ES6 模块的旧版应用）。此旧版会提供给 IE 等浏览器，而仅仅因为浏览器缺少的功能数量，其 gzip 压缩的 polyfill 软件包通常会大 100KB。
我们发现，我们还可以使用大多数现代 CSS 布局技术，如 CSS 网格，这要归功于 Microsoft 早在 IE10 中就开始实施该规范。借助 autoprefixer 和 这篇 CSS Tricks 文章，我们学会了如何正确命名网页的不同区域，从而打造了一个轻量、适用于任何项目且极其灵活的布局系统。不过，我们还是遇到了一些兼容性问题，花了大量时间才解决。
突然之间，我们又回到了成本效益分析阶段，不过这次是针对任何版本的 IE，就像 IE9 一样，需要在支持所有用户和为每个项目耗费数周的痛苦开发时间之间进行权衡。我们坚信使用新型浏览器能为我们的客户带来更好的体验，因此在用户访问网站时，已迫不及待地离开了 IE。我们发现，对于养成了使用 IE 与我们互动的习惯的活跃客户，这种做法在小范围内取得了成功。这条消息不错，但不足以完成计算。
随着来自爱尔兰的访问的减少，Maersk 决定追随其他许多人的领导，并结束对爱尔兰的官方支持，尽管数据仍然显示我们应该支持它。那么，为什么是现在？
简单地说，Web 平台已经发展到 IE11 无法满足我们需求的地步，即使使用大量的 polyfill 也是如此。以导航组件为例，在现代 Web 平台中，这是一个自定义元素，具有自己的封装样式，由 CSS 变量和容器查询驱动，因此它可以控制一个组件中的所有内容。如果没有平台的这些部分，这些组件的样式可从应用中完全更改，并且样式可能会泄漏到其他组件或泄漏回应用。您可以使用 polyfill 来模拟此处的大部分功能，包括自定义元素、ShadyCSS、ShadyDOM 和 template 元素。
在实践中，这些 polyfill 非常适用于孤立的组件，但在复杂应用中组合多个组件时，IE 会卡住，白屏几十秒，而 JavaScript 运行时会尝试第 42 次计算样式树。简而言之，为了支持浏览器，用户体验受到了严重影响。
过去，我们会遇到小中断 — polyfill 可能会在首次绘制时增加 0.5 秒，但不会增加。这次情况不同，这些应用变得无法使用。面对现代 Web 平台的复杂性，polyfill 只能发挥有限的作用。
您知道自我们停止支持 IE 以来发生了什么吗？非常非常少。用户未曾收到过大量客户支持服务工单或负面反馈。我们的工程师更开心了，我们的应用有了升级到 Vue 3 的路径（由于无法对代理对象进行多重填充，因此 Vue 3 不支持 IE11），并且捆绑包大小更小。全面支持 CSS 变量和可变字体，让各个品牌的主题设置变得更简单；此外，能够在 Vue 的单文件组件中使用令牌还能降低认知复杂性，从而提升开发者体验。
从客户的角度来看，IE 的使用率继续缓慢下降。我们尚未从网站上停用 IE，但随着渐进式增强功能转变为适当降级，功能和应用将无法再使用。客户将受益于我们技术的进步，因为最佳实践、无障碍功能和设计已融入不断演变的基于 Lit 的设计系统，该系统可与现在或未来的任何框架完全互操作，从而让客户获得更一致的网站体验。
我非常期待在公司内部使用新的网络平台功能 - 从利用深色模式使船只系统夜间更易于使用，到使用 Web 蓝牙、WebXR 和 PWA，让我们的 Web 应用能够在任何条件下与周围的现实世界互动。感谢 Internet Explorer 为我们提供的诸多便利；现在，我们可以随时随地使用 Web 平台了。