Javascript 加载和执行-性能提高篇


Posted in Javascript onDecember 28, 2012

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 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
React中的render何时执行过程
Apr 13 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
javascript延时加载之defer测试
Dec 28 #Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 #Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 #Javascript
js获取网页高度(详细整理)
Dec 28 #Javascript
前台js改变Session的值(用ajax实现)
Dec 28 #Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 #Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 #Javascript
You might like
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
动态添加js事件实现代码
2009/03/12 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
Python正则表达式使用经典实例
2016/06/21 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
tensorflow自定义激活函数实例
2020/02/04 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
python 带时区的日期格式化操作
2020/10/23 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
实习老师离校感言
2014/02/03 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
医院搬迁方案
2014/06/14 职场文书
人事专员岗位说明书
2014/07/29 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
个人事迹材料范文
2014/12/29 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
图书馆义工感想
2015/08/07 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL