`

优化JavaScript 之执行时间

 
阅读更多


JavaScript 是解释性的语言,他的执行速度要大大慢于编译性语言。
JavaScript 比编译型的 C 慢 5000 倍;
           比解释型的 Java 慢 100 倍;
           比解释型的 Perl 慢 10 倍;
           不过我们可以坐一些简单的事情来提高 JavaScript代码的性能。
           1.关注范围
           范围可以被认为是某个变量的存在空间。浏览器的 JavaScript 的默认的范围(全局)是 window。在window范围中创建的变量只在页面从浏览器中卸载后才
会销毁。而你定义的每个函数都是在全局范围下的另一个范围中。在函数中创建的所有变量都只存在于函数范围内,函数执行完毕时就销毁。
            可以认为JavaScript 的范围是一个树状层次。引用变量时, JavaScript 解释程序先在最近的范围内查找其是否存在。如果没有,就到上一层次中查找,如此
进行,直到 window 范围。如果在 window 范围内也没有发现变量,则报告错误。

            每次解释程序到另一个范围内搜索变量,都会影响执行速度。本地范围内的变量比全局变量执行起来更快。解释程序在树中要走的距离越短,脚本运行地越快。
            考虑如下例子:
            var sMyF = "Nicholas";
           
            function fn1(){
                alert(sMyF);
            }
            function fn2(){
                var sMyM = "Zakas";
                fn1();
            }
            function fn3(){
                var sMyL = "C";
                fn2();
            }
           
            fn3();
            调用最后一行的 fn3() 时,创建了如下的范围树:
            (window)
                |
                |
                |------MyF = "Nicholas"
                |
                |
                |------fn3()
                        |
                        |
                        |------MyM = "Zakas"
                        |
                        |
                        |-------fn2()
                                  |
                                  |
                                  |-------MyL = "C"
                                  |
                                  |
                                  |--------fn1()
            函数fn3()调用fn2(),而fn2()调用了fn1()。函数fn1()又访问了window级别的变量 sMyF,为定位这个变量,解释程序必须不断向上查找整个范围树,直到window范围。这花费了很多时间。所以必须找一个优化执行速度的方法。
            (1)使用局部变量
            在函数中,总是使用var 语句来定义变量。无论何时使用var,都会在当前的范围内创建一个局部变量。如果直接使用这个变量而不事先用var进行声明,则变量会创建在window范围内,也就说每次使用这个变量,解释程序都要搜索整个范围树。
            例如,不推荐这种方法。
            function sayFirstName(){
                aMyF = "Nicholas";        //    没有使用 var 声明
                alert(aMyF);
            }
            在这个函数中,对变量 aMyF的赋值没有使用var;变量就被创建在了window 范围内。   

分享到:
评论

相关推荐

    Javascript 性能优化的一点技巧

    随着Web应用的日益复杂,JavaScript作为前端开发的核心语言之一,其运行效率直接影响着用户体验与整体性能。因此,掌握一定的JavaScript性能优化技巧对于提升应用程序性能至关重要。本文将深入探讨一些JavaScript...

    前台javascript速度优化

    在前端开发中,JavaScript是构建交互式用户界面和动态网页的关键技术。为了提供更好的用户体验,JavaScript性能优化至关重要。...通过理解并实践这些优化技巧,可以显著提升前端应用的运行效率,从而提高用户体验。

    javascript:时间空间

    时间效率是指程序执行所需的时间,而空间效率则关注程序运行时所需的内存空间。优化这两个方面可以显著提升应用的响应速度和用户体验。 首先,我们来看时间效率。JavaScript中的循环结构是影响时间效率的一个重要...

    JavaScript性能优化的小知识总结共23页.pdf

    5. **防抖(Debounce)与节流(Throttle)**:防抖用于限制函数在一定时间内执行的次数,节流则确保函数在一定频率内执行,两者常用于滚动事件、窗口resize等场景。 6. **避免全局查找**:减少对window对象的引用,...

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

    这本书的重点在于优化JavaScript代码的性能,确保应用程序的高效运行。书中可能包含以下知识点: 1. **性能分析**:如何使用开发者工具进行性能测试,识别瓶颈并进行优化。 2. **数据结构和算法**:选择合适的数据...

    JavaScript代码优化一例.pdf

    现在,由于机器内存资源相对充裕,算法(代码)的优化,更多地集中于运行时长上,对JavaScript代碼而言,更是如此。 三、JavaScript代码优化的重要性 JavaScript代码的优化非常重要。根据Syracuse大学的Geofrery ...

    【合集】优化和提高javascript的运行速度

    为了达到优化和提高JavaScript运行速度的目的,有许多策略和技术可以应用,以下将详细阐述这些知识点。 首先,要确保JavaScript的源码尽可能地高效和简洁。可以通过移除不必要的空格、换行和注释来达到这一点。另一...

    seo优化如何处理JavaScript和Flash

    如果JavaScript执行时间过长,搜索引擎可能会停止抓取,或者因性能问题而不抓取页面。 3. **内容可访问性**:确保JavaScript生成的内容对搜索引擎友好。即使搜索引擎可以执行JavaScript,也应确保页面的基础HTML...

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

    浏览器中的JavaScript执行具有阻塞特性,意味着在执行脚本时,浏览器无法进行其他操作,如下载资源或渲染页面。这直接影响用户体验,特别是当JavaScript代码执行时间过长时。 首先,理解JavaScript阻塞的原因是优化...

    Javascript时间 倒数器的代码与实现

    JavaScript时间倒计时器是一种常见的前端开发功能,用于显示特定日期或时间点之前的剩余时间。在网页中,这种倒计时器通常用于促销活动、竞赛结束或者重要事件的预告等场景。下面我们将深入探讨如何使用JavaScript来...

    JavaScript检查器和优化器.zip

    它们通过一系列算法来分析和转换代码,以减少执行时间和内存占用。例如,Google的Closure Compiler是一个著名的JavaScript优化器,它将源代码转化为更高效的等效版本。Closure Compiler有三个编译级别:简单优化...

    2.02 JavaScript优化.pdf

    JavaScript 优化是指通过各种技术和方法来提高 JavaScript 的执行效率、减少浏览器的 нагрузка、提升用户体验的一种优化手段。下面我们将详细介绍事件流、事件委托、懒加载、预加载这四个重要的 JavaScript ...

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

    公司的高级前端工程师,他在书中分享了大量实战经验与技巧,帮助读者优化JavaScript性能,提升网页的加载速度和运行效率。 首先,书中讲述了JavaScript代码的加载与执行,这是性能优化的第一步。作者强调了脚本的...

    hermes,hermes是一个小型的轻量级javascript引擎,为在android上运行react native而优化。.zip

    它的核心目标是提升React Native应用的启动速度和整体性能,通过优化JavaScript代码执行效率来实现这一目标。Hermes由Facebook开发并开源,允许开发者们在Android应用中使用预编译的JavaScript字节码,从而减少内存...

    JavaScript的时间消耗共9页.pdf.zip

    由于JavaScript代码的执行效率直接影响到网页的响应速度和用户体验,理解JavaScript的时间消耗对于优化性能至关重要。这篇9页的PDF文档,可能详细探讨了JavaScript在执行过程中的时间开销,包括解析、编译、执行上...

    JavaScript解析器用于ES6的压缩器优化器和美化工具包

    Terser作为这类工具的代表,为JavaScript的优化提供了强大的支持,是每个前端开发者都需要了解和掌握的工具之一。通过深入理解其工作原理和使用方法,我们可以更好地优化我们的项目,提升用户体验。

    TimelineJS基于JavaScript的故事时间线

    TimelineJS的实现基于JavaScript,这是一种广泛使用的客户端脚本语言,可在用户的浏览器上运行。JavaScript允许开发者动态更新网页内容,实现交互功能,而无需刷新页面。在TimelineJS中,JavaScript处理数据加载、...

    jit JavaScript

    JavaScript即时编译(Just-In-Time,简称JIT)是一种优化技术,它被广泛应用于JavaScript引擎中,以提高脚本的执行速度。JavaScript原本是一种解释型语言,代码在运行时逐行解析并执行,但JIT的引入使得部分代码在...

Global site tag (gtag.js) - Google Analytics