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 相关文章推荐
document.compatMode介绍
May 21 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
VUE动态生成word的实现
Jul 26 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
总结js函数相关知识点
2018/02/27 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
浅谈Python中的数据类型
2015/05/05 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
在python中做正态性检验示例
2019/12/09 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python中的列表和元组区别分析
2020/12/30 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
发展部经理职责规定
2014/02/22 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年文秘工作总结
2014/11/25 职场文书
大学生个人学年总结
2015/02/15 职场文书
独生子女证明范本
2015/06/19 职场文书
二年级数学教学反思
2016/02/16 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python