```markdown

# SouthStreet Workflow：打造快速且无障碍的跨设备Web应用程序
 SouthstreetFilament Group's core tools & workflow for delivering rich cross-device web applications项目地址:https://gitcode.com/gh_mirrors/so/Southstreet 




警告：该项目已归档，不再维护。

SouthStreet Workflow是Filament Group开发的一套工具集合，专为实现高效渐进增强的Web应用构建流程而设计。这个工作流的目标是确保我们的网站能够对尽可能广泛的设备提供可达和现代的用户体验。

## 工具介绍

SouthStreet由以下几个独立的GitHub项目组成：

1. **Enhance**：一个小型JavaScript脚手架，用于检测浏览器是否能处理额外的用户界面增强，并以最快最简单的方式加载特定的增强功能。
2. **loadCSS**：异步加载CSS的功能函数。
3. **loadJS**：异步加载JS的功能函数。
4. **cookie**：获取、设置或删除cookies的工具。
5. **criticalCSS**：一个命令行工具，用于提取页面的临界CSS。
6. **Grunticon**：基于grunt的SVG图形工具，带有老浏览器的回退选项。
7. **AjaxInclude**：一个jQuery插件，用于模块化内容构造。
8. **Picturefill**：响应式图片polyfill。

这些工具一起构成了Filament Group渐进增强工作流的核心部分。每个项目都有不同的应用范围，但共享一个目标：通过防止或延迟非关键代码和资产的加载，或提供常见模式的轻量级替代方案，来更快地提供前端代码。

## 初始页面加载工具

以下SouthStreet工具用于初始页面加载步骤：

1. **Enhance v2**：在确定浏览器有能力处理额外的JavaScript和CSS增强后，负责加载特定的增强功能。
2. **CriticalCSS**：在构建过程中运行的任务，用于确定每个模板中渲染顶部页面所需的CSS子集，并将它们写入文件，以便服务器端直接内联到模板的`head`中。
3. **Grunticon**：用于轻松使用SVG图形并提供旧浏览器回退的Grunt工具。

## 二次增强JavaScript文件

以下SouthStreet脚本通常由EnhanceJS有条件地加载，它们与其他可能需要的脚本一起打包在一个文件中：

1. **AjaxInclude**：通过jQuery API实现HTML“include”概念，允许我们交付仅包含最基本内容的轻量级网页，然后自动通过JavaScript懒加载其他内容。
2. **Picturefill**：允许我们在HTML文档中引用多个图像源，根据媒体查询匹配加载合适的图像。

## 应用场景与特点

SouthStreet尤其适用于需要高效、可访问且跨设备一致体验的复杂Web应用。其特点包括：

1. **渐进增强**：优先考虑基本功能，逐步添加高级特性，确保所有设备都能获得可用的体验。
2. **异步加载**：通过loadCSS和loadJS，优化资源加载顺序，避免阻塞页面渲染。
3. **性能优化**：利用criticalCSS减少首屏加载时间，提高页面速度。
4. **灵活集成**：各个组件可以单独使用，适应不同项目需求。

这个项目的示例页面提供了所有这些工具协同工作的演示，展示了如何结合使用这些工具来创建高性能的Web应用。

想了解更多，欢迎访问[Filament Group官网](http://filamentgroup.com/code)，查看更多的开源项目和工具。

尽管SouthStreet代表了我们整体方法的关键组成部分，但在具体项目中，我们会根据具体情况选择最适合的工具。

最后，请注意，虽然SouthStreet仍可作为参考，但由于项目已不再维护，建议寻找当前维护的类似解决方案。

请注意，由于原始项目已经归档并且不被维护，推荐用户寻找当前活跃和维护的同类项目来满足他们的需求。

SouthstreetFilament Group's core tools & workflow for delivering rich cross-device web applications项目地址:https://gitcode.com/gh_mirrors/so/Southstreet