前言
思路有点意思。探讨了使用大量小型 HTML 页面来构建网站的方法，以及通过 CSS 过渡实现跨文档视图转换的优势。今日前端早读课文章由 @Jim Nielsen 分享，@飘飘翻译。
译文从这开始～～
这里说的 LLMS 指的是：（L）很多（L）小的（M）HTML 页面（S）。
最近，我对博客进行了一些更新。在设计和开发的过程中，我有了一些新的想法，这让我对自己那种一看到情况就急于用 JavaScript 交互来构建页面元素的本能反应产生了质疑。
随着跨文档视图转换（cross-document view transitions）的支持越来越广泛，我逐渐意识到，相比于在同一页面内通过 JavaScript 增强交互，直接创建两个 HTML 页面并用链接连接起来反而更简单。
【第3308期】腾讯文档前端工程架构改造实践
我把这种方法称为 “大量小型 HTML 页面”（Lots of Little HTML Pages，LLMS）。当我想为网站添加一些 JavaScript 交互功能（比如展开导航菜单、站内搜索、内容筛选）时，我开始问自己：“能不能把它做成一个独立的 HTML 页面，而不是用 JavaScript 按钮动态加载内容？”
我挺喜欢这样的效果。我为每个 “交互” 单独创建一个小型 HTML 页面，然后交给 CSS 处理过渡动画，最终的效果比 JavaScript 版更流畅，而且工作量更少。
请允许我举两个简单的例子。
示例 1：内容筛选
在优化首页时，我希望能按照不同的标准筛选文章，比如：
最开始，我的想法是使用 JavaScript 让用户可以筛选文章列表。
但随着开发的深入，我发现事情变得越来越复杂。每种筛选方式都需要不同的数据集，每个列表的排序逻辑也不一样。本来以为只需要在 DOM 里插入一堆
，然后用 JavaScript 控制显示 / 隐藏，结果却变成了各种
data-x
属性、复杂的排序逻辑等。渐渐地，我意识到这个功能并不适合渐进式增强（progressive enhancement）。
而且，如果我能在服务器（我的静态网站生成器）上直接生成不同的页面，这些问题就迎刃而解了！
于是，我尝试让每种筛选方式都对应一个独立的 HTML 页面，再借助
CSS 视图转换
（view transitions）实现页面间的动画过渡。
几分钟后，我就完成了这个功能！我只需要稍微调整一下 CSS 过渡动画的比例设置，就能获得一个 “选项卡” 式的流畅过渡效果，而且完全不需要 JavaScript！
对于简单的网站来说，这真的感觉像是一个变革。如果你的目标是保持网站简洁，那么使用 “小型 HTML 页面” 这种方式，比传统的 JavaScript 交互更容易实现和维护。
示例 2：导航菜单
这个思路让我进一步思考：也许导航菜单也可以用同样的方式来实现？
通常，我们的做法是：“好，我放一个汉堡菜单图标，点击后显示一个导航栏……” 但后来我想，“要不就干脆弄一个新 HTML 页面？”
由于我使用的是静态网站生成器，创建一个新的 HTML 页面非常简单。几分钟后，我就实现了这个功能 —— 完全不需要客户端 JavaScript！
点击 “菜单” 后，用户会跳转到一个单独的页面，页面上有导航选项，还有一个 “×” 按钮，模拟关闭菜单并返回上一个页面的效果。
我对这个导航方案非常满意，于是连搜索功能也用同样的方法实现了。点击搜索图标后，并不会像传统做法那样用 JavaScript 在当前页面插入新的 HTML 结构并添加动画，而是直接跳转到一个新的搜索页面，由 CSS 处理跨页面动画效果。
当然，这种方法也有一些权衡。但总体来说，我非常喜欢它！开发起来极其简单，维护成本也几乎为零。
我觉得这正是顺应 Web 本身特性的好例子。如果我们改变思维方式，把页面内的交互理解为基于 HTML 页面切换 + CSS 视图转换，而不是完全依赖 JavaScript 进行动态操作，那么构建一个简单的网站就会变得更加轻松！
