パターンマッチでChromeがハングアップする（tinymce/magento2）

Question

magento 2バックエンド内のtinymceエディタの[元に戻す]ボタンを使用すると、クロームタブが現在クラッシュ/ハングします。私が巨大な<table>の範囲内で使用すると、エラーが発生します。デバッグに

が、私はクラッシュは、次のコードによって引き起こされることが判明：今

var pattern = /<([a-z0-9\-\_]+.+?)([a-z0-9\-\_]+=".*?\{\{.+?\}\}.*?".+?)>/i; 

：

while (source.length > 0) { 
     if (match = source.match(pattern)) { // error happens here 
      result += source.slice(0, match.index); 
      result += String.interpret(replacement(match)); 
      source = source.slice(match.index + match[0].length) 
     } else { 
      result += source, 
      source = "" 
     } 
} 

クラッシュの状況では、パターン変数は、次の内容を持っていますソース変数には巨大なhtmlテーブルだけが含まれています。具体的なものはなく、リンク、画像、テキストだけです。

小さなHTMLコンテンツではエラーが発生しないため、このパターンでは何らかのタイムアウト/ハングアップのようです。

は、ここで問題のjsfiddleです： https://jsfiddle.net/sbbzcL9d/

それが唯一のパターンマッチングだが、それはTinyMCEの/ Magentoのコンテキスト内でクラッシュしたので、ブラウザがここにクラッシュしません。

ここで何が起こっているのか誰でも考えられますか？

Answer 1

通常、Regexpは非常に高価な操作です。あなたのフィドルでは、9969文字の長い文字列で正規表現を実行するには1.98秒が必要でした。一般的なリッチテキストエディタで

、生のHTML文字列はさらに長くなるかもしれません。たとえば、このページのHTMLの長さは約145260文字です。時間の複雑さが比例すると仮定すると、計算には約30秒かかります。

非常に長い文字列にregexpを適用しないようにしてください。代わりに、関連する部品にのみ適用してください。