浏览器解析 JavaScript 、CSS 、DOM 时，一般都是单线程解析，所以，引用外部文件时的位置不同，UE体验也不同。

下面是 Yahoo 大牛 Nicholas C. Zakas 的 《High Performance JavaScript》书中的总结。

1、把不影响DOM布局的 JS 文件引用放到 </body> 之前，这样浏览器可先加载HTML页面，解析DOM，给人相对快的感觉。

　　<html>

　　<head>

　　　　<title></title>

　　</head>

　　<body>

　　　　...

　　　　<script src="jquery.js"></script>

　　　　<script src="jqueryui.js"></script>

　　</body>

　　</html>

2、动态加载 JS，意思是动态生成<script>标签，加载外部 JS 文件，利用了浏览器解析 DOM 元素的 src 时不阻塞的特性。

　　一般可在<head></head>标签中动态生成<script>标签，如下，

<head>

    <script>

        // 加载 JS 的封装函数

        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.readState == "complete") {

                        script.onreadystatechange = null;

                        // JS 文件加载完之后，可以处理一些事情

                        callback();

                    }

                }

            }

            else { // firefox\ chrome \opera

                script.onload = function() {

                    // JS 文件加载完之后，可以处理一些事情

                    callback();

                };

            }

            script.src = url;

            document.getElementsByTagName("head")[0].appendChild(script);

        }

        //

        loadScript("http://xxx.com/jquery.com", function() { ... });

    </script>

</head>

　　通过以上方法，也可按照顺序加载多个 JS 文件，

loadScript("file1.js", function() {

    loadScript("file2.js", function() {

        loadScript("file3.js", function() {

            // 加载完毕

            ......

        });

    });

});

3、使用 LazyLoad.js 开源库以非阻塞方式加载外部 JS 文件，从  github : LazyLoad.js  下载， 　　

　　　　<script src="js/lazyload-min.js"></script>
　　　　<script>
　　　　　　LazyLoad.js("the-rest.js", function() {
　　　　　　　　// 加载完之后，做一些逻辑操作
　　　　　　　　......
　　　　　　});
　　　　</script>

　　也可以同时加载多个 JS 文件，写成数组的形式，

　　　　LazyLoad.js(["the-rest.js", "file2.js", "file3.js"], function() {
　　　　　　// 加载完之后，做一些逻辑操作
　　　　　　......
　　　　});

　　注意，LazyLoad 会保证在所有的浏览器中按照顺序加载所有 JS 文件，每一个 JS 文件都是一个单独的 HTTP 请求，

　　并且全部加载完之后才会执行回调函数 callback。

　　LazyLoad 也可以用来动态加载 CSS 文件，CSS文件的下载以并行的方式完成，并且不会阻塞其他页面。

4、使用 LAB.js 开源库以非阻塞方式加载外部 JS 文件，从  lab.js  下载，　　

　　　　<script src="js/LAB.min.js"></script>
　　　　<script>
　　　　　　$LAB.script("the-rest.js").wait(function() {
　　　　　　　　// 加载完之后，做一些逻辑操作
　　　　　　　　......
　　　　　　});
　　　　</script>

　　$LAB 的方法都返回一个 $LAB 对象，所以可以进行链式调用。

　　$LAB.wait() 方法保证只有等 JS 文件下载并执行完之后，才会执行最终的回调函数。

　　也可以同时加载多个 JS 文件，　　

　　　　$LAB.script("first.js").script("the-rest.js").wait(function() {
　　　　　　// 加载完之后，做一些逻辑操作
　　　　　　......
　　　　});

　　一般情况下，LAB 会按照顺序执行多个JS 文件，但并不保证，所以，如果你要保证运行的前后顺序，

　　那么请使用 wait() 方法，如下，

　　　　$LAB.script("first.js").wait().script("the-rest.js").wait(function() {
　　　　　　// 加载完之后，做一些逻辑操作
　　　　　　......
　　　　});

　　这样，就可保证 first.js 在 the-rest.js 之前运行。下载的顺序可以并行。

JavaScript 高性能笔记的更多相关文章

  1. "Javascript高性能动画与页面渲染"笔记

    前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...

  2. javascript进阶笔记(2)

    js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...

  3. JavaScript高性能开发的十条建议

    JavaScript高性能开发的十条建议 文/开发部 Dimmacro 编者按:javascript开发大部分程序员都做过,写出来的代码质量也千差万别,现在浏览器内嵌的解释器虽然效率已经很高了,但在客 ...

  4. javascript高性能

    我在<javascript高性能> 这本书里面读到这个文章,所以做一下学习笔记,供大家一块学习: 无阻塞脚本的概念什么? 为什么要用无阻塞脚本? 如何实现无阻塞脚本,和每个实现方式应该注意 ...

  5. JavaScript基础笔记二

    一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变 ...

  6. JavaScript基础笔记一

    一.真假判断 真的:true.非零数字.非空字符串.非空对象 假的:false.数字零.空字符串.空对象.undefined 例: if(0){ alert(1) }else{ alert(2) } ...

  7. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  8. javascript - 工作笔记 （事件四）

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  9. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. Django views 中 View decorators

    decorators(装饰器) 1. require_http_methods 在django.views.decorators.http中,可以用来限制请求的权限. require_http_met ...

  2. Server 2003序列号

    windows2003 64位注册码 Windows 2003 R2 64bit Enterprise VOL Edition 企业版 MR78C-GF2CY-KC864-DTG74-VMT73 VP ...

  3. DOM编程（每天有学习一点篇）

    每次想到“DOM”编程就会自然联想到“性能瓶颈”.我觉得有两部分原因: 1.DOM自己本身操作代价昂贵,因为浏览器通常要求DOM 实现和JavaScript 实现保持相互独立: 2.嘿嘿,本人自身的原 ...

  4. 国际化(i18n)

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  5. Sturts2 工作原理

    上图来源于Struts2官方站点,是Struts 2 的整体结构. 一个请求在Struts2框架中的处理大概分为以下几个步骤(可查看源码:https://github.com/apache/strut ...

  6. 第五百八十三天 how can I 坚持

    今天去看了个电影,日本动漫,第一次在电影院看日本动漫,<你的名字>,挺经典的.存在爱情吗?什么是爱情,哎.什么是人. 好像有点感冒了呢,说过自己很久没感冒后,往往就会感冒,这到底是怎么回事 ...

  7. 交换两个数-c++实现

    今天看了下交换数值的小程序,网上挺多的,整理了下,,因为参考较多,没一一给出链接,若原作者看到,可以留言,我会添加 // example_1_6_function_swap.cpp : 定义控制台应用 ...

  8. SQL in与exists

    无可置疑,如果in()的结果集非常庞大,那么效率必然是低的. 但EXISTS subquery根据其语法可知在SQL中的作用是:检验查询是否返回数据.如果在 Dictionary 对象中指定的关键字存 ...

  9. encache学习教程

    http://www.cnblogs.com/hoojo/archive/2012/07/12/2587556.html

  10. [转载] Android.Hook框架xposed开发篇

    本文转载自: http://www.52pojie.cn/thread-396793-1-1.html 原帖:http://drops.wooyun.org/tips/7488 作者:瘦蛟舞 官方教程 ...