リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
JavaScriptがページの読み込み時間を遅くする理由トップ10 | ゆっくりと…
CSS Sprites 化や画像サイズの最適化、Data URI 化、CSS/JavaScript ファイルの圧縮・結合・読み込み順番の整理やキャッシュ制御など、本サイトでは主に HTTP リクエストの数、データ量およびそれらの順番に関して色々なテクニックを試してきましたが、さらに深く掘り下げるには JavaScript の実行がページの読み込み時間に与える影響を知っておく必要があると思います。 「ウェッブサイトの表示速度を測定するフリーツール集」 でも紹介しましたが、dynaTrace AJAX Edition という優れたツールをフリーで公開している dynaTrace software のブログでこの問題を扱った記事がありましたので共有します。JavaScript 高速化 Tips は （例えば 「JavaScriptを高速化する6つのテクニック」 など） 多々あるかと思いますが、ペ
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
Navigation Timing (Editor's Draft)
The NavigationTiming draft is now located under the Mercurial repository. You will be redirected in a second...
IEでのテキストノード走査の高速化 - os0x.blog
に釣られて。 HatenaStar.js 1380 行目 テキストノード走査 一番のボトルネックはやはりここですね。IEなので、こんな感じでベタに計測。 makeTextNodes: function(c) { if (c.textNodes || c.textNodePositions || c.documentText) return; if (Ten.Highlight.highlighted) Ten.Highlight.highlighted.hide(); c.textNodes = []; c.textNodePositions = []; var isIE = navigator.userAgent.indexOf('MSIE') != -1; var texts = []; var pos = 0; var st = new Date*1; (function(node,
HTML5 Canvas
∧_∧ _（ ´・ω・）_ /＼`'⊃(;;ﾟ;;) ＼ ＿＿＿ ／ ※ ＼_＿＿＿_|＼＿＿ヽ ＼※ ※ | |_三三|_＜ はじまるよ！ ＼ / ※ ※ ※!､_ |||＿＿|､ `─────||ヽ───i§ ヽi |`〜〜 JavaScript でも 3D くらい できるさ！ amachang 先生の 次回作にご期待ください ∧∧ （ ･ω･） ＿| ⊃／(＿＿_ ／ └-(＿＿＿_／ ￣￣￣￣￣￣￣ - 完 - ごめんなさい ごめんなさい＞＜ DOM パフォーマンス チューニング JavaScript の 誤解 JavaScript は 遅い JavaScript は そこそこ速い 論より証拠。 ベンチマーク マージソート 100 numbers × 3000 times JavaScript ActionScript code: http://s
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
大量の同じ画像の表示 - 素人がプログラミングを勉強していたブログ
画像周りの速度メモ - #生存戦略 、それは - subtech 大量に同じ画像を表示したいとき - 0xFF もっと高速にする方法。 background-repeat and clientX <!DOCTYPE HTML> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>background-repeat and clientX</title> <style type="text/css"> #star{ width: 0; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); background-repeat: repeat-
大量に同じ画像を表示したいとき - os0x.blog
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Re: はてなブックマークのコンテンツの JavaScript を高速化する - つれずれなるままに…
Reply to はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記 「重い箇所２：HatenaStar.js 1738 行目」で取り上げられていた Hatena.Star.Button.reateButton ですが、Flyweight パターンのアイデアと Element.cloneNode() を利用したところ、手元の環境（WinXP,Fx3.0）で7.7倍速くなったのでお伝えしておきます。 修正コード /* Hatena.Star.Button */ Hatena.Star.Button = new Ten.Class({ createdButton: {}, createButton: function(args) { var src = args["src"]; if (!this.createdButton[src]) { var newimg
はてブ年鑑2009年1月分うｐ と jQuery.remove() の高速化話 - てっく煮ブログ
はてブ年鑑, JavaScript2009年1月分を集計してアップロードしておいた。http://tech.nitoyon.com/hatebu_nenkan/先月までは「SEO」「CMS」といった技術系のキーワードが必ず TOP10 にランクインしてたのに今月は見当たらない。いちおう「データベース」とか「配色」といったキーワードは出てきてはいるんだけど、専門用語ではないのが印象的だ。対して台頭したのが料理ネタ。衣食住に関係するネタが増えてきて技術色が薄くなっているような気がする。あくまで気がするだけなので、カテゴリ別の割合遷移といったものを算出したら興味深い結果になるかもしれない。やろうと思えばできるんだけど、ここ最近は自分の興味が実装よりも勉強のほうによってきたので手は止まっている。おまけ：jQuery の remove の話関係ないけど、ページの JavaScript 初期化をちょっ
CSSセレクタがトータルで100倍速くなったからそろそろ終わり - latest log
function _fakeMutationEvents(elm) { elm.style.behavior = "none"; (function(n) { var fn = n.removeChild; n.removeChild = function(oldChild) { // DOMNodeRemoved uuClass.Selector.clearCache(); return fn(oldChild); } })(elm); elm.attachEvent("onpropertychange", uuClass.Selector.clearCache); // DOMAttrModified uuClass.Selector.clearCache(); // DOMNodeInserted } window.onload = function() { document.cre
DOMNodeInserted と DOMNodeRemoved に似た仕組みを IE でも使えるようにして、セレクタの実行結果をキャッシュする - latest log
セレクタ(id, tag, class, css, xpath)の実行速度を改善するには、2つの方法があります。 ロジックを改善する キャッシュを使う 今日は2の方法について検討したことを書き残します。 心配事 キャッシュを使う上での心配事は「キャッシュが古くなったらどうするか、それをどうやって知るか?」です。 古くなったキャッシュはクリアしなければなりません。 DOM Level2 MutationEvents を使うと、ノードの挿入, 削除と、属性の更新 を取得できる DOM Level2 MutationEvents という仕様があります。これらを活用するとDOMツリーが更新されたタイミングを監視できます。 DOMNodeInserted は ノードの挿入, DOMNodeRemoved は ノードの削除, DOMAttrModified は 属性の変更に対応しています。 各ブラウザ
John Resig - querySelectorAll in Firefox 3.1
A brand-new implementation of the Selectors API has landed in the latest Firefox nightlies (and in Firefox 3.1a1) – on track to head your way in the upcoming Firefox 3.1 release. I’ve talked about this API before (1, 2) and while I do have some misgivings about the current API (which will be remedied in upcoming revisions of the spec) there is one thing that is undeniable about it: It is extraordi
John Resig - DOM DocumentFragments
I was playing around with DOM DocumentFragments recently, in JavaScript, seeing what I could make with them. Roughly speaking, a DocumentFragment is a lightweight container that can hold DOM nodes. It’s part of the DOM 1 specification and is supported in all modern browsers (it was added to Internet Explorer in version 6). In reading up on them I came across an interesting point, from the specific
NodeListやHTMLCollectionに直接アクセスするより、一旦静的な配列にしたほうが速い - 素人がプログラミングを勉強していたブログ
console.time('nodeList'); var elems = document.getElementsByTagName('*'); for(var i=0;i<1000;i++) for(var j=0;j<elems.length;j++) elems[j]; console.timeEnd('nodeList'); console.time('array'); var elems = Array.slice(document.getElementsByTagName('*')); for(var i=0;i<1000;i++) for(var j=0;j<elems.length;j++) elems[j]; console.timeEnd('array'); console.time('length'); var elems = document.getElement
document.createTreeWalkerとArray.prototype.filterとXPathの比較、テキストノードを取得する場合 - 素人がプログラミングを勉強していたブログ
経由でTreeWalkerを知って、速度はどうなんだろうなーと思って調べた。 TreeWalkerについてはMozilla Developer Networkを参考にした。 function getTextNodes (parentNode) { var walker = document.createTreeWalker( parentNode, NodeFilter.SHOW_TEXT, { acceptNode: function() NodeFilter.FILTER_ACCEPT }, false ), textNodes = []; while (walker.nextNode()) textNodes.push(walker.currentNode); return textNodes; } function getTextNodes2 (parentNode) { var
DOM API と innerHTML のパフォーマンス比較 - とっくりばー
404 Blog Not Found:javascript - element.innerHTML はなぜ速く見えるかにて InnerHTMLは速くない。速く見えるだけだ。とあった。Danさんの予測は、DOM APIが遅く見えるのは、DOM Treeを更新していくたびに再描画が走るからではないかというもの。 そうなのかなと思って実験を作ってみました。 複雑なHTMLを文字列として作ってからinnerHTMLに代入するのと、 再描画が一度も走らないよう、あらかじめ複雑なElementを作ってから最後にdocumentにくっつけるようにするの Elementを作ったそばからどんどんdocumentにくっつけていくの で比較しました。↓以下実験。 HTMLタグを生成してinnerHTML DOM APIでElementを生成（最後にbodyに接続） DOM APIでElementを生成（最初にb
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://twitter.com/Constellation/status/1056605992