HTML5: 웹 소켓 과 웹 워커

연습 중에 웹 작업자에 대한 객관식 질문을 접했습니다. 웹 작업자가 페이지 성능에 영향을 미칠까요? 과외를 한 후에는 영향을 미치지 않을 것이라는 대답이 나왔습니다.

웹 워커에 대해 알아보기 위해 관련 정보를 참고하다가 웹 소켓을 접하게 되었습니다. 요약하자면 다음과 같습니다.

웹 소켓과 워커의 역할: High-Business 구축을 위한 새로운 참조 솔루션을 제공합니다. 성능 웹 애플리케이션.

웹 소켓은 보다 효율적인 전송 프로토콜을 제공하고, 웹 작업자는 멀티스레딩을 제공하여 웹 애플리케이션의 컴퓨팅 효율성을 향상시킵니다.

1. 웹 소켓

1. 웹 소켓은 기본적으로 http 및 tcp와 동일한 프로토콜입니다. 프로토콜은 데이터가 전송되는 방식을 설명하는 데 사용됩니다. 나는 Socket.io를 사용하여 간단한 온라인 채팅을 작성한 다음 프로젝트를 요약했습니다.

2. 웹 소켓에는 두 가지 접두사가 있습니다. (1) ws://는 암호화되지 않습니다. (2)wss://는 암호화되어 있습니다.

3. 클라이언트와 서버가 웹 소켓과 상호 작용하는 방식은 "http 핸드셰이크 + TCP 데이터 전송" 방식으로도 이해될 수 있습니다.

(1) 브라우저(웹 소켓 브라우징 지원) 서버 ) HTTP처럼 요청을 시작한 다음 서버의 응답을 기다립니다.

(2) 서버는 브라우저에 websocket에서 지정한 데이터 형식에 따라 후속 데이터를 전달하라고 지시하는 핸드셰이크 응답을 반환합니다.

(3) 브라우저와 서버 사이의 소켓 연결은 중단되지 않습니다. 이 연결과 http의 차이점은 이중 방식이라는 것입니다.

(4) 필요한 것이 있습니다. 이 긴 연결은 데이터가 전송될 때 데이터 전송에 사용됩니다.

참고: HTTP 핸드셰이크: 긴 연결을 설정할 때 브라우저와 서버 간의 핸드셰이크 프로세스가 요청, 요청 헤더, 응답 및 응답 헤더를 포함하여 HTTP1.1 프로토콜에 따라 전송되기 때문입니다. 그러나 차이점은 헤더의 필드에 특정 의미가 있다는 것입니다.

TCP 전송: 긴 연결을 설정한 후 브라우저가 서버에 데이터를 보낼 수 있고 서버도 브라우저에 요청을 보낼 수 있다는 사실에 주로 반영됩니다. 물론, 전송되는 데이터의 외부 계층에는 ws 프로토콜에 의해 지정된 외부 패킷이 자체적으로 정의되어 있지 않습니다.

4. 데이터 전송 프로세스: 웹소켓의 데이터 전송 형식은 프레임입니다. 예를 들어 메시지는 여러 개의 프레임으로 나누어 순서대로 전송됩니다. 여기에는 여러 가지 장점이 있습니다.

(1) 대용량 데이터의 전송은 데이터 크기로 인한 길이 부족 플래그를 고려하지 않고 조각으로 전송할 수 있습니다.

(2) HTTP 청크와 마찬가지로 데이터를 생성하면서 메시지를 전송할 수 있어 전송 효율이 향상됩니다.

5. 클라이언트는 웹 소켓 구문인 JavaScript를 사용합니다.

서버: 다양한 웹 프레임워크를 지원합니다.

2. 웹 워커

1. HTML 페이지에서 스크립트를 실행할 때 스크립트가 완료될 때까지 페이지 상태가 응답하지 않습니다.

웹 작업자는 다른 스크립트와 독립적으로 백그라운드에서 실행되는 JavaScript이므로 페이지 성능에 영향을 미치지 않습니다. 웹 작업자가 백그라운드에서 실행되는 동안 클릭, 선택 등 원하는 작업을 계속할 수 있습니다.

DOM 작업 외에도 이론적으로 모든 JS 스크립트 작업을 작업자에 넣어 실행할 수 있습니다. 구문상의 제한은 JS가 도메인 간에 액세스할 수 없다는 것입니다. 프런트 엔드 사용자 작업을 보다 친숙하게 만들기 위해 많은 시간과 CPU 리소스가 필요한 복잡한 계산에 작업자가 사용되는 경우가 많습니다. 즉, 사용자 경험 측면에서 서비스 성능이 향상됩니다.

2. 웹 작업자 사용법: (웹 작업자 개체를 생성하면 종료될 때까지 (외부 스크립트가 완료된 후에도) 계속해서 메시지를 수신합니다.)

( 1) 웹 작업자에 "onmessage" 이벤트 리스너를 추가하여 수신된 메시지를 가져옵니다.

메시지 보내기: postMessage()

웹 작업자 종료 및 브라우저/컴퓨터 리소스 해제: quit()

var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL

 worker.postMessage("hello world");     //向worker发送数据
 
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }

(2) 이벤트 리스너 추가 메시지를 처리하려면 워커 내부의 self.함수를 통해 메인 스레드와 통신하세요:

self.addEventListener('message', function(e) {
    var data = e.data;
    if(data == 'init')
        init();
    else
        ...
}, false);

self.postMessage("hello worker");

참고 문서:

웹 소켓과 웹 워커의 기본 원리와 사용법

HTTP 프로토콜 청크 인코딩(청크 전송 인코딩)

7가지 웹소켓 프레임워크 성능 비교