insertAdjacentHTMLとinnerHTMLの速度の違い2 - jsdo.it - Share JavaScript, HTML5 and CSS
先に表示される赤いのがinnerHTML。 次の下の方に短い緑のがinsertAdjacentHTML。 右に行くほど、よりたくさんつまった要素に挿入しています。 棒にマウスを載せると時間が表示されます。 insertAdjacentHTMLの処理時間が一定なのに対して、 innerHTMLは値のサイズに比例して処理時間がかかる。 function measureAndDrawGraph(settings){ // 文字列を要素に挿入する関数 var insertTextTo = (function(){ if(settings.method === "innerHTML"){ return function(elm){ elm.innerHTML += settings.addingText; }; }else if(settings.method === "insertAdjacent
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
How Browsers Work - Behind the Scenes of Modern Web Browsers — Translation of "How Browsers Work" 0.1 documentation
この翻訳について¶ この文章は HTML5 Rocks で公開されている How Browsers Work: Behind the Scenes of Modern Web Browsers を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく, 文章は Creative Commons Attribution 3.0 License , サンプルコードは Apache 2.0 License です. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. GitHub に この和訳のリポジトリ があります. 以下の Preface でも言及されていますが, この文章は Tali Garsiel さんが自身のサイトで公開していたものを Pa
Fixing the JavaScript typeof operator
What’s wrong with typeof? The most glaring issue is that typeof null returns “object”. It’s simply a mistake. There’s talk of fixing it in the next version of the ECMAScript specification, although this would undoubtedly introduce backwards compatibility issues. var a; typeof a; //"undefined" typeof b; //"undefined" alert(a); //undefined alert(b); //ReferenceError Other than that, typeof is just n
NodeLists and Arrays in JavaScript — Can Duruk
19 Jun 2011 JavaScript is an admittedly quirky language, and its almost array-like objects is one of the most glaring issues. And of all those array-like objects, NodeLists are one of the most commonly used ones array-like objects that beginners trip on when they use methods like document.getElementsByTagName(). In this post, I’ll try to explain what NodeLists are, how they relate to arrays in Jav
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScript：unescapeHTMLの妥当な実装
JavaScriptにはHTMLを実体参照化する関数、PHPで言うところのhtmlspecialchars()にあたる関数が存在しません。 正式な理由はよく知りませんが、教科書的な回答としては、「DOMを使えばエスケープなんて気にしなくていいよ」が挙げられるでしょう。うだうだ言わず黙ってDOMを使うべし。 …まあでも、必要なケースもあるでしょう。特にinnerHTMLの高速性は魅力的です。T.jsを作ったときにベンチマークを取ったのですが、エスケープ関数をはさんでもinnerHTMLの方が高速に動作することが確かにありました。 そんなわけで、世の中にはHTMLをエスケープする自前実装の関数があふれています。さんざん語り尽くされている気もしますが、prototype.jsの実装を見ていて少し気になったので取り上げてみます。 escapeHTMLの場合 escapeHTML 文字列中の特定の文
Simplified initializing of synthetic events — Anne’s Blog
23 June 2011 The DOM event model allows authors to listen and act on user-agent generated events. It also provides a way for authors to dispatch their own events. Typically this is known as dispatching synthetic events. Here is an example: var ev = document.createEvent("UIEvent") ev.initUIEvent("test", false, false, null, 1) // obsolete document.dispatchEvent(ev) With the current design each event
querySelector(All)のレシーバは、セレクタのコンテキストには影響を与えない - rikubaのブログ
<ul id="list"> <li>階層1</li> <li>階層1 <ul> <li>階層2</li> <li>階層2</li> </ul> </li> </ul> <script> var list = document.getElementById('list'); var lis = list.querySelectorAll('ul li'); </script> 変数lisには階層2のli要素だけが含まれると思っていたが、実際には階層1のli要素も含まれてしまう。 querySelector、querySelectorAllは、レシーバの要素を基準にしてセレクタにマッチする要素を探し出すのではなく、まず文書からセレクタに一致する要素を探し出し、その中からレシーバの要素の子孫にあたる要素だけを選び出すようだ。 期待していた結果をjQueryで例えると... $('#list')
Selectors API Level 2 (W3C Working Draft 28 June 2012)
Selectors API Level 2 W3C Working Group Note 17 October 2013 This Version: http://www.w3.org/TR/2013/NOTE-selectors-api2-20131017/ Latest Editor's Draft: http://dev.w3.org/2006/webapi/selectors-api2/ Latest Version: http://www.w3.org/TR/selectors-api2/ Previous Version: http://www.w3.org/TR/2012/WD-selectors-api2-20120628/ Editor: Lachlan Hunt; Invited Expert; lachlan.hunt@lachy.id.au> Copyright ©
matchesCssRule.js
概略 対象の要素がスタイルシートで定義されているセレクタ (document.styleSheets[i].cssRules[j].selectorText) にマッチするなら、true を返します。 property も指定しているなら、該当プロパティを持つセレクタに合致する場合に true を返します。 (X)HTML の style属性によるスタイル適用は判定条件に入っていないので、「スタイルシートを適用しているか」をチェックするなら element.style[property] も検査する必要があります。 ダウンロード matchesCssRule.js gist: 630663 (matchesCssRule.js) - GitHub サンプル 下記の要素をクリックすると、true または false を alert します。(* コードはブラウザの [ソースを表示] で確認し
五章第三回 CSSの操作 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第三回 CSSの操作このページの最終更新日：2017年8月24日 前回は、CSSがどのような構造をしているのか説明しました。今回は、その構造をいじることについて解説します。 CSSRuleの追加と削除まず、CSSRuleを子に持つCSSStyleSheetやCSSMediaRuleに、CSSRuleそのものを追加したり、あるいは削除したりする方法を解説します。 CSSStyleSheet（やCSSMediaRule）は、insertRuleとdeleteRuleという2つのメソッドを持っています。その名の通り、insertRuleは新しいCSSRuleを追加、deleteRuleは今あるCSSRuleを除去するメソッドです。 insertRuleまずinsertRuleの使い方から見ていきます。insertRuleは2つの引数を持ち、ひとつめの引数は追加するルール、ふたつめの引数は追加
Using the Page Visibility API - Google Chrome - Google Code
Using the Page Visibility API The page visibility API is an experimental implementation of the webperf WGâs proposed page visibility API in new versions of Chrome (starting in version 13). It allows sites to detect whether they are being displayed to the user. Why youâd use it With tabbed browsing, thereâs a reasonable chance that any given web page is in the background and thus not visible
DOM の textContent と innerText について - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20110517.html
Changeset 85903 – WebKit
Timestamp: May 5, 2011, 5:12:45 PM (14 years ago) Author: aestes@apple.com Message: 2011-05-05 Andy Estes <aestes@apple.com> Reviewed by Eric Seidel. Implement document.innerHTML https://bugs.webkit.org/show_bug.cgi?id=60316 ASSERT that contextElement is non-0 when constructing a HTMLTreeBuilder for fragment parsing. This assertion will become invalid when document.innerHTML is implemented, whic
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://raynos.org/blog/8/DOM-Extension-is-not-always-evil
GitHub - kriszyp/put-selector: A high-performance, lightweight function for creating and manipulating DOM elements with succinct, elegant, familiar CSS selector-based syntax
GitHub - insin/DOMBuilder: DOM builder with multiple output formats
The Modern JavaScript Tutorial
