CPU 비싼 자바 스크립트

Question

BBC News에서 통계 자바 스크립트를 복제하려고하지만 시작 버튼을 누른 후 해당 스크립트의 CPU 사용량에 흥미가 있습니다. 너무 비싸게 스크립트를 추가 할 수 있습니까?

왜 스크립트가 CPU 비싼 이유를 말해 줄 수 있습니까? 저는 자바 스크립트에 익숙하지 않지만 간단한 산술 연산이 너무 많은 클라이언트 CPU를 소비하고 있다고 생각합니다. 그 확인은?

Answer 1

숫자가 증가할수록 높은 CPU 사용량이 발생합니다. 내 AMD Phenom II X2에서는 Firefox를 실행할 때 CPU 사용량이 약 19 % 나 증가합니다. 해당 페이지의 소스는 실제로 http://www.realtimestatistics.org/이며 자바 스크립트를 살펴보면 난독 화가되지만 매 시간마다 값을 증가시키는 setTimeout()/setInterval 함수가 의심 스럽습니다. 그 속도로 볼 때, 아마도 1000 번 슬롯을 모두 사용하여 1 초에 100 번 이상, 또는 100 번 슬롯을 사용하여 숫자가 얼마나 부드러운 지 알 수 있습니다. 그런 다음 아마도 document.getElementById() 함수를 사용하여 페이지를 업데이트해야하며 숫자도 서식이 지정되어 있고 멋진 파란색이므로로드가 더 많이 추가됩니다.

단순한 산술 연산은 CPU를 소비하지만 3.4 gHz 듀얼 코어와 같은 최신 프로세서는 시간이 지나면 처리 할 수 ​​없으며 작업 관리자에서 CPU 사용량이 급증하는 것을 볼 수 없습니다. 그러나 BBC 뉴스의 해당 스크립트에 대한 CPU 사용량은 거의 일정한 흐름이며 작업 관리자를 확인할 때 표시됩니다. 산술 연산은 클라이언트 실행에 오래 걸리지 않고, 페이지를 멈추거나 중단시키지 않으며, 되풀이되지 않는 한 클라이언트에서 문제가되지 않습니다.

편집 : 당신이 그것을 보면 http://news.bbc.co.uk/nol/shared/spl/hi/sci_nat/10/the_internet/counters/js/internet_ticker.js

은 이것이다 : 디 컴파일의 비트와 해당 페이지에서 실행되는 스크립트 파일의 일부 어, 내 오랜 리버스 엔지니어링 일에서 트릭, 여기 소스 후 업데이트에 대한 행 : 그것은 다음, 분할 및 바닥, 집중적 인 모든 꽤 노동을 추가, 그리고 심지어뿐만 아니라 새로운 날짜() 변수를 만들 수있다

var currentValue = Math.floor(details.base + details.rate/1000 * differenceInMS(details.start, new Date())); 
     glow.dom.get(details.div).html("<strong>"+commaFormatted(currentValue)+"</strong>"); 

. 그리고 그 differenceInMS() 기능을 추적, 당신은 바닥과 시간 기능을 더 얻을 것을 참조하십시오. 이 작업을 수행했다면 산술 연산을 사용하여 간단한 setTimeout()을 수행하고 현재의 날짜와 시간을 찾기 위해 노동 집약적 인 작업을 수행했을 것입니다. 아, 그리고 거기에 glow.dom.get() 검색하고 페이지의 해당 부분을 찾은 다음 업데이트하기 전에 쉼표 형식으로 숫자를 변환합니다. 전체 스크립트는 처리 능력을 위해 매우 목이 마르다.

학습 된 내용 : 노동 집약적이며 짧거나 간결하고 오래갑니다. 짧은 시간 간격으로 프로세서 집중적이고 반복적 인 작업을 수행하지 마십시오. 이렇게하면 CPU를 신속하게 끌어 올 수 있습니다. 내 듀얼 큐어 3.4 gHz AMD Phenom에서 평균 19 %의 불타 오름을 느낀다면 오래된 노트북과 같은 환경에서 작동한다고 상상해보십시오. 그렇게하면 프로세서를 최대한 활용할 수 있고 페이지가 멈추고 정지 할 수 있습니다. 아, 그리고 Firefox의 x64 버전을 실행하면 x64 프로세서의 CPU 사용량이 줄어 듭니다. 필자가 어도비와 파이어 폭스에 x64를 구걸하는 또 다른 이유. Fingerers는 Firefox 4.0에서 교차되었습니다.