`
jiava9900
  • 浏览: 86766 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

Speed up your JavaScrip 1[]

    博客分类:
  • java
阅读更多
    <div class="blog_content">根据nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的dom调用。这篇着重讲第一个原因。最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生。
原文标题:<span style="color: #108ac6;">speed up your javascript, part 1</span><br>原文作者:<span style="color: #108ac6;">nicholas c. zakas</span>
在我 <span style="color: #108ac6;">上一篇帖子</span><span style="color: #108ac6;">译文</span>)中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于internet explorer来说,当浏览器执行了数量过多的语句时就会停止执行脚本,而其他的浏览器,则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题,不是这些浏览器如果探测失控的脚本,而是我们如何才可以让脚本运行的更快一些,从而避免这些警告。
脚本失控基本上有以下四个方面的原因:
  1. 在循环中执行了太多的操作。
  2. 臃肿的函数体
  3. 过多的递归
  4. 过多的dom调用
在这篇帖子中,我将会把重点放到第一条上:循环中的过多操作。循环的操作是同步进行的,所以执行一个循环所花费的时间完全取决于循环的次数。因此有两种情况会导致循环执行的时间过长,并直接导致锁定浏览器。一是循环体中包含了太多的操作,二是循环的次数过多。这两种情况都能直接导致锁定浏览器,并显示脚本失控的提示。
解决这个问题的诀窍就是用下面这两个问题来评估每个循环:
  1. 这个循环必须要同步执行么?
  2. 循环里面的数据,必须要按顺序执行么?
如果两个问题的答案都是否定的话,你就可以选择将循环里的操作进行分解。关键是要根据代码的具体环境确定上面两个问题的答案。一个典型的循环可能像下面这个样子:
 
<span class="code">
for(var i=0; i < items.length; i++){   process(items[i]);}
 
乍一看这个循环并没有太大的问题,是不是会运行很长时间完全取决于循环的次数。如果紧接循环后没有其他代码在执行的时候需要依赖于循环的结果,那么对于第一个问题的答案就是“不”。你还可以发现,循环每次只处理一个数值,而且不依赖于上一次循环的结果,所以对于第二个问题的答案同样也是否定的。这就意味着,循环可以通过某种方式进行拆解,不会导致锁定浏览器而显示脚本失控的提示。
在《<span style="color: #108ac6;">professional javascript, second edition</span>》这本书中,对于那些执行次数非常巨大的虚幻,我推荐使用下面的方式来处理:
<span class="code"><div class="dp-highlighter"><br>
0
0
分享到:
评论

相关推荐

    Beginning JavaScript, 4th Edition

    to-date JavaScript programming techniquesContinuing in the superlative tradition of the first three editions, Beginning JavaScript, Fourth Edition, gets you up to speed on all the new advances in ...

    Mastering.JavaScript.High.Performance.1784397296

    Next, you will move on to learn about DOM optimization, JavaScript promises, and web workers to better break up your large codebase. You will also learn about JavaScript performance on mobile ...

    如何提升JavaScript的运行速度(函数篇).doc

    Zakas 于 2009 年 1 月 20 日在个人网站上发表的《Speed up your JavaScript, Part 2》。本文主要讨论了如何重构嵌套循环、递归,以及那些在函数内部同时执行很多子操作的函数,以提高 JavaScript 的运行速度。 ...

    [JavaScript] JavaScript 从入门到精通 (英文版)

    Speed up and simplify app development with jQuery Quickly retrieve data from a server using AJAX requests Adapt your app for mobile devices with jQuery Mobile Build Windows 8 apps using HTML, CSS, and...

    Beginning JavaScript with DOM Scripting and Ajax: Second Editon

    This completely updated second edition covers everything you need to know to get up-to-speed with JavaScript development and add dynamic enhancements to web pages, right from the basics. As well as ...

    Beginning JavaScript with DOM Scripting and Ajax (pdf + ePub)

    This completely updated second edition covers everything you need to know to get up-to-speed with JavaScript development and add dynamic enhancements to web pages, right from the basics. As well as ...

    Web性能优化系列 10个提升JavaScript性能的技巧

    当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为《Speed Up Your Javascript》的演讲。 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条...

    JavaScript Programmers Reference

    who are just learning the language and want to come up to speed quickly. In either case we assume you have at least a basic background in programming. Chapter 1, in particular, assumes you are coming...

    JavaScript 圣经第5版-Javascript编程宝典--黄金版 .rar

    This book will bring programmers and non-technical professionals, including casual programmers and scripters, painlessly up to speed on all aspects of mastering JavaScript. Key topics include ...

    JavaScript 提升运行速度之循环篇 译文

    原文标题:Speed up your JavaScript, Part 1 原文作者:Nicholas C. Zakas 在我 上一篇帖子 (译文 ) 中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于Internet Explorer 来说,当浏览器执行了数量...

    PhoneGap: Beginner’s Guide

    You will find plenty of fully explained code and ample screenshots in the book to ease and speed up your understanding. This book is for developers, ideally with web development experience, who are ...

    PhoneGap Beginners Guide Sep 2011

    You will find plenty of fully explained code and ample screenshots in the book to ease and speed up your understanding. This book is for developers, ideally with web development experience, who are ...

    ReactJS.Blueprints.1785886541

    Learn how to speed up your development process and save valuable time Work though step-by-step tutorials that provide easy-to-understand solutions to real-world problems Book Description The ...

    Ajax Starter Kit

    Use popular Ajax libraries to speed up and improve common programming tasks On the CD… XAMPP for Windows, Mac OS X, and Linux–an easy-to-install package to set up a ...

Global site tag (gtag.js) - Google Analytics