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で実装されるようになってきました。 そのようなアプリの代表例がゲームで
MITがブラウザの表示を34%高速化するJavaScriptフレームワークを開発
MITがブラウザの表示を34%高速化するJavaScriptフレームワークを開発2016.03.28 16:00 mayumine インターネットはどんどん速くなっていくのに、ウェブサイトはどんどん複雑になっていきます。いまだに私たちは、PCやスマートフォンの画面を見つめながらウェブページが表示されるのを待っています。そんな｢ウェブページの待ち時間｣を短くする技術が登場。 マサチューセッツ工科大学(MIT)の研究チームが、ページ表示速度を最大34%も高速化するフレームワークを開発しました。 ウェブブラウザは、URLを入力してエンターボタンを押したり、リンクをクリックした瞬間、HTMLファイル、JavaScript、動画、広告…その他諸々のオブジェクトを異なるサーバーからせっせとかき集めます。1つ1つのオブジェクトは評価され、表示させるページに追加されていきます。さらに1つ1つのオブジェクト
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
第0回 東京 Web PerformanceでSIMD.jsを味見しました - pixiv inside [archive]
こんにちは、最近隔週でやっている社内週末ハッカソンでElixirとGroovyを触ってニヤニヤしているプログラミング言語好きのedvakfです。次はClojureをやってみたいです。 弊社で開かれた第0回 東京 Web Performance - SIMD.jsを味見するというイベントで、SIMD.jsに触ってきました。 SIMD.jsはJavaScriptで高速なベクトル演算ができるAPIです。Firefox NightlyやMicrosoft Edgeで試せるそうです。ほとんど情報が無いので、集まった各自がググりながら使い方を調べてね♪というかなりストイックな集まりでした。 MDNに記事があるのですが、引数が書いてなかったり、現在のFirefoxのNightlyとAPIの乖離があったりして、かなりアルファな匂いがします。 https://developer.mozilla.org/ja
![第0回 東京 Web PerformanceでSIMD.jsを味見しました - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a4626794f7148f941ffe2a9c48e4c5c0b4a1fd6/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F088eac5cc1b720eccbe1e86b68599ddb4be8abc9%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20140325%252F20140325045217.png)
New JavaScript techniques for rapid page loads
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
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 チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
DOM操作の最適化によるJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
モバイルWebパフォーマンスの現在と未来
iOSアプリケーション開発会社の経営者であるDrew Crawford氏は、現在のモバイルWebアプリケーションが遅く、また、近い将来にその遅さが大幅に改善されると思えない理由を、ブログ記事（内容が充実しており、良く調査して書かれている）の中で明らかにした。 このブログ記事は、これより前に書かれた記事への追加記事である。前の記事で氏は、モバイルにおけるJavaScriptのパフォーマンスがデスクトップの10倍遅いことを指摘した。その記事は激しい批判を浴びたため、Drew氏はそれに答える形で、さらに詳細な内容の記事を記した。モバイルの貧弱なパフォーマンスと、それについての改善が見られない理由は、次の3つに分類される。 モバイルのARMプロセッサのスピードと、デスクトップのx86プロセッサのスピードとの違い JavaScriptエンジンのパフォーマンスの傾向 ガベージコレクションに関連する特定
» スクロール時に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() {...
dresscording.com
dresscording.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
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ファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
jsPerf: JavaScript performance playground
jsPerf — JavaScript performance playground What is jsPerf? jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see the FAQ. Create a test case Login with GitHub to Create Test Cases
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn web development | web.dev
1216彩票-官网平台
GitHub - MSDN Blogs
