页面加载速度优化

1. 优化JS加载速度

网页加载的时候，<script>标签会阻塞页面渲染，可以开启并行下载，但这样也会阻塞其他资源的下载例如图片等。所以可以考虑异步加载JS。

方案1：利用H5的async属性，这种只适合外部脚本，并且不能保证加载顺序

<script type=”text/javascript” src=”” async=”async”></script>

方案2：动态创建script标签

var script = document.createElement(‘script’);
script.type=’text/javascript’;
script.src = ‘’;
document.getElementsByTagName(“head”)[0].appendChild(script);

这种方式可以通过监听JS的加载进度来

if(script.readyState){ // IE
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
}
};
}else{ // Firefox, Chrome, Opera, ...
script.onload = function(){

};
}

2.对JS，CSS文件进行压缩

推荐YUI Compressor这个工具。这是一款依赖jre的工具，压缩效果惊人的好。
官网：http://yui.github.io/yuicompressor/
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > xxx.js
//压缩CSS 

java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > xxx.css

//压缩JS 

3.设置tomcat启用GZIP压缩

修改%TOMCAT_HOME%/conf/server.xml

compression="on" 打开压缩功能 

compressionMinSize="50" 启用压缩的输出内容大小，默认为2KB 

noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器，不启用压缩 

compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain"　哪些资源类型需要压缩

<Connector port="80" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" executor="tomcatThreadPool" URIEncoding="utf-8"
compression="on"
compressionMinSize="50" noCompressionUserAgents="gozilla, traviata"
compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" />