美文网首页
浅谈垃圾回收(GC)与前端性能优化

浅谈垃圾回收(GC)与前端性能优化

作者: 108N8 | 来源:发表于2017-04-26 17:18 被阅读442次

    一、垃圾回收

    垃圾回收是从java借鉴过来的,有人也会说:GC。能提高性能。
    我们以常用的变量声明来说var a=12;来在内存中找个地址存起来,如果总是申请内存忘记释放:性能低,内存泄漏、长期内存泄漏就会内存溢出。
    底层语言(C语言):需要手动释放内存。
    高级语言(JS语言):高级语言,var b=1;申请内存,是别人已经定义好的,所以不需要手动释放内存。
    js:有自己的垃圾回收机制,在宿主环境环境下也就是浏览器帮咱们释放内存了。
    查看“垃圾”:
    以谷歌浏览器为例:Chrome --- F12 --- TimeLine --- '小山',垃圾回收
    生存周期(评判标准) --- 作用域
    作用域:
    1.全局变量:在哪都能用,生存周期很长,浏览器关闭时释放,占资源
    2.局部变量:生存周期短,不占资源
    3.闭包:子函数可以使用父函数的局部变量,如果子函数得不到释放,整体作用域链上的局部变量都会保存。
    如下图所示:

    下面让我一起来看几个关于作用域的几个小例子:
    作用域链:先找自己,自己的父级,父级的父级...直到全局,全局还没有的话就会报错。
    var a=1;//定义了一个全局变量a
    document.onclick=fuction(){
        alert(a);
    };
    --------------------------
    //定义一个局部变量
    function  show(){
        var a='str';
        alert(a);
    }   
    //没调用show函数之前没有a
    //show();调用了,就有a
    //调用完成 没有a
    --------------------------
    ///一个简单的闭包
    function show(){
        var a=1;
        document.onclick=function(){
            alert(a);
        };
    };  
    document.onclick=null;  //也是释放内存的一种方式
    --------------------------------
    function show(){
        var a=1;
        var b=2;
        document.onclick=function(){
            alert(b);
        };
    };  
    //这里的变量b没有得到释放,所以就会一直被占用着。
    -----------------------------------
    function show(){
        var a=1;
        function show1(){
            var b=2;
            document.onclick=function(){
                alert(a);
            };
        };
    };
    

    二、性能优化—js方向

    进行性能优化的前提:项目稳定(功能完成),可维护性,再去考虑性能。
    性能的分类:

    1、网络性能
    2、执行性能

    网络性能进行分析下:

    我们还以谷歌浏览器为例:Chrome --- f12 --- network,


    分析:
                name   名称
                status 状态码
                type 资源类型
                initator  发起人
                time  请求所耗时间
                size 资源大小
                timeline 时间线
                    queueing:队列
                    stalled 卡
                        浏览器响应,卡在浏览器
                    request sent:发送
                        客户端网络带宽,发送数据量
                    waiting:等待
                        处理数据,后台代码,服务器配置
                    Content download
                        服务网络宽带,返回数据的量
    
    执行性能进行分析下:

    火狐浏览器工具:FF-firebug --- ysolw(给网站评分)


    谷歌浏览器工具:chrome --- audits :根据提示内容进行修改

    总结:
        1.http请求越少越好
            请求尽量合并
            js 合并  |  css 合并  |  图片 ->css sprite
        2.http请求越小越好
            压缩:
                index.css 和 new.css
                    main.css ->main.min.css
                如何压缩:
                    1.手动-淘汰
                    2.工具
                        http://tool.oschina.net/
                    3.前端自动化工具
                        grunt  |  nodejs
                        http://gruntjs.com/
        3、图片延迟加载和预加载
        4、CDN Content Delivery Network 内容分发网络
                跟前端没关系,财务决定
        5.阻塞加载(同步加载)
            非阻塞加载(异步加载)
                前端页面:
                    非阻塞加载;
                        css  |  html  |  图片
                    阻塞加载:
                        js
            建议:
                1.别人网站的js,放在body后面
                2.自己的js写在前面
        6.执行性能:
            性能优化:习惯
            1.不用的东西删除
            2.尽量不用全局变量,好资源、冲突
            3.能用系统的就不要自己写了
            4.尽量使用正则去操作字符串
        DOM操作是昂贵的,最耗性能,尽量减少操作
            DOM操作:
                oDiv.style.left=oDiv.offsetLeft+10+'px';
            DOM:运动()
                如果用户看不到当前的动画,清楚定时器。
        变量:
            全局:耗性能
            局部:几乎不耗
                局部变量>全局变量
            属性:window.a=12;
            全局变量<属性<局部变量
        *属性越多,性能越低
    

    相关文章

      网友评论

          本文标题:浅谈垃圾回收(GC)与前端性能优化

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