WEB学习进阶之路六
本章学习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秒
优化下，将三个js文件合并为一个，看看时间，用时228秒
得出如下结论，在网速不影响的情况下，合并的js要比多个下载速度要快。
从项目中或者书籍中了解到，对于js的加载和运行遵循以下几点
尽量将多个js文件合并，但是有个度，比如说一个js文件100K，总共有20个js文件，你给他全部合并到一个里面并不是最优解，一般情况下可以合并到几百K的一个过程，发挥下浏览器的并行下载的优势
对于不影响dom的js，可以通过异步加载的方式在文档加载完成之后再去下载
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "bigjs.js";
document.getElementsByTagName_r("head")[0].appendChild(script);
对于不影响dom的js，也可以使用defer关键字，延迟运行js代码 <script type="text/javascript" src="bigjs.js" defer></script>
压缩js文件。
由于页面展示的快慢是最影响用户体验的，所以建议，将影响页面的样式放在head中，把js放在body结束标签</body>紧挨着的前面。
使用懒加载模式，在使用相关功能的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
})
})
})
- 点赞
- 收藏
- 关注作者
评论（0）