`

优化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 性能优化.ppt

    优化 JavaScript 性能,使它运行足够快 一个关键因素:运行的时间 管理作用域 操作数据 流控制 Reflow DOM操作 长时间运行的脚本处理

    javascript写的windows资源管理器

    因为时间的关系只提供了局部份功能,还有很多代码和函数都没有进行优化,(注释也较少)比如错误处理,浏览器嗅探等。 这里需要说明的是很少用到了innerHTML和innerTEXT两个方法,这是微软提供的专利方法,还没有...

    JavaScript优化专题之Loading and Execution加载和运行

    事实上,大多数浏览器使用单进程处理UI 更新和JavaScript 运行等多个任务,而同一时间只能有一个任务被执行。 JavaScript运行了多长时间,那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。 从基本层面说,...

    JavaScript性能优化总结之加载与执行

    JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响。一个典型的例子就是...

    JavaScript性能优化

    对于js来说,刚使用的人上手可能很快,时间长了你会觉得它其中的奥妙,从而也就会注意它的执行效率,一些在工作常见的总结了一下,有什么错误还请大家指出。

    javascript压缩工具

    软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本...

    JavaScript中的无阻塞加载性能优化方案

    原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行。Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。 从基本...

    前端性能优化知识图谱指导

    JS性能优化是指在JavaScript代码的编写和执行过程中,通过一系列的优化策略和技术手段,提高代码的执行效率和性能,从而提升网页或应用程序的响应速度和用户体验。 优化JS性能的方法包括但不限于以下几个方面: 代码...

    js 性能优化之快速响应的用户界面

    用于执行JavaScript和更新用户界面的进程通常被称为“浏览器UI线程”。JavaScript和用户界面更新在同一个进程中运行,因此一次只能处理一件事情。  ·任何JavaScript任务都不应当执行...一些优化JavaScript任务时间

    JavaScript 代码压缩加密软件

    软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本...

    用javascript写的windows资源管理器

    因为时间的关系只提供了局部份功能,还有很多代码和函数都没有进行优化,(注释也较少)比如错误处理,浏览器嗅探等。 这里需要说明的是很少用到了innerHTML和innerTEXT两个方法,这是微软提供的专利方法,还...

    浅析JavaScript异步代码优化

    在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用、定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的Javascript异步代码成为了异步...

    常见浏览器多长时间会提示“脚本运行时间过长”总结

    当所有的文件从服务器上下载后,从浏览器开始渲染到用户可以响应的时间,这段时间仍然会消耗很长,同时由于交互的复杂,javascript也变得越来越多,越来越复杂,脚本运行的时间反映在界面上就是响应用户输入点击的过...

    web-workers-image-manipulation:将长时间运行的 Javascript 迁移到 Web Worker

    网络工作者演示 通过将长时间运行的 JS 迁移到 Web Worker 来优化 Javascript 运行时 设置 cd到仓库 运行python -m SimpleHTTPSever 打开localhost:8000

    防抖节流函数js封装模块

    防抖(debounce)和节流(throttle)是常用的两个 JavaScript 函数优化技术,它们可以帮助我们避免在高频率事件触发时导致的性能问题。 防抖和节流的主要区别在于它们处理事件触发的方式不同。防抖在事件触发后等待...

    Web应用项目的优化()

    前端优化是Web应用开发的重点之一,通过减小页面请求量、压缩和合并JS和CSS文件、优化图片大小和清晰度等方式来减少页面加载时间和提高用户体验。同时,可以使用浏览器缓存技术来减少页面请求次数,从而提高页面响应...

    基于JavaScript的电弧故障检测系统Web端设计实现源码(本科毕设).zip

    基于JavaScript的电弧故障检测系统Web端设计实现源码(本科毕设) 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到94.5分,放心下载使用! 该资源适合计算机相关专业(如...

    SQL查询安全性及性能优化

    SQL注入的原理 什么SQL注入 将SQL代码插入到应用程序的输入参数中,之后,SQL代码被传递到数据库执行。从而达到对应用程序的攻击目的。... 有了执行计划和执行时间我们就很容易判断一条SQL语句执行效率高不高

    javascript性能优化之分时函数的介绍

    在一些开发场景中,我们可能会一次性向文档中注入上千个节点,在短时间内向浏览器中大量添加DOM节点可能会让浏览器吃不消,结果往往会让浏览器卡顿或吃不消,解决方案之一便是使用分时函数(timeChunk)。...

Global site tag (gtag.js) - Google Analytics