JavaScriptで起こるメモリリークのパターン
2017.02.17JavaScriptで起こるメモリリークのパターン2014年1月25日に Frontrend in Fukuoka というイベントが開催された（もう3年前か…）。その時に Browser Computing Structure というタイトルで、ブラウザの仕組みやらスクリプト処理について発表している。 たまたま当時の資料を掘り起こす機会があったので、メモリリークのサンプルを直したついでにリークする JavaScript のパターンについて書き起こしてみる。サンプルは 1000ch/memory-leak に公開してあり、手順通り操作するとメモリリークを再現できるようになっている。 GCで回収されないオブジェクトJavaScript はランタイム上で動的にメモリを確保する GC（ガベージコレクション）を採用しているので、JavaScript の書き手がメモリの確保・開放を
AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
Service Workerに関する仕様とか機能とか
2014.12.29Service Workerに関する仕様とか機能とか今巷で流行りのService Workerについて調べ物してたので、まとめたメモ。 Service Workerが解決してくれることService WorkerはHTML・CSS・JS・画像等などのリソースを、JavaScriptのAPIから命令的にコントロールすることを実現する。Webページのパフォーマンスに関する指標としてネットワークを介して得るリソースをキャッシュさせたりすることが効果的であることは今更改めて挙げないが、Service Workerによって保持されたリソースは、オフライン状態でも返却することが可能という凄さを持っている。つまり、更新性の低いコンテンツであればオフラインでも閲覧させることが可能ということ。 更新性のあるコンテンツでも、回線が不安定な時はローカルに変更を保持して、サーバーに対してデータ
画像の最適化をCLIだけで行うgrunt-imageを作った | 1000ch.net
GUI要らずを目指して Webにおける画像については以前記事にしましたが、 そのフローをより良くするべく最近gruntのモジュールを作ったのでその話を。 前置き 私は弊社サービスのパフォーマンス改善を業務としてしています。 何がボトルネックになっているかは各プロジェクトでまちまちですが、 共通しているのが 「とにかく画像が多い」 というところ。 どのサービスもペイロードサイズの80%程を画像が占めているんですね。 画像の最適化を忘れるだけで（例えば）100KBとか平気で増えるので、 これではCSSやJavaScriptのファイルサイズを減らしても本末転倒です。 （もちろんCSSもJavaScriptも結合と圧縮は非常に重要です。） 各種最適化ツール GUIだと以下の3つが有名で優秀です。 ImageAlpha - フリーソフト。24bitのPNGの8bitコンバートを行う。256色~2色ま
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
DOMイベントのバブリングについて | 1000ch.net
2013/05/07 DOMイベントのバブリングについて ご無沙汰しています。 最近はプロジェクトの異動やらなんやらで非常にドタバタしてまして、 中々調べものとかに没頭出来ていません。 そんな異動先のプロジェクトでイベントのバブリングについて再考したので覚書。 イベントのバブリング? イベントは発火元のノードから、親のノードにどんどん伝播していきます。 親のノードで発火元のイベントを拾う事が出来るのです。 例 5: イベント伝播 (propagation) バインドのターゲットと発火順 以下のような記述を見つけました。 window.addEventListener("DOMContentLoaded", function() { console.log("document is ready."); }); window.addEventListener("load", fu
Webにおける画像の最適化について考える | 1000ch.net
画像をもっとデリケートに扱う デリケートと言っても常に最高画質でやるべきなんてことを言うわけではなくて、 『こういう場合にはこういう画像』ということをしていくことが必要になると思います。 その引き出しをなるべく多く用意しておきましょう。 ファイルサイズとリクエストの天秤 Webのパフォーマンスにおいて、コスパが高いのはネットワーク部分です。 リクエスト数の削減 CSSとJSの結合 画像のCSSスプライト化 Keep-Aliveのon ローカルキャッシュ効かせる レスポンスサイズの削減 CSSとJSの圧縮 画像の圧縮・最適化 サーバーから返すリソースのgzip化 これらは比較的簡単に行うことが出来る上に、効果も大きいです。 しかしCSSとJSの結合と圧縮を行っても、画像が1ファイル300KBあったり、 更にそれが何ファイルもあったりしたらCSSやJSの最適化も 効果が小さいもの
Google I/O 2012発 JavaScript高速化テクニックの日本語訳と考察 | 1000ch.net
2013/01/04 JavaScriptを高速化する13の方法 13 JavaScript Performance Tips Google I/O 2012発 JavaScript高速化Tips集の日本語訳 Google I/O 2012で発表されたJavaScriptの高速化のテクニックについて考察してみます。 基本的なテクニックの他、JavaScriptエンジンの挙動に対する最適化もあります。 主観と憶測が含まれます。ご指摘等お願い致します。 「v8におけるのJavaScriptの最適化」 における話です。 Be Prepared - Hidden Classes 1.オブジェクトメンバはコンストラクタですべて初期化する 2.オブジェクトメンバを常に同じ順序で初期化する クラスはhidden classという形でキャッシュされます。 よって、初期化するメンバがまちまちだった
Zepto.js v1.0がリリースされました | 1000ch.net
2013/03/05 Zepto.js v1.0がリリースされました v1.0rcが11ヶ月間も続いていたのですが、 ようやくRelease Candidateではなくなり正式リリースとなったようです。 今回はZeptoについて振り返ってみました。 http://zeptojs.com/ https://github.com/madrobby/zepto おさらい 今更かとは思いますが、初めての方におさらいしますと、 Zepto.jsとはjQueryとAPIほぼ互換性があるモダンブラウザ向け軽量ライブラリです。 jQueryはIE対応とか$.AnimationとかDeferredとかあるけど その辺りを除いて実装してあるようなイメージ。現状、iOSやSafariにはIE対応とか必要ない訳で、 これ使うとファイルサイズ落とせますねっていうライブラリです。 ビルドについて ra
Gruntの概要と導入手順とメリット | 1000ch.net
2012/12/08 Gruntとは grunt: a task-based command line build tool for JavaScript projects もはや説明不要の可能性もありますが、 gruntがgrunt-cliへの移行(?)をしたこともあり、まとめてみました。 コマンドラインで使用するビルドタスクのツールです。 js(ほぼjson)の設定ファイル上に、concatやminifyといったようなタスクを定義し、 コマンドラインから実行します。言葉だけだとイメージ湧きにくいと思いますので、 使ってもらうのが一番と言い張って導入手順の説明に入ります。 npmからgrunt-cliをインストールする （nodeとnpmはインストール済み・・・よね？） npm install -g grunt-cli これで核となるCLIのインストールは完了です。 ターミ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Enderの使い方のまとめ 〜必要なライブラリを必要な分だけ〜 | 1000ch.net