几种优化web页面加载速度的策略

剥离静态资源请求到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上供用户访问。

 1 class App1 {
 2     private static final Configuration freeMarkerConfig;
 3     static {
 4         freeMarkerConfig = new Configuration(Configuration.VERSION_2_3_23);
 5         try {
 6             freeMarkerConfig.setDefaultEncoding("UTF-8");
 7             freeMarkerConfig.setTemplateExceptionHandler(
 8 　　　　　　　　　　TemplateExceptionHandler.RETHROW_HANDLER);
 9             freeMarkerConfig.setTemplateLoader(
10 　　　　　　　　　　new ClassTemplateLoader(App1.class, "/template"));
11             //freeMarkerConfig.setDirectoryForTemplateLoading(dir);
12         } catch (Exception e) {}
13     }
14 public void generateHtmlByTemplate(String ftlFileName, 
15 　　　　　　　　String htmlFileName, Map<String, Object> params) {
16         String dir = "";
17         Writer fileWriter = null;
18         try {
19             File file = new File(dir + File.separator + htmlFileName);
20             Template template = freeMarkerConfig.getTemplate(ftlFileName);
21             fileWriter = new OutputStreamWriter(new FileOutputStream(file), "UTF-8");
22             template.process(params, fileWriter);
23         } catch (Exception e) {
24         } finally {
25             if (Objects.nonNull(fileWriter)) {
26                 try {
27                     fileWriter.flush();
28                     fileWriter.close();
29                 } catch (Exception e) {}
30             }
31         }
32     }
33 }