浏览器解析 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. Chap3: question: 11 - 18

    11. double 数值的整数次方 note: 浮点数表示时有误差,判等时必须自己根据精度要求实现. #include <iostream> #include <ctime> ...

  2. 5.Integer to Roman && Roman to Integer

    Roman chart: http://literacy.kent.edu/Minigrants/Cinci/romanchart.htm Integer to Roman Given an inte ...

  3. LINUX下WIFI默认连接

    #! /bin/sh ifconfig wlan0 upiwconfig wlan0 key 123456iwconfig wlan0 essid "rat-linux"iwcon ...

  4. pow的小事不简单

    http://acm.hdu.edu.cn/showproblem.php?pid=5878 #include<stdio.h> #include<iostream> #inc ...

  5. IPTV视频基本概念

      480x320, 640x480 标清 1024x720p 高清 1920x1080i (隔行扫描) 也属于高清 1920x1080p 全高清 3840x2160,7680x4320 超(高)清 ...

  6. 用shell脚本切分task_list，并分别执行的脚本

    #/bin/sh TASK_LIST=$ len=`wc -l $TASK_LIST | awk '{print $1}'` #noExce(){ ) ))'p' $TASK_LIST > $T ...

  7. Android IOS WebRTC 音视频开发总结（六九）-- qq视频通话都是p2p，我们还怕啥？

    本文主要介绍在线教育这个行业,文章最早发表在我们的微信公众号上,支持原创,详见这里, 欢迎关注微信公众号blackerteam,更多详见www.rtc.help 先简单介绍什么是p2p? p是peer ...

  8. 第五百八十二天 how can I 坚持

    好吧,是我错了,昨天,做好自己就行了,别人怎么样是别人的事,永远保持一颗单纯向上的心. 时间过得真快,明天又周六了.. 睡觉.

  9. Python2和Python3在windows下共存

    Python2.7 和 Python3不兼容,两种环境可能都会用到.ubuntu14.04中已经默认安装了这两个版本,在shell中输入python会自动进入Python2.7的交互环境,输入Pyth ...

  10. EMR,电子病历（Electronic Medical Record）

    电子病历 电子病历(EMR,Electronic Medical Record),也叫计算机化的病案系统或称基于计算机的病人记录(CPR,Computer-Based Patient Record). ...