zoukankan      html  css  js  c++  java
  • Optimizing JavaScript Code 1

    There is an excellent article named
    Optimizing JavaScript Code
    . The authors are software engineers on Gmail
    and Google chrome.

    I appreciate the knowledge described in this article and try to repeat it in my
    own words.

    Faster string concatenation

    I have described this rule in my article
    JavaScript Tips and Tricks - 5
    .

        // BAD
        var longStr = "This is a very long " +
            "long long " +
            "long string."
        // GOOD
        var longStr = ["This is a very long ",
            "long long ",
            "long string."].join("");

    Notice: the original article use join() to concat string is incorrect,
    which is the same as join(”,”).

    Avoid create too many temporary strings

    Build up long strings by pass array into functions, to avoid create too many temporary
    strings.

    Remeber in my last article -
    Reference and array clone
    , i describe how an array is passing by reference.

        // BAD
        function createMenu(index) {
            return "<li>Menu " + index + "</div>";
        } 
    
        var arr = ["<ul>"];
        for (var i = 0; i < 100; i++) {
            arr.push(createMenu(i));
        }
        arr.push("</ul>");
        var menu = arr.join(""); 
    
        // GOOD
        function createMenu(index, arr) {
            arr.push("<li>Menu " + index + "</div>");
        } 
    
        var arr = ["<ul>"];
        for (var i = 0; i < 100; i++) {
            createMenu(i, arr);
        }
        arr.push("</ul>");
        var menu = arr.join("");

    Define class method in prototype

        // BAD
        function Person(name) {
            this.name = name;
            this.getName = function() {
                return this.name;
            };
        } 
    
        // GOOD
        function Person(name) {
            this.name = name;
        }
        Person.prototype.getName = function() {
            return this.name;
        };

    The first method is inefficient, as each time a instance of Person is constructed,
    a new function and closure is created.

    I also mention the prototype property in this article -
    Prototype/Constructor that i have known

    Don’t define reference type in prototype

    I have describe this rule in my article -
    Athena JavaScript Questions - 2
    .

    You can also refer to that article to discover why we should not define reference
    type in prototype.

    But this google article suggest define value type variables in prototype (such as
    Number, Boolean, String, null, undefined).

    The purpose is to avoid unnecessarily running the initialization code each time
    the constructor is called.

    For example:

        // Google prefered way:
        function Person(name) {
            if (name) {
                this.name = name;
            }
        }
        Person.prototype.name = "Unknown";
        Person.prototype.getName = function() {
            return this.name;
        }; 
    
        var p1 = new Person();
        console.log(p1.getName());  // "Unknown" 
    
        var p2 = new Person("ZhangSan");
        console.log(p2.getName());  // "ZhangSan"

    Notice:We don’t have to initialize the name property when the p1 is under construction.

    This may speed up the initialization and save some memory storage.

    But the effects is very little if the variable is not a very very long string.

    Therefore, i perfer writing the previous example in this way:

        // I prefered way:
        function Person(name) {
            this.name = name || "Unknown";
        }
        Person.prototype.getName = function() {
            return this.name;
        }; 
    
        var p1 = new Person();
        console.log(p1.getName()); 
    
        var p2 = new Person("ZhangSan");
        console.log(p2.getName());
  • 相关阅读:
    springboot运行时该注意的地方
    建立第一个SpringBoot小列子(碰到的错误)
    mysql建表基本语法
    两层c:forEach循环嵌套
    git-------基础知识(本地推送项目版本---github上)
    《生活的邀请函》___ 奥雷阿
    输入路径(包括盘符),打印层级目录(隐藏文件也会打印出来)
    输入两个文件夹路径,把其中一个文件夹中(包含内容)拷贝到另一个文件夹中
    用java实现歌曲串烧高速版(SequenceInputStream的使用)
    Java中InputStream装饰器模式的大家族
  • 原文地址:https://www.cnblogs.com/sanshi/p/1514063.html
Copyright © 2011-2022 走看看