页面加载速度优化

最新推荐文章于 2024-07-01 22:52:36 发布

卡卡西的小人书

最新推荐文章于 2024-07-01 22:52:36 发布

阅读量344

点赞数 2

分类专栏：工作笔记文章标签：网页加载速度

本文链接：https://blog.csdn.net/qq_19596071/article/details/75948889

版权

工作笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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