2017搜索引擎优化规则(把多个JS请求合并为一个CSS请求，减少从客户端向服务器端的请求)

　　2017搜索引擎优化规则(把多个JS请求合并为一个CSS请求，减少从客户端向服务器端的请求)

　　将多个 JS 请求合并为一个 JS 请求，将多个 CSS 请求合并为一个 CSS 请求。从而减少从客户端到服务器的请求数量。

　　规则 3：添加 Expires 标头

　　使用http请求查看工具，我这里使用firebug查看http请求。可以看到响应头中有一个Expires 头。unicorn 设置的默认过期时间为 30 分钟。即如果当前网页还没有过期，浏览器不会发送请求，直接查找本地页面缓存。加快前端响应速度，减少服务器端压力。

　　规则 4：压缩组件

　　查看http请求头参数，有一个Accept-Encoding:gzip，deflate，响应头中有一个Content-Encoding:gzip，表示请求的内容是gzip压缩传输的。减少传输文件大小并加快页面响应。

　　规则 5：将样式表放在顶部

　　规则 6：将脚本放在底部

　　浏览器的加载顺序基本上是按照源码从上到下加载的。将样式表放在顶部可以加快页面样式的展示速度，给客户更好的体验。同样，将脚本放在底部会防止页面内容的渲染被脚本阻塞。

　　因此，理想的情况是整个页面只保留一个JS放在标签前，只保留一个CSS放在标签前。

　　目前的独角兽设计也在尽力做到这一点。CSS已经减到1，位置基本一致。但是结合网站的实际情况，在JS的处理中涉及到一些函数依赖，一些JS必须放在前端，以便后续的JS调用。另外，必须提前调用ae.js库，所以会看到当前searchweb页面标签中还有2个JS。其他 JS 遵循这个规则，合并为一个，放在前面。

　　规则 10：最小化 JavaScript

　　如果在地址栏输入页面源码中js的URL（使用FF浏览器，IE会弹出下载框），会列出js的内容，你会发现这里的js文件已大大简化。去掉了多余的空格、空行、注释等。JS的体积减少了，压缩原理主要参考开源工具JSMIN。

　　另外，其实独角兽也是对CSS进行压缩的，但是由于目前国际网站的应用，CSS评论因为涉及到一些兼容性处理内容，所以暂时不能压缩。虽然此功能已启用，但默认情况下未启用。您可以在 antx.properties 中配置是否启用。对应配置项：pressCSS，为true时开启压缩。此项的默认值为 false。

　　规则 12：删除重复的脚本

　　unicorn 的另一个特点是对于一个请求中重复引入的 JS 或 CSS，unicorn 具有去重功能，即只会被调用一次。

　　规则 13：配置 ETag

　　在项目设计之初，在http请求中添加了ETag标签。该标签可以在请求时检查服务器端资源是否与客户端资源相同。如果相同，则只返回带有304响应码的响应头，而不是从服务器端重新发送页面数据，而是直接使用本地缓存。后来在测试过程中，页面偶尔会丢失样式，经过架构、开发等判断，Etag标签可能与mod_jk冲突，所以取消了这个功能。