Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み 清水智公（Mozilla） Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。 そのようなアプリの代表例がゲームで
Chrome 上で、Canvas API のダンプ、Draw call の可視化、スナップショットが取れる Canvas Profiles が超便利なのでご紹介 - latest log
Chrome には Canvas API の発行状況を可視化してくれる Canvas Profiles が搭載されています（1年ぐらい前からありました)。 これは特定の業種の人(特にCreate.jsとかPexJSを使ってる方々)にとっては神の如きツールであり、知らないと勿体ないのでシェアしますね。 ユースケース (つ◇⊂) 「Canvas のページが重いよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー (つ◇⊂) 「描画が崩れる原因がわかんないよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー です。 おまけ 機能自体は去年の7月ぐらいから利用可能で、その間にUIが何度かマイナーチェンジしていますね。 あと、プロファイルデータを右クリックすると Load 機能はあるけど Save 機能がないので、 Google Dev Summit 2013
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた - ICS MEDIA
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた 2014年9月にリリースされたiOS 8においてWebGLが動作するようになったことで、スマートフォン環境での3D表現に可能性を感じ、興味を持った方も多いと思います。そこで今回、写真を読み込んで3D空間上に配置し、パーティクルに分解して次の画像に切り替わるスライドーショーのデモをJSライブラリ（Three.jsなど）を使わずにイチからHTML5とWebGLで作ってみました。WebGLが動作する端末ならモバイルでもなめらかに動作するので、是非試してみてください。マウスやタッチの操作でビューを回転させることができます。 デモを再生する（別ウインドウが開きます） ソースコード (JavaScript) 制作環境について 今回のデモを作成するにあたり、WebGLのAPIを直接呼び出す形
» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
asm.jsを手書きしつつフィボナッチで速度比較をしてみる
asm.jsを触ってみたので所感など。 asm.jsはJavaScriptのサブセットで、限られた型しか使えないが高速に動作する言語との事。とりあえずどの程度速くなるのか、計算量が多くなるfibonacciの実装で試してみた。参考資料はasm.jsの仕様ぐらいしか無かったのでこれを見ながら。 で、実際に書いてみると型がゆるゆるなJavaScriptのイメージは脆くも崩れ去り、厳格な型チェックの世界である事がわかった。コンパイル言語を書いている時の頭に切り換えないと、コンパイルエラーと延々格闘する事になる。まずはasm.jsのコードは次の形式で、module exportする。 function create_my_asm_module(stdlib, foreign, heap) { "use asm"; function hoge() {...} function fuga() {...
asm.js/OdinMonkeyメモ
dynamis (でゅなみす/レッサーパンダ) @dynamitter JSには型固定配列が実装されていてそれを使えばかなり高速化されるので型のある言語で書いたコードをTyped Array使ったJSコードにコンパイルすれば手で書いた型なしJSコードより高速になる 2013-03-17 02:09:57 dynamis (でゅなみす/レッサーパンダ) @dynamitter JSでもn=n|0は常にintのように型を固定する書き方がある。C等からそんなアセンブラ的JSに変換するコンパイラとそんなJSを高速実行するよう改良したエンジンにより、JSは後方互換性を保ったままJava/C#以上の速度を実現可能な実行環境に進化する 2013-03-17 03:27:17 dynamis (でゅなみす/レッサーパンダ) @dynamitter アセンブラ的JSサブセットがasm.js、C等から変換する
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
LAB.js - 以下斜め読んだ内容
前の斜め読みへのコメントでid:edvakfさんが言及してたjsライブラリ。 jsと他のコンポーネント（他のjs、css、img、etc.）の並行DL ifame要素は？今度調べる 複数js間の依存関係維持 クロスブラウザ jQueryライクなメソッドチェーンで書きやすいコード 戻り値は$LAVオブジェクト 要注意ポイントは「jQueryは1.4以上にしとく」 守らないとFxで大変な目に・・・ LABjs 存在は知ってるがよく知らないという状態だったのでこれを機に斜め読み。 以下斜め読んだ内容：home、description、release notes LABはLoading And Blockingの略 MITライセンス Getify Solutions（Kyle Simpson）のプロジェクト Steve Soudersとのコラボしたことが活かされてる LABjs & User-Ex
【レポート】速いJavaScript条件式を書く方法と落とし穴 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers JavaScriptのコーディングティップスはネット上に溢れている。また、JavaScriptに限定されたテクニックではなく、汎用的に使われているテクニックの多くをJavaScriptコーディングに適用できる。しかし注意が必要だ。簡単でよく知られた方法であっても、文脈を考えずに盲目的に適用すると問題を起こすことがある。この面白いサンプルがCraig Buckler氏によってSitePointにHow to Write Faster JavaScript Condition Expressionsとして掲載されている。 Craig Buckler氏はまず次の条件文を紹介。最初の条件はfalseになるので、次のyを評価する。yはtrueだから、全体と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
