本文转自：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. IO流的应用_Copy文件

    IO流的应用_Copy文件 (1) import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundEx ...

  2. LEA指令与MOV指令区别

    Tips: LEA指令与MOV指令的区别: ① MOV指令是 数据        传送指令-------传送数据 LEA指令是   有效地址 传送指令-------取偏移地址 ② MOV OPRD1 ...

  3. JAVA / MySql 编程——第二章 初始MySQL

    1. MySQL:        ●  MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司.            MySQL最流行的关系型数据库管理系统, ...

  4. 10.1.2 Document类型【JavaScript高级程序设计第三版】

    JavaScript 通过Document 类型表示文档.在浏览器中,document 对象是HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML 页面.而且,docu ...

  5. 右键git-bash不能使用

    主要:右键git-bash不能使用 右键git-bash不能使用 今日想用git传写代码到仓库,突然发现几天没有却出问题了,右键出现了错误,虽然很快解决了,但还是可以记录下 情形: 右键存在但不能使用 ...

  6. P2680 运输计划（二分+树上差分）

    P2680 运输计划 链接 分析: 二分+树上差分. 首先可以二分一个答案,那么所有比这个答案大的路径,都需要减去些东西才可以满足这个答案. 那么减去的这条边一定在所有的路径的交集上. 那么如果求快速 ...

  7. laravel5.5服务提供器

    目录 1. 编写服务提供器 1.1 注册方法 register 1.1.1 简单绑定 1.1.2 绑定单例 1.1.3 绑定实例 1.1.4 绑定初始数据 1.2 引导方法 boot 2. 注册服务提 ...

  8. laravel5.5http会话机制

    1.配置文件 config/session.php 大多数是用file驱动,将session保存在storage/framework/sessions,可以考虑使用redis或者memcached 驱 ...

  9. VSX-5 VSXMusic 编码听音乐

    给VS写个扩展来听音乐的说法,缘来已久,这两天做了个初版,使用豆瓣FM,先发出来. 插件现在只做了VS2013的,别的版本有待下一步支持. 现在暂时只有一个Adornment(就是那个有封面的),一个 ...

  10. Spring进阶—如何用Java代码实现邮件发送(一)

    相关文章: <Spring进阶—如何用Java代码实现邮件发送(二)> 在一些项目里面如进销存系统,对一些库存不足发出预警提示消息,招聘网站注册用户验证email地址等都需要用到邮件发送技 ...