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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php中的常用魔术方法总结
2013/08/02 PHP
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python模拟登陆实现代码
2017/06/14 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python连接mysql有哪些方法
2020/06/24 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
部队学习十八大感言
2014/01/11 职场文书
集体备课反思
2014/02/12 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
创业计划书之服装
2019/10/07 职场文书
Python Socket编程详解
2021/04/25 Python
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL