BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース WorkerDOMはJavaScriptプログラミングにDOM並行処理を加える

WorkerDOMはJavaScriptプログラミングにDOM並行処理を加える

原文(投稿日:2018/10/31)へのリンク


今年のJSConfの大きなニュースはWeb WorkerでDOMを利用可能にするJavaScriptライブラリであり、開発者がマルチコアプロセッサアーキテクチャを活用してWebパフォーマンスを向上させることができるWorkerDOMが紹介されたことである。

Web Workersはバックグラウンドスレッドでスクリプトを実行するためのWebコンテンツの簡単な手順であり、長年利用されてきたが、DOMアクセスがないため、採用は限定的だった。WorkerDOMプロジェクトは、このプロジェクトがWeb上のマルチスレッドプログラミングへの関心を高め、ユーザーによりよい体験を作り出すことを望んでいる。

ユーザー体験を加速するために代替プロセスを活用する必要性が増えている。今年のFullStackでソフトウェアエンジニアのJames Milner氏は、メインアプリケーションスレッドのパフォーマンスを改善するためにWeb Workerに処理を渡すことにより、Web Workersでユーザー体験を向上するテクニックをプレゼンした。

WorkerDOMのもう一つのゴールは、 可能な限りパフォーマンスを改善することで、Webパフォーマンス、特にシングルプロセッサのスピードが、プロセッサのコア数と同じぐらい早くならないモバイルデバイスにおいて、ネイティブのパフォーマンスと競争できるようにすることである。

Web Workers内でDOMを完全に表現するために、WorkerDOMはTypeScriptで書かれた効率的な転送メカニズムを提供する。GoogleでAMPプロジェクトのテックリードを務めるMalte Ubl氏は、WorkerDOMの発表を通じ次のように述べている:

WorkerDOMはサーバーがレンダリングしたDOMを水和させた後、アプリケーションがユーザーのアクションに反応したり、アニメーションを実行させたりといった、ページへの変更による変異をプロキシします。

WorkerDOMはnpmまたはyarnでインストールされる:

npm install @ampproject/worker-dom

yarn add @ampproject/worker-dom

またはネイティブモジュールをサポートするブラウザ(IE11とSamsung Internetを除くモダンなもの全ての)用のESモジュールを含めることができる:

<script src="path/to/workerdom/dist/index.mjs" type="module"></script>
<script src="path/to/workerdom/dist/index.js" nomodule defer></script>

詳細な使用方法はWorkerDOM READMEで提供されている。

JSConfのWorkerDOMに関する完全なスライド: JavaScriptの並行処理とDOMも提供されている:

 

WorkerDOMは現在、アルファ状態にあり、実験とコントリビューションの準備が整った。WorkerDOMはJavaScriptフレームワークの互換性を提供し、初期状態でReact, Preact, Svelteがサポートされる。このプロジェクトは、開発者とユーザーに最適な体験を提供するためにフレームワークとツール作者との共同作業の機会が評価されている。

WorkerDOMはApache 2オープンソースライセンスで提供されている。 WorkerDOM GitHubプロジェクトを通じたコントリビューションが歓迎されていて、WorkerDOMプロジェクトのコントリビューションガイドライン行動規範に従う必要がある。

 
 

Rate this Article

Adoption Stage
Style
 
 

この記事に星をつける

おすすめ度
スタイル

BT