WEB学习进阶之路六

举报
sujrexia 发表于 2020/07/01 14:52:21 2020/07/01
【摘要】 本章学习js文件引入和加载的优化<!DOCTYPE html"><html><head><meta content="text/html; charset=utf-8" http-equiv=Content-Type><title>性能测试</title><style></style><!-- <script type="text/javascript" src="bigjs.js"></s...

本章学习js文件引入和加载的优化

<!DOCTYPE html">

<html>

<head>

<meta content="text/html; charset=utf-8" http-equiv=Content-Type>

<title>性能测试</title>

<style>

</style>

<!-- <script type="text/javascript" src="bigjs.js"></script> -->

<script type="text/javascript" src="bigjs1.js"></script>

<script type="text/javascript" src="bigjs2.js"></script>

<script type="text/javascript" src="bigjs3.js"></script>

</head>

<body>

<div>

<img src="3.png" alt="" style="width:200px;height:200px;"/>

</div>

</body>

</html>

为了演示明显呢,bigjs里面的内容用的jquery的原生代码,为压缩版本,大小为281Kb

一般情况下,三个js文件在head中引用,可以看到time列,下载三个js的资源分别占用的时间,合计下载js文件用时393秒

image.png

优化下,将三个js文件合并为一个,看看时间,用时228秒

image.png

得出如下结论,在网速不影响的情况下,合并的js要比多个下载速度要快。


从项目中或者书籍中了解到,对于js的加载和运行遵循以下几点

  1. 尽量将多个js文件合并,但是有个度,比如说一个js文件100K,总共有20个js文件,你给他全部合并到一个里面并不是最优解,一般情况下可以合并到几百K的一个过程,发挥下浏览器的并行下载的优势

  2. 对于不影响dom的js,可以通过异步加载的方式在文档加载完成之后再去下载

    var script = document.createElement("script"); 

    script.type = "text/javascript"; 

    script.src = "bigjs.js"; 

    document.getElementsByTagName_r("head")[0].appendChild(script);

  3. 对于不影响dom的js,也可以使用defer关键字,延迟运行js代码 <script type="text/javascript" src="bigjs.js" defer></script>

  4. 压缩js文件

  5. 由于页面展示的快慢是最影响用户体验的,所以建议,将影响页面的样式放在head中,把js放在body结束标签</body>紧挨着的前面

  6. 使用懒加载模式,在使用相关功能的js在去下载并运行。

function layLoadScript(url, callback) {

    var script = document.createElement("script");

    script.type = "text/javascript";

    

    if (script.readyState) { //IE 

        script.onreadystatechange = function() {

            if (script.readyState == "loaded" || script.readyState == "complete") {

                script.onreadystatechange = null;

                if (typeof callback == 'function') callback();

            }

        };

    } else { //Others

        script.onload = function() {

            if (typeof callback == 'function') callback();

        };

    }

    script.src = url;

    document.getElementsByTagName_r("head")[0].appendChild(script);

}

由于浏览器不能保证js的下载顺序,所以用上述代码的时候可以使用回调的方式保证顺序加载

layLoadScript('bigjs1.js', function() {

    layLoadScript('bigjs2.js', function() {

        layLoadScript('bigjs3.js', function() {

            //todo something

        })

    })

})

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。