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无阻塞脚本的更多相关文章

  1. JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式

    JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...

  2. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  3. 摘:JavaScript性能优化小知识总结

    原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...

  4. javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

  5. Javascript 性能优化的一点技巧

    把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.

  6. 通过分析iframe和无阻塞脚本关系能让我们更懂iframe

    在我上篇文章里,我提到一种使用iframe完成无阻塞脚本加载的方式,因为我对iframe的偏见很大,所以上篇文章里我没有展开讨论这个问题. 文章发表后有位网友问了我这样一个问题,下面是他问题的原文,如 ...

  7. web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...

  8. JavaScript性能优化 DOM编程

    最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...

  9. JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...

随机推荐

  1. 移动端API接口优化的术和结果

    最近一直在忙工作的事情,所以文章写得有些少. 有3-5篇文章都是写到一半然后被别的事情给打断了,所以,我得找个时间好好补补. 最近一直在关注移动端接口API的可用性问题,在移动时代这个做这个优化能产生 ...

  2. springMVC含文件上传调用ajax无法连接后台

    springMVC在使用ajax进行后台传值的时候发现找不到对应的requestMapping(""),无法进入后台,在多次试验后确定是 MultipartFile对象与ajax冲 ...

  3. select distinct

    select distinct select distinct 用于返回表中唯一不同的值. 语法 select distinct 列名称 from 表名称 使用 distinct 关键字 Studen ...

  4. 解决linux 无法下载 oracle 官网 java的 安装包

    wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup-co ...

  5. visual studio 2015.3 downloads

    https://www.visualstudio.com/zh-hans/downloads/ visual studio 2015.3 downloads http://download.micro ...

  6. [BZOJ 1497][NOI 2006]最大获利(最大权闭合子图)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1497 分析: 这是在有向图中的问题,且边依赖于点,有向图中存在点.边之间的依赖关系可以 ...

  7. BZOJ 3229: [Sdoi2008]石子合并

    3229: [Sdoi2008]石子合并 时间限制: 3 Sec  内存限制: 128 MB提交: 497  解决: 240[提交][][] 题目描述 在一个操场上摆放着一排N堆石子.现要将石子有次序 ...

  8. C++模板元编程 - 挖新坑的时候探索到了模板元编程的新玩法

    C++真是一门自由的语言,虽然糖没有C#那么多,但是你想要怎么写,想要实现什么,想要用某种编程范式或者语言特性,它都会提供. 开大数运算类的新坑的时候(又是坑),无意中需要解决一个需求:大数类需要分别 ...

  9. equals 与 == 的区别和用法(C# &amp; Java)【转】

    转至http://www.cnblogs.com/beeone/archive/2011/04/25/2026674.html public class TestString { public sta ...

  10. javaWEB小练习:在数据库中查找相同的username和password

    /*练习题: * 在Mysql数据库中创建一个person数据表,添加三个字段,id,user,password,并录入几条记录 * *练习题:定义一个login.html,里面定义了两个请求字段:u ...