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" />