JS优化

Posted 2020-10-04 FrontKen

（一）加载优化　　

　　javascript从传输到浏览器需要一定的时间进行加载、编译、生成语法树、生成字节码、反馈到最后的直接运行。比如要点击一个网页按钮，至少要等待几百ms到几s的时间。可以用以下几种方案来进行优化：

　　1.压缩代码。更小的包体往往意味着更少的解析工作量，也就能降低浏览器在解析与编译阶段的时间消耗。这是老生常谈了，用gulp可以轻易实现将其压缩成一行，文件大小减小到1/3以下。

　　2.使用代码分割工具来按需传递代码与懒加载剩余模块。这可能是最佳的方式了，类似于PRPL这样的模式鼓励基于路由的分组。一般使用的VUE和React框架在build之后都会生成js和其对应的mapping文件，自动实现。

　　3.尽早加载大模块，避免线程阻塞。

（二）语义化

　　增加函数的可阅读性，不仅在对后期维护和多人开发有极大好处，还有利于SEO和设备的解析。

　　1.语义化变量。

// 数据类型判断
if(Object.prototype.toString.call(str) === “[object String]”){
    // doSomething();
}；

　　这种写法不太难看懂，但是仍无法做到一眼就能看懂。看看下面：

// 类型判断
function isType(type){
    return function(o){
        return Object.prototype.toString.call(o) === \'[object \' + type + \']\';
    }
}
// 生成函数
var isString = isType(“String”);
var isObject = isType("Object");
var isArray = isType("Array");
// 调用
isString("I\'m Barret Lee.");
isArray([1,2,3])；
isObject({});

　　是不是清新多了？虽然代码是增加了，但是可以看出可扩展性是原始写法无法比拟的。

　　2.语义化其行为

　　清空一个数组，我们可以使用 arr.length = 0; arr = [];来实行，也可以用arr.slice(0, arr.length)来实现，明显后一种更易读。

　　此小结原文来自 http://www.cnblogs.com/hustskyking/p/javascript-semantization.html。