浏览器解析 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. 3.Sqrt(x)

    要求:Implement int sqrt(int x).  Compute and return the square root of x. 解决方法: 1.牛顿法(Newton's method) ...

  2. 使用gson解析，生成Json

    包:gson-2.3.jarJson文本解析为Java对象:Java对象生成为Json文本 import com.google.gson.Gson; public class TestGson { c ...

  3. 重装系统分区时，发现一个叫LVM的东西，找出来和大家分享

    LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现,目前 ...

  4. JSP三大指令

    JSP三大指令1.page-->最复杂,<%@page language = "java" info = "xxx" ..%>  *pageE ...

  5. Spring：No bean named 'beanScope' is defined

    初学Spring,“No bean named 'beanScope' is defined”这个问题困扰了我好几个小时,查资料无果后,重写好几遍代码后发现问题居然是配置文件不能放在包里...要放在s ...

  6. mac 下 chrome 语言环境 设置

    当然,如果把系统语言更改为英文,Chrome.QQ 等一系列软件会自动变成英文界面,而且没有提供切换语言的设置. 啪了下 Google,找到了方法,直接在终端运行后重启 Chrome 即可更改. 英文 ...

  7. angular run()运行块

    和配置块不同,运行块在注入器创建之后被执行,它是所有AngularJS应用中第一个被执行的方法. 运行块是AngularJS中与main方法最接近的概念.运行块中的代码块通常很难进行单元测试,它是和应 ...

  8. css固定div头部不随滚动条滚动

    给div加浮动: position:fixed; 固定宽度,高度,距离头部,左部为0:width: 99%; height: 80px; top:0; left: 0;

  9. JS 之作用域链和闭包

    1.JS无块级作用域 <script> function Main(){ if (1==1){ var name = "alex"; } console.log(nam ...

  10. KBMMW 4.90.00 发布

    kbmMW is a portable, highly scalable, high end application server andenterprise architecture integra ...