浅谈JavaScript性能

时间 2019-12-02

原文原文链接

最近在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性能的方法：‘局部变量’oop

　　这里必需要说一下在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的次数。

之后还有性能方面的问题还会分享给你们，不喜勿喷哦！