`

按速度优化JavaScript代码

 
阅读更多

一旦你的JavaScript能运行,你就会想到使其运行得更快。
在讲解加速代码的方法之前,让我先讲讲“80/20规则”:
百分之八十的优化是由最初百分之二十的工作所完成的。竭
力实现剩余百分之二十的速度优化是一种巨大的痛苦,而且
经常导致完全不能读和难以管理的代码。简言之,如果你的
JavaScript运行得很慢,你可以用很多简单的方法来加速它,
但是除非你的代码确实运行得很慢,我不会对它进行再优化。
下面是一些使你的代码轻松运行的方法。

限制循环内的工作量

程序运行慢的最常见原因是循环内的重复工作。如果一
条命令只需要执行一次,就没有必要把它放在循环内。
例如:

var index = 0;
while (index <10)
{
   var the_date = new Date();
   var the_day = the_date.getDay();
   var the_name = prompt("what's the kid's name? " ,"");
   alert("On " + the_day + " " + the_name + " is a very special person.");
    index++;
}

此程序循环执行10次。每次得到当天的日期,询问小孩
的名字,然后打印出“On Monday,so-and-so is a 
very special person.”。

但是日期是不会改变的,总是今天。所以没有必要把前
两行放在循环中。把它们从循环中拿出来,让其只执行
一次而不是10次,这样会节省时间:
var index = 0;
var the_date = new Date();
var the_day = the_date.getDay();
while (index <10)
{
var the_name = prompt("what's the kid's name? " ,"");
alert("On " + the_day + " " + the_name + " is a very special person.");
index++;
}


定制if-then-else语句,按最可能到最不可能的顺序

因为if-then-else语句在遇到条件为真时结束,你可以
通过把最有可能的条件放到最开始来减少需要判断的语
句的数量。例如:

var pet = prompt("what kind of pet do you have?", "");
if (pet  == "cat") 
{
    doCatStuff();
} else if (pet == "dog") 
{
    doDogStuff();
} else if (pet == "bird")
{
    doBirdStuff();
} else if (pet == "lizard")
{
    doLizardStuff();
}
一般来说,程序中的if子句比从lizard到dog需要执行的
逻辑判断要少。

最小化重复执行的表达式

如果你发现需要重复计算一个特定的表达式,如
var pi=22/7,只计算一次并把它放在一个全局变量中或
许是个好主意。例如,不象下面程序这样:

function theArea(radius)
{
var pi = 22/7;
var area = pi * radius * radius;
return area;
}

function theCircumference(radius)
{
var pi = 22/7;
var circumference = 2 * pi * radius;
return circumference;
}


而是这样做:

var pi = 22/7;
function theArea(radius)
{
     var area = pi * radius * radius;
     return area;
}
function theCircumference(radius)
{
     var circumference = 2 * pi * radius;
     return circumference;
}

我知道我在用一个全局变量,我也说过这不是一个好主意。
然而,一些数字,如pi,其值在程序中永远不会改变,是
此规则的特例。通过只计算pi一次,可以省去额外的计算。
或许时间上的一些小的节省,累加起来会很管用。

如果你发现代码运行很慢,你只要注意一些事情。这些都
很明显,但是当你发现你经常忽略象这样简单的优化技巧
时,你会很吃惊。

还有,我的朋友,让我们结束今天的课程,这也是整个
JavaScript高级教程的结束。如果你已经进行到这儿,
并且你至少读过过去五天课程中的一半,那么你已经看
过很多JavaScript代码了。实际上,如果你能理解跨越
第一部分和第二部分的10课的大部分内容,你就可以很
安全地把自己称为“JavaScript助手”。通往神秘真知
的路就在你的脚下。

分享到:
评论

相关推荐

    JavaScript代码优化一例.pdf

    "JavaScript代码优化一例" 本文主要讨论JavaScript代码的优化,着重于介绍JavaScript代码在企业开发中的重要性及其优化方法。 一、JavaScript代码的重要性 随着Web 2.0和Ajax概念的提出,JavaScript代码得到了...

    JavaScript 代码压缩工具

    JavaScript代码压缩工具是一种优化网页性能的关键技术,尤其在当今互联网应用越来越复杂,JavaScript文件体积日益庞大的背景下,其重要性不言而喻。压缩JavaScript代码的主要目的是减少文件大小,提高网络传输效率,...

    前台javascript速度优化

    本文将深入探讨"前台JavaScript速度优化"的相关知识点,包括但不限于代码优化策略、工具应用以及Ajax性能提升。 一、代码优化策略 1. 减少DOM操作:频繁的DOM操作会降低页面性能,因为每次操作都需要浏览器重新...

    javascript代码压缩工具

    JavaScript代码压缩工具是Web开发中不可或缺的一部分,它们主要用于减少JavaScript文件的大小,从而提高网页加载速度,节省带宽,优化用户体验。在这个过程中,JavaScript代码压缩工具通过删除不必要的空格、换行符...

    javascript网站广告代码大全

    此外,JavaScript还可以实现广告的动态加载,例如,当用户滚动到广告区域时再加载,以优化页面加载速度。 这些广告代码可能包含HTML结构、CSS样式以及JavaScript逻辑,它们协同工作,提供丰富的用户体验。HTML负责...

    JavaScript 小游戏代码汇总

    10. 游戏优化:代码使用了游戏优化技术,例如使用缓存和优化游戏循环,提高了游戏的性能和流畅度。 JavaScript 小游戏代码汇总展示了 JavaScript 语言在游戏开发中的应用,包括游戏逻辑、游戏对象、游戏事件和游戏...

    javascript源代码大全

    10. **调试与性能优化**:了解如何使用开发者工具进行断点调试、性能分析,以及如何优化代码以提高加载速度和运行效率。 通过阅读和研究"javascript源代码大全",开发者不仅可以深入理解JavaScript的基本原理,还能...

    javascript实用代码压缩工具

    "javascript实用代码压缩工具"就是这样一个帮助开发者优化JavaScript代码的工具。 JavaScript代码压缩主要有两个目的:一是去除代码中的空格、换行符和注释,这种过程称为"混淆";二是通过变量重命名、合并函数等...

    javascript代码混淆器

    1. **JSMin**:由Douglas Crockford开发,它是最小化JavaScript代码的工具,通过删除空格、注释和不必要的字符来减小程序体积,提高加载速度。JSMin并不提供高级的混淆功能,它主要关注的是压缩,而非混淆。它的工作...

    优化 JavaScript 代码的方法小结

    以下是一些针对JavaScript代码优化的关键点和最佳实践。 1. **字符串连接优化**:在Internet Explorer 6和7中,字符串连接操作可能导致性能问题,因为它们创建了大量中间字符串对象。为了解决这个问题,可以使用`...

    javascript代码加载优化方法

    JavaScript代码加载优化是提高网页性能的关键技术之一,尤其是在处理大量脚本或第三方追踪代码时。在给定的例子中,我们看到一种将统计代码分离并异步加载的方法,以避免阻塞页面渲染,同时确保统计数据的准确收集。...

    javascript特效代码(最新)

    总的来说,"javascript特效代码(最新)"涵盖了JavaScript特效实现、代码规范、模块化、错误处理、性能优化以及跨平台兼容等多个方面的知识。理解和掌握这些内容,对于提升网页交互体验和专业技能有着显著的帮助。

    head first JavaScript源代码

    9. **性能优化**:理解JavaScript的执行机制,如V8引擎的工作原理,以及如何编写高效代码,可以提高网页的加载速度和响应性。 10. **跨平台开发**:JavaScript也可以用于开发Node.js服务器端应用,以及移动应用(如...

    javascript经典广告实例代码

    JavaScript还可以用于广告优化,如延迟加载广告以提高页面加载速度,或者根据用户行为智能推荐广告,提高转化率。 10. **广告拦截与应对** 面对广告拦截器的挑战,开发者可能需要编写代码来检测广告是否被阻止,...

    javascript代码应当放在html代码哪个位置比较好_.docx

    JavaScript代码在HTML中的放置位置对代码的执行效率和页面加载速度有着显著影响。根据最佳实践和安全性考虑,这里我们将深入探讨几种放置JavaScript代码的方式及其优缺点。 首先,将JavaScript代码放置在`&lt;head&gt;`...

    网站图文展示JavaScript代码04

    【网站图文展示JavaScript代码04】是一个针对网页设计和开发的知识点,主要关注如何使用JavaScript技术来实现动态的图文展示效果。JavaScript是一种广泛应用于客户端Web开发的编程语言,它可以为网页添加交互性和...

    grunt代码优化管理工具源码

    此外,grunt还提供了丰富的插件生态系统,如`grunt-contrib-watch`可以监听文件变化并触发相应任务,`grunt-contrib-jshint`用于JavaScript代码的静态检查,确保代码质量。通过源码,我们可以学习如何扩展和集成这些...

    SEO 网站优化 源代码的优化案例

    在SEO(搜索引擎优化)领域,源代码优化是提高网站排名和可访问性的重要环节。本文将深入探讨如何通过优化网站源代码来提升网站在搜索引擎中的表现,并提供一个实际的案例来帮助理解这一过程。 首先,我们需要理解...

Global site tag (gtag.js) - Google Analytics