Chrome立刻做了什么,Firefox需要30秒

时间:2013-11-20 23:39:51

标签: javascript performance

目前,我正在创建一个程序,将源代码转换为突出显示的HTML文本。但是,当我测试它时,我发现了一些奇怪的结果。在Chrome上,该程序几乎可以即时解析1000行源代码。但是,Firefox需要30秒才能解析相同的1000行。而且,具有讽刺意味的是,IE10只需要18秒。

现在,我了解不同的浏览器以不同的方式实现javascript并且Chrome往往更快,但我不明白为什么它将Firefox的使用时间延长了30倍。我对每个操作进行了10,000,000,000次操作的原始循环测试,并且花了14秒和Chrome 12。因此,我倾向于相信我的代码中某处需要Firefox需要很长时间才能完成;我做过研究,但到目前为止我找不到的任何东西都表明我看到了很大的差异。

那么,有没有人对可能导致这种情况的原因有任何建议?我已经发布了下面代码的问题区域(注释掉这部分导致两个浏览器即时解析)。 startend都是正则表达式; istream是源代码的来源,ostream是解析代码所在的位置。 istream.read()调用String slice()方法。最后,在整个程序中多次调用此函数。

function(buffer, istream, ostream){
    if(start.test(istream.content)){
        buffer = istream.read();
        ostream.write('[[span class="' + type + '"]]' + buffer);
        do{
            /* Special Cases */
            if(end.test(ostream.content + istream.peek()) && (istream.peek() == "\n" || istream.peek() == " " || istream.peek() == "\t")){
                include = true;
                break;
            }
            else if(istream.peek() == "\n"){
                istream.read();
                ostream.write('[[/span]][[/span]]\n[[span class="line"]][[span class="' + type + '"]]');
                continue;
            }
            else if(istream.peek() == "\t"){
                istream.read();
                ostream.write("@<&#160;&#160;&#160;&#160;>@");
                continue;
            }
            else if(istream.peek() == " "){
                istream.read();
                ostream.write("@<&#160;>@");
                continue;
            }
            ostream.write(istream.read());
        } while(!istream.isEmpty() && !end.test(ostream.content));

        if(include || istream.isEmpty())
            ostream.write('[[/span]]');
        else{
            var ending = ostream.content.length-1;
            while(!end.test(ostream.content.substr(ending)))
                --ending;
            istream.content = ostream.content.substr(ending) + istream.content;
            ostream.content = ostream.content.substring(0, ending) + '[[/span]]';
        }
        return true;
    }
    return false;
}

我们将非常感谢任何见解,如果您对如何实施这些方面有任何疑问,我将非常感激。提前谢谢。

istream和ostream对象的定义:

function IOstream(init){
    this.content = init;

    this.read = function(){
        var tmp = this.content.charAt(0);
        this.content = this.content.slice(1);
        return tmp;
    };
    this.peek = function(){  return this.content.charAt(0); };
    this.write = function(str){  this.content += str; };
    this.isEmpty = function(){  return this.content.length == 0; }
}

2 个答案:

答案 0 :(得分:1)

我认为这是因为在每个.read()来电时你都会content.slice(1),并且每次复制整个字符串但是第一个字符都需要花费很多时间。 尝试修改你的IOStream类,如下所示:

function IOstream(init){
    this.content = init;
    this.cursor = 0;

    this.read = function(){
        var tmp = this.content.charAt(this.cursor);
        this.cursor++;
        return tmp;
    };
    this.peek = function(){  return this.content.charAt(this.cursor); };
    this.write = function(str){  this.content += str; };
    this.isEmpty = function(){  return this.cursor>=this.content.length; }
}

我认为它可以解决所有浏览器中的速度问题。

答案 1 :(得分:-1)

注意到你正在使用松散的平等。我会从那里开始并将==更改为===并查看它是否有所作为。

这是松散vs严格的jsperf:http://jsperf.com/performance-of-loose-vs-strict-equality