剥离静态资源请求到CDN
一般在主域名下的HTTP请求里都会携带大量Cookie信息,最大4KB,每个域名下最多50条;但如果仅仅访问js/css/jpeg等静态资源文件的话是不需要Cookie信息,所以可以将整个站点的静态资源放到一个专门的域名下,以求减小网络开销,也就是Cookie free domain;
多域名存储资源
浏览器在对同一个域名下的并发请求资源数量是有上限的(IE为8个,chrome为4-6个),一个完整的html页面需要加载的资源一般已经超过100个,所以为了缩短加载速度可以将下载资源分布在多个域名下(也不能太多,DNS查询也需要耗时);这样不仅可以增加资源加载的并发数,还可以实现静态资源Cookie Free加载;
合并HTTP请求
加速网页加载不仅需要加快单个请求速度的同时,还需要减少总的请求个数,css spirites可以将多张图片合并成一张图片,这样只需要一次请求,不同css展示图片上不同的位置;通过使用smartspirites命令在打包的时候讲图片合并成一张图片;
压缩请求资源
将js/css进行concat, minify和compress,最终合并成一个大的js/css,然后使用gzip生成.gz格式的文件,只要在request里指定accept-encoding=gzip,deflate,则可以请求打包之后的.gz文件,极大降低http请求的个数和带宽的负载压力。基于Ant的构建打包里js/css的合并、混淆和压缩可以通过concat, closure实现,而gzip则需要client browser和web server同时约定一些规定。首先client browser发送的request要写明accept-encoding=gzip,deflate,表示可以接受gzip的文件编码;然后web server将js/css文件打包成跟源文件具有同样名字路径的gz后缀文件,并且在response里写明content-encoding=gzip,这样web server响应请求的时候就可以返回gz文件,web browser也可以正确对gz文件进行解析。
合理利用浏览器cache
浏览器会将网页资源cache到客户端本地,然后通过HTTP request header里的cache-control,expires等来控制cache的生命周期。
典型的HTTP request消息头
cache-control: no-cache
cookie: _xsrf=e6552b76-a418-4409-9ec5-967573ea1cda;
origin: https://zhuanlan.zhihu.com
pragma: no-cache
referer: https://zhuanlan.zhihu.com/c_120823325?utm_source=wechat_session&utm_medium=social&utm_oi=54126419378176
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
典型的HTTP response消息头
access-control-allow-credentials: true
access-control-allow-origin: https://zhuanlan.zhihu.com
cache-control: private, no-store, max-age=0, no-cache, must-revalidate, post-check=0, pre-check=0
content-encoding: br
content-type: application/json
date: Mon, 09 Jul 2018 11:39:10 GMT
etag: W/"88c2b758dbbd144dc7a13a6134675430cc50ad7a"
expires: Fri, 02 Jan 2000 00:00:00 GMT
pragma: no-cache
server: ZWS
set-cookie: tgw_l7_route=ec452307db92a7f0fdb158e41da8e5d8; Expires=Mon, 09-Jul-2018 11:54:10 GMT; Path=/
status: 200
expires:web服务器响应的头字段,表示浏览器在某个时间点(绝对时间点,存在服务器时区不匹配问题)之前可以使用该资源的缓存;但expires字段是HTTP 1.0的定义,现在浏览器一般默认为HTTP 1.1,所以它的作用基本可以忽略。(另一个基本可以忽略的是pragma: no-cache,由于其属于html文件内容的meta信息,所以仅有某些浏览器支持)
cache-control:用于替换expires字段,所以优先级一般高于expires字段,cache-control的值解释如下,max-age用的是当前时间的相对值(Cache-Control: max-age=30000)。
etag;属于HTTP 1.1的特性,具有比last-modified更高的优先级,表示有web server根据resource的path,size, last modified date进行hash后生成的值,可以判断文件在前一次响应之后是否有被修改。etag可以解决last-modified的几个问题,last-modified只能精确到秒级别,如果恰好resource在1秒内更新了,则client browser不能根据last-modifed进行判断;如果文件仅仅是被touch,文件内容没有改变,last-modified却改变了。
If-None-Match:在client browser判断resource cache已经expire后,如果之前的response里有etag字段,则重新发出请求并带上该字段,web server收到请求后对比request里的etag和web server上resource最新生成的etag值,如果不相等,则响应整个resource并设置status code = 200,否则直接返回status code=304。
Last-Modified:表示web server告诉client browser当前resource的最近修改时间。
If-Modified-Since:在client browser判断resource cache已经expire后,如果之前的response里有Last-Modified字段的话,则重新发出请求并带上该字段,web server在收到请求后对比request里的Last-Modified和web server上resource的实际的修改时间,如果实际修改时间较新,则响应整个resource并设置status code=200,否则直接返回status code=304。
使用静态页面
将内容变动频次低的页面做成静态页面(相对于JSP等内容需要实时生成的动态页面),并缓存到web server内存或者CDN上,常见的技术有freemarker;JSP页面需要依赖app server提供的容器环境,而freemarker可以完全脱离app server(Jetty),简单的web server(Nginx)就可以满足访问需求。https://freemarker.apache.org/
直接使用freemarker合并ftl文件和data,并生成html文件,html文件可以直接放置到CDN或者web server上供用户访问。
class App1 {
private static final Configuration freeMarkerConfig;
static {
freeMarkerConfig = new Configuration(Configuration.VERSION_2_3_23);
try {
freeMarkerConfig.setDefaultEncoding("UTF-8");
freeMarkerConfig.setTemplateExceptionHandler(
TemplateExceptionHandler.RETHROW_HANDLER);
freeMarkerConfig.setTemplateLoader(
new ClassTemplateLoader(App1.class, "/template"));
//freeMarkerConfig.setDirectoryForTemplateLoading(dir);
} catch (Exception e) {}
}
public void generateHtmlByTemplate(String ftlFileName,
String htmlFileName, Map<String, Object> params) {
String dir = "";
Writer fileWriter = null;
try {
File file = new File(dir + File.separator + htmlFileName);
Template template = freeMarkerConfig.getTemplate(ftlFileName);
fileWriter = new OutputStreamWriter(new FileOutputStream(file), "UTF-8");
template.process(params, fileWriter);
} catch (Exception e) {
} finally {
if (Objects.nonNull(fileWriter)) {
try {
fileWriter.flush();
fileWriter.close();
} catch (Exception e) {}
}
}
}
}