장기 실행 자바 스크립트가 브라우저를 잠그지 않도록 방지

장기 실행 자바 스크립트가 브라우저를 잠그지 않도록 방지

---

DOM에서 값을 읽거나 쓰는 것뿐만 아니라 많은 계산을 수행하는 JavaScript가 있습니다. 페이지가 거대하기 때문에 CPU 사용량이 100 % 인 상태에서 최대 1 분 (IE에서는 더 오래) 동안 브라우저를 잠그는 경우가 많습니다.

이런 일이 발생하지 않도록 자바 스크립트 최적화에 대한 리소스가 있습니까? (제가 찾을 수있는 것은 Firefox의 장기 실행 스크립트 경고를 끄는 방법뿐입니다)?

---

계산 알고리즘을 반복적으로 호출 할 수있는 것으로 바꿀 수 있다면 짧은 시간 제한 값으로 setTimeout 을 사용하여 빈번한 간격으로 브라우저 제어를 해제 할 수 있습니다.

예를 들면 다음과 같습니다.

function doCalculation()
{
   //do your thing for a short time

   //figure out how complete you are
   var percent_complete=....

   return percent_complete;
}

function pump()
{
   var percent_complete=doCalculation();

   //maybe update a progress meter here!

   //carry on pumping?
   if (percent_complete<100)
   {
      setTimeout(pump, 50);
   }
}

//start the calculation
pump();

---

시간 초과를 사용하십시오.

루프의 내용을 별도의 함수에 넣고 setTimeout ()에서 50 정도의 타임 아웃을 사용하여 호출하면 자바 스크립트가 스레드 제어를 양보하고 나중에 돌아와서 UI가 봐요.

여기에 좋은 작업이 있습니다 .

---

얼마 전에 브라우저 내 성능 에 대해 블로그에 올렸지 만 여기서는 DOM과 관련된 내용을 요약 해 보겠습니다.

• DOM을 가능한 한 자주 업데이트하지 마십시오. 메모리 내 DOM 개체를 변경하고 DOM에 한 번만 추가합니다.
• innerHTML을 사용하십시오. 대부분의 브라우저에서 DOM 메서드보다 빠릅니다.
• 일반 이벤트 처리 대신 이벤트 위임을 사용하십시오.
• 어떤 전화가 비싼 지 알고 피하십시오. 예를 들어, jQuery에서 $ ( "div.className")은 $ ( "# someId")보다 비쌉니다.

그런 다음 JavaScript 자체와 관련된 몇 가지가 있습니다.

• 가능한 한 적게 반복하십시오. DOM 노드를 수집하는 함수가 있고이를 처리하는 함수가 있다면 두 번 반복됩니다. 대신 노드를 수집하는 함수에 익명 함수를 전달하고 노드를 수집하는대로 처리합니다.
• 가능하면 기본 기능을 사용하십시오. 예를 들어 forEach 반복자입니다.
• setTimeout을 사용하여 브라우저가 잠시 숨을 쉬게합니다.
• 멱 등성 출력이있는 값 비싼 함수의 경우 결과를 캐시하여 다시 계산할 필요가 없습니다.

내 블로그에 더 많은 것이 있습니다 (위 링크).

---

이것은 여전히 ​​약간의 최첨단이지만 Firefox 3.5에는 Web Workers라는 이러한 기능이 있지만 다른 브라우저에서의 지원에 대해서는 확신하지 못합니다.

Resig 씨는 여기에 기사가 있습니다 : http://ejohn.org/blog/web-workers/

And the Simulated Annealing is probably the simplest example of it, if you'll notice the spinning Firefox logo does not freeze up, when the worker threads are doing their requests (thus not freezing the browser).

---

You can try performing long running calculations in threads (see JavaScript and Threads), although they aren't very portable.

You may also try using some Javascript profiler to find performance bottlenecks. Firebug supports profiling javascript.

---

My experience is that DOM manipulation, especially in IE, is much more of an issue for performance than "core" JavaScript (looping, etc.).

If you are building nodes, it is much faster in IE to do so by building an HTML string and then setting innerHTML on a container than by using DOM methods like createElement/appendChild.

---

You could try shortening the code by

 $(xmlDoc).find("Object").each(function(arg1) {
    (function(arg1_received) {
                setTimeout(function(arg1_received_reached) {

                    //your stuff with the arg1_received_reached goes here 

                }(arg1_received), 0)
            })(arg1)
}(this));

or for "for" loops try

for (var i = 0 ; i < 10000 ; i = i + 1) {
    (function(arg1_received) {
        setTimeout(function(arg1_received_reached) {

            //your stuff with the arg1_received_reached goes here 

        }(arg1_received), 0)
    })(arg1_to_send)
}

I had the same problem and my customers was reporting this as "Kill page" error. But now I juz got a best solution for that. :)

ReferenceURL : https://stackoverflow.com/questions/672732/prevent-long-running-javascript-from-locking-up-browser