情景描述

开发静态页面 Demo 时，如何解决包含页面片段的问题（比如抽取然后引用相同的 header 和 footer）？
是不是想要在开发静态 HTML 时，也可以像在 JSP 中那样 include 一些可重用的页面片段？
如果有了片段引入，就可以用模块化的思想去组织页面片段，开发多个稍复杂静态页时，结构也变得更清晰了；
开发完静态页后，如果切换成其他后端模板的工作需要交给后端的小伙伴，后端开发者也更容易看懂页面组织的逻辑；

解决方案

方案	特点
使用后端模板引擎(ASP、JSP、PHP…)	服务器端渲染
使用前端模板引擎(EJS、Pug、Nunjucks、Hogan.js ...)	在 Node 环境中使用，相当于服务器端渲染；在 Browser 环境中使用，就是客户端渲染；
使用SSI，即服务器端包含，文件扩展名为.shtml；	服务器端渲染，支持服务器有：Apache httpd、NginX 等
通过AJAX加载，可借助 jQuery 的 .load() 方法	需要HTML元素占位，还是客户端渲染
使用组件化/MVC框架（React的组件、Angular的指令、Vue...）	客户端渲染
FIS 这类集成方案里面也有 html 嵌入功能
自行编写小工具，参见这篇张鑫旭的文章	直接粗暴，稍显简陋
利用一些标签：`<iframe>`,`<embed>`,`<object>`	😐👎

分类归纳

服务器端渲染：其实就是利用模板引擎做字符串拼接的工作；
客户端渲染：不管以何种形式加载，最终会涉及DOM操作，甚至要在页面中引入与实际业务逻辑无关的脚本；
各种有组件化功能的框架/库：除非项目基于这些框架/集成方案构建，否则方案不通用；
自行编写小工具；

结论

可见有很多方案可以实现，但是割鸡焉用牛刀？借用大型的框架/组件来实现这一简单的功能会引入多余的东西，显得太“重”；
而本项目就是只做页面片段引入这件事的一款Grunt插件：构建后的页面就是一个个普通的 HTML 文件，甚至在要查看时可以直接本地在浏览器中打开，无需依赖其他配置和环境，这也是比起服务器端/前端渲染方案的优势所在。
前提是会简单地使用Grunt。英文烂？不怕，还有Grunt中文站。

艰难的标准化进程

HTML 至今尚未原生支持引入片段，也有自身的历史原因；
在当下组件化的需求和浪潮下，一些工作草案（Working Draft）正在制定：
- http://w3c.github.io/webcomponents/spec/imports/
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports
- https://www.html5rocks.com/en/tutorials/webcomponents/imports/ （可切换中文版）
- 使用方式大概是这样的：<link rel="import" href="myfile.html">
- 在有些试验性实现下，引入的不是片段，而是文档，类似于iframe；
- 不过距离标准化还远，不好说到时会变成什么样；
- 也可以在Can I use 中看看支持情况：http://caniuse.com/#search=import
其他相关概念：
- Custom Element：允许自定义元素；
- Shadow DOM：允许用声明的方式定义你的自定义元素的内容；
- The <template> Element：允许一个元素的style、ID、class只作用到其本身；
- 再结合 HTML Import，可见这些都是为了构造可复用、模块化的 Web 组件；
- 虽然标准没实现，不过已经有支持这套规范的polyfill： webcomponents.js
- 关注这个组织： http://webcomponents.org/

参考阅读