express-21 静态内容

静态内容是指应用程序不会基于每个请求而去改变的资源。

  • 多媒体: 图片、视频和音频文件

  • 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上去了。

CSS中的静态资源

上一篇:Ubutu Chrome 出现adobe flash is out of date的解决方法


下一篇:hugo-最好用的静态网站生成器