静态内容是指应用程序不会基于每个请求而去改变的资源。
多媒体: 图片、视频和音频文件
CSS:
JavaScript
二进制下载文件: 这包含所有种类:PDF、压缩文件、安装文件等类似的东西。
借助一些JavaScript,浏览器可以使用未经编译的LESS。这种方式会影响性能,所以不推荐使用。
注意,如果只是要搭建API,可能没有静态内容。
性能方面的考虑
-
减少请求次数:
- 合并资源:
- 尽可能多地将小图片合并到一个子画面中。然后用CSS设定偏移量和尺寸只显示图片中需要展示的部分; 推荐用SpritePad的免费服务创建子画面
- 浏览器缓存
- 合并资源:
缩减内容的大小。
在使用CDN时一般不用担心CORS。在HTML中加载外部资源不违反CORS原则:只有用AJAX加载的资源才必须启用CORS
面向未来的网站
- CDN是专为提供静态资源而优化的服务器,它利用特殊的头信息启用浏览器缓存。
- 另外CDN还能基于地理位置进行优化
静态映射
// 设置handlebars视图引擎
var handlebars = require('express3-handlebars').create({
defaultLayout:'main',
helpers: {
static: function(name) {
return require('./lib/static.js').map(name);
}
}
});
<header><img src="{{static '/img/logo.jpg'}}" alt="Meadowlark Travel Logo"></header>
- 接下来会花些时间把视图和模板中所有对静态资源的引用都改过来。现在HTML中的所有静态资源都可以挪到CDN上去了。