この DOM がすごい2018: worker-dom - mizchi's blog
おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触
The Basics of Web Workers | Articles | web.dev
The Basics of Web Workers Stay organized with collections Save and categorize content based on your preferences. The problem: JavaScript concurrency There are a number of bottlenecks preventing interesting applications from being ported (say, from server-heavy implementations) to client-side JavaScript. Some of these include browser compatibility, static typing, accessibility, and performance. For
Web Workersを用いてJavaScriptをマルチスレッド化する
長らくの間、JavaScriptはシングルスレッドな言語でした。重い処理を実行するたびにUI処理はブロックされ、マルチコアCPUは上手に使えない、それがJavaScriptの常識でした。ですが、Web Workersがあればそれが変わります。 Web Workersとは JavaScriptは、Workerという処理単位を持ちます。Workerはバックグラウンドで非同期に処理を行うための最も簡単な手法であり、JavaScriptに他の処理を妨げないタスクを実行する手段をもたらします。 しかしなぜWorkerという名前なのでしょうか。プログラマにとってなじみ深い「スレッド」ではいけなかったのでしょうか。 独立したメモリ空間 事実、Workerはスレッドのようなものと言えます。しかしながら、Workerにはプログラマが一般的に想像するスレッドとは少し違う点があります。スレッドというよりかは、ど
turbo.js - WebWorkerでGPUを使った計算処理を実現 MOONGIFT
ブラウザのJavaScriptは一昔前に比べたら大幅に高速化されていますが、それでもシングルスレッドで処理されるという点がネックになります。それを克服するためにはWebWorkerを使った並行処理、GPUを使った計算処理が必要です。 それらの技術を使おうと思ったら非常に面倒なイメージがあります。そこで利用するのがturbo.jsです。 turbo.jsの使い方 コードを見るとJavaScriptではないのが分かります。 エラーがある場合にちゃんとエラー行が出てくるのがポイントです。これでかなりデバッグしやすくなります。 turbo.jsではGPUを使った処理であるため、通常のJavaScriptではない書き方になります。そのため簡単には使いこなせないかも知れません。また、利用できる範囲が限定的になりがちなのも注意点で、向き不向きも分かっている必要があります。そうした点を理解しつつturbo
TechBuzz 第17回 HTML5+JS勉強会資料
About TechBuzz 第17回 HTML5+JS勉強会のためのGithub Repositoryです。 概要 時間 2015/09/24 (木) 19:30 to 22:00 発表内容 「JavaScriptでマルチスレッドプログラミング」 〜事例『JSで作るInstagramのFilter』を通して〜 発表の目的 Web Worker APIの基本の使い方を知ること 事例を通してWeb Worker APIの実践例と応用方法について知ること 資料 Github : サンプルコードや資料など Wiki : 講義で話す内容の補完やサンプルコードの解説 Slide : 発表資料 サンプルコード一覧 sample01 : 2の50乗を出力します sample02 : 10万までのうち最大の素数を探し出します sample03 : 2のn乗を出力します（nはユーザからの入力を想定） sam
JavaScriptで画像処理 ~CanvasとWebWorker編~ - Qiita
About はじめに JavaScriptで画像処理をするには、Canvasを使います。この手のサンプルコードはたくさんありますし、Canvas自体ハードルはそんなに高くないので、使ったことがある方は多いかもしれません。 しかし、大量の画像を処理したり、なんども画像処理するような場合、全ピクセルデータを計算するようなコードは非常に負荷がかかり、ユーザビリティを悪化させてしまいます。そこでWeb Worker APIの登場です。 Web Worker APIを使用することによって、JavaScriptでマルチスレッド処理を実現することができます。今回は、「Canvasで画像処理したいが、その処理が重たいので、Workerスレッドにピクセルデータを送って並行処理し、最後にそれを受け取って再描画する」ということをやってみます。 Demo この記事で紹介するコードを使って以下の様なサンプルコードを
ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
FireFoxOS版のLINE « LINE Engineers' Blog
FirefoxOS版LINEは、2013年下半期に開発を開始し、2014年2月にリリースされました。FirefoxOS LINEは、現在世界19カ国で使用されており、Firefox Marketplaceでのダウンロード数が多いアプリの1つです。また、多くのユーザーが好意的なレビューを書いており、人気アプリTOP 7の中で唯一星4つの評価を維持しています。 このようにユーザーから好評を得ているFirefoxOS LINEは、決して簡単に作られたものではありません。FirefoxOS LINEがどのようにスタートし、またどのように開発されたのか、性能向上のためにどんなことをしてきたのか、開発に携わる中で経験したことをどうやって共有しているのかについて紹介します。 WebOSのスタート 2013年、MWC 2013で注目されたのはWebOSの登場でした。FirefoxOS(以下FXOS)、Ti
WebWorkerでXMLHttpRequest - Qiita
XMLHttpRequestをWebWorkerで実行する Senchaが公開したHTML5のFacebookクライアント、Fastbookの高速化手法として、 XMLHttpRequestをWebWorkerで実行するのがあるそうです。 ということで、実際にやってみました。 WebWorkerの呼び出し jQueryを用いた環境で使いやすいように、jQueryの$.ajaxインターフェイスに似せています。 ただし、XMLHttpRequestをWebWorkerからは取得できないので、全く一緒ではありません。 ExecutorServiceの実装 WebWorkerを大量に作成すると負荷がかかるので、 少し手間ですが、同時実行数を制限し、リクエストをキューイングする ExecutorServiceを実装します。 var ExecutorServece = (function() { Ex
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
