http的缓存协商
浏览器对静态文件的缓存主要是通过cache-control来控制的，cache-control可以设置no-cache，max-age以及must-revalidate等来设置缓存策略。
如果max-age> 0则会在max-age的时间内不访问服务器，用本地缓存的静态文件代替。
如果max-age<=0则会每次都询问服务器，资源文件是否有修改，有则200，无则304。这相当于f5操作。
no-cache表示不理会缓存协商，全部重新加载。这相当于是ctrl+f5操作。
must-revalidate表示必须遵循策略规则。因为浏览器有时候会提取过期的缓存，设置了这个策略后，浏览器会严格遵循客户设置的策略。
服务器在首次应答客户的request时，会返回last-modified和etag给浏览器，浏览器将cache住这些信息，下一次request服务器时就会在header里带上if-modified-since和if-non-match信息，这两个分别对应last-modified和etag。服务器会提取对应资源的modified时间和etag来做对比，如果有改变则返回200并且response last-modified和etag给客户端，没变则返回304不需要改变。
目前tomcat已经支持etag, tomcat是根据文件的contentLength和lastModified混合编码生成串儿。因为last-modified因为只支持到秒级，所以对于秒内频繁修改的静态资源效率会比较低下，etag则很好的避免了这一点。
对静态资源的处理策略
一般对于静态资源，服务器端会通过过滤机制，自动为响应的header里添加max-age信息，这样浏览器就会在本地cache住这些资源。
我们最近的一个项目，前台使用extjs，使用extjs带来的成本就是所有的页面几乎都是js页面了。因为静态js的文件量大，且我们系统的运营地点非洲网络条件不太好，带宽资源比较宝贵，不能承受频繁的静态资源请求（这里需要提一点，即使是web服务器最终响应不需要更改的304请求，对系统也是一次带宽开销，我们也想尽力避免），于是我们想通过cache-contro将js文件cache在本地。但是这就带来一个问题，对于紧急发布的一些前台界面，因为超时机制会无法及时在系统层面体现。
所以我们必须实现一种机制，在发布了新的js后，对应的引用该js的地方都要能自动刷新。所以最简单的方法就是每次编译完后生成一个版本号，然后对每个引用js的url都添加上版本号就ok。这样就可以保证在一次发布周期内始终只有一个js版本。
Extjs的动态加载策略
Extjs实现了一套动态加载策略，可以通过js语言的方式去直接引入一个资源(Ext.require)，这和我们平时使用的静态引用(<script src=" xxx")是完全不同的。所以决定研究一下extjs的动态加载机制。
目前网上有开源的extjs4的源码，在动态load script时，会读取config配置信息，config可以通过loader.setConfig来配置。config里有两个参数需要注意，一个是disableCachingParam还有一个是disableCaching，后者代表是否需要为每一个请求都声称一个版本信息，前者是版本信息的参数名，默认是_dc.
loadScriptFile: function(url, onLoad, onError, scope, synchronous) {
if (isFileLoaded[url]) {
return Loader;
}
var config = Loader.getConfig(),
noCacheUrl = url + (config.disableCaching ? ('?' + config.disableCachingParam + '=' + Ext.Date.now()) : ''),
isCrossOriginRestricted = false,
if (!synchronous) {
onScriptError = function() {
//<debug error>
onError.call(scope, "Failed loading '" + url + "', please verify that the file exists", synchronous);
//</debug>
};
scriptElements[url] = Loader.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
} else {
/**
* 组装xmlhttprequest对象，根据浏览器支持情况初始化activexobject或者xmlhttprquest
*/
try {
xhr.open('GET', noCacheUrl, false);
xhr.send(null);
} catch (e) {
isCrossOriginRestricted = true;
}
/**
* 伪代码，跨域失败，执行onerror回调函数
*/
else if ((status >= 200 && status < 300) || (status === 304)
//<if isNonBrowser>
|| isPhantomJS
//</if>
) {
//调用成功， 记录调试信息
Ext.globalEval(xhr.responseText + debugSourceURL);
onLoad.call(scope);
}
else {
/**
* 伪代码，执行onerror回调函数
*/
}
// Prevent potential IE memory leak
xhr = null;
}
}
代码很好理解，同步时直接加载，并且通过eval方法直接执行响应的js文件（responseText），异步时则通过injectScriptElement加载，同步还是异步可以通过loader里的syncModeEnabled来设置，默认是false。
注意下这个方法里的noCacheUrl，根据disableCaching决定要不要为url加上版本信息，缓存无效时会默认以当前时间为版本号。
injectScriptElement: function(url, onLoad, onError, scope, charset) {
var script = document.createElement('script'),
dispatched = false,
/**
* 设置onload和onerror的回调函数，主要是通过dispatched参数做幂等性校验
* 为了兼容ie，script需要支持onreadystatechange事件，这个事件会又多个状态，所以需要做幂等校验
*/
script.type = 'text/javascript';
script.onerror = onErrorFn;
charset = charset || config.scriptCharset;
if (charset) {
script.charset = charset;
}
//兼容ie
if ('addEventListener' in script ) {
script.onload = onLoadFn;
} else if ('readyState' in script) { // for <IE9 Compatability
script.onreadystatechange = function() {
if ( this.readyState == 'loaded' || this.readyState == 'complete' ) {
onLoadFn();
}
};
} else {
script.onload = onLoadFn;
}
script.src = url;
(Loader.documentHead || document.getElementsByTagName('head')[0]).appendChild(script);
return script;
}
该方法主要是创建了一个script的元素，url是前面方法生成的。
因为我们需要的是基于发布版本信息的缓存，所以只需要将noCacheUrl的版本信息由当前时间戳改成编译产生的版本信息即可。
最后，注意，因为extjs6做了比较大的重构，url生成挪到了ext.data.proxy.server里的buildUrl里：
url = Ext.urlAppend(url, Ext.String.format("{0}={1}", me.getCacheString(), Ext.Date.now()))，搜索这一行即可。
