美文网首页VUE
JavaScript 进阶

JavaScript 进阶

作者: 苏日俪格 | 来源:发表于2017-11-09 20:48 被阅读11次

    一、垃圾回收

    垃圾回收机制:
        内存泄漏
        垃圾回收/生命周期
        局部变量:生命周期很短,函数执行完毕之后就会被回收
        全局变量:生命周期很长,当页面关闭之后才被回收
        闭包:有三种情况:
            1.子函数还在用的时候,父函数中的局部变量就不会被回收
            exp:
                function show(){
                    var a = 12;
                }
                            调用前             没有a
                show();     调用中             有a
                            调用后             没有a(用过后被回收)
    
            2.子函数还在用的时候,父函数中的局部变量都不会被回收,系统分不出哪个要用到,所以都不会回收
            exp1:
                function show(){
                    var a = 12;
                    document.onclick = function(){
                        alert(a);
                    };
                }
                            调用前             没有a
                show();     调用中             有a
                            调用后             有a(不会回收)
            exp2:
                function show(){
                    var a = 12;
                    document.onclick = function(){
                        alert(a);
                    };
                }
                            调用前             没有a,没有b
                show();     调用中             有a,有b
                            调用后             有a,有b(都不会回收)
            3.子函数还在用的时候,整条作用域链上的变量都不会被回收
            exp:
                var a = 12;
                function show(){
                    var b = 5;
                    function show2(){
                        var c = 3;
                        document.onclick = function(){
                            alert(b);
                        };
                    }
                    show2();
                }
                show();
    作用域链:先在当前函数中找,找不到会一直往父级找,知道找到全局
    综上所述:为了提高性能,全局变量尽量少用,因为它生命周期太长,局部变量用过后被回收能提高内存和性能
    

    二、性能优化

    重要性优先级:
        1.稳定性(一个网站必须保证自己的稳定性)
        2.扩展性(扩展性能还要好)
        3.性能优化
    性能优化分为两种:
        1.网络性能(第一重要)
        2.执行性能(其次)
    

    1、网络性能

    网络性能检测的方式:
        1.在Chrome下:
            F12 ==> NetWork  (弊端:需要经验才能分析出来)
        2.在Firefox下:
            (1) 插件版(首选推荐):
                a)必须先安装好Firebug
                b)进入YSLow官网(YSLow.org)==> 点击firefox ==> 点击Add to Firefox(谨记:一定要在附件中的YSLow的选项把自动运行点开再重启浏览器)
            (2) 书签版:
                a)进入YSLow官网 ==> 点击install ==> 往下滑找到大按钮,把它拖到书签栏位置再重启浏览器
                b)书签版的不能检测https协议的网站,带有s的网站都是超安全网站
    
    网络性能优化:
        可以在雅虎军规上参考,这里列举一些常用的
        1.减少http请求
            每外链一个js或css文件都需要执行以下过程:
                1个文件=1次连接+1次请求+1次等待+1次响应
            如果链接多个文件的话就要重复执行很多次上面的过程,那么就会影响网络性能,尽可能的合并文件
        2.合并文件
            a)可以减少http请求
            b)可以让资源更小
              电脑上的文件存储方式是以4KB为一个单位进行存储的,如果不足4KB的也按照4KB进行存储,如果是5KB就会用8KB的空间进行存储,如果把多个文件的内容放在一个文件中,那么就会减少了不必要花费的空间
        3.压缩代码
            让文件更小
        4.使用CDN加速(一般和财务有关系,因为需要另外购买服务器,多个服务器一个工作就会达到加速的效果)
        5.使用GZIP压缩
        6.使用DNS
        7.懒加载
    

    2、执行性能

    执行性能优化:
        1.尽量不使用全局变量(不能够达到垃圾回收的效果)
        2.尽量少使用闭包(不能够达到垃圾回收的效果)
        3.减少DOM操作
        4.少使用定时器(定时器一直在运行中会影响性能,除非不看他的时候让他停止)
        5.尽量使用正则操作字符串
        6.尽量不使用属性
        7.尽量使用CSS3(因为css2的样式都是改变结构需要重绘重排的,而css3只是改变了视觉上的变化。本身的结构并没有 改变)
            exp:
                var str = '';
                str+='abc';
                str+='bcd';
                str+='cde';
    
                var arr = [];
                arr.push('abc');
                arr.push('bcd');
                arr.push('cde');
                var str = arr.join('');
                以上是两种方式来操作字符串的,第二种性能更好,因为字符串本身是不可更改的,用数组更好
    字符串操作小知识:$.trim()  去掉首位空格
    

    三、this的指向问题

    JavaScript的高能:
        1.***千万不要看定义,只看调用
        2.方法是谁的,this就是谁
        3.优先级(由高到低):
            new              object
            定时器           window
            方法、事件       对象本身
            正常调用         window/undefined
        4.只管当前层一层
        5.只看最后一次调用,谁最后一次调用的this指的就是谁
    
        案例:
            var arr = [1,2,3];
            arr.show = function(){
                alert(this);
            };
            // arr.show();          array
            document.onclick=arr.show;
            // document.onclick();  document
            var show = document.onclick;
            // show();              window
            // setTimeout(show,1000);   window
            // setTimeout(document.onclick,1000);   window
            // setTimeout(arr.show,1000);   window
            // new show();          object
            // new arr.show();      object
            // new document.onclick(); object
    
    等一下(๑•ั็ω•็ั๑),我还有最后一句话:
    我爱你,
    也想把这个世界上所有的快乐都与你共享,
    哪怕被你折磨的遍体鳞伤,
    再见...

    相关文章

      网友评论

        本文标题:JavaScript 进阶

        本文链接:https://www.haomeiwen.com/subject/mvlmmxtx.html