自作フレームワークをつくって学ぶ 仮想DOM実践入門
昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。 ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！ そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。 フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次 そもそもDOMとは？ D
吉川徹さんによる「DOM操作の最適化によるJavaScriptチューニング」問題解説記事です。JavaScriptのDOM操作について基本的なパフォーマンスチューニングができるかどうかを評価する問題でした。 チューニングを行うことで、具体的にどういった形のコードになるかを中心に解説していただきましたので、ぜひ参考にしてくださいね！ by 馬場美由紀 （CodeIQ中の人） 吉川徹です。 少し前になりますが、私の方から以前、JavaScriptのパフォーマンスチューニングについての問題を出題しました。今回は、その問題の解説をしていきたいと思います。 また、この問題は、HTML5 Experts.jpとの連動企画となっており、こちらの記事を読んで頂くとおおよそのチューニング方法について理解できるというものになっています。ぜひ、合わせてご覧頂ければと思います。 問題文 あるHTMLファイルに記述
Nokia Developerより Document Object Model (DOM) の難解さ ソース: Efficient JavaScript - DOM DOMパフォーマンスの遅さは以下の3つの主な原因に遡ることができる: 大規模なDOM操作 DOM APIの大量の使用は遅さのよく知られた原因である。 スクリプトが多すぎるリフローや再描画を引き起こす DOM操作の結果として、レイアウトのリフローと再描画はとても高価である。 DOMの中にノードを置く遅いやり方 DOMに望みのノードを置くことはDOMがサイズ変更可能だったり複雑だったりすると、潜在的なボトルネックとなる。 Slow DOM performance can be traced back into the following three main causes: Extensive DOM manipulation E
ガベージコレクションの機能を備えるJavaScriptのような言語で開発されたアプリケーションでは、基本的にメモリリークは生じないはずですが、それでも回収されないメモリ領域がどんどん増えていくというメモリリーク的な状況は起こりえます。 leak-finder-for-javascript - Tool for finding memory leaks in JavaScript programs. - Google Project Hosting メモリリークは最終的にはそのソフトウェアの動作を遅くしたり不安定にしますが、短期的には問題なく動作しているように見え、単純なテストでは症状が表れにくいため、発見は難しいものです。 グーグルはこうしたJavaScriptのメモリリークを検出してくれるツール「Leak Finder」を公開したことを、ブログ「Leak Finder: a new to
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
HTMLDocument と XMLDocument を見分ける方法を模索していました。 2008-10-12追記: 内容を大幅に更新しました 何がしたいのか uupaa-selector.js version 1.2では、HTMLDocuemnt と XMLDocument で、CSSセレクタの挙動が変化します。 HTMLDocuemnt なら 小文字の a タグ と 大文字の A タグ は一緒。 uu.css("a"); で ＜a＞, ＜A＞ がヒットする XMLDocument なら タグの大小は区別する。 uu.css("a"); なら ＜a＞ のみヒットする これを実装するためには、XMLDocument と HTMLDocuemnt を見分けたうえで動作する必要があります。 どこを調べれば、XMLDocument を区別できるのか調べてみた text/html, elm = d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
