Prettify를 사용하여 웹 페이지에서 동적으로 생성 된 스 니펫의 구문 강조 표시

Question

AJAX 요청의 결과에서 코드 조각을 동적으로로드하는 div가 있습니다. 그럼 나는 prettify를 사용하여 그것을 포맷하고 싶다. 그것은 작동하지만 천천히 천천히. 내가 사용하는 코드는 다음과 같다 : 한마디로

var jqxhr = $.get(fileName) 
.success(function(data) { 
    $('#myDiv').html(data); 
    prettyPrint(); 
    $('#myDiv').fadeIn(); 
}) 

내가 GET 요청을, 나는 포맷 #myDiv의 요청의 결과를 놓고 내가 사업부를 fadeIn. 시간이 좀 걸리지 만로드됩니다. 그러나 div를 페이드 아웃하면 페이지가 2 초 동안 반응하지 않습니다. prettyPrint()를 제거하면 페이지가 완벽하게 동작합니다. 어떤 힌트?

Answer 1

나는 단지 추측하고 있지만 언급 할 가치가있는 몇 가지 점이 있습니다.

/** 
* Split {@code prettyPrint} into multiple timeouts so as not to interfere with 
* UI events. 
* If set to {@code false}, {@code prettyPrint()} is synchronous. 
*/ 
window['PR_SHOULD_USE_CONTINUATION'] = true; 

:

소스에 따르면, prettify.js의 기본 모드는 연속 요청을 사용하여 실행하고, 이상은 250ms의 시간 (나는 http://code.google.com/p/google-code-prettify/source/browse/trunk/src/prettify.js의 소스에서 인용하고있어) CPU를 잡아 먹는 방지하는 것입니다

위의 코드를 작성한 방법은 동기식 모드로 실행되도록 구성되어있을 수 있음을 나타내므로 동기식 모드로 실행하는 것이 느려지고 페이지가 느려지 게됩니다. 이 플래그가 false로 설정되어 있지 않은지 확인하고, prettyPrint 호출로 전달하는 콜백 함수에 fadeIn 호출을 추가해야합니다.

비동기 모드에서 prettyPrint를 실행하면 그 시점에서 최대 250ms를 소모해야하며, prettyPrint의 호출에 전달 된 콜백 함수에 fadeIn을 호출하면, 모든 구문 강조 표시가 완료 될 때까지 페이드 인하 지 않습니다. 당시의 prettyPrint (250ms)에 대한 일련의 호출이 여전히 느린 경우에는 최대 시간 값을 250 미만으로 줄이거 나 또는 prettyPrint가 업데이트 된 요소를 prettyPrints하는 방법을 알아내는 것이 좋습니다. 너의 아약스 전화.