本文转自：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=400360237&idx=2&sn=eb00241cb3b61ffb81b7dea862dc936f&scene=23&srcid=1027psyzZXVbBVCfXTGWnaAv#rd

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    下面是我总结的一些小技巧，仅供参考。

    以下代码基本上在jQuery的源码里面都可以看到，如有说得不对的地方，请大家指出。

    A:尽量使用源生方法

    javaScript是解释性语言，相比编译性语言执行速度要慢。浏览器已经实现的方法，就不要再去实现一遍了。另外，浏览器已经实现的方法在算法方面已经做了很多优化。

    避免全局查找

    在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。

    <script>

        function search() {

            //当我们要使用当前页面地址和主机域名

            console.log(window.location.href + window.location.host);

        }

        //最好的方式如下这样，先用一个简单变量保存起来

        function search() {

            var location = window.location;

            console.log(location.href + location.host);

        }

    </script>

    B：尽量减少循环次数

    少一层循环，就能提高数倍性能。如果要对一个数组的每个元素进行多次操作，尽可能使用一次循环，多次操作，而不是多次循环，每次循环执行一次操作。尤其是在进行多个正则匹配的时候，尽可能合并正则表达式，在一次遍历中尽可能找到相应的匹配。

    循环

    <script>

        //通常循环的写法

        var objs = [{ 'key': 'obj1' }, { 'key': 'obj2' }, { 'key': 'obj3' }];

        //len 定义一个变量;

        for (var i = 0, len = objs.length; i < len; i++) {

            dosomething(objs[i]);

        }

        //当循环遍历的对象是object时，可以采用下面的方式来写；

        var objs2 = [{ 'key': 'obj1' }, { 'key': 'obj2' }, { 'key': 'obj3' }],

            obj,

            i = 0;

        while (obj = objs2[i++]) {//先赋值在判断；这种思想得掌握

            dosomething(obj);

            //备注：如果数组里面可能出现0，false，null等在条件判断为false的值，这种写法是不正确的；

        }

        function dosomething(val) {

            console.log(val);

        }

    </script>

    switch的补充点；

    <script>

        var con = 'a';

        function funa() { };

        function funb() { };

        function func() { };

        //通常的写法

        switch (con) {

            case 'a':

                funa();

                break;

            case 'b':

                funb();

                break;

            case 'c':

                func();

                break;

        }

        //换种写法试试

        var funs = {

            'a': funa,

            'b': funb,

            'c': func

        };

        funs[con]();

        //备注：取值或者函数调用可以用类似的方法来做；

    </script>

    C:  条件分支：

    将条件分支，按可能性顺序从高到低排列：可以减少解释器对条件的探测次数。

    在同一条件 >2条件分支时，使用switch优于if：switch分支选择的效率高于if，在IE下尤为明显。4条分支的测试，IE下switch的执行时间约为if的一半。

    使用三目运算符替代条件分支。

    <script>

        var a = 1, b = 2, num;

        if (a > b) {

            num = a;

        } else {

            num = b;

        }

        //建议这种写法：换种写法试试

        num = a > b ? a : b;

    </script>

    定时器

    如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器。

    <script>

        var timer = 0;

        function timeout() {

            timer++;

            if (timer < 10) {

                setTimeout(timeout, 10);

            }

        }

        timeout();

        //可以替换为

        var interval = 0;

        function interval() {

            interval++;

            if (interval >= 10) {

                clearInterval(interval);

            }

            dosomething();

        }

        var interv = setInterval(interval, 10);

        //动画效果

        function dosomething() { }

        //一般应用于动画

        用做标记的变量尽可能使用布尔类型

        直接用true和false做标记，不要使用数字或者字符串的1和0来做标记。

    </script>

</body>

</html>

　　

JavaScript 代码性能优化总结的更多相关文章

  1. JavaScript代码性能优化总结

    JavaScript 代码性能优化总结 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面 ...

  2. 【转】JavaScript代码性能优化总结

    本文作者:zifan 来自:携程设计委员会 链接:http://ued.ctrip.com/blog/javascript-code-performance-optimization-summary. ...

  3. 浅谈JavaScript代码性能优化

    可以通过https://jsbench.me/测试网站完成性能测试. 一.慎用全局变量 1.全局变量定义在全局执行上下文,是所有作用域链的顶端,在局部作用域中没找到的变量都会到全局变量中去查找,所以说 ...

  4. 浅谈JavaScript代码性能优化2

    一.减少判断层级 从下图代码中可以明显看出,同样的效果判断层级的减少可以优化性能 二.减少作用域链查找层级 简单解释下,下图中第一个运行foo函数,bar函数内打印name,bar作用域内没有name ...

  5. js代码性能优化的几个方法

    相信写代码对于大部分人都不难,但想写出高性能的代码就需要一定的技术积累啦,下面是一些优化JavaScript代码性能的常见方法. 一.注意作用域 1.避免全局查找 使用全局变量和函数肯定要比局部的开销 ...

  6. javascript的性能优化tips

    谈到javascript的性能优化,有好多点,比如把script放到离body闭合标签附近,合并多个script标签等等,还有一些代码的性能,for的性能不如while的性能好,用while模拟for ...

  7. 【转】js JavaScript 的性能优化：加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

  8. Python 代码性能优化技巧（转）

    原文:Python 代码性能优化技巧 Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构.优化. ...

  9. 针对于Java的35 个代码性能优化总结

    针对于Java的35 个代码性能优化总结前言代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的 ...

随机推荐

  1. linux学习（2）——文件和目录管理

    (二) 一:绝对路径和相对路径                                                                                     ...

  2. Python解压ZIP、RAR等常用压缩格式的方法

    解压大杀器 首先祭出可以应对多种压缩包格式的python库:patool.如果平时只用基本的解压.打包等操作,也不想详细了解各种压缩格式对应的python库,patool应该是个不错的选择. pato ...

  3. 快速排序算法Java实现

    1) 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行 示例: package ...

  4. linux 共享内存

    共享内存是最高效的IPC机制,因为它不涉及进程之间的任何数据传输.这种高效带来的问题是,我们必须用其他手段来同步进程对共享内存的访问,否则会产生竞态条件.所以,共享内存通常和其他进程间通信方式一起使用 ...

  5. Python 装饰器执行顺序迷思

    Table of Contents 1. 探究多个装饰器执行顺序 1.1. 疑问 1.2. 函数和函数调用的区别 1.3. 装饰器函数在被装饰函数定义好后立即执行 1.4. 疑问的解释 2. 参考资料 ...

  6. Best Practices in JavaScript

    Some items you should konw : Graceful degradation : ensuring that your web pages still work without ...

  7. linux环境下kettle部署（JDK安装配置，kettle安装配置，资源库配置，定时执行job）

    一.部署准备 1.1 java安装(略) 1.2 JDK配置 1.     命令行键入“cd /etc”进入etc目录 2.     命令行键入“vi profile”打开profile文件 3.   ...

  8. 7 定制10MINs首页2

    1.添加 <div class="ui basic segment"> <h1 class="ui center aligned header" ...

  9. W/System.err: at android.view.ViewConfiguration.get(ViewConfiguration.java:369)

    *11-09 11:48:38.558 13887-13900/? W/System.err: at android.view.WindowManagerGlobal.getWindowManager ...

  10. Java 虚拟机结构分析

    本博文主要介绍了JVM(Java Virtual Machine)的组成部分以及它们内部的工作机制和原理.需要注意的是,虽然平时我们用的大多是Sun(现已被Oracle收购)JDK提供的JVM,但是J ...