文档/教程示例工程【免费下载链接】SouthstreetFilament Groups core tools workflow for delivering rich cross-device web applications项目地址https://gitcode.com/gh_mirrors/so/Southstreet点击查看免费下载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 行却包含全部关键决策选一个有代表性的 API作为门槛。这里选的是document.querySelector它天然把 IE8 及所有现代浏览器划入合格区把更老的浏览器排除在外不合格立即return脚本到此为止后面所有增强逻辑都不会执行旧设备一个额外的 JS/CSS 请求都不会发出门槛可以按需替换注释里也提到你可以换成任何能代表主力浏览器的能力比如querySelectorAll、matchMedia业务场景不同、门槛就不同。 术语小知识Cutting the Mustard 由本项目的作者 Scott Jehl 于 2009 年提出意思是只有会嚼芥末支持现代 Web 能力的浏览器才配得到同等对待。第 2 步只向合格浏览器投递增强资源通过检测后enhance.js 会在 _includes/enhance.js 依次做三件事动作做什么对应源码加类名给html加上enhanced类作为 CSS 选择器钩子enhance.js#L155-L156异步加载 JS读取meta namefulljs用内置的loadJS一次性加载拼接压缩后的增强脚本enhance.js#L162-L165异步加载字体读取meta namefonts用loadCSS异步拉取字体样式不阻塞渲染enhance.js#L173-L176配套的页面模板 demo.html 只需要声明两个 meta 标签enhance.js 就会自动按地址加载meta namefullcss contentassets/css/full.css meta namefulljs contentassets/js/shoestring.ajaxinclude.enhancements.js也就是说开发者只需把 DOM 库、组件脚本拼接压缩成一个小文件示例中的 assets/js/shoestring.ajaxinclude.enhancements.js合格浏览器才会在一次请求里拿到它。值得一提的是双重保险增强脚本自身也会复检一遍shoestring.ajaxinclude.enhancements.js#L101 中有shoestring.qualified querySelectorAll in doc即使文件被误加载到不合格浏览器它也会拒绝执行增强逻辑。第 3 步服务端 cookie 协同重复访问不再走内联前两步只解决了首屏第三步优化的是回头客的体验首次访问模板在head里内联关键 CSS示例中的 _includes/critical.css只含首屏必需样式同时 enhance.js 在 _includes/enhance.js#L136-L141 里异步加载完整样式表 assets/css/full.css并写一个 7 天有效期的fullcsscookie7 天内再访问cookie 存在说明完整 CSS 大概率已被缓存服务端模板见 demo.html#L11-L22 中的服务端包含条件检测到 cookie 后直接用link从 head 引用 full.css跳过内联彻底关闭 JS 的用户noscript标签兜底引用完整 CSSdemo.html#L21保证样式不丢。这样页面首屏可用时间被压到极低README 中提到目标是现代网络上 1 秒内渲染可用页面且不会重复传输用户已缓存的大文件。关键文件清单文件角色_includes/enhance.js能力检测 资源投递的引导脚本核心demo.html完整演示模板meta 声明 服务端条件 noscript 兜底_includes/critical.css首次访问内联的关键 CSSassets/css/full.css异步加载 / 二次访问直连的完整样式表assets/js/shoestring.ajaxinclude.enhancements.js只投给合格浏览器的增强脚本DOM 工具 懒加载内容assets/sample-fragment.html被 AjaxInclude 动态拉取的内容片段README.md工作流完整说明工具选型、CriticalCSS、Grunticon 等总结3 步策略速记一行测试选一个有代表性的 API如querySelector不合格就return让旧设备止步于此投递增强合格的浏览器拿到enhanced类名、一次请求的 JS 包和异步字体增强脚本自身还可二次复检记住老访客cookie 服务端条件让重复访问跳过内联、直连缓存的完整样式。这套策略的价值在于它不需要任何构建工具或框架一个几百行的enhance.js加一个声明好 meta 的模板就能落地——这正是 Filament Group 把它作为 Southstreet 工作流第一块基石的原因 。赞分享文档/教程示例工程【免费下载链接】SouthstreetFilament Groups core tools workflow for delivering rich cross-device web applications项目地址https://gitcode.com/gh_mirrors/so/Southstreet点击查看免费下载相关推荐qiankun 3 浏览器支持指南能力矩阵、运行时检测与 Firefox/原生 ESM 兼容策略qiankun 3 浏览器支持指南能力矩阵、运行时检测与 Firefox/原生 ESM 兼容策略 qiankun v3 彻底告别 IE面向现代浏览器设计其前端微前端Python-fun股票预测工具使用Streamlit和Prophet构建投资分析应用 Python fun股票预测工具使用Streamlit和Prophet构建投资分析应用 想要轻松预测股票走势做出更明智的投资决策吗Python fujenssegers/agent 核心功能详解设备、浏览器、操作系统检测jenssegers/agent 核心功能详解设备、浏览器、操作系统检测 jenssegers/agent 是一个强大的 PHP 用户代理解析库基于 Mob后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考