HTML5의 웹 워커, 웹 어셈블리

윤뿔소·2023년 6월 29일

html5

이모저모

목록 보기

3/12

대표님이 알아두면 좋다고 하셔서 따로 기록도 해본다.

웹 워커, 웹 어셈블리는 캔버스 등과 함께 HTML5에 들어오게된 강화요소이다.

👷🏻웹 워커(Web Worker)

웹 워커가 어디서 렌더링 되는지 생각

웹 애플리케이션에서 백그라운드 스레드를 생성하여 병렬 처리를 수행할 수 있게 해주는 HTML5의 기능. 웹 워커는 메인 스레드와 별도로 실행되고, 긴 작업이나 계산 집약적인 작업을 처리할 때 유용.

웹 워커를 사용하면 메인 스레드(UI 스레드)와 독립적으로 동작하는 백그라운드 스레드를 생성할 수 있다. 이 스레드에서는 워커 스크립트 파일에 정의된 작업을 수행하며, 메인 스레드의 블로킹 없이 실행된다. 웹 워커는 메인 스레드와의 통신을 위해 메시지 기반의 인터페이스를 제공하며, 메시지를 통해 데이터를 주고받을 수 있다.

왜 사용하는가?

웹 워커는 병렬 처리를 통해 웹 애플리케이션의 응답성을 향상시킬 수 있으며, 대규모 데이터 처리, 복잡한 계산, 그래픽 렌더링 등의 작업을 효율적으로 처리할 수 있다. 웹 워커는 JavaScript를 기반으로 하며, Worker 객체를 사용하여 생성 및 제어할 수 있다.

따라서, 웹 워커는 메인 스레드에서 실행되는 HTML, CSS, 그리고 DOM 요소들과는 별도의 스레드에서 동작하며, 웹 애플리케이션의 성능 향상을 위해 병렬 처리를 수행한다.

=> JS는 싱글스레드 언어이지만, 웹 워커를 지원하면서 덕분에 브라우저에서 멀티 스레드 언어처럼 활용할 수 있음. (메인 스레드, 렌더링 스레드, 네트워크 스레드) 이 중 메인스레드에서 웹워커는 백그라운드 스레드로 분리돼 사용되기 때문에 멀티 스레드처럼 운용 가능하다.

참고: 브라우저의 스레드

웹 워커는 브라우저의 스레드에서 동작한다. 브라우저는 보통 멀티스레드 아키텍처를 가지고 있고, 웹 워커는 브라우저의 백그라운드 스레드 중 하나에서 실행된다.

브라우저의 주요 스레드는 다음과 같다.

메인 스레드(Main Thread): 웹 애플리케이션의 UI를 담당하는 스레드. HTML, CSS, JavaScript, DOM 조작 등의 작업을 처리. 이 스레드는 싱글 스레드로 동작하며, 웹 워커를 사용하여 병렬 처리를 위해 백그라운드 작업을 분리할 수 있다.
렌더링 스레드(Rendering Thread): 웹 페이지의 렌더링을 담당하는 스레드. HTML과 CSS를 사용하여 렌더 트리를 구축하고, 레이아웃과 페인팅 작업을 처리. 이 스레드는 렌더링 엔진에 의해 제어되고, 메인 스레드와는 별개로 동작.
네트워킹 스레드(Networking Thread): 네트워크 요청과 응답을 처리하는 스레드. AJAX 호출, 웹소켓 통신 등의 네트워크 작업을 수행합니다. 이 스레드는 메인 스레드와 독립적으로 동작하고, 비동기적으로 네트워크 작업을 처리.

웹 워커는 메인 스레드와 별도의 백그라운드 스레드에서 동작하며, 메인 스레드와는 독립적으로 실행된다. 웹 워커는 브라우저에서 관리되는 스레드 풀에서 할당되는 스레드를 사용하여 작업을 수행. 이렇게 함으로써 웹 애플리케이션의 성능을 향상시키고 병렬 처리를 가능하게 한다.

👨‍👨‍👦‍👦웹 어셈블리

웹 브라우저에서 실행되는 이진 형태의 저수준 프로그래밍 언어. 웹 어셈블리는 웹 애플리케이션에서 JavaScript 외에 다른 언어로 작성된 코드를 실행할 수 있게 해주는 표준.

기존에는 웹 애플리케이션에서는 JavaScript가 주로 사용되었지만, JavaScript는 인터프리터 기반의 스크립트 언어이기 때문에 일부 애플리케이션에서는 성능 문제가 발생할 수 있다. 그래서 웹 어셈블리는 이러한 제한을 극복하기 위해 등장했다.

웹 어셈블리는 소스 코드를 컴파일하여 이진 형태의 모듈로 변환한다. 이렇게 변환된 웹 어셈블리 모듈은 웹 브라우저에서 실행될 수 있다. 웹 어셈블리 모듈은 브라우저의 가상 머신인 웹 어셈블리 가상 머신(WASM VM)에서 실행되고, 이는 JavaScript 엔진과는 별도로 동작한다.

웹 어셈블리는 소스 코드를 WASM VM에서 어셈블리어로 동작하기에 다양한 프로그래밍 언어에서 지원되며, 주로 C, C++, Rust 등의 저수준 언어로 작성된 코드를 웹 어셈블리 모듈로 변환하여 사용한다. 이는 기존에 다른 환경에서 실행되는 코드를 웹 환경에서도 실행할 수 있게 해준다!

왜 사용하는가?

웹 어셈블리의 장점은 성능이 우수하며, 다른 언어로 작성된 코드를 활용할 수 있다는 점과 웹 어셈블리는 웹 플랫폼에서 실행되는 표준화된 형식이기 때문에 다양한 브라우저에서 호환성을 제공한다.

이러한 변환으로 웹 어셈블리는 게임, 그래픽 라이브러리, 암호화 등 성능이 중요한 영역에서 주로 사용된다. 웹 어셈블리는 JavaScript와 함께 사용되어 웹 애플리케이션의 성능을 향상시키고, 다양한 언어로 개발된 코드를 웹 환경에서 활용할 수 있도록 도와준다.

참고: 어셈블리 언어, 컴파일러 언어, 인터프리터 언어

어셈블리가 정확히 어디서 왔는지, 왜 성능이 좋은지 알아야 이 내용이 참고가 된다.

참고 - Assembly란?
부품을 다른 전문업자나 하청업자에게 맡겨 제조하거나 또는 시판 부품을 구입하여, 주로 상품의 최종적인 조립을 행하는 것. 자동차·선박·가전제품 제조 등에서 행해짐. 순화어는 '조립(품)', '새것', `짜맞추기'.
집합, 회의라는 뜻도 있지만 여기서 쓰인 어셈블리는 위 뜻이 더 가까움

어셈블리 언어

어셈블리어로 작성된 어셈블리어 소스 코드를 기계어로 변환(변역)해주는 프로그램

하드웨어와 소프트웨어의 가장 밑 부분에 있는 저급 언어(Low Language)
기계와 1:1로 대화하는 언어 => binary로 소통이 힘들기 때문에 어셈블리어를 이용
해킹, 운영체제, 임베디드에서 사용
속도가 매우 빠름
기계어와 매우 유사한 언어

이런 특징들로 기계와 바로 소통하고 명령하기 때문에 빠르지만 기계 지식이 필요해 어렵고, 각 운영체제나 하드웨어의 언어들을 다 알 수 없어 개발에 차질이 생긴다.

컴파일러 언어

해당 컴파일러 언어로 작성된 소스코드를 어셈블리어-기계어로 변환해주는 프로그램

전체 파일을 스캔하여 한꺼번에 번역한다.
초기 스캔시간이 오래 걸리지만, 한번 실행 파일이 만들어지고 나면 빠르다.
기계어 번역과정에서 더 많은 메모리를 사용한다.
전체 코드를 스캔하는 과정에서 모든 오류를 한꺼번에 출력해주기 때문에 실행 전에 오류를 알 수 있다.

이런 특징을 가지고 있어 실행 전 한단계를 거쳐서 번역 및 오류를 검증하기 때문에 어셈블리보다 느리다.

인터프리터 언어

소스코드를 한 줄 한 줄 읽어가며 명령을 바로 처리하는 프로그램

프로그램 실행시 한 번에 한 문장씩 번역한다.
한번에 한문장씩 번역후 실행 시키기 때문에 실행 시간이 느리다.
컴파일러와 같은 오브젝트 코드 생성과정이 없기 때문에 메모리 효율이 좋다.
프로그램을 실행시키고 나서 오류를 발견하면 바로 실행을 중지 시킨다. 실행 후에 오류를 알 수 있다.
큰 규모의 프로그램을 만드는 데 용이하다.

컴파일러와 비슷하게 번역을 해주지만, 컴파일러와는 반대로 인터프리터는 프로그램 실행시 한 번에 한 문장씩 번역한다. 그래서 개발 경험이나 디버깅이 쉬워 개발자들에게 좋은 언어지만 한줄 한줄 처리하기에 느리다.

각각의 언어들

어셈블러 언어	컴파일러 언어	인터프리터 언어
어셈블리어	C	JavaScript
	C++	Lisp
	C#(Byte Code)	PHP
	Visual Basic	PostScript
	F#(Byte Code)	Python
	Go	Ruby
	Java(Byte Code - .class)	Unix Shell
	Scala	VBScript
	Kotlin	R
	Lisp	HTML
	Python(Byte Code-CPython)	Java(Interpreter)
	Delphi
	Objective C
	PL/I
	Rust
	Swift

참고: 그 외 HTML5 강화요소

GPT로 쓰였음.

HTML5의 강화요소는 다양한 기술과 기능을 포함하고 있습니다. 웹워크와 웹어셈블리는 그 중 일부입니다. 나머지 HTML5의 강화요소로는 다음과 같은 것들이 있습니다:

웹 컴포넌트(Web Components): 웹 컴포넌트는 재사용 가능한 웹 요소를 만들기 위한 표준 기술입니다. HTML, CSS, JavaScript를 사용하여 커스텀 요소를 정의하고, 이를 다른 웹 페이지에서 재사용할 수 있습니다. 웹 컴포넌트에는 대표적으로 사용되는 기술로는 HTML 템플릿(Template), 쉐도우 돔(Shadow DOM), 커스텀 요소(Custom Elements) 등이 있습니다.
웹 스토리지(Web Storage): 웹 스토리지는 클라이언트 측에서 데이터를 저장할 수 있는 방법을 제공합니다. 이를 사용하여 브라우저에 임시 데이터를 저장하거나 오프라인 상태에서도 애플리케이션을 실행할 수 있습니다. 웹 스토리지에는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다.
웹소켓(WebSocket): 웹소켓은 실시간 양방향 통신을 위한 프로토콜입니다. 서버와 클라이언트 간에 지속적인 연결을 유지하고 데이터를 실시간으로 주고받을 수 있습니다. 웹소켓은 웹 기반의 채팅 애플리케이션, 게임, 주식 시세 업데이트 등 실시간 통신이 필요한 경우에 자주 사용됩니다.
웹 그래픽스(Web Graphics): HTML5에서는 캔버스(Canvas)와 SVG(Scalable Vector Graphics)를 통해 그래픽 요소를 표현할 수 있습니다. 캔버스는 JavaScript를 사용하여 그래픽을 그릴 수 있는 영역을 제공하며, SVG는 XML 기반의 벡터 그래픽 요소를 표현하는 방식입니다. 웹 그래픽스를 사용하여 그래픽을 그리거나 애니메이션을 생성할 수 있습니다.
오프라인 웹 애플리케이션(Offline Web Application): 오프라인 웹 애플리케이션은 인터넷 연결이 없는 상황에서도 웹 애플리케이션을 실행할 수 있는 기능입니다. 웹 페이지 및 리소스를 로컬 캐시에 저장하고, 오프라인 상태에서도 이 저장된 콘텐츠를 사용할 수 있습니다. 이를 통해 사용자는 오프라인에서도 웹 애플리케이션을 사용할 수 있으며, 인터넷 연결이 다시 활성화되면 변경 사항을 동기화할 수 있습니다.
지리적 위치(Geolocation): 지리적 위치 기능은 사용자의 위치 정보를 수집할 수 있는 기능을 제공합니다. 이를 통해 웹 애플리케이션은 사용자의 위치에 기반한 개인화된 서비스를 제공하거나, 위치 정보를 활용한 서비스를 개발할 수 있습니다.
오디오 및 비디오(Audio and Video): HTML5는 네이티브 오디오 및 비디오 재생을 지원합니다. 이를 통해 웹 페이지에서 오디오와 비디오 콘텐츠를 쉽게 재생하고 제어할 수 있습니다. 또한, 웹RTC(WebRTC)를 통해 웹 기반의 실시간 음성 및 영상 통화 애플리케이션을 개발할 수도 있습니다.