[HTML5][JavaScript]Web Workersと戦う
前書きこのブログには（リンク記事も含め）約300件ほどの記事がたまっています。 左側にある最新記事一覧やタグ一覧はJavaScriptでTumblrのAPIを叩いてとってきているんですが、これがですね、流石に重過ぎるだろと。 もう5兆回ぐらい言っているんですが、Tumblrにはタグ一覧を取得する機能がありません。初回読み込み時には20件ずつしこしことリクエストを発行、全件取得してから更に編集、表示と言うプロセスを踏んでいます。 一連の動作はほとんどすべて同期処理で行われています。他のJavaScriptを読み込んだり、実行したり、HTMLのレンダリングもやっているスレッドでやらざるを得ないので、一瞬画面が固まったりするのは大体そのせいです。 しかしJavaScriptにはマルチスレッド処理がないのでどうにもならない…と思っていたんですが、Web Workersと呼ばれる概念を使うことで可能
![[HTML5][JavaScript]Web Workersと戦う](https://cdn-ak-scissors.b.st-hatena.com/image/square/90eb2958e42491074ba3b8e136706c060c1c0ee5/height=288;version=1;width=512/https%3A%2F%2F66.media.tumblr.com%2Favatar_40dd84613d3b_512.pnj){kind=avatar}
Flux inside Web Workers
Before we can learn Flux inside Web Workers, we need to understand DOM-Less JavaScript. Lets start with some Problems. Problem 1 : Unable to Scale JavaScript Codebase If you have written approx 50-100K lines of code at frontend then you can easily understand that “Ease of Adding a new Module/Modify Existing Module” decreases as our codebase size increases. Sometimes, We apply lots of hack or quick
HTML5の「Web Workers API」を，別ファイルを使わずページ単体で利用するサンプル （createObjectURLがあれば，1ファイルでマルチスレッドのJSコーディングが可能） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ HTML5の「Web Workers API」（非同期処理の仕組み）を，外部スクリプトを使わずに，１ファイルだけで実行するサンプルコード。 ワンライナーで（たった１行で）Workerスレッドを起動できる。 簡単に書くとこんな感じ。 // スレッド内容を別ファイルに分離しなくてよい new Worker( window.URL.createObjectURL( new Blob([ elem.innerHTML ],{type:"text/javascript"}) ) ); 以下は解説。 Web Workers APIは，JavaScriptでマルチスレッド・プログラミングをするための仕組み。 正確に言えば，UIとは別に裏側で，重い処理を非同期で実行してくれるAPI。 Workerというオブジェクトに「外部スクリプト・ファイルのURL」を渡せば
Web Worker を使って web ページ内の画像を zip してダウンロードする - おなか周りの脂肪がやばい
クロスドメイン制約がない状況で、Web ページ内に表示されている画像を一括で zip してダウンロードしたいみたいな欲求ありませんか。私にはありました。 ありがたいことに jsZip というライブラリがあり、これを使えば JavaScript で zip ファイルを作成することができます。手順としては以下のような感じでしょうか ダウンロードしたい画像の url 一覧を作る 画像をすべてダウンロード 完了したら画像データを jsZip で zip する zip したものを blob にして、ダウンロード用のリンクを作る ご存知のようにブラウザの JavaScript はシングルスレッドで動作しており、JavaScript で時間のかかる処理を行うとユーザーの操作がブロックされます。jsZip による zip 処理もファイル数が少ないうちはいいのですが、ファイル数が増えてくると結構時間がかかっ
俺のWeb Workersがこんなに遅いわけがない | SONICMOOV LAB
フロントエンドエンジニアのらくさんです。ソニックムーブ Advent Calendar 2013 2日目の記事になります。 HTML5のAPIにWeb Workersというものがありますが、Androidの標準ブラウザでは使えないためスマートフォン向けには使いにくい状況が続いていました。しかし、Android 4.4 KitKatではWebViewがChromium 30ベースのものになり、標準ブラウザはどうなるのかまだ不透明ではありますが、標準ブラウザとしてChromeをプリインストールするかChromiumベースのものになっていく流れだと思われます。 そのため、スマートフォン向けの開発でも今後はWeb Workersが使える機会が徐々に増えていくでしょう。私が今開発しているスマートフォン向けのサービスでもWeb Workersを使っています。そこでこの記事では、Web Workersに
みんな大好き WebWorkers (WorkerMessage.js 作った) - latest log
WebWorkers(以下Worker)をハンドリングするのは結構大変で、ちゃんと意味があるコードを書こうとすると、 Worker が応答無くなったらどうしよう。エラーハンドリングどうしよう。どんなエラーがあるんだろう Worker に job 投げて結果を受け取ってクローズしてという基本的な部分をもっと楽に書きたい インラインワーカーどうしよう。インラインワーカーの場合の importScripts のパスの指定どうしよう postMessageの呼び出しコストは大丈夫か? 十分な時間分解能があるんだろうか などなど色々と考慮する必要があったりします。 このへんの事を考慮した実装がこちら( WebWorker.js )。半年ほど前の実装です。 https://github.com/uupaa/WebWorker.js/blob/master/lib/WebWorker.js (409行)
Try Webworkers
7. function setText(elem, text) { if (! elem.firstChild) { elem.appendChild(document.createTextNode("")); } elem.firstChild.data = text; } function run() { var num = parseInt(document.getElementById("num").value, 10); var result = 0; for (var i = 0; i <= num; i++) { result += i; } // 計算完了 var retElem = document.getElementById("result"); setText(retElem, result.toString()); }
Webteko 第11回で Web Workers について発表した - mollifier delta blog
1/23(土)に神戸で Webteko(ウェブテコ)第11回が開催された(告知ページ) 今回のテーマは「HTML5 と CSS3」ということで、僕も Web Workers について発表してきた。 発表内容 Try WebworkersView more documents from H M. サンプルコード デモとして、バックグラウンドで足し算を行う JavaScript コードを紹介した。あと、1%分完了するたびに進捗状況を表示してる。計算してる途中でもブラウザが固まらないってのがポイント。 まずこれが HTML ファイル。入力ボックス、ボタン、結果表示欄があるだけ。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web Workers を使って足し算する</title> <script type="applic
Web Workers用と通常のJavaScript用のコードを共存させる - latest log
Web Workers の調べ物してました。 Web Workers は、Google Chrome 4+, Firefox3.5+ , Safari4+ で既に利用可能です。 Google Chrome5 では、Web Workers 内で Web Socket を動かすこともできます。 js の基本であり鬼門といえば this オブジェクト 各ポイントで this.toString() や self.toString() を行い、this や self が何を指しているのか調べました。 <script> var globalScope = this.toString() </script> // WebWorkers.js var workersGlobalScope = this.toString(); var self1 = self.toString(); onmessage =
JavaScriptで並列処理ができる「Web Workers」 (1/5)
HTML 4時代のJavaScriptは主にWebページの装飾に使われていたので、マシンやブラウザーへの負担はそれほど高くなく、JavaScriptの処理にユーザーが待たされることはほとんどありませんでした。ところが「Webアプリケーションのプラットフォーム」と位置付けられるHTML5時代になると、JavaScriptのプログラムは巨大で複雑になります。そのため、各ブラウザーベンダーはJavaScriptエンジンを高速化し、複雑で時間のかかる処理を素早くこなせるように努力してきました。 しかし、いくら高速化しても回避できないこともあります。従来のJavaScriptはJavaのようなスレッド処理ができないので、時間のかかる処理を実行するとブラウザーが停止状態になってしまい、その間、ユーザーはUI操作がまったくできなくなる問題がありました。 そこで、ブラウザーで複数の処理を並行して実行させる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
