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 Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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
用缓存实现静态页面的测试
2006/12/06 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
关于this和self的使用说明
2010/08/01 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python3个性签名设计实现代码
2018/06/19 Python
python 图片去噪的方法示例
2019/07/09 Python
简单了解python变量的作用域
2019/07/30 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python属于软件吗
2020/06/18 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
会计专业自我鉴定范文
2013/12/29 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL