javascript性能优化：创建javascript无阻塞脚本
javaScript 在浏览器中的运行性能，在web2.0时代显得尤为重要，成千上万行javaScript代码无疑会成为性能杀手，
在较低版本的浏览器执行JavaScript代码的时候，由于浏览器只使用单一进程来处理ui界面刷新和JavaScript脚本执行，
这意味着在加载javascript文件的时候不能同时做任何其他的事情。 在加载的同时造成了用户交互阻塞；
理论上来说，把样式与行为有关的脚本放在一起率先加载，这样有利于确保正确的用户体验，例如下面的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
<script src="file.js" type="text/javascript" charset="utf-8"></script>
<script src="file1.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="file.css"/>
<link rel="stylesheet" type="text/css" href="file1.css"/>
<link rel="stylesheet" type="text/css" href="file2.css"/>
</head>
<body> </body>
</html>
这种看似合理的代码其实有着很严重的性能问题：在javascript文件加载并执行完成之前会阻止页面进行渲染，我们的web页面会出现一片空白
无法与之正常交互，这称之为脚本阻塞
由于脚本会阻塞页面其他资源的加载 我们可以把所有的script标签放在</body>之前 在页面加载的最后来加载javascript文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title> <link rel="stylesheet" type="text/css" href="file.css"/>
<link rel="stylesheet" type="text/css" href="file1.css"/>
<link rel="stylesheet" type="text/css" href="file2.css"/>
</head>
<body> <!--推荐所有的js文件位置-->
<script src="file.js" type="text/javascript" charset="utf-8"></script>
<script src="file1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
-----------优化javascript的首要任务，将js文件放置在页面底部；
那如何创建一个无阻塞的脚本呢？
无阻塞脚本的秘诀在于，在页面加载完成之后才开始加载javascript代码。 我们要在window对象的load时间触发后再下载并执行脚本，
已知有很多种方式可以实现这一效果，这里简单例举一二：
1.HTML5新特性
html5为script标签提供了两个新的属性 一个是defer 另一个是async 它们采用的都是并行下载的方式； 在下载过程中并不会造成页面阻塞
它们的区别在于 defer表示等待页面加载完成才会执行，async则是它本身加载完成后就自动执行；
defer目前已被各大主流浏览器所兼容；
2.创建动态脚本元素；这很容易使页面渲染完成之后再进行脚本加载；
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title> </head>
<body> <script type="text/javascript">
var script = document.createElement("script");
script.src = "ztf.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
</body>
</html>
我们使用标准的dom方法document.createElement来动态的创建一个script元素并指定它的src；这行成了一个动态的脚本模式；在任意时刻插入任意的javascript代码都会被浏览器执行；（创建的script最好不要插入到body里面；这样可能会引起ie抛出一个‘操作已终止’的错误信息；）
ff,opera,chrome和safari3以上版本的script标签会在加载完成触发onload事件。
而在老版本ie下（ie6-10） 它会触发一个readystatechange事件。<script>元素会提供一个readyState属性，它的值在scr加载不同过程产生不同的变化；我们通常会使用到 "loaded" 和 "complete"。
通过“客户端能力检测” （http://www.jxbh.cn/newshow.asp?id=1434&tag=2） 我们可以创建一个通用的动态加载javascript的函数：
function loadScript(url,callback){
var script = document.createElement("script");
script.type="text/javascript";
if(script.readyState){ //客户端能力检测 如果支持readyState则返回的是字符串 反之返回undefined
script.onreadystatechange = function(){ //onreadystatechange事件
if(script.readyState=="loaden"||script.readyState=="complete"){
script.onreadystatechange=null;
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
这个函数接受两个参数；javascript文件的url和完成加载后的回调函数。loadScript()函数的用法如下
loadScript("ztf.js",function(){
alert("loadend")
});
如果需要的话，你可以尽可能多的加载javascript文件到页面上，但一定要考虑清楚文件的加载顺序，可以不断的使用callback回调函数加载多个javascript脚本；
另外还有一种，ajax动态请求加载脚本 在这里笔者就不一 一说明 ，大家查阅有关文档；
部分内容摘自《高性能javascript》
javascript性能优化：创建javascript无阻塞脚本的更多相关文章
- JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式
JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- JavaScript性能优化小窍门汇总（含实例）
在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...
- 摘：JavaScript性能优化小知识总结
原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...
- 网站前端性能优化之javascript和css
之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...
- JavaScript性能优化小知识总结(转)
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- javascript性能优化-repaint和reflow
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...
- 前端性能优化（JavaScript篇）
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...
随机推荐
- 如何利用ETW（Event Tracing for Windows）记录日志
ETW是Event Tracing for Windows的简称,它是Windows提供的原生的事件跟踪日志系统.由于采用内核(Kernel)层面的缓冲和日志记录机制,所以ETW提供了一种非常高效的事 ...
- autocomplete的使用
autocomplete使用分为本地调用方法和读取远程读取数据源的方法 (1)本地调用方法 <script src="Scripts/jquery-1.4.1.min.js" ...
- APEX:对object中数据进行简单处理？
在Salesforce中,常常要对各种数据进行处理,已满足业务逻辑.本篇文章会介绍如何实现从object获取数据,然后将取得的数据进行一系列简单处理. 第一步:SongName__c 是一个新建的ob ...
- iOS开发 判断当前APP版本和升级
从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...
- 设置Hyper-V和VMware多个服务之间共存
这个方法是解决多个服务之间不能共存,下面相当于是以Hyper-V和VMware做例子,其他的也适用. 今天准备安装VMware Workstation 10,然后玩玩MAC OS. 没想到,淡定的我双 ...
- 不要着急改代码，先想想--centos 6.8下编译安装tmux
诸位读者新年好,2017开年第一篇博客,请允许我先问候一下看到这篇博客的诸位.写博客是我2017年定下的目标之一,希望我会坚持下去. 最近打算尝试一下tmux这个神器,于是有了这一篇关于思维方式的Bl ...
- 深入浅出聊优化：从Draw Calls到GC
前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...
- 写自己的Socket框架(一)
本系列仅介绍可用于生产环境的C#异步Socket框架,如果您在其他地方看到类似的代码,不要惊讶,那可能就是我在参考开源代码时,直接“剽窃”过来的. 1.在脑海里思考一下整个socket的链接的处理流程 ...
- 迟来的Json反序列化
源码发布 搞了一个下午,终于搞定了这个号称中国的github...以后源码直接在这里发布了(github实在用不来,英文实在太烂了) https://code.csdn.net/jy02305022/ ...
- ABP(现代ASP.NET样板开发框架)系列之6、ABP依赖注入
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之6.ABP依赖注入 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...