`
langgufu
  • 浏览: 2306927 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JAVASCRIPT高性能执行和加载(阻塞特性)

    博客分类:
  • js
阅读更多
阻塞特性:
       JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。

脚本位置:
       浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了,为了避免页面加载时的停顿甚至空白页的出现,JS 脚本应尽量放置在页面底部,这点很重要:

    <html> 
    <head> 
    <title>无标题文档</title> 
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    </head> 
    <body> 
    <p>页面的内容。。。</p> 
    <!-- 推荐的位置,页面底部: --> 
    <script type="text/javascript" src="file1.js"></script> 
    <script type="text/javascript" src="file2.js"></script> 
    <script type="text/javascript" src="file3.js"></script> 
    </body> 
    </html>

组织脚本:
       为了改善上面的阻塞情况,应尽可能的减少页面中<script>标签的出现次数,这同时也是考虑到HTTP 请求会带来额外的性能开销,也就是说应减少页面中外链脚本的数量。

你可以手动合并你的多个JS 文件,也可采用类似Yahoo! combo handler 这样的实时在线服务来实现,例如下面的这个<script>标签实际上便载入了3个JS 文件:

    <html>   
    <head>   
    <title>无标题文档</title>   
    <link rel="stylesheet" type="text/css" href="styles.css" />   
    </head>   
    <body>     
    <p>页面的内容。。。</p>     
    <!-- 推荐的位置,页面底部: -->   
    <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>   
    </body>   
    </html>

无阻塞的脚本:
为了阻塞状况,这里提供了几个实现并行下载JS 脚本的方案。

1. 延迟的脚本

HTML4 为<script>标签定义了一个defer 属性,它能使这段代码延迟执行,然而该属性只有IE4+ 和Firefox 3.5+ 支持。声明了defer 属性的<script>会在DOM加载完成,window.onload 事件触发前被解析执行:

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

2. 动态脚本元素
       这是最通用的解决方案,通过DOM 动态地创建<script>元素并插入到文档中,文件在该元素被添加到页面时开始下载,这样 无论在何时启动下载,文件的下载和执行过程不会阻塞页面其他进程。

不过要注意使用这种方式加载的代码会立刻执行,这样需清楚的了解各文件的作用以及合理的执行顺序,此时跟踪并确保脚本下载完成并准备就绪是很有必要的,非IE浏览器会在<script>元素接收完成时触发一个load 事件,而IE 下则会触发一个readystatechange 事件并通过readyState 属性加以判断便可。以下是兼容地动态加载一个JS 脚本的函数:了:

    function load_script(url, callback)  
    {      var script = document.createElement("script");       
           script.type = "text/javascript"; 
           if (script.readyState)  
           {  //IE  
             script.onreadystatechange = functio()
    {         
     if (script.readyState == "loaded"  script.readyState == "complete")
    {
                    script.onreadystatechange = null;
                    callback();
                 }
               }
          }
    else
    { //others
            script.onload = function(){
                 callback(); }
          }
          script.src = url;
          document.getElementsByTagName("head")[0].appendChild(script);
      }

你可以将这个函数保存至一个load_script.js 文件,然后用该函数来加载其他的脚本,当要加载多个脚本时,为了确保正确的加载顺序,可以将load_script() 的执行串联起来,最后如前面说到的放至页面的底部,这便是一个完美的解决方案了。

    <script  type="text/javascript"src="load_script.js"></script>   
    <script type="text/javascript"> 
    load_script("file1.js", function() 
     {    
       load_script("file2.js", function() 
         {       
          load_script("file3.js", functio()  {                  
    //全部载入后的操作...          
             } ); 
          } ); 
      } ); 
    </script> 

3.XMLHttpRequest 脚本注入

即通过AJAX 方式加载,不过这种方式无法实现跨域加载,不适用于大型网站。

推荐的无阻塞模式
       我们上面做的这些工作当然也已经被那些牛人们完成了,并写成了一些优秀的JS 类库以便我们使用,它们均能很好地解决JS 脚本的阻塞问题,实现并行下载,例如: YUI3、LazyLoad、LABjs 等。
分享到:
评论

相关推荐

    JavaScript语言精粹(高清电子版)和高性能JavaScript 双语版

    本文将深入探讨标题和描述中提及的两本书籍《JavaScript语言精粹》和《高性能JavaScript》所涵盖的知识点。 首先,我们来关注《JavaScript语言精粹》。这本书主要侧重于JavaScript的核心概念和最佳实践,旨在帮助...

    高性能JavaScript

    《高性能JavaScript》是一本专为前端开发人员设计的深度学习指南,它涵盖了JavaScript语言的核心特性以及如何优化这些特性以实现高性能的Web应用。这本书详细解析了JavaScript在实际开发中的各种性能问题,并提供了...

    高性能JavaScript + 高清+目录 PDF

    《高性能JavaScript》是一本深入探讨JavaScript编程技巧与优化策略的专业书籍。它主要针对那些希望提升JavaScript应用程序性能的开发者,无论是前端网页开发还是后端Node.js应用,都能从中受益。本书全面覆盖了...

    《高性能JavaScript编程》.Nicholas.C.Zakas著.英文版

    《高性能JavaScript编程》是著名前端开发者Nicholas C. Zakas所著的一本经典书籍,英文原版名为"High Performance JavaScript"。这本书深入探讨了如何优化JavaScript代码,提升Web应用程序的性能,是JavaScript...

    《高性能 JavaScript》

    ### 《高性能 JavaScript》知识点概览 #### 一、加载与执行(Loading and Execution) **核心概念:** 在浏览器中的JavaScript性能无疑是开发者面临的关键可用性问题。由于JavaScript的阻塞性质,在执行...

    Javascript 高性能程序开发(中文版)

    《Javascript 高性能程序开发》是由Nicholas C. Zakas所著的一本关于如何提高JavaScript性能的书籍。本书通过对JavaScript的深入分析,以及对脚本加载、执行、作用域管理等方面的研究,提出了许多提高JavaScript代码...

    [高性能JavaScript编程].(High.Performance.JavaScript).Nicholas.C.Zakas.文字版

    作者还推荐了推荐的非阻塞模式,这有助于读者构建高效的脚本加载和执行流程。 除此之外,书中还包含了许多关于提高JavaScript性能的技巧和最佳实践。例如,在编写代码时,应当尽量减少全局变量的使用,因为全局变量...

    高性能JavaScript编程1

    本章探讨JavaScript在浏览器中的加载和执行过程,强调了JavaScript执行的阻塞特性。由于大多数浏览器使用单进程处理用户界面更新和JavaScript代码,因此这两者不能同时进行,这就意味着JavaScript执行时间越长,用户...

    高性能JavaScript和构建高性能WEB站点PDF电子书

    《高性能JavaScript和构建高性能WEB站点》是一本深入探讨如何优化JavaScript和Web站点性能的专业书籍。在当前互联网技术日新月异的时代,JavaScript作为Web开发的核心语言,其性能优化对于提升用户体验和降低服务器...

    高性能javascript设计

    在JavaScript的世界里,高性能的设计是确保网页应用流畅运行的关键。要理解如何实现高性能JavaScript,我们需要深入探讨以下几个核心知识点: 1. **数据结构与算法选择**:JavaScript中的对象、数组、字符串等都有...

    高性能JavaScript.pdf

    ### 高性能JavaScript知识点概述 #### 一、加载与执行(Loading and Execution) **核心概念:** - **JavaScript执行机制**:浏览器中的JavaScript执行过程及其对网页渲染的影响。 - **单进程模型**:大多数现代...

    《高性能JavaScript_编程》 PDF

    《高性能JavaScript_编程》这本书是JavaScript开发者...通过阅读《高性能JavaScript_编程》这本书,开发者可以系统地学习到如何在实际项目中运用这些知识点,提升代码质量和运行效率,从而打造高性能的JavaScript应用。

    高性能javascript中英文对照版

    - 第一章 Loading and Execution 加载和运行:此章节探讨了JavaScript在浏览器中的加载和执行性能问题,以及如何优化这部分性能。 - 第二章 Data Access 数据访问:这部分内容可能会介绍如何减少在JavaScript中...

    高性能的javascript之加载顺序与执行原理篇

    JavaScript在浏览器中的性能优化是网页开发中的重要环节,因为JavaScript的加载和执行直接影响到页面的渲染速度和用户体验。本文主要探讨了JavaScript加载顺序与执行原理,以及如何通过优化策略提升性能。 首先,当...

    高性能JavaScript(High Performance JavaScript )

    ### 高性能JavaScript知识点概述 #### 一、书籍简介与背景 《高性能JavaScript》是一本由雅虎前端工程师Nicholas C. Zakas及其团队撰写的关于优化JavaScript性能的专业书籍。该书聚焦于解决Web应用程序中JavaScript...

    Javscript高性能编程+Javascript异步编程

    "JavaScript高性能编程"和"JavaScript异步编程"是两个关键的JavaScript专题,对于提升应用程序的性能和用户体验至关重要。 一、JavaScript高性能编程 1. **优化代码执行效率**:了解JavaScript引擎的工作原理,如...

Global site tag (gtag.js) - Google Analytics