패턴 매치 (tinymce/magento2)에서 Chrome이 멈 춥니 다

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 콘텐츠에서는 오류가 발생하지 않으므로 그 패턴에 어떤 종류의 타임 아웃/정지가있는 것처럼 보입니다. https://jsfiddle.net/sbbzcL9d/

그것은 단지 패턴 매칭이기 때문에 브라우저가 여기에 충돌하지 않지만,이 TinyMCE에/젠토 컨텍스트 내에서 충돌 :

는 여기에 문제의 jsfiddle입니다.

여기에 무슨 일이 일어 났는지 아는 사람이 있습니까?

Answer 1

Regexp는 대개 값 비싼 작업입니다. 당신의 피들에서 9969 문자의 긴 문자열에서 정규 표현식을 실행하려면 1.98 초가 걸립니다.

공통 서식있는 텍스트 편집기에서

, 원시 HTML 문자열이 더 오래있을 수 있습니다. 예를 들어이 페이지의 HTML 길이는 약 145260 자입니다. 시간 복잡도가 비례한다고 가정하면 계산하는 데 약 30 초가 걸립니다.

제 조언은 매우 긴 문자열에 regexp를 적용하지 않으려 고합니다. 대신, 관련 부분에만 적용하십시오.