Chrome の最適化が謎すぎる
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ 一見関係ないところの変更で早くなったり遅くなったり
前にこんなことしてましたが 同じ感じで速度調べようとしたらおかしな現象がおきました
まずこれが基本のコード
やっぱり正規表現はちょっと遅いなーと
ですが 条件をミスしてこんなに書いてしまった時のことです
search の 「=== 0」が抜けただけで かなり早くなってます
何度か繰り返してもこれくらい差がでているので たまたま PC が重かったなんてことはないです
また ここから indexOf のほうの 「=== 0」も抜いたら
なぜか RegExp まで遅くなります
変えたのは indexOf の方のコードなのですが
よくわからない最適化です
最後に search は 「=== 0」 ありで indexOf は 「=== 0」 なしでやってみます
これでも RegExp だけが遅いです
結果は search: 「=== 0」 なし で indexOf: 「=== 0」 あり が一番早いということになりました
最初の console.time が実行される前に最適化で時間がかかっているのかというとそうでもないです
800ms のときは目に見えて遅いなぁと感じますが 200ms のときはホントに早いです
また RegExp を最初に実行するとこうなっていますが 200ms になる時のコードを並び替えて RegExp を最初じゃなくすると 800ms になりました
1つめに 「=== 0」 なしで 2つめに 「=== 0」 ありがいいのかと
indexOf 「=== 0」なし → search 「=== 0」 あり → startsWith
と並べても変わらず 800ms でした
それと startsWith をなくした↓のコードでも 遅くなりました
Chrome では速度にこだわらないほうがいいかもしれないですね
よくわからないところで早くなったり遅くなったりですから
極端におそくなることが目に見えてるコード以外は遅いと体感したら直すくらいがちょうどいいのかも
どれかのブラウザに合わせた最適化したコードは他のブラウザでは遅いかもしれないですし
まずこれが基本のコード
var target = ["abcde", "@abcde"]
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/) === 0
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@") === 0
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/) === 0
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@") === 0
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
RegExp: 860.047ms
indexOf: 166.221ms
startsWith: 155.500ms
indexOf: 166.221ms
startsWith: 155.500ms
やっぱり正規表現はちょっと遅いなーと
ですが 条件をミスしてこんなに書いてしまった時のことです
var target = ["abcde", "@abcde"]
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/)
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@") === 0
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/)
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@") === 0
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
RegExp: 190.879ms
indexOf: 160.247ms
startsWith: 153.390ms
indexOf: 160.247ms
startsWith: 153.390ms
search の 「=== 0」が抜けただけで かなり早くなってます
何度か繰り返してもこれくらい差がでているので たまたま PC が重かったなんてことはないです
また ここから indexOf のほうの 「=== 0」も抜いたら
var target = ["abcde", "@abcde"]
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/)
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@")
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/)
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@")
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
RegExp: 842.284ms
indexOf: 157.168ms
startsWith: 154.088ms
indexOf: 157.168ms
startsWith: 154.088ms
なぜか RegExp まで遅くなります
変えたのは indexOf の方のコードなのですが
よくわからない最適化です
最後に search は 「=== 0」 ありで indexOf は 「=== 0」 なしでやってみます
var target = ["abcde", "@abcde"]
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/) === 0
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@")
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/) === 0
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@")
}
console.timeEnd("indexOf")
console.time("startsWith")
for(var i=0;i<100000;i++){
target[i & 1].startsWith("@")
}
console.timeEnd("startsWith")
RegExp: 869.960ms
indexOf: 157.870ms
startsWith: 156.048ms
indexOf: 157.870ms
startsWith: 156.048ms
これでも RegExp だけが遅いです
結果は search: 「=== 0」 なし で indexOf: 「=== 0」 あり が一番早いということになりました
最初の console.time が実行される前に最適化で時間がかかっているのかというとそうでもないです
800ms のときは目に見えて遅いなぁと感じますが 200ms のときはホントに早いです
また RegExp を最初に実行するとこうなっていますが 200ms になる時のコードを並び替えて RegExp を最初じゃなくすると 800ms になりました
1つめに 「=== 0」 なしで 2つめに 「=== 0」 ありがいいのかと
indexOf 「=== 0」なし → search 「=== 0」 あり → startsWith
と並べても変わらず 800ms でした
それと startsWith をなくした↓のコードでも 遅くなりました
var target = ["abcde", "@abcde"]
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/)
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@") === 0
}
console.timeEnd("indexOf")
console.time("RegExp")
for(var i=0;i<100000;i++){
target[i & 1].search(/^@/)
}
console.timeEnd("RegExp")
console.time("indexOf")
for(var i=0;i<100000;i++){
target[i & 1].indexOf("@") === 0
}
console.timeEnd("indexOf")
RegExp: 879.054ms
indexOf: 159.506ms
indexOf: 159.506ms
Chrome では速度にこだわらないほうがいいかもしれないですね
よくわからないところで早くなったり遅くなったりですから
極端におそくなることが目に見えてるコード以外は遅いと体感したら直すくらいがちょうどいいのかも
どれかのブラウザに合わせた最適化したコードは他のブラウザでは遅いかもしれないですし