浅谈JavaScript性能

最近在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的次数。

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

原文地址:https://www.cnblogs.com/zc-blog/p/4375427.html