晨露博客

关注互联网,关注科技,关注生活!

上一篇: 关于Google的新编程语言Dart 下一篇:快乐周末-晨露语摘(八)

JavaScript在互联网高度发达的今天,各种网站因运而生,有些不是单纯提供信息的网站,有些涉及到纷繁复杂的web应用程序。那么,在日益复杂的网络发展阶段,各种各样的网页特效也随之产生了,尤其是当今用的比较多的Ajax技术以及JavaScript使得今天的网页绚丽多彩。昨天给大家介绍了应用于此方面的新语言,即Google的新编程语言Dart。但是,在很短的一段时间之内JavaScript还不会被代替吧,那么,如今,在广泛使用JavaScript制作特效的时候,我们要考虑网站的加载速度了,那么,今天就来为大家分享两大JavaScript的优化准则。

首先我们来分析一下JavaScript的运行机制。

JavaScript的运行机制

  1. JavaScript代码是从服务器原封不动地发送到客户端的,代码越大,下载所需的时间和带宽越多。
  2. JavaScript在浏览器中解释,而不是编译好的。
  3. JavaScript代码通过DOM API修改HTML页面来与用户交互。对JavaScript开发人员来说,这是功能强大的高级模型,但对DOM所做的每个简单修改都将导致浏览器的页面渲染引擎执行一系列复杂的操作。对DOM看似细微的修改常常导致需要占用比预期的多得多的CPU周期。Gmail和基于Ajax的、ahoo! Mail等Web应用程序都对妙性能提出了挑战。大量的人力被投入到这些Web应用程序中,它们在最新的计算机中可能运行顺畅,但在较旧的计算机中可能反应迟钝,而在这些旧计算机中运行相应的桌面应用程序没有任何问题。
     

两大JavaScript的优化准则

一、缩短JavaScript的下载时间

人多数编程语言要么是编译型的,要么在代码安装的计算机中运行,或者两者兼而有之。例如,使用诸如Python、PHP或Perl等脚本语言时,代码在执行之前不需要通过网络传输,而在本地运行。但是诸如Java等其他语言的代码被编译成二进制文件,可在执行前通过网络传输。考虑到这种情况。采用的大量措施使二进制格式更加紧凑。

JavaScript不属于上述任何一种情况,其源代码和用到的库被浏览器按照原样下载到客户端,因此JavaScript源代码的大小以及打包传输方式将直接影响到页面的性能,这些在刚开始编码的时候也许无关紧要,但是随着JavaScript繁荣库越来越多,很快将导致下载JavaScript代码需要的时间越来越长。

为了缩短上述的下载时间吗,我们有如下有效的措施:

  1. 除非每个页面都有不同的JavaScript,否则不要将JavaScript放在网页的HTML代码中,而是在HTML代码中引用JavaScript。如果一定要在页面中包含JavaScript,这样的页面不能过长。
  2. 减少在页面中包含的JavaScript文件数量。不需要走极端,将所有JavaScript代码放到一个文件中。包含不超过5个文件是可行的。但是如果包含超过20个文件就需要三思而后行了。当然,这些数字只是一个象征性的说明,具体是什么情况,包含多少JavaScript文件数将影响页面的负荷能力需要进行专门的测试才能得到精确的数字。
  3. 减少使用的库。如果使用大量不同来源的库,他们也许有一些代码是重复的。例如,每个库中可能包含处理DOM的代码,这是一种浪费。因为i这些代码可以共享。选择一个可以解决大量问题且模块化的库,这样可只包含所需的子集。使用一个主要库的代码还有其他好处:减少依赖关系,从而降低不兼容的可能性;升级到新版本更容易;通常来说,大型库更容易受到更大社区的支持,因此更新更加频繁,新特性更多。

另外,JavaScript的很多库都含有完整版和精简版两个版本。

完整版适合用于阅读和修改库的代码。它包含缩进和注释,对于开发人员来说可读性更高。

精简版适合于用于部署网站。这种版本是基于完整版自动创建的:删除了注释和缩进;通常所有代码位于一行中;有时候不暴露的变量被重命名为很短的名称。

显而易见,在部署网站时,我们务必使用精简版。根据自己编写的代码长度,可能要使用工具创建JavaScript文件的精简版。这样的工具很多,其中开源的如(GPL)的ECMASScript Cruncher(ESC)。

二、最大限度的减少DOM更新

为完成任何有趣的功能,代码必须修改DOM。然而,修改DOM的开销非常高。显然,为处理修改页面内容的DOM API调用,浏览器必须做大量的工作。更令人惊讶的是,调用不修改页面的方法(如注册监听器)可能非常慢。

另外,一定要注意遍历大量的DOM对象的代码,如遍历document.all以查找特定元素的代码或document.getElementByName()。这些代码的执行时间将随页面的增大而增大。

小博文章如没有特殊说明均为原创,如要帮忙推广还望加上我的链接哦!
  • 本文Url: http://www.chenlublog.com/post/two-optimization-criterias-of-javascript.html (出自: 晨露博客)
  • 点击这里获取该日志的TrackBack引用地址

    • Gravatar Icon
      回复
    • quote 5.W3SO站长网2011-10-20 16:22:40
    • 支持博主 祝您博客越来越好

      ——————————————
      免费发布外链 请来W3SO站长网
      发布外链 可以添加锚文本的

      W3SO站长网 www.w3so.com
      打扰了 祝您工作愉快

    • Gravatar Icon
      回复
    • quote 6.老鹰训练营2011-10-21 10:43:05
    • 那有什么简单的方法可以去优化呢

      比如插件或者代码呢

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    关于本文

    您正在阅读的是:JavaScript的两大优化准则
    morningdew 发表于:2011-10-20 12:35:26
    分类:网络编程
    关键词:JavaScript  

    博客作者

    Morningdew

    晨露博客

    热门文章

    最近更新

    最新评论及回复

    最近留言

    站类搜索

    博文分类

    博文归档

    Copyright ©2010 晨露博客. All Rights Reserved.网站地图  Theme Designed By TangChang
    本博客采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
    This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
    CONTACT ME:E-mail:tcmorningdew@gmail.com QQ:515667845<风荷雨莲>   津备ICP09004821   GO TO TOP

    Powered By Z-Blog 1.8 Walle Build 91204