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性能优化小窍门汇总（含实例）

    在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...

  4. 摘：JavaScript性能优化小知识总结

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

  5. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  6. JavaScript性能优化小知识总结(转)

    JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...

  7. JavaScript性能优化篇js优化

    JavaScript性能优化篇js优化   随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...

  8. javascript性能优化-repaint和reflow

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

  9. 前端性能优化（JavaScript篇）

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...

随机推荐

  1. scrapy爬虫docker部署

    spider_docker 接我上篇博客,为爬虫引用创建container,包括的模块:scrapy, mongo, celery, rabbitmq,连接https://github.com/Liu ...

  2. Spring Enable annotation – writing a custom Enable annotation

    原文地址:https://www.javacodegeeks.com/2015/04/spring-enable-annotation-writing-a-custom-enable-annotati ...

  3. 【算法】C语言实现数组的动态分配

    C语言实现数组的动态分配 作者:白宁超 2016年10月27日20:13:13 摘要:数据结构和算法对于编程的意义不言而喻,具有指导意义的.无论从事算法优化方向研究,还是大数据处理,亦或者网站开发AP ...

  4. 简记某WebGIS项目的优化之路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 该项目为研究生时的老师牵头,个人已毕业数年,应老师要求协助其 ...

  5. 破解SQLServer for Linux预览版的3.5GB内存限制 (UBUNTU篇)

    在上一篇中我提到了如何破解RHEL上SQLServer的内存大小限制,但是Ubuntu上还有一道检查 这篇我将会讲解如何在3.5GB以下内存的Ubuntu中安装和运行SQLServer for Lin ...

  6. 初识的Spring Mvc-----原理

    一.Spring Mvc简介 Spring Mvc(Spring Web Mvc) 属于表现层的框架. 二.Spring结构图 Spring Mvc是Spring框架里面web模块的一部分,是在Spr ...

  7. arcgis api for js入门开发系列七图层控制(含源代码)

    上一篇实现了demo的地图分屏对比模块,本篇新增图层控制模块,截图如下(源代码见文章底部): 图层控制模块实现的思路如下: 1.在地图配置文件map.config.js里面配置图层目录树节点信息,作为 ...

  8. arcgis api for js入门开发系列五地图态势标绘(含源代码)

    上一篇实现了demo的地图查询功能,本篇新增地图态势标绘模块,截图如下: 本篇核心的在于调用API的Draw工具:https://developers.arcgis.com/javascript/3/ ...

  9. 安卓自定义组合控件--toolbar

    最近在学习安卓APP的开发,用到了toolbar这个控件, 最开始使用时include layout这种方法,不过感觉封装性不好,就又改成了自定义组合控件的方式. 使用的工具为android stud ...

  10. CentOS：ECDSA host key "ip地址" for has changed and you have requested strict checking（转）

    原文地址:http://blog.csdn.net/ausboyue/article/details/52775281 Linux SSH命令错误:ECDSA host key "ip地址& ...