Javascript 加载和执行-性能提高篇
更新时间：2012年12月28日 10:19:19 作者：
Javascript 在浏览器中的性能问题，可能是最重要的可用性问题;Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行;不管是内嵌的还是外链的，下载并立即执行 因为它有可能会修改页面
Js的阻塞性
Javascript 在浏览器中的性能问题，可能是最重要的可用性问题
Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行
不管是内嵌的还是外链的，下载并立即执行 因为它有可能会修改页面
页面生存周期的概念
瀑布图中看到了下载时间和executing time
在head中加入script 和link body加载到前不会输出任何东西，因此会看到空白页面
<script type="text/javascript">
document.write("The date is" + (new Date().toDateString()));
</script>
页面在到script时，不知道script里会做什么，所以必然阻塞，等它执行
Ie8 等浏览器能并行下载多个js等资源,但是还是对下载图片有影响
结论， 将脚本放在底部加载
组织脚本
目标 最小化迟延时间
问题
引用多个script文件 内嵌多个script标签
每个http请求都会带来性能上的开销
紧跟在link 后的script 是个错误 它会等待css的加载，以求获得最精准的描绘
结论:减少script标签的数量
将多个js文件合并成一个，打包工具
yahoo的合并处理器
无阻塞的脚本
js倾向于阻止浏览器的某些处理过程，如http请求处理和界面更新.这是最重要的性能问题。于是要减少js文件大小和限制http请求数
但是功能丰富与代码量之间的矛盾， 合并成单个文件却体积大会锁死浏览器一大段时间，于是我们需要逐步加载javascript文件
重点：在页面加载完成后加载javascript文件
1、延迟加载脚本
defer 属性
如果要下载的js文件不会进行dom操作,那么defer属性有很大的用处，它能让文件并行下载，并不会立即执行，而会在onload事件后再执行,适用于任何script标签
2、动态加载脚本
一个function
function loadScript(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;
callback();
}
} else {
script.onload = function(){
callback();
}
}
}
这里要注意浏览器的兼容性，删除事件，
如果有多个文件需要这样加载，那么可以
loadScript('file1.js', function(){
loadScript('file2.js',function(){
})
});
3、XHR脚本注入
var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) {
var oScript = document.createElement('script');
oScript.text = xhr.responseText;
document.body.appendChild(oScript);
}
}
}
304表示从缓存取 text将ajax的内容放入text
它的优点
兼容性好，异步， 缺点：不能扩域 不能从cdn取内容
Javascript 在浏览器中的性能问题，可能是最重要的可用性问题
Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行
不管是内嵌的还是外链的，下载并立即执行 因为它有可能会修改页面
页面生存周期的概念
瀑布图中看到了下载时间和executing time
在head中加入script 和link body加载到前不会输出任何东西，因此会看到空白页面
复制代码 代码如下:
<script type="text/javascript">
document.write("The date is" + (new Date().toDateString()));
</script>
页面在到script时，不知道script里会做什么，所以必然阻塞，等它执行
Ie8 等浏览器能并行下载多个js等资源,但是还是对下载图片有影响
结论， 将脚本放在底部加载
组织脚本
目标 最小化迟延时间
问题
引用多个script文件 内嵌多个script标签
每个http请求都会带来性能上的开销
紧跟在link 后的script 是个错误 它会等待css的加载，以求获得最精准的描绘
结论:减少script标签的数量
将多个js文件合并成一个，打包工具
yahoo的合并处理器
无阻塞的脚本
js倾向于阻止浏览器的某些处理过程，如http请求处理和界面更新.这是最重要的性能问题。于是要减少js文件大小和限制http请求数
但是功能丰富与代码量之间的矛盾， 合并成单个文件却体积大会锁死浏览器一大段时间，于是我们需要逐步加载javascript文件
重点：在页面加载完成后加载javascript文件
1、延迟加载脚本
defer 属性
如果要下载的js文件不会进行dom操作,那么defer属性有很大的用处，它能让文件并行下载，并不会立即执行，而会在onload事件后再执行,适用于任何script标签
2、动态加载脚本
一个function
复制代码 代码如下:
function loadScript(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;
callback();
}
} else {
script.onload = function(){
callback();
}
}
}
这里要注意浏览器的兼容性，删除事件，
如果有多个文件需要这样加载，那么可以
复制代码 代码如下:
loadScript('file1.js', function(){
loadScript('file2.js',function(){
})
});
3、XHR脚本注入
复制代码 代码如下:
var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) {
var oScript = document.createElement('script');
oScript.text = xhr.responseText;
document.body.appendChild(oScript);
}
}
}
304表示从缓存取 text将ajax的内容放入text
它的优点
兼容性好，异步， 缺点：不能扩域 不能从cdn取内容
相关文章
这篇文章主要介绍了基于小程序实现透明背景人像分割,此文主要实现识别人体的轮廓范围，与背景进行分离并保存效果图，适用于拍照背景替换及透明背景的人像图（png格式）转换，需要的朋友可以参考下2022-10-10
这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了JS闭包原理与应用,结合实例形式较为详细的分析了javascript闭包的原理、应用及相关操作注意事项,需要的朋友可以参考下2018-12-12
这篇文章主要带大家探讨一下JS装饰器以及装饰器在TS中的使用方式，文中有详细的代码示例，对装饰器不太了解的同学可以参考阅读本文学习了一下2023-07-07
这篇文章主要介绍了微信小程序 点击控件后选中其它反选实例详解的相关资料,需要的朋友可以参考下2017-02-02
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。具体实例代码大家参考下本文2017-08-08
这篇文章主要介绍了关于localStorage的存储，读取，删除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了动态加载js、css的实例代码的相关资料,非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧2016-05-05
这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了javascript简单实现等比例缩小图片的方法,涉及javascript针对页面元素属性的读取、运算及设置相关技巧,需要的朋友可以参考下2016-07-07
最新评论