브라우저에서 애니메이션이 중단되는 것을 방지하기 위한 html5 WebWorkers 샘플 코드 공유
웹 개발 중에 브라우저가 이벤트에 응답하지 않고 애니메이션 정지 상태에 들어가거나 "스크립트 실행 시간이 너무 김" 프롬프트 상자가 나타나는 경우가 종종 발생합니다. 스크립트가 통제 불능입니다.
브라우저에는 js 엔진 스레드(js 처리), GUI 렌더링 스레드(렌더링 페이지), 브라우저 이벤트 트리거 스레드(상호작용 제어)라는 세 가지 이상의 스레드가 있습니다.
1: JavaScript 엔진은 이벤트 기반 단일 스레드 실행을 기반으로 합니다. JS 엔진은 작업 대기열에 작업이 도착할 때까지 기다리고 있습니다. 브라우저가 어떻게 처리하든 JS 프로그램을 실행하는 JS 스레드는 언제든지 하나만 있습니다.
2: GUI 렌더링 스레드는 브라우저 인터페이스를 렌더링해야 하거나 일부 작업으로 인해 리플로우가 발생하는 경우 이 스레드가 실행됩니다. 그러나 GUI 렌더링 스레드와 JS 엔진은 상호 배타적이라는 점에 유의해야 합니다. JS 엔진이 실행되면 GUI 스레드가 일시 중지되고 GUI 업데이트는 대기열에 저장되며 JS가 실행될 때 즉시 실행됩니다. 엔진이 유휴 상태입니다.
3: 이벤트 트리거 스레드. 이벤트가 트리거되면 스레드는 보류 중인 대기열의 끝에 이벤트를 추가하고 JS 엔진의 처리를 기다립니다. 이러한 이벤트는 setTimeOut과 같은 JavaScript 엔진에 의해 현재 실행되는 코드 블록이나 마우스 클릭, AJAX 비동기 요청 등과 같은 브라우저 커널의 다른 스레드에서 발생할 수 있습니다. 그러나 JS의 단일 스레드 관계로 인해 모든 이벤트는 이러한 이벤트는 JS 엔진의 처리를 위해 대기열에 추가되어야 합니다.
브라우저의 커널 처리 방식을 이해하고 나면 브라우저가 애니메이션 정지 상태에 들어가는 이유를 이해하는 것은 어렵지 않습니다. JS 스크립트가 프로세서를 오랫동안 점유하면 브라우저의 GUI 업데이트가 정지됩니다. 후속 이벤트 응답도 대기열에 추가되어 처리할 수 없으므로 브라우저가 일시 중지된 애니메이션 상태로 잠깁니다. 또한 DOM 작업은 JS 스크립트에서 수행됩니다. JS 호출이 완료되면 다음 작업을 시작하기 직전에 GUI 렌더링이 수행됩니다. 따라서 JS에서 많은 수의 DOM 작업을 수행하면 이벤트 응답이 느려지거나 실제로 발생할 수도 있습니다. IE6에서 한 번에 많은 양의 HTML을 삽입하는 등 브라우저를 정지시킵니다. 그리고 "스크립트 실행 시간이 너무 깁니다"라는 프롬프트 상자가 나타나면 JS 스크립트에 무한 루프가 있거나 너무 깊은 재귀 작업을 수행해야 함을 의미합니다.
코드를 직접 보면:
예: 사용자가 숫자를 입력하고 덧셈(+=)을 수행합니다.
이전 접근 방식:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
var result =0;
for(var i =0; i<num;i++){
result += i;
}
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+result;
document.getElementById("time").innerHTML ="普通 耗时："+ (data2 - data1)+"ms";
}
</script>
</body>
</html>사용 후 webWorkers ：
calculate.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>webworkers--calculate</title>
</head>
<body>
<input id="num" name="num" type="text"/>
<button onclick = "calculate()">计算</button><br />
<div id="result" style="color:red;"></div>
<div id="time" style="color:red;"></div>
<script type="text/javascript" src="calculate.js"></script>
<script type="text/javascript">
var worker = new Worker("calculate.js");
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById("result").innerHTML ="计算结果："+data;
document.getElementById("time").innerHTML ="workers 耗时："+ (data2 - data1)+"ms";
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById("num").value;
var val = parseInt(num,10);
worker.postMessage(val);
}
</script>
</body>
</html>calculate.js
onmessage = function(event){
var num = event.data;
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result);
};webWorker는 웹 서버에 코드를 넣어야 합니다. localhost를 사용하는 경우 상위 버전을 사용하십시오. Chrome 브라우저를 열면 Firefox 브라우저에 localhost 처리 시 "
Could not get domain! " 오류가 나타납니다. 위의 두 구현 방법을 비교하면 계산할 때 값이 100억에 도달하면 일반적인 방법은 시간이 오래 걸리고 일반적으로 중단됩니다.
Chrome15에서 webWorkers의 효과.
수정: getTime()은 초(s)가 아닌 밀리초(ms)를 반환해야 합니다. 
webWorkers는 미래의 웹 애플리케이션에서 여전히 매우 가치가 있다는 것을 알 수 있습니다.
위 내용은 브라우저에서 애니메이션이 중단되는 것을 방지하기 위한 html5 WebWorkers 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7694
15
1640
14
1393
52
1287
25
1229
29
H5 코드 이해 : HTML5의 기본 사항
Apr 17, 2025 am 12:08 AM
HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.
Apache Server 란 무엇입니까? Apache 서버는 무엇입니까?
Apr 13, 2025 am 11:57 AM
Apache Server는 브라우저와 웹 사이트 서버 간의 브리지 역할을하는 강력한 웹 서버 소프트웨어입니다. 1. HTTP 요청을 처리하고 요청에 따라 웹 페이지 컨텐츠를 반환합니다. 2. 모듈 식 디자인은 SSL 암호화 지원 및 동적 웹 페이지와 같은 확장 된 기능을 허용합니다. 3. 보안 취약점을 피하고 고성능 웹 애플리케이션을 구축하기 위해 보안 취약점을 피하고 스레드 카운트 및 타임 아웃 시간과 같은 성능 매개 변수를 최적화하기 위해 구성 파일 (예 : 가상 호스트 구성)을 신중하게 설정해야합니다.
H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다
Apr 14, 2025 am 12:05 AM
H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.
Centos에서 HDFS 파일 시스템을 사용하기위한 팁
Apr 14, 2025 pm 07:30 PM
CentOS 시스템 하의 HDFS 파일 시스템에 대한 설치, 구성 및 최적화 안내서이 기사에서는 CentOS 시스템에 HDF (Hadoop Distributed File System)를 설치, 구성 및 최적화하는 방법을 안내합니다. HDFS 설치 및 구성 Java 환경 설치 : 먼저 적절한 Java 환경이 설치되어 있는지 확인하십시오. /etc/profile 파일 편집, 다음을 추가하고 /usr/lib/java-1.8.0/jdk1.8.0_144를 실제 Java 설치 경로로 바꾸십시오 : Exportjava_home =/usr/lib/java-1.8.0/jdk1.8.0_144 exportpath = $ j
CRAFT CMS의 캐싱 문제 해결 : Wiejeben/Craft-Laravel-Mix 플러그인 사용
Apr 18, 2025 am 09:24 AM
CRAFTCMS를 사용하여 웹 사이트를 개발할 때 특히 CSS 및 JavaScript 파일을 자주 업데이트 할 때 자주 리소스 파일 캐싱 문제가 발생하면 이전 버전의 파일이 여전히 브라우저에서 캐싱 될 수 있으므로 사용자는 최신 변경 사항을 볼 수 없습니다. 이 문제는 사용자 경험에 영향을 줄뿐만 아니라 개발 및 디버깅의 어려움을 증가시킵니다. 최근에 나는 프로젝트에서 비슷한 문제를 겪었고, 약간의 탐색 후 플러그인 Wiejeben/Craft-Laravel-Mix를 발견하여 캐싱 문제를 완벽하게 해결했습니다.
NGINX 성능 모니터링 및 문제 해결 도구
Apr 13, 2025 pm 10:00 PM
NGINX 성능 모니터링 및 문제 해결은 주로 다음 단계를 통해 수행됩니다. 1. NGINX-V를 사용하여 버전 정보를보고 STUB_STATUS 모듈을 활성화하여 활성 연결 수, 요청 및 캐시 적중률을 모니터링합니다. 2. 상위 명령을 사용하여 시스템 리소스 점유, Iostat 및 VMSTAT 모니터 디스크 I/O 및 메모리 사용을 모니터링합니다. 3. TCPDUMP를 사용하여 패킷을 캡처하여 네트워크 트래픽을 분석하고 네트워크 연결 문제를 해결합니다. 4. 동시 처리 기능이 충분하지 않거나 과도한 프로세스 컨텍스트 오버 헤드를 피하기 위해 작업자 프로세스 수를 올바르게 구성합니다. 5. 부적절한 캐시 크기 설정을 피하기 위해 Nginx 캐시를 올바르게 구성하십시오. 6. awk 및 grep 명령 또는 elk 사용과 같은 nginx 로그를 분석하여
Debian OpenSSL에서 HTTPS 서버를 구성하는 방법
Apr 13, 2025 am 11:03 AM
데비안 시스템에서 HTTPS 서버를 구성하려면 필요한 소프트웨어 설치, SSL 인증서 생성 및 SSL 인증서를 사용하기 위해 웹 서버 (예 : Apache 또는 Nginx)를 구성하는 등 여러 단계가 포함됩니다. 다음은 Apacheweb 서버를 사용하고 있다고 가정하는 기본 안내서입니다. 1. 필요한 소프트웨어를 먼저 설치하고 시스템이 최신 상태인지 확인하고 Apache 및 OpenSSL을 설치하십시오 : Sudoaptupdatesudoaptupgradesudoaptinsta
Centos에서 HDFS 상태를 모니터링하는 방법
Apr 14, 2025 pm 07:33 PM
CentOS 시스템에서 HDFS (Hadoop 분산 파일 시스템)의 상태를 모니터링하는 방법에는 여러 가지가 있습니다. 이 기사는 가장 적합한 솔루션을 선택하는 데 도움이되는 몇 가지 일반적으로 사용되는 방법을 소개합니다. 1. Hadoop의 자체 웹 인터페이스 인 Hadoop의 자체 Webui를 사용하여 클러스터 상태 모니터링 기능을 제공하십시오. 단계 : Hadoop 클러스터가 가동되고 있는지 확인하십시오. webui에 액세스하십시오 : 브라우저에 http : // : 50070 (hadoop2.x) 또는 http : // : 9870 (hadoop3.x)을 입력하십시오. 기본 사용자 이름과 비밀번호는 일반적으로 HDFS/HDF입니다. 2. 명령 줄 도구 모니터링 Hadoop은 모니터링을 용이하게하기위한 일련의 명령 줄 도구를 제공합니다.
