每周平台新闻:苹果部署 Web Components、渐进式 HTML 渲染、自托管关键资源

Avatar of Šime Vidas
Šime Vidas

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

在本周的综述中,苹果开始使用 Web Components,Instagram 如何即时加载脚本,以及一些关于自托管关键资源的思考。

苹果部署使用 Stencil 构建的 Web Components

新的 Apple Music 网页应用(测试版)使用 JavaScript 框架(Ember.js),但也使用标准的 Web Components,例如<apple-music-video-player></apple-music-video-player>,这些组件使用 Stencil(一个 Web Components 编译器)构建。

Stencil 是一种构建时工具,可以生成具有最少开销的标准 Web Components,同时提供核心功能,例如模板、状态管理和路由,以及代码分割和延迟加载等性能特性。

苹果刚刚将其生产环境中部署了近 50 个 Web Components,这些组件为其一个主要的应用提供支持,该应用在其收入和战略价值方面具有重要意义。你不能再一本正经地说“没有人使用 Web Components”或“它们解决的问题并不存在,或者已经被用户领域更好地解决了”。

(来自 Max Lynch

Instagram 使用分块传输编码和渐进式 HTML 渲染

Instagram 的网站使用 HTTP 分块传输编码将 HTML 文档的内容流式传输到浏览器,因为页面的每个部分都是在服务器上生成的。

我们可以几乎立即将 HTML 刷新到浏览器……这允许浏览器在服务器忙于生成页面其余部分的动态数据时开始下载脚本和样式表。

他们还使用此技术将 JSON 数据刷新到 <script> 元素中的页面。客户端脚本等待这些数据(使用Promise),而不是通过 XHR 请求它们。

(来自 Glenn Conner

考虑自托管您的关键资源

圣母大学网站的一个部分过去是从 Google 的 CDN 加载 jQuery,这可能导致从中国访问该网站时加载时间非常长(100 秒以上)。他们通过自托管 jQuery 解决了这个问题。

(来自 Erik Runyon


在我的每周 星期日版 中阅读更多新闻。访问 webplatform.news 获取更多信息。