浏览器解析 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. 剑指Offer:面试题26——复制复杂的链表(java实现)

    问题描述: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点). 思路1: 1.先复制链表节点,并用next链接起来. 2.然后对每一个结点去修改 ...

  2. VR全景智慧城市-720全景项目行业应用

    VR虚拟现实.VR全景概念已成为科技发展热议的焦点.在这样的市场大环境下,全景智慧城市做为一家对大众创新万众创业和用户体验为理念的VR全景城市化信息搜素平台平地而生成为的VR行业领跑者,致力VR全景V ...

  3. Jmeter组件4. Regular Expression Extractor

    位置:Post-Processors - Regular Expression Extractor 所谓的Post-Processors直译为后处理器,意思是在域内所有Sampler执行完后才会执行, ...

  4. cs11_c++_lab1

    lab1.cpp #include "Point.hh" #include <iostream> #include <cmath> using namesp ...

  5. 路由器WDS实际案例

    背景环境: 我家在农村,由于是农村,虽然现在村里迁了网线,但是用户毕竟还是很少的,我家常年都在外面打工,就过年过节回来十几二十天,想上网,不值得迁网线,所以选择不道德的蹭网. 由于手机的信号并没有专业 ...

  6. #error作用

    指令 用途 # 空指令,无任何效果 #include 包含一个源代码文件 #define 定义宏 #undef 取消已定义的宏 #if 如果给定条件为真,则编译下面代码 #ifdef 如果宏已经定义, ...

  7. java, poi, excel

    工作需要用java操作Excel,现在网上搜索了一下,决定选取POI包来操作.pom内容如下: <dependency> <groupId>org.apache.poi< ...

  8. (转)jQuery中的extend()方法

    本文转自:http://www.xiabingbao.com/jquery/2015/05/30/jquery-extend 原文的排版要比这里美观很多,建议去原文查看.本文仅仅作为个人的mark,方 ...

  9. Howto: 如何将ArcGIS Server缓存移动到新服务器

     Howto: 如何将ArcGIS Server缓存移动到新服务器 文章编号: 33686 软件: ArcGIS Server 9.2, 9.3, 9.3.1 操作系统: Windows 2000, ...

  10. pyhton函数——黑板客老师课程学习

    1.基本语法 语法: def func_name (arguments)  定义 statements return x,y x,y=func_name(para)   调用 作用域: 可以给内置的函 ...