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. redis并发问题

    redis中的并发问题 使用redis作为缓存已经很久了,redis是以单进程的形式运行的,命令是一个接着一个执行的,一直以为不会存在并发的问题,直到今天看到相关的资料,才恍然大悟~~ 具体问题实例 ...

  2. [WPF系列]-TreeView的常用事项

    引言 项目经常会用Treeview来组织一些具有层级结构的数据,本节就将项目使用Treeview常见的问题作一个总结. DataBinding数据绑定 DataTemplate自定义 <Hier ...

  3. Win10/UWP开发—凭据保险箱PasswordVault

    PasswordVault用户凭据保险箱其实并不算是Win10的新功能,早在Windows 8.0时代就已经存在了,本文仅仅是介绍在UWP应用中如何使用凭据保险箱进行安全存储和检索用户凭据. 那么什么 ...

  4. 文件件监听器,android系统拍照功能调用后删除系统生成的照片

    先说说要实现的功能: android调用系统拍照功能实时 预览 删除 上传 保存 (用户不能再本地文件夹中看到拍的照片) 再说说遇到的问题: 1.调用系统拍照在系统自带的拍照文件夹中生成一张随机命名图 ...

  5. 本地连接虚拟机上面的redis

    想做一个抓取系统,想到用redis存储临时数据可能会比较好些,就想着装个虚拟机,在虚拟机上面安装redis,通过本地来访问虚拟机上面的redis. 虚拟机和redis安装成功之后,发现本地怎么都连接不 ...

  6. Roll A Ball

    GameObject的添加就不细说了,地面,小球和碰撞小物体. 刚体组件(Rigidbody): 使物体能够模拟物理效果,比如重力,碰撞,推力等: 控制小球移动的脚本(Script,Ball的脚本): ...

  7. 利用EEPROM实现arduino的断电存储

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 一.EEPROM简介 EEPROM (Electrically Erasable Progr ...

  8. 分享书籍[writing idiomatic python ebook]

    你是不是总是觉得学了python好久,蓦然回首,总是感觉写的代码不是那么有pythonic的味道.看看别人的代码(django,webpy),再看看自己的代码,觉得就是一java-python的混合体 ...

  9. 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互(点击、触摸)事件

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  10. mahout算法源码分析之Itembased Collaborative Filtering(四)共生矩阵乘法

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 经过了SimilarityJob的计算共生矩阵后,就可以开始下面一个过程了,这个过程主要是共生矩阵的乘法 ...