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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
实测jquery data()如何存值
Aug 18 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
js实现两点之间画线的方法
May 12 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
js自定义input文件上传样式
Oct 26 Javascript
ES6基础之默认参数值
Feb 21 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基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
python解析文件示例
2014/01/23 Python
Python中使用SAX解析xml实例
2014/11/21 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
详解Python流程控制语句
2020/10/28 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
调解员先进事迹材料
2014/02/07 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
亮剑观后感500字
2015/06/05 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
详解PHP设计模式之依赖注入模式
2021/05/25 PHP