在本周的综述中,苹果开始使用 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 获取更多信息。
谷歌更有可能被中国屏蔽了吗?这么长的加载时间可能是加载失败。90秒看起来像是标准的超时时间。
实际上,我搜索了一下……https://edjiang.com/how-googles-cdn-prevents-your-site-from-loading-in-china-67504845cd04
也许浏览器可以检测到请求由于审查而无法通过,并采取措施防止它长时间阻塞渲染。或者,它们可以根据资源是否阻止渲染来设置不同的超时时间。
由于单个脚本被 ISP 阻止,导致整个页面无法渲染 90 秒以上,这是浏览器可能应该防止的事情……以某种方式。
并非来自 Google 的所有资源都被中国屏蔽。但我认为他们会监控。如果被屏蔽,它将永远无法加载并抛出 404 错误等。