javaScript代码优化

2024年4月22日 213次阅读 来源: jsdt

v8层面

var person = {
    multiply:function (a,b) {
        return a*b;
    },
    name:'gcy'
}

for(let  i=0;i<1000;i++){
person.multiply(i,i);
}

申明 定义对象的时刻,最好一开始就初始化好对象的属性,不要动态的增加。

在java或c++静态语言中,类的信息是肯定的,所以每一个对象包括哪些成员和成员在对象中偏移量在编译阶段肯定,基地点和偏移地点就能够疾速的接见对象内部信息。

js中对象属性能够动态增加或删除,为了完成根据索引的体式格局疾速接见成员,v8内部产生了一种数据结构即隐蔽类(基于运转中的对象分类)。动态增加属性会形成隐蔽类派生,同时没法运用v8优化(针对热门代码,v8会运用优化编译器,现在默许是 CrankShaft,比方上述示例for轮回中会举行参数展望,标记为整形)后的代码。别的引荐在编写代码的时刻举行不要让顺序举行范例推导,计划有flow和typeScript,flow我用过,侵入性低、轻易上手,引荐运用,如许做的目标一方面在大项目合作历程当中能够使代码具有优越的保护性,其次还能够进步v8实行效力,防备优化回退(从新实行函数->ast->机器码历程)。

c++层面

 void Method(const FunctionCallbackInfo<Value>& args) {
        Isolate* isolate = args.GetIsolate();
        //isolate  V8 runtime 
        args.GetReturnValue().Set(String::NewFromUtf8(isolate, "hw gcy"));
    }

    void init(Local<Object> exports) {
        NODE_SET_METHOD(exports, "hw", Method);  //向外导出要领
    }

    NODE_MODULE(addon, init)
   
    <!--运用-->
    const binding = require('./build/Release/binding');
     console.log(binding.hw());

c++拓展node 模块(针对底层拓展和效力请求极高场景)

为何运用c++编写node?
http://www.tuicool.com/articl…

tools层面

Prepack (js实行效力优化)

webpack2 (tree-shaking) 体积优化

内存层面

var vm=new  WeakMap();
var b=new Object();
vm.set(b,{'name':'gcy'});
b=null;
vm.get(b);

运用weakMap,在key对应的对象,可能会消逝的情况下,会削减内存走漏发作的几率,合理的运用和运用内存的体式格局之一。
参考链接 weakmap

dom层面

最小化dom接见次数,注重重绘和重排,尽可能在JavaScript端处置惩罚,’离线操纵DOM tree’,运用缓存,削减接见规划信息次数

案例一

不要频仍猎取规划信息,由于其会致使衬着行列革新,比方经常使用的offsetTop属性,offsetWidth属性等等。

案例二

批量修正dom时,使元素离开文档流(!important),运用多重转变逻辑,然后再把元素放回文档中

离开文档流的三种体式格局

  • 隐蔽元素,运用修正,从新显现
  • fragment体式格局分外建立DOM tree
  • 原始element copy,然后修正后,在 replace
  • 动画元素运用相对定位的体式格局
  • virtual dom体式格局,操纵vnode,diff后在现实元素上运用终究逻辑

运用事宜托付削减事宜处置惩罚器数目(本质上是运用冒泡机制,比较简单,不在举例)

js层面

案例一


function ProcessArray(items,process,callback) {
    let todo=items.concat();
    setTimeout(function () {
        process(todo.shift());
        //假如另有待处置惩罚元素,建立别的一个定时器
        if(todo.length>0){
            setTimeout(arguments.callee,20);
        }else {
            callback(items);
        }
    },20)
}

申明 上面优化的目标是为了防备browser的锁定,还能够运用web work的体式格局

var worker=new Worker('process.js');
worker.onmessage=function (event) {
    //logic
}
worker.postMessage(items)
// process.js
self.onmessage=function (event) {
    var ans=process(event.data);
    self.postMessage(ans);

}

案例二

var num1=5;
var num2=6;
eval("num1+num2");
new Function("arg1","arg2","return arg1+arg2");
setTimeout("sum1=num1+num2",100)

申明 防备两重求值

案例三

function fact1(n) {
    if(n==0)return 1;
    return n*fact1(n-1);
}
-----------------------------------
fact2(n,acc=1){
    if(n==0)return acc;
    return fact2(n-1,acc*n);
}

申明 尾递归的优化的目标是为了防备栈溢出

关于js方面的技能蛮多的,比方耽误加载,位操纵,throttle等等,不在一一列举。

总结

js优化这篇文章小部分是事情的总结,大部分是看书(高性能js和NODE进阶之路等)后的明白和总结,实在点蛮多的,今后再补充吧。

    原文作者：jsdt
    原文地址: https://segmentfault.com/a/1190000009408168
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞