浏览器解析 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. ASP.NET Page对象各事件执行顺序（转）

    很久没写 asp.net 的东西了,search 了一下 page 的事件执行顺序,找到如下的东西,仅仅做记录用 Page.PreInit 在页初始化开始时发生 Page.Init 当服务器控件初始化 ...

  2. Codeforces Round #228 (Div. 1) B

    B. Fox and Minimal path time limit per test 1 second memory limit per test 256 megabytes input stand ...

  3. set JAVA_HOME in RHEL/CentOS

    3.3. Install OpenJDK on Red Hat Enterprise Linux Introduction OpenJDK is one of many Java Developmen ...

  4. 关于 presentViewController 时机

    类似微信.QQ这些应用如果用户没有登录,会弹出登录界面,如果 presentViewController 是写在  viewDidAppear 之前,会有警告 Presenting view cont ...

  5. openldap sshkey ＆ 用户自定义属性

    http://qiita.com/T_Tsan/items/eeb0a9ae9b4cdeb80934 https://www.ossramblings.com/using-ldap-to-store- ...

  6. JavaScript 常用算法

    1.排序算法 (1)冒泡排序,冒泡排序其实就是通过比较相邻位置的元素大小,如果左边比右边大,就交换位置,继续比较,实际上就是每轮比较都得出一个最大值,然后通过多伦比较得出. function bubb ...

  7. JavaScript 基础(七) 箭头函数 generator Date JSON

    ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函 ...

  8. C语言中的union

    1.union中可以定义多个成员,union的大小由最大的成员的大小决定. 2.union成员共享同一块大小的内存,一次只能使用其中的一个成员,与struct形成鲜明对比. 3.对某一个成员赋值,会覆 ...

  9. jafka消息结构

  10. android系统中查看哪些端口被哪些应用打开

    1 查看哪些端口开放,netstat 2 根据端口号获取到UID,比如端口号为10050,转成16进制是2742,使用命令grep -i 2742 /proc/net/tcp6,就能看到其UID,假如 ...