高性能JavaScript (笔记一:加载和执行)

1、JavaScript的阻塞特性:

  当浏览器执行JavaScript代码时,不能同时做其他任何事情;

  IE8、Firefox3.5、Safari4和Chrome2都允许并行下载JavaScript文件,这样<script>标签在加载外部资源的时候,不会阻塞其他<script>标签的加载,但还是会阻塞其他资源的加载;

  推荐将所有<script>标签尽可能放到<body>标签的底部,尽量减少对整个页面加载的影响。

  减少外链脚本的数量将会改善性能,加载单个100KB的文件比下载4个25KB的文件更快;

  把内嵌脚本房子啊应用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载,这样做是为了确保内嵌脚本在执行时能获得最准确的样式信息,因此建议永远不要将内嵌脚本紧跟在<link>标签后面;

  若需要依赖多个js文件,可以吧多个文件合并成一个,就需要引用一个<script>标签,减少性能消耗,合并文件的工作可通过离线打包工具执行;

  创建响应迅速的web应用:减少JavaScript文件的大小,限制HTTP请求次数。。。

2、无阻塞的脚本:

  (1)延迟的脚本:

  HTML4为<script>标签定义了一个扩展属性:defer,指明本元素所含的脚本不会修改dom,因此代码能够安全的延迟执行;

  目前defer属性已经被主流浏览器支持,根据W3C的HTML5规定:defer属性仅当src属性声明时才生效;

<script type="text/javascript" src="file1.js" defer></script>

  HTML5中引入了async属性,用于异步加载脚本,async与defer的相同点是采用并行加载,在下载过程中不会产生阻塞,区别在于:async是加载完成后自动执行,而defer需要等待页面完成后执行。

  (2)动态脚本元素:

  动态穿件<script>标签到页面中,加载的js文件,在被添加到页面时开始下载,这样无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程

  以下是兼容IE的动态加载JavaScript文件的的方法:

  

function loadScript(url,callback){
    var script = document.createElement(‘script‘);
    if(script.redayState){ //IE
        script.onreadystatechange = function(){
            if(script.readyState == "load" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    }else{
        script.onload = function(){
            callback();
        }
    }
    script.src = url;
    document.getElementByTagName("head")[0].appendChild(script);
}

  (3)XMLHttpRequest脚本注入

  该方法是创建一个XHR对象,然后用它下载JavaScript文件,最后通过创建<script>元素将代码注入页面中。

  优点是:可以下载JavaScript代码但不是立即执行,主流浏览器都支持

  局限性:JavaScript文件必须与所请求的页面处于相同的域,因此单行的WEB应用通常不会采用XHR脚本注入技术。

  (4)YUI3的方式

  (5)LazyLoad类库:这是延迟加载工具

    <script type="text/javascript" src="lazyload-min.js"></script>
    <script type="text/javascript">
        LazyLoad.js("the-rest.js",function(){
            Application.init();
        });
    </script>

  LazyLoad同样支持多个JavaScript文件,并能保持所有浏览器中都能正确执行,要加载多个JavaScript文件,只需给LazyLoad.js()方法传入一个URL数组:

  <script type="text/javascript" src="lazyload-min.js"></script>
    <script type="text/javascript">
        LazyLoad.js(["the-rest.js","the-rest1.js"],function(){
            Application.init();
        });
    </script>

  (5)LABjs

  

  <script type="text/javascript" src="lab.js"></script>
    <script type="text/javascript">
        $LAB.script("first-file.js")
            .script("the-rest.js")
            .wait(function(){ //文件下载并执行完毕后所调用的函数
                Application.init();
            })
    </script>

  

  

时间: 2024-10-27 03:39:58

高性能JavaScript (笔记一:加载和执行)的相关文章

编写高性能的JavaScript 脚本的加载与执行

脚本可以放在html页面的head里面,也可以放在body里面. 把脚本放在body中,当浏览器遇见<script>标签时, 浏览器不知道脚本会插入文本还是html标签,因此浏览器会停止分析html页面而去执行脚本.当使用src的方式添加脚本时,浏览器也会做同样的动作.在脚本处理的时候,页面呈现和用户交互将被完全阻止.脚本下载和执行阻塞了其他资源的下载,比如呈现页面使用的图片.(虽然很多浏览器实现了脚本并行下载的技术,但是这个问题依然没有解决) 脚本的位置 鉴于上面的理由,脚本应该始终放在页面

高性能JS笔记1——加载执行

一.脚本位置 1.Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响. 2.Script标签永远不要紧跟Link标签后面. 二.组织脚本 1.合并多个文件在一个Script中加载: <script type="text/javascript" src="/scripts/jquery.min.js&/scripts/jquery.validation.js"></script> 三.无阻塞的脚本 1.无

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

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

【转】js JavaScript 的性能优化:加载和执行

JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详

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

随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必

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

随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 1.概述 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染

高性能JavaScript 加载和执行

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

程序的加载和执行(六)——《x86汇编语言:从实模式到保护模式》读书笔记26

程序的加载和执行(六)--<x86汇编语言:从实模式到保护模式>读书笔记26 通过本文能学到什么? NASM的条件汇编 用NASM编译的时候,通过命令行选项定义宏 Makefile的条件语句 在make命令行中覆盖Makefile中的变量值 第13章习题解答 复习如何构造栈段描述符 我们接着上篇博文说. 在我修改后的文件中,用到了条件汇编. 比如: %ifdef DEBUG put_core_salt: ;打印内核的符号 ... ... put_usr_salt: ;打印用户的符号 ... .

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

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

程序的加载和执行(三)——《x86汇编语言:从实模式到保护模式》读书笔记23

程序的加载和执行(三)--读书笔记23 接着上次的内容说. 关于过程load_relocate_program的讲解还没有完,还差创建栈段描述符和重定位符号表. 分配栈空间与创建栈段描述符 462 ;建立程序堆栈段描述符 463 mov ecx,[edi+0x0c] ;4KB的倍率 464 mov ebx,0x000fffff 465 sub ebx,ecx ;得到段界限 466 mov eax,4096 467 mul dword [edi+0x0c] 468 mov ecx,eax ;准备为