作为 Mozilla 的前端开发人员，我最终会参与到大型网站的开发工作中，而这些网站已经存在了很长时间。在处理大规模的遗留代码时会遇到很多有趣的挑战，但从头开始重建通常不是一种选择。

另一方面，View Source 大会 的网站是一个小型网站。因此，当我们决定放弃 WordPress 时，我们有机会从头开始。

以下是一些我们做出的架构决策的亮点，这些决策让网站变得更快、更安全、更可靠。

静态网站

当用户请求来自像 WordPress 这样的内容管理系统 (CMS) 的页面时，服务器会从数据库和模板中将其组合在一起。这需要服务器花费一小段时间。当像这样在请求时构建网站时，我们称之为“动态”网站。

当用户请求来自静态网站的页面时，服务器只需要找到并提供一个文件。它更快，占用更少的资源。我们使用了一个 静态网站生成器 来生成我们的文件，然后将其传输到服务器。

静态文件也比动态网站更容易复制，这意味着我们可以将我们的静态网站复制到全球不同的 CDN (内容交付网络)。将我们的内容靠近用户是减少 延迟 的一种非常有效的方式，而延迟是快速交付网站的最大障碍之一。

离线优先

一个 服务工作者 是在浏览器中运行的 JavaScript，但不是作为页面的一部分。服务工作者最常见的用途是监视网络请求，并代替服务器做出响应。

我想确保会议参与者即使没有 Wi-Fi 也可以访问活动日程表。因此，当用户访问网站时，支持服务工作者的浏览器会自动缓存会议日程表。

如果用户在没有网络连接的情况下返回网站，服务工作者会使用缓存的日程表回复请求。

我对 卫报、Jeremy Keith 和其他已经使用服务工作者的开发人员发布的文档表示感谢。

移动优先

当响应式网页设计首次成为行业标准时，行业标准是向所有浏览器提供完整的桌面网站，并附带大量额外的代码来告诉移动浏览器哪些部分需要删除才能生成简化的移动版本。随着移动设备的普及，移动优先 开发方法出现了。移动优先首先提供网站移动版本的代码和内容，然后更大的、更强大的台式计算机再完成创建更好的大屏幕体验的工作。

View Source Conf 网站最初是一个最小的移动友好版本。然后 CSS 中的媒体查询 和 JavaScript 中的媒体查询 为更大屏幕添加了更复杂的布局指令。

SVG

我为徽标和图标使用了内联 SVG。它们在视网膜屏幕上看起来更清晰，而且由于它们是内联的，因此不需要下载任何额外的资产。内联也意味着我可以在我们的打印样式中 更改徽标的颜色。这是我第一次 创建可访问的 SVG。

无脚本

View Source 网站上的所有内容和功能都可以在禁用 JavaScript 的情况下正常运行。我们不是向旧版浏览器发送垫片和 polyfill 来使它们处理更新的 JavaScript 功能，而是通过告诉它们根本不要加载 JavaScript 来支持这些浏览器。

这意味着我们可以编写现代的 JavaScript！它还简化了测试。功能较弱的浏览器只会获得功能性、可读的内容，而不会出现奇怪的 JavaScript 错误。

这不是一个新主意，它是 渐进增强 与 BBC 新闻的“Cut the Mustard”测试 相结合的结果。

HTTPS

HTTPS 保护用户隐私和安全，并且 Let’s Encrypt 是免费的。您可以使用 Strict-Transport-Security 标头 告诉浏览器只通过 HTTPS 加载您的网站。

请勿跟踪

我们使用 Google Analytics 来衡量网站流量，并尝试提高我们的转化率，但我们尊重启用了 请勿跟踪 的用户的隐私。通过 检测请勿跟踪设置，我们可以避免向他们提供 Google Analytics 文件。如果用户未设置请勿跟踪，但安装了广告拦截器，则我们所有的代码都会运行，而无需初始化 Google Analytics。

View Source

在 2017 年 10 月 27 日举行的 伦敦 View Source 大会 上，聆听行业领袖讲述关于 Web 性能、安全、可靠性、CSS 网格等主题的演讲。查看 完整日程表！或者 观看去年的演讲视频。