资讯专栏INFORMATION COLUMN

javaScript代码优化

snowell / 239人阅读

摘要:动态添加属性会造成隐藏类派生同时无法使用优化针对热点代码会使用优化编译器目前默认是比如上述示例循环中会进行参数预测标记为整形后的代码。

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& args) {
        Isolate* isolate = args.GetIsolate();
        //isolate  V8 runtime 
        args.GetReturnValue().Set(String::NewFromUtf8(isolate, "hw gcy"));
    }

    void init(Local 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进阶之路等)后的理解和总结,其实点蛮多的,以后再补充吧。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82968.html

相关文章

  • WebAssembly 系列(五)为什么 WebAssembly 更快?

    摘要:图表中的比例并不代表真实情况下的确切比例情况。解析当到达浏览器时,源代码就被解析成了抽象语法树。解析过后抽象语法树就变成了中间代码叫做字节码,提供给引擎编译。目前为止,不支持垃圾回收。这就是为什么在大多数情况下,同一个任务比表现更好的原因。 作者:Lin Clark 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId...

    刘德刚 评论0 收藏0
  • javascript引擎——V8

    摘要:类将源代码解释并构建成抽象语法树,使用类来创建它们,并使用类来分配内存。类抽象语法树的访问者类,主要用来遍历抽象语法树。在该函数中,先使用类来生成抽象语法树再使用类来生成本地代码。 通过上一篇文章,我们知道了JavaScript引擎是执行JavaScript代码的程序或解释器,了解了JavaScript引擎的基本工作原理。我们经常听说的JavaScript引擎就是V8引擎,这篇文章我们...

    luoyibu 评论0 收藏0
  • WebAssembly 那些事儿

    摘要:的目标是对高级程序中间表示的适当低级抽象,即代码旨在由编译器生成而不是由人来写。表示把源代码变成解释器可以运行的代码所花的时间表示基线编译器和优化编 WebAssembly 那些事儿 什么是 WebAssembly? WebAssembly 是除 JavaScript 以外,另一种可以在网页中运行的编程语言,并且相比之下在某些功能和性能问题上更具优势,过去我们想在浏览器中运行代码来对网...

    邱勇 评论0 收藏0
  • [译文] JavaScript工作原理:V8引擎内部+5条优化代码的窍门

    摘要:本文将会深入分析的引擎的内部实现。该引擎使用在谷歌浏览器内部。同其他现代引擎如或所做的一样,通过实现即时编译器在执行时将代码编译成机器代码。这可使正常执行期间只发生相当短的暂停。 原文 How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code 几周前我们开始了一个系列博文旨在深入...

    dreamans 评论0 收藏0
  • 图说 WebAssembly(五):高性能原因

    摘要:本文是图说系列文章的第五篇。这样的话,使用的开发者也不需要做任何适配,但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行,称为垃圾回收。 本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章,建议您从第一篇入手。 在上一篇文章中,我们说到了使用 WebAssembly 和 JavaScript...

    seal_de 评论0 收藏0
  • JavaScript是如何工作的:深入V8引擎&编写优化代码的5个技巧

    摘要:第二篇文章将深入谷歌的引擎的内部。引擎可以实现为标准解释器,或者以某种形式将编译为字节码的即时编译器。这个引擎是在谷歌中使用的,但是,与其他引擎不同的是也用于流行的。一种更复杂的优化编译器,生成高度优化的代码。不是唯一能够做到的引擎。 本系列的 第一篇文章 主要介绍引擎、运行时和调用堆栈。第二篇文章将深入谷歌 V8 的JavaScript引擎的内部。 想阅读更多优质文章请猛戳GitHu...

    Turbo 评论0 收藏0

发表评论

0条评论

snowell

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<