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