別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
JavaScript - Client Side - Advent Calendar 2013 12/07分の記事です。 JavaScript 超初心者による、初心者向けのエントリーです。 プルリクエストをレビューしているとたびたび、 レビューコメントやプログラムの diff に「いいね」したくてたまらなくなりますよね。 皆さんのそんな願望を叶えるべく、 Github/Github enterprise 用 UserScript「StealthLike」を開発しました。 自分で言うのもあれですが、 これがまた、どうしてなかなか超絶便利です。 スクリプトは、下記の通り Github にて公開しています。 nezumi650/StealthLike 本日は、この「SealthLike」を紹介しつつ、 作成する中で学んだ事をかんたんにまとめておきます。 ■StealthLikeとは プルリクや
What is Brick? Brick is a bundle of reusable UI components created to enable rapid development of HTML5 apps. Brick adds new HTML tags- allowing developers to express the structure of an application in a clearer, more concise manner. What are Web Components? Web Components is a series of emerging W3C standards that allow developers to define custom HTML elements, and interact with them using the n
この結果から、確かにFirefoxとしてはasm.jsが有効になる事で速くはなっているのだけど、asm.js 非対応のChromeと大して変わらない(場合によっては負ける)、というのがわざわざ文法を変えてまで改善した結果としては物足りない、という所ですね。 なお、このテストは実用的なFFTモジュールを目指していてデータの入出力部に通常のJavascriptとのインターフェースのために非asm.jsの処理が多少残っていますので、純粋なベンチマークならばもう少しasm.jsでの改善具合は良くなると思います。 しかしながら、触ってみた実感と世の中の爆速という評判との乖離に釈然としないものを感じていたわけです。1つは比較対象が何であるかという点だと思います。これは数日前の記事。 Surprise! Mozilla can produce near-native performance on the
ゲーム屋の間ではおなじみのデバッグメニューをブラウザで実装してみました。 WebDebugMenu デバッグメニューとは、変数や関数を事前に登録しておき、後でメニューから値を書き換えたり関数を呼んだりできるようにする代物で、周囲の人間の話を聞くにコンソールゲーム屋の間では国内外問わずどこでも開発中こういう機能を入れていて、ほぼ共通認識になっているようです。 通常ゲーム内の 2D レンダリング機能やら UI 機能やらを使って実装するのですが、ブラウザで実装すればそれらとの依存を断てるので汎用性を高められそうです。サーバープログラムのようなグラフィック表示がないプログラムへの応用も考えられますし、ブラウザは超強力な UI エンジンでもあるので、一般的なデバッグメニューでは難しい複雑な編集機能も実装できそうです。(STL などのコンテナの中身を弄るとか、スクリプトやシェーダコードを編集できるよう
［GDC 2013］Webブラウザで「Unreal Engine 3」がヌルヌル動く!? ゲームエンジンを5日でHTML5へ移植した驚きの技術とは ライター：米田 聡 Game Developers Conference 2013（以下，GDC 2013）の2日めとなる米国時間3月26日，Webブラウザ「Firefox」の開発で知られる米Mozilla Foundation（以下，Mozilla）が，「Fast and Awesome HTML5 Games」（高速かつ驚愕のHTML5ゲーム）と題するセッションを開催した。 HTML5はそのポテンシャルが高く評価されてはいるが，実際にそれで作成されたゲームを見ると，「Webブラウザ上のゲームならこんなものか……」と落胆させられるものが多い。そのため正直に言えば，筆者はあまり期待せずに参加したのだが，蓋を開けてみれば，たしかにタイトルどおり「
Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub. Scalable Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values. Cubism renders incrementally, too, u
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
エンジニアの坂本 一樹(@splhack)です。今日はみんなに新しいソリューションを紹介するね★ LWFっていうんだよっ♪ グリー、UnityおよびHTML5に対応したスマートフォンアプリの開発支援ソリューション「LWF」をオープンソースソフトウェアとして公開 「LWF」は、独自ファイルフォーマットに基づくアニメーションエンジンで、Flashコンテンツから変換したアニメーションデータを、UnityとHTML5で再生できます。 「Animal Days」での「LWF」使用例 (弊社プレスリリースより抜粋) ねっ、いいでしょ♥ ... すみません。書いてて辛くなってきたんで、もうちょっと堅くさせていただきます。 “新次元ゲーム開発セミナー”が開催！ グリーの気鋭が語る、次世代のモバイルゲーム開発で求められるものとは？ 坂本氏が講演で、「“Lightweight SWF”を“github”でオー
JavaScriptなどのスクリプト言語は動作が遅く、最適なパフォーマンスを得るにはC/C++で実装しなければならないという常識に挑んだ先進的な講演が話題になっています。この話題の発端は2012年10月7日から10月8日までベルリンで開催されたJSConf.euでFelix Geisendörfer氏が行った講演です。 彼の講演の題材はnode.jsからMySQLに接続する為のバインディングのパフォーマンスに着目しています。2010年当時、node.jsにはMySQLのバインディングが存在しておらず、増井さん作のnode-mysqlモジュールが開発中の状態でした。このモジュールはJavaScriptでバイナリを解析しておりJavaScriptのみで開発されていました。この状況を受けてFelix氏が新たにnode-mysqlモジュールを新規に開発を始めました。このモジュールもJavaScri
2010-06-03 カテゴリ: Client Side タグ: JavaScript Tips アルゴリズム 前回の記事で予告したとおり、今回はJavaScriptのMath.random()で生成できる乱数の精度の話。 前回の記事で、JavaScriptでは2^53未満の正整数を扱うことができるということがわかったから、今回の記事では2^53未満のランダムな正整数を生成してみる。 具体的には↓のようなコード。 var ub = Math.pow(2, 53), list = []; for (var i = 0; i < 16; i++) { list[i] = Math.floor(Math.random() * ub).toString(2); while (list[i].length < 53) { list[i] = "0" + list[i]; } // padding }
面白いものを作る人がいるなあ。 以前オンラインでVSTプラグインを生成するFaustという言語について書きましたけど、こちらはJavaScriptを使ってVSTを生成するという試みです。 http://boomsk.com ページの構成はシンプルです。「Parameters」の所でパラメーターを追加したり編集したりして、「Code」の所のJavaScriptのコードでprocessAudio()という関数の中身を書くだけ!! これで「Generate」ボタンを押すとVSTプラグインが生成できてしまいます。なんてこった。 ただし処理はかなり重いみたいで、ゴリゴリと複雑な事をさせるには辛いようです。中身がどうなっているのか良くわかってないですが、ネイティブにコンパイルしている訳ではなくて、JavaScriptエンジンとスクリプトをまとめて固めてるんじゃないかなあ。SpiderMonkeyとかを
JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Being developed at DeNA as a research project, the language has following characteristics. faster JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript. The gain may vary, but even the optimi
Web Audio API や Audio Data API を使ってブラウザから音を出したりやっているけど、音を生成する部分だけを確認したいときにいちいちブラウザでページを開くのも億劫だし良くクラッシュするのもだるいので、ターミナルから使えるように node.js のモジュールを書いてみた。 https://github.com/mohayonao/node-macaudio 出来ることは少ない(１つだけ)だけど、その分使い方はシンプル。 var macaudio = require("macaudio"); var node = new macaudio.JavaScriptOutputNode(1024); // bufferSize node.onaudioprocess = function(e) { var L = e.getChannelData(0); var R = e.
最近趣味でJavaScriptを弄っており、Cの延長としてはいじれるのだけど、オブジェクト指向も理屈は解るのだけど、体感的にどうにも駄目で、クラスだのオブジェクトだのメソッドだの、解った気になってるだけで大変よろしくない。 あんまり良い教本が見つからないのも困っている。 会社のPGに仕事中に聞くのも気が引ける。（自分は趣味でやってるだけで、仕事関係ないから） クラスの説明に「人間クラスは、腕が2本足が2本として」とかね。 「抽象的な説明は理解が終わった人向けか、何となくわかった気になる用なので、最初に読んでも役に立たない」 解っている人の説明が解っていない人に伝わりにくいのは 「解らない人が何が解らないか解っていないから」 なんだけど、自分が学ぶ側の時はこの辺がとても気になる。 今は俺が解ってない人なのでこの言説に強気だ。（酷い） こういうのはこう教えてくれというのを勝手に書くと。 ①サン
Three.jsはじめの一歩2012.04.13 Three.jsを始めてみたい方のために、シンプルなスクリプトをご紹介します。カメラとライトが一つずつ。一枚の板ポリゴンに、アルファチャンネル付きのPNGファイルをマッピングしたものです。 サンプルファイルをダウンロードして、index.htmlをChromeなどのWebGLが見れるブラウザで開いてみてください。黒い背景の中央にアンモナイト一匹が表示され、マウスドラッグで視点を動かす事が出来ます。 ご覧の通り、必要最小限のシンプルなシーンなので、Three.jsで3Dがどのように扱われているかを把握しやすいのではないかと思います。ソースのコメント部分に簡単な解説を入れてありますので参考にしてみてください。私もまだまだThree.jsの全貌は把握しきれていませんが、とてもシンプルで使いやすく、WebGLの可能性を感じるには素晴らしいライブ
Hatena-Textbook はてな教科書は、はてなのエンジニアとして最低限必要とされる技術を身につけるための教科書です。 Web開発における重要なトピックを順番に学びながら、課題をといていくことで、Webアプリケーションをひととおり構築できるようになります。 実装言語としてPerlとScalaのどちらを選ぶことができます。 トピックごとに学びたい言語の方の教科書を読み進めてください。 目次 プログラミングの基礎 Perlによるプログラミングの基礎 Scalaによるプログラミングの基礎 データベースの基礎 Perlによるデータベースプログラミング Scalaによるデータベースプログラミング Web開発の基礎 PerlによるWebアプリケーション開発 ScalaによるWebアプリケーション開発 Webフロントエンド開発 はてな教科書JavaScript編 hatena/Hatena-Tex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
