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中的静态资源

posted @ 2015-03-27 16:45  JinksPeng  阅读(300)  评论(0)  编辑  收藏  举报