1.多数浏览器使用单一进程来处理用户界面刷新和JavaScript脚本的执行。所以同一时刻只能做同一件事。JavaScript执行过程耗时越久，浏览器等待相应的时间就越长。
 
2.<script>标签用来加载出现在<head>中的外链JavaScript文件，紧挨着<link>标签用来加载外部css文件或者其他页面元素。理论上来说，把与样式和行为有关的脚本放在一起，并先加载他们，这样有助于确保页面的渲染和交互的正确性。但这样会带来严重的性能问题。
 
3.由于脚本阻塞页面其他资源的下载，建议将所有的<script>标签放到<body>标签的底部。
 
4.多个<script>外链脚本的下载会带来HTTP请求的性能开销。所以下载单个100KB的文件将比下载4个25KB的文件快。也即减少页面中外链的数量将会改善性能。
 
5.无阻塞脚本的秘诀在于，在页面完成加载后才加载javascript。意味着在window对象的load事件触发后在下载脚本。
 
6.方法一:defer属性（IE中）
属性规定是否对脚本执行进行延迟，直到页面加载为止。
该属性指明元素含有的脚本不会修改DOM。
<html>

<body>

<script type="text/javascript" defer="defer">

alert(document.getElementById("p1").firstChild.nodeValue);

</script>

<p>上面的脚本会从下面的段落中请求信息。通常，这是做不到的，因为在段落加载之前，脚本已经运行过了。</p>

<p id="p1">hello zqz!</p>

<p>然而，defer 属性规定了脚本必须在页面加载完毕后执行。这样，脚本就可以从段落中请求数据了。</p>

<p><b>注释：</b>该属性只能在 Internet Explorer 中运行。</p>

</body>

</html>

 
方法二：html5中新增加的方法async="true"(IE9中可以)

async 属性规定一旦脚本可用，则会异步执行。

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello ZQZ!</p>

<script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>

</body>

</html>

方法三：动态加载脚本

动态加载脚本节点下载文件时，返回的代码通常会立即执行。

书上说在火狐，谷歌等浏览器上可以使用<script>元素接收完成时触发的一个load事件来监听脚本加载完成时的状态。

<script>

    var script=document.createElement("script");

    script.type="text/javascript";

    script.load=function(){

        alert("接收外部script完成！");

    };

    script.src="scprit1.js";

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

</script>

可在我测试后，无论是在哪个浏览器都没有效果，不知道是为什么！求知道的博友们留言给我。谢谢！

而IE中有另外一种实现方式，他会触发一个readystatechange事件。可以用来监听script的加载完成。<script>元素提供一个readyState属性。

该属性有5种取值：

"uninitialized"　　//初始状态

"loading"　　//开始下载

"loaded"　　　//下载完成　

"interactive"　　//数据完成下载但尚不可用

"complete"　　//所有数据已准备就绪

然后在微软的相关文档中表明，在<script>生命周期中，并非每个取值都会用到。所以最靠谱的就是检查“loaded”跟"complete"。

var script=document.createElement("script");

    script.type="text/javascript";

    script.onreadystatechange=function(){

        //alert("0")

        if(script.readyState=="loaded" || script.readyState=="complete"){

            script.onreadystatechange=null;   //删除事件处理器，避免处理两次

            alert("外部js接收完成");

        }

    };

    script.src="scprit1.js";

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

该书中还有一个封装好的标准及IE特有的实现方法：

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

                script.onreadystatechange=null;

                callback();

            }

        };

    }else{//其它浏览器

        script.onload=function(){

            callback();

            };

        }

        script.src=url;

        document.getelementsbytagname("head")[0].appendchild(script);

    }

使用方法:

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

　　alert("外部js加载完成！")　　

})

高性能JavaScript--加载和执行(简要学习笔记一)的更多相关文章

  1. 高性能JavaScript 加载和执行

    前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要 ...

  2. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  3. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

  4. JavaScript权威设计--事件处理介绍(简要学习笔记十七)

    1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有 ...

  5. JavaScript权威设计--Window对象(简要学习笔记十三)

    1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象. JavaScript程序可以通过Doc ...

  6. js模块加载框架 sea.js学习笔记

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  7. android图片的异步加载和双缓存学习笔记——DisplayImageOptions （转）

    转的地址:http://hunankeda110.iteye.com/blog/1897961 1 //设置图片在下载期间显示的图片 2 showStubImage(R.drawable.ic_lau ...

  8. 高性能JavaScript--快速响应的用户界面(简要学习笔记三)

    1.浏览器线程:用于执行JavaScript和更新用户界面的进程被称为“浏览器UI线程”.   2. <1>定时器的出现让出UI线程控制权 setTimeout(),setInterval ...

  9. JavaScript权威设计--JavaScript表达式与运算符,语句(简要学习笔记六)

    1.delete是一元操作符,用来删除对象属性或者元素. var a={ x:1, y:2 } delete a.x; //删除x属性 “x”in a //false:a对象中已经不存在x属性 ale ...

随机推荐

  1. .NET Core 首例 Office 开源跨平台组件（NPOI Core）

    前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...

  2. Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持

    Jexus 是一款运行于 Linux 平台,以支持  ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...

  3. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  4. CRL快速开发框架系列教程六(分布式缓存解决方案)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  5. PHP类和对象之重载

    PHP中的重载指的是动态的创建属性与方法,是通过魔术方法来实现的.属性的重载通过__set,__get,__isset,__unset来分别实现对不存在属性的赋值.读取.判断属性是否设置.销毁属性. ...

  6. GJM ： C#设计模式汇总整理——导航 【原创】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  7. 中文 iOS/Mac 开发博客列表

    中文 iOS/Mac 开发博客列表 博客地址 RSS地址 OneV's Den http://onevcat.com/atom.xml 一只魔法师的工坊 http://blog.ibireme.com ...

  8. 【SAP业务模式】之ICS（五）：定价配置

    本篇博文讲述ICS业务中的定价配置. 1.定义销售订单类型 目录:SPRO-销售与分销-销售-销售凭证-销售凭证抬头-定义销售凭证类型 事务代码:VOV8 2.定义销售订单类型 目录:SPRO-销售与 ...

  9. windows 7（32/64位）GHO安装指南（U盘制作篇）~

    本篇接着上篇的介绍,为同学讲解U盘启动盘的制作.虽然本篇大白菜的官网上也有类似的教程,但是为了完整性,我将在这里为大家细细的讲解.在这里说一下,系统包和软件包的下载大家可以自行下载,很简单的,小主就不 ...

  10. 使用nginx反向代理，一个80端口下，配置多个微信项目

    我们要接入微信公众号平台开发,需要填写服务器配置,然后依据接口文档才能实现业务逻辑.但是微信公众号接口只支持80接口(80端口).我们因业务需求需要在一个公众号域名下面,发布两个需要微信授权的项目,怎 ...