zoukankan      html  css  js  c++  java
  • JS优化

    (一)加载优化  

      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

  • 相关阅读:
    VBA 的编写与执行
    C# eBook
    【转】Winfrom datagridview 打印
    jquery循序渐渐1
    C# 数据库备份及还原
    Asp.net调用RAR压缩 解压文件
    SQL Server 2005下的分页SQL
    优秀文档收藏
    动态传入“表名,字段名,字段类型,默认值”四个字符串,根据新的字段名称和类型来创表表结构
    一句话搞定生日提示
  • 原文地址:https://www.cnblogs.com/mazhaokeng/p/7417646.html
Copyright © 2011-2022 走看看