高性能JavaScript--加载和执行(简要学习笔记一)

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加载完成!")  

})

时间: 2024-12-17 07:18:25

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

高性能JavaScript 加载和执行

前言 本章主要讲述如何加载脚本使得用户能有良好的用户体验,而核心内容就是JavaScript的异步加载.之前写过一篇不得不说的JavaScript异步加载,相似的内容就不多加描述,讲些不同的东西,主要讲下JavaScript文件加载器labjs的常用方法. 流水账 脚本位置:推荐将所有的<script>标签尽可能放到<body>标签的底部,也就是</body>之前,这样就能在执行js代码之前将用户界面呈现出来,改善用户体验. 组织脚本:由于每个<script>

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

概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(). JavaScript 代码内嵌示例 <html> <head> <title>Source

加快JavaScript加载和执行效率

JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器

JavaScript加载与执行

多数情况下,浏览器是用单一进程处理用户界面和JavaScript脚本执行.所以,JavaScript的处理时间越久,浏览器等待响应事件就越长. 简单地说,就是浏览器每次处理<script>标签,就会让页面等待脚本的解析和执行.这个过程页面渲染和用户交互是完全阻塞的. 一.脚本位置 H4规范指出,<script>标签可以放在<head>和<body>标签内,并允许出现多次. 1.1 将脚本放在底部 正常情况下,多个脚本放到<head>内,浏览器会一

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

1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象. JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档. 2.URL中的JavaScript 在URL后面跟一个JavaScript:协议限定符.里面的代码会作为JavaScript代码进行运行,需用分号分割. 如: <a href="javascript:alert('OK!')"

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

1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有关该事件详细信息的对象. 事件传播:是浏览器决定哪个对象触发其事件处理程序的过程. 事件捕获:在容器元素上注册的特定处理程序有机会再事件传播打破真实目标之前拦截它. 阻止标签默认事件的发生 2.Window事件 focus,blur不冒泡.focusin,focusout冒泡. load当文档和其他

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

seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http://seajs.org/docs/#docs 首先看看seajs是怎么进行模块开发的.使用seajs基本上只有一个函数“define” fn.define = function(id, deps, factory) { //code of function… } 使用define函数来进行定义一个模块

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

1.delete是一元操作符,用来删除对象属性或者元素. var a={ x:1, y:2 } delete a.x; //删除x属性 “x”in a //false:a对象中已经不存在x属性 alert(a.x) //undefined;这里还是存在“东西”的 就如: var b=[1,2,3]; delete b[0]; b.length //3:还是3,虽然上面已经删除了b[0] 2.void运算符 void忽略操作的值,因此在操作数具有辅助作用的时候使用void来让程序更具语义 例子:

[转]JavaScript 的性能优化:加载和执行

原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化:加载和执行 蔡 愉晟, 软件工程师, IBM 简介: 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就