企业官网建设流程全解析

• 文档/教程
• 示例工程

Southstreet 是 Filament Group 推出的渐进增强（Progressive Enhancement）工作流，它的核心是一套被称为 "Cutting the Mustard"（剪掉芥末，意为"不达标的浏览器不再照顾"）的浏览器能力检测策略：先用一行业务无关的特性测试判断浏览器"够不够格"，不够格就直接放弃加载所有增强资源，让旧设备轻装上阵。本文结合仓库中可直接运行的示例，用 3 步讲清这套策略的写法。

为什么旧设备需要"轻装上阵"

传统做法是给所有浏览器一视同仁地加载完整的 CSS/JS/字体，结果是低性能设备被一堆用不上的代码拖慢页面。Southstreet 的思路反过来：

• 🎯基础体验由服务器直出：页面核心内容不依赖任何 JS，所有设备都能用；
• 🚀增强体验按需投递：只有通过能力检测的浏览器，才会获得额外的 JavaScript、CSS 和字体；
• 📉重复访问更省：配合 cookie 让老访客跳过内联样式，直接引用已缓存的样式表。

整套逻辑浓缩在 _includes/enhance.js 这个"即插即用"的引导脚本里，配合 demo.html 模板就能完整跑通。

第 1 步：用一行特性测试写出能力检测

"Cutting the Mustard" 的核心不是识别"你是谁"（User-Agent 嗅探），而是测试"你会不会做"（特性检测）。仓库中的写法在 _includes/enhance.js：

/* Enhancements for qualified browsers - “Cutting the Mustard” */ if( !( "querySelector" in doc ) ){ // basic browsers: last stop here! return; }

只有 3 行，却包含全部关键决策：

1. 选一个"有代表性"的 API作为门槛。这里选的是document.querySelector，它天然把 IE8+ 及所有现代浏览器划入"合格区"，把更老的浏览器排除在外；
2. 不合格立即return：脚本到此为止，后面所有增强逻辑都不会执行，旧设备一个额外的 JS/CSS 请求都不会发出；
3. 门槛可以按需替换：注释里也提到，你可以换成任何能代表"主力浏览器"的能力（比如querySelectorAll、matchMedia），业务场景不同、门槛就不同。

💡 术语小知识："Cutting the Mustard" 由本项目的作者 Scott Jehl 于 2009 年提出，意思是"只有会嚼芥末（支持现代 Web 能力）的浏览器，才配得到同等对待"。

第 2 步：只向合格浏览器投递增强资源

通过检测后，enhance.js 会在 _includes/enhance.js 依次做三件事：

配套的页面模板 demo.html 只需要声明两个 meta 标签，enhance.js 就会自动按地址加载：

<meta name="fullcss" content="assets/css/full.css"> <meta name="fulljs" content="assets/js/shoestring.ajaxinclude.enhancements.js">

也就是说，开发者只需把 DOM 库、组件脚本拼接压缩成一个小文件（示例中的 assets/js/shoestring.ajaxinclude.enhancements.js），合格浏览器才会在一次请求里拿到它。

值得一提的是"双重保险"：增强脚本自身也会复检一遍，shoestring.ajaxinclude.enhancements.js#L101 中有shoestring.qualified = "querySelectorAll" in doc，即使文件被误加载到不合格浏览器，它也会拒绝执行增强逻辑。

第 3 步：服务端 + cookie 协同，重复访问不再走内联

前两步只解决了"首屏"，第三步优化的是回头客的体验：

1. 首次访问：模板在<head>里内联关键 CSS（示例中的 _includes/critical.css，只含首屏必需样式），同时 enhance.js 在 _includes/enhance.js#L136-L141 里异步加载完整样式表 assets/css/full.css，并写一个 7 天有效期的fullcsscookie；
2. 7 天内再访问：cookie 存在，说明完整 CSS 大概率已被缓存，服务端模板（见 demo.html#L11-L22 中的服务端包含条件）检测到 cookie 后，直接用<link>从 head 引用 full.css，跳过内联；
3. 彻底关闭 JS 的用户：<noscript>标签兜底引用完整 CSS（demo.html#L21），保证样式不丢。

这样页面首屏可用时间被压到极低（README 中提到目标是现代网络上 1 秒内渲染可用页面），且不会重复传输用户已缓存的大文件。

关键文件清单

总结：3 步策略速记

1. 一行测试：选一个有代表性的 API（如querySelector），不合格就return，让旧设备止步于此；
2. 投递增强：合格的浏览器拿到enhanced类名、一次请求的 JS 包和异步字体，增强脚本自身还可二次复检；
3. 记住老访客：cookie + 服务端条件让重复访问跳过内联、直连缓存的完整样式。

这套策略的价值在于：它不需要任何构建工具或框架，一个几百行的enhance.js加一个声明好 meta 的模板就能落地——这正是 Filament Group 把它作为 Southstreet 工作流"第一块基石"的原因 🪨。

• 文档/教程
• 示例工程