最近在JavaScript性能方面有所感悟,把我的经验分给大家:

说到JavaScript,就不得不说它的代码的运行速度——

  在我初学JavaScript的时候,只是觉得它是一个很强大的脚本。渐渐的,在做一些大的网站的项目的时候,却发现,代码执行的却异常的慢(尽管JavaScript用的是V8引擎),任然不能满足我的需求。这时候,我才慢慢的关注性能这一名词。在以前,个人总是喜欢在网上搜一些好的插件,并把它用到网站的建设工作当中。那么问题来了,在大量的插件的使用当中,网页总是要运行很久,处于很长时间的空白,这时候我发现JavaScript执行代码的速度越来越慢。究其缘由,那就是网页在渲染的过程前,一直在执行JavaScript代码的编译,以至于让网页长时间处于空白状态。那么这种问题的来源是什么?怎么解决呢?

  在引用<script>标签的时候,我们习惯性的把它放在<head>标签之内。这样的做法,只是在最初接触JavaScript,或者说小的项目的时候可以这样做。个人觉得,做网页就是要很好的实现与用户的交互,如果像上述过程一样,用户长时间看的是一片空白的页面,会导致什么样的后果可想而知。为了提高JavaScript代码编译的运行速度,提升JavaScript的性能,(1)我推荐把<script>标签写在</body>之前,如果有很多的js,我建议用把包工具(雅虎YUI)合并一下.(2)在IE4+ Firefox3.5 的版本下,用代有defer的属性,像这样:<script defer></script> ,这样做的原理是让<script>标签总在onload事件执行前调用,原因不用深究。(3)动态的创建JavaScript (有兴趣的可以试试,不推荐)。

  下面说到一个很实用,又简单,提升JavaScript性能的方法:‘局部变量’

  这里必须要说一下在JavaScript里面,有四种数据存取位置:1.直接量 2.变量 3.数组元素 4.对象成员。

  通常来讲,我们可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善JavaScript性能,因为局部变量访问的速度更快。为了便于理解,还是敲两段代码吧!

    function myLoop1(){

      for(var count=0;count<99999;count++){

        $('#idName').innerHTML + = 'A';

      }

     }

说明一下这段代码:每一次循环访问id是idName的元素时,该元素一共被访问了两次,一次是读取他的innerHTML,另一次是重写idName的值。

那么怎么才算提升性能的做法呢?看如下代码

    

 function myLoop2(){

      var show='';

      for(var count=0;count<99999;count++){

        show+ = 'A';

      }

      $('#idName').innerHTML += show;

     }

实验证明:在所有浏览器下,myLoop2的运行要比myLoop1,快几十倍,在IE6下,更是快155呗。

那么为什么这样做会快这么多呢。我简单解释一下:JavaScript实际上包括了ECMAScript、DOM、BOM,不要以为三者是和谐共处的,它们互相沟通可是要过“路费的”。所以,我们要尽可能的把运算留给ECMAScript这一端,减少访问DOM的次数。

以后还有性能方面的问题还会分享给大家,不喜勿喷哦!

浅谈JavaScript性能的更多相关文章

  1. 浅谈javascript性能-管理内存

    上次说到,javascript脚本到底应该放在哪里?用什么用处? 以下2点: 在Html.Body部分中的JS会在页面加载的时候执行.即-用户触发一个事件的时候执行的脚本.eg:onload事件... ...

  2. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  3. 浅谈DOM性能考虑

    浅谈DOM性能考虑 很多人都会忽视脚本对Web应用整体性能的影响.为保证应用的流畅运行,在为文档编写和应用脚本时,需要注意一些问题.一.尽量减少访问DOM和尽量减少标记    访问DOM的方式对脚本性 ...

  4. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  5. 浅谈java性能分析

    浅谈java性能分析,效能分析 在老师强烈的要求下做了效能分析,对上次写过的词频统计的程序进行分析以及改进. 对于效能分析:我个人很浅显的认为就是程序的运行效率,代码的执行效率等等. java做性能测 ...

  6. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  7. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  8. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  9. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

随机推荐

  1. OpenCVR 有新成员 OpenCVV OpenCVC

    OpenCVC主要负责OpenCVR报名, OpenCVV支持Android IOS Mac Windows 的client 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  2. 【C++基金会 06】explictkeyword

    C++提供keywordexplicit,你应该不能阻止的转换构造隐式转换发生的同意.声明explicit的构造不能在一个隐式转换使用. 1.演示样例 我们先来看一段演示样例代码: class A { ...

  3. 数据库开发——参照完整性——在外键中使用Delete on cascade选项

    原文:数据库开发--参照完整性--在外键中使用Delete on cascade选项 原文: http://www.mssqltips.com/sqlservertip/2743/using-dele ...

  4. 基于Hadoop2.2.0版本号分布式云盘的设计与实现

    基于Hadoop2.2.0版本号分布式云盘的设计与实现 一.前言 在学习了hadoop2.2一个月以来,我重点是在学习hadoop2.2的HDFS.即是hadoop的分布式系统,看了非常久的源代码看的 ...

  5. Linux 介绍了相关的文件夹

    学习Linux,先了解Linux标准的文件夹结构是非常重要的,学习的一个很好的铺垫之后的行动.去罗列大而全的所有文件夹. 本文主要说明.笔者本人接触,须要了解的一些文件文件夹,当然本文也会不断的更新或 ...

  6. Android开发技巧——实现在图标文本底部导航栏(更新)

    本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...

  7. [INS-20802] Oracle Database Configuration Assistant 失败

    1.错误原因    [INS-20802] Oracle Database Configuration Assistant 失败 2.错误原因 3.解决方案 版权声明:本文博主原创文章.博客,未经同意 ...

  8. [SignalR]Groups操作——后续

    原文:[SignalR]Groups操作——后续 继续http://www.cnblogs.com/YanZhiwei/p/3359175.html之前,那怎么实现发送的消息推送到隶属于这个组的用户呢 ...

  9. 如何定义AIDL跨进程间通信

    当进程A要去调用进程B中的service时,并实现通信,我们通常都是通过AIDL来操作的 projectA: 首先在我们自己的包com.wzp.aidlservice中创建一个RemoteServic ...

  10. 轻狂写的桌面日历秀NSIS脚本供大家参考学习

    原文 轻狂写的桌面日历秀NSIS脚本供大家参考学习 现在共享桌面日历秀的NSIS脚本,以便交流学习.此脚本实现的功能如下: 7-Zip打开看不到内容.自动读取原安装路径,如果有则不允许更改.取得编译日 ...