자바스크립트 스레드_자바스크립트 기술에 대해 이야기해 보겠습니다.

코드 판단 1:

<div id="div">
  click me
</div>

<script>
  var div=document.getElementById("div");
  div.addEventListener('click',function(){
   alert('You have clicked me!');
  });
  for(var i =0; i<999999999;i++){
   console.log(i);
  }
</script>

실행하면 아무 일도 일어나지 않으면 모든 브라우저가 정지됩니다. 위의 for 루프가 너무 많아 CPU 리소스를 많이 소모하기 때문입니다. JavaScript가 단일 스레드라는 사실을 기반으로 브라우저 UI 렌더링이 일시 중지되고 정지된 애니메이션이 발생합니다.

이제 질문이 생깁니다. 위의 코드를 구현하고 싶은데 어떻게 해야 합니까?

Concurrent.Thread.js
​ ​ 이 클래스 라이브러리는 기본적으로 setTimeout을 사용하여 "가짜 멀티스레딩"을 구현합니다. HTML5 WebWorker가 나오기 전에는 좋은 선택이었습니다. 예를 들어, 위의 "코드 조각 1"을 구현하려면 다음과 같이 작성할 수 있습니다(클래스 라이브러리를 다운로드하려면 나를 클릭하세요).

코드 스니펫 2:

<div id="div">
  click me
</div>
<script src="Concurrent.Thread.js"></script>
<script>
  Concurrent.Thread.create(function(){
    var div=document.getElementById("div");
    div.addEventListener('click',function(){
     alert('You have clicked me!');
    });
    for(var i =0; i<9999999;i++){
     console.log(i);
    }
  });
</script>

이 클래스 라이브러리에서 제공하는 create 메소드를 통해 "새 스레드"를 생성할 수 있습니다. 또한 script 태그의 type 속성을 text/x-script.multithreaded-js로 설정해도 동일한 효과를 얻을 수 있습니다.

코드 조각 3:

<div id="div">
  click me
</div>
<script src="Concurrent.Thread.js"></script>
<script type="text/x-script.multithreaded-js">
    var div=document.getElementById("div");
    div.addEventListener('click',function(){
     alert('You have clicked me!');
    });
    for(var i =0; i<9999999;i++){
     console.log(i);
    }
</script>

웹워커
HTML5는 위 브라우저의 열악한 사용자 경험을 어떻게 무시할 수 있습니까?

다음으로 클래식 피보나치 수열을 사용하여 테스트합니다.

코드 조각 4:

메인 페이지:

<div id="div"></div>
<script>
  window.onload=function(){
     var div=document.getElementById("div");
     if(typeof(Worker)!=="undefined"){//在创建WebWorker之前，先判断浏览器是否支持
　　　　　　　 console.log("Start calculating....");
       var time1= new Date()*1;//获得当前时间戳
       var worker=new Worker("fibonacci.js");//创建WebWorker对象，并传递在新线程中将要执行的脚本的路径
       worker.onmessage=function(e){ //监听从新线程发送过来的数据
         div.innerHTML=e.data;
         var time2=new Date()*1;
         console.log("time spend:"+(time2-time1)+"ms");
       }
　　　　　　　　
       worker.postMessage(36);//向新线程发送数据
     }else{
       alert("Your browser do not support WebWoker");
     }
  }
</script>

fibonacci.js：
var fibonacci=function (n){
  return n<3&#63;n:(arguments.callee(n-1)+arguments.callee(n-2));
}
onmessage=function(e){
  var num=parseInt(e.data,10);
  postMessage(fibonacci(num));//向主页面发送数据
}

코드에 기본적인 사용법을 주석으로 달아놨으니, 콘솔을 보면 곧 실행시간이 출력되는 걸 볼 수 있습니다. 그래서 우리는 WebWorker가 프런트 엔드에서 복잡하고 대규모 계산을 수행하는 데 적합하다는 결론에 도달했습니다. WebWorker는 크로스 도메인을 지원하지 않습니다. 로컬 테스트에서는 여전히 http 프로토콜을 사용해야 합니다. 그렇지 않으면 Worker 개체를 생성할 수 없으며 스크립트 오류가 보고됩니다.

여러 postMessage 작업을 연속적으로 수행해야 하는 경우 다음과 같이 work.postMessage를 항상 작성하지 않는 것이 가장 좋습니다.

    worker.postMessage(36);

    worker.postMessage(36);

    worker.postMessage(36);

현재 WebWorker 인스턴스가 하나뿐이기 때문에 postMessage는 비동기식이 아닌 순차적으로 실행되므로 성능을 충분히 활용하지 못합니다. 여러 개의 WebWorker 인스턴스를 생성하여 데이터를 전송할 수 있습니다.

몇 가지 참고할 사항은 다음과 같습니다.

1. WebWorker가 URL을 수락하여 워커를 생성하는 것을 관찰했으며, jsonp의 구현 원칙은 스크립트 태그를 동적으로 삽입하여 데이터를 로드하는 것입니다. 동일한 결과를 얻기 위해 WebWorker를 사용하는 것이 더 좋지 않을까요? ? WebWorker는 멀티스레드이고 차단 기능이 없기 때문에 아름답지 않을까요? 하지만 실제로 실험을 해본 결과 WebWorker의 성능은 만족스럽지 못한 것으로 나타났습니다. 그러므로 이것은 그것이 잘하는 일이 아닙니다. 우리는 그것이 장악되도록 놔두어서는 안됩니다.

2. WebWorker가 다른 소스로부터 정보를 수용할 경우 실제로 사이트 보안에 숨겨진 위험을 가져오며, 알려지지 않은 소스로부터 스크립트 정보를 수신하면 XSS 인젝션 공격으로 이어질 수 있습니다. 따라서 이를 방지해야 합니다. 실제로 위의 예에서 innerHTML을 사용하는 것은 안전하지 않습니다. 대신 최신 브라우저에서 제공하는 textContent를 사용하여 html 태그를 필터링할 수 있습니다.

오늘은 피곤해서 자고 싶어서 일단 이 정도만 쓰겠습니다.