提高页面加载速度

• 开启GZIP

以tomcat为例 在路径\apache-tomcat-7.0.77\conf\下找到server.xml文件 找到下图位置

找到这里.png

添加如下代码

compression="on"
compressionMinSize="50"
noCompressionUserAgents="gozilla,traviata"
compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"

变成这样

更改后.png

然后重启tomcat

打开项目 然后开启调试 观察

请求资源出现如下字样为GZIP开启成功

GZIP开启成功.png

开启前性能

开启前.png

开启后性能

开启后.png

compression="on" //打开压缩功能 
compressionMinSize="50" //启用压缩的输出内容大小 默认为2KB 
noCompressionUserAgents="gozilla, traviata" //对于以下的浏览器 不启用压缩 
compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" //哪些资源类型需要压缩

注意：如果发现内容没有被压缩 可以考虑调整compressionMinSize大小 如果请求资源小于这个数值 则不会启用压缩
注意：测试效果前需清除浏览器缓存

• 优化图像

懒加载

懒加载可以延迟加载长页面中的图片 在浏览器可视区域外的图片不会被载入 直到滚动到所在位置才请求加载 这一点和预加载刚好相反 预加载是将图片全部请求然后存在本地缓存中 这牺牲了服务器的性能 提高了用户体验

懒加载的原理是在img标签中将真正的图片地址存储在自定义属性data-ori中 进入到可视区域后将data-ori的值赋给src

这里可以使用基于jquery的插件lazyload 具体实现方法可以参考我的这篇文章

CSS SPRITE
即CSS精灵 将多个零散的小图片（多为图标）整合到一张背景图中 通过减少个数即减少请求来达到加速的目的 有很多在线生成css sprit的网站可以作为辅助

• 去掉不必要的插件

有些插件很炫酷 但是是不必要的功能

• 减少DNS查询

直接的方式是减少网站请求的域 即可减少DNS查询的次数 但同时会造成并行下载数减少 因此建议将内容发布到至少2个 至多4个不同的主机名上

• 使用CDN

CDN是高性能网络服务 国内没有特别稳定的 使用过百度的CDN 很多静态资源都没有 并且更新也不及时 目前使用的是BootCDN

• 按需加载

避免把所有js全都写在公共的模板中 有的页面并不需要它

• 压缩CSS和JavaScript

上线的CSS/JS需要压缩以减少尺寸 通常会使用YUI Compressor和UglifyJS 如果使用了webpack 那么可以直接使用集成的插件进行压缩 最后还可以使用一些在线工具
YUI Compressor 使用方法
YUI Compressor 官网
UglifyJS 使用方法
UglifyJS 官网
在线工具
在线工具

• 参考

可以参考比较古老的一本书《高性能网站建设指南》