JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
JavaScriptプログラミング講座【エレメントについて（HTMLElement）】
<span>あいうえお</span> <div>かきくけこ</div> <img src="http://example.com/test.jpg">
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
Element: matches() method - Web APIs | MDN
Document Object ModelElementInstance propertiesariaAtomicariaAutoCompleteariaBrailleLabelariaBrailleRoleDescriptionariaBusyariaCheckedariaColCountariaColIndexariaColIndexText Experimental ariaColSpanariaCurrentariaDescriptionariaDisabledariaExpandedariaHasPopupariaHiddenariaKeyShortcutsariaLabelariaLevelariaLiveariaModalariaMultiLineariaMultiSelectableariaOrientationariaPlaceholderariaPosInSetaria
iOS6 にしたら、addEventListener の第２引数にしていしてた、handleEvent メソッド をもつオブジェクトが使えなくなった? - babu_babu_babooのゴミ箱
addEventListener の第２引数には、 オブジェクト型の handleEvent メソッドは使えるけど、 関数型の handleEvent メソッドは、使えない。 iOS6 touchendイベントが拾えない。しかも他でも報告があるのでバグっぽい。 HTML要素に対してクリックイベントでイベントを呼び出すことがこれまでもできなかった。 touchend イベントが起こらず、今のところ touchstart が発生したら強制的にマウスのクリックイベントを発火させている 追記 最小コードだと、touchend を拾えている。なぜ？ だけれども、指を離さなくても拾えてるときがある。なぜ？ 使い物にならない？ 更に追記 touchend イベントを起こすために、まず二本指で触れ、それを時間差で放す。 今はそれぐらいしか対処できない。 <!DOCTYPE html><title></ti
Screensharing a browser tab in HTML5? | Articles | web.dev
Screensharing a browser tab in HTML5? Stay organized with collections Save and categorize content based on your preferences. In the past couple of years, I've helped a few different companies achieve screensharing-like functionality using only browser technologies. From my experience, implementing VNC solely in web platform technologies (i.e. no plugins) is a hard problem. There are a lot of thing
画像とキャンバスをオリジン間で利用できるようにする - HTML: ハイパーテキストマークアップ言語 | MDN
HTML では画像に crossorigin 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 <img> 要素で定義されている他のオリジンから読み込まれた画像を、 <canvas> の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。 crossorigin 属性の使い方については CORS 設定属性をご覧ください。 キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。 CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは汚染 (taint) されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。
DOM MutationObserver – reacting to DOM changes without killing browser performance. – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. smaug The right link to the spec is http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers Also, the API will be un-prefix very soon. We want to
Shibuya.xss で話してきました - nothing but trouble
すごい面白かった。会いたかった人にも沢山会えたし。 適当な感じのスライドですが、そこそこ反応があって嬉しかった。 [Shibuya.xss] セキュリティ小ネタ二本 View more PowerPoint from send_
DOM4 日本語訳
2012 年 1 月 5 日付 W3C 草案 このバージョン: http://www.w3.org/TR/2012/WD-dom-20120105/ 最新バージョン: http://www.w3.org/TR/dom/ 最新編集草案: http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html 前のバージョン: http://www.w3.org/TR/2011/WD-dom-20110915/ http://www.w3.org/TR/2011/WD-domcore-20110531/ http://www.w3.org/TR/2010/WD-domcore-20101007/ 編集: Anne van Kesteren (Opera Software ASA) <annevk@opera.com> Aryeh Gregor (Goo
createTextNodeで半角スペースを入れたい… - tumblr
twitterでid:teramakoさんと@ssmylhさんに教えていただいたので覚書。 2012/2/18 0:45 ブコメで突っ込まれまくっているので全体的に修正。 ヤリたいこと createTextNodeで半角スペース(nbsp)半角スペースを生成して、span要素に挿入したい。 2012/2/18 0:52 修正 混同して書いていましたが、nbspではなく半角スペースです。nbspと半角スペースは別物です。 NBSPと通常のスペースの違いは、NBSPを含む文字列が行末に来て、かつ長すぎて行に収まらない場合、文字列全体（NBSPでつながっている文字列も含めて）が次の行へ移動することにある。これは通常の文字列の折り返しと類似している。たとえば、文字列“ambidextrously”は決して分割されることはなく、“am bi dextrous ly”（すなわち“am bi dextr
HTML5&API総まくり
6. • 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 （WHATWG HTMLのみ）などが争 点。 HTML5マークアップ 7. • リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms 8. • HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HT
azu_re codes - jsdo.it - Share JavaScript, HTML5 and CSS
azu_re @ jsdo.it - share JavaScript, HTML5 and CSS - jsdo.itはブラウザでJavaScript,HTML5,CSSを書いて共有するサイト。他のコードをコピーして編集できます。JavaScript,HTML5,CSSに関する質問&回答もありますよ
DOM APIとinnerHTMLは等価ではない
最近、徳丸本をじわじわ読んでいるのですが、DOM based XSSの話が書いてあったので、少し言及しておこうと思います。 徳丸本から引用 DOM based XSSと呼ばれるXSSがあります。これは、JavaScriptによりクライアント側で表示処理する箇所があり、そこに脆弱性がある場合のXSSです。 サンプル書いてみました。 <script> document.write(unescape(location.href)); </script> こいつを適当なファイル名で保存して、domxss.html#<script>alert("hello")<script>などのURLでアクセスするとalertが表示されるはずです。任意のスクリプトが実行可能な状態ってことですね。任意のスクリプトが実行可能ってことは、セッションクッキー盗み放題で、他人に成り済まして買い物できちゃったりするレベルです
文字列からHTMLDocumentを作成するコード
必要に迫られて引数で渡された文字列から HTMLDocument を動的に作成するコードを書いたので紹介します。このコードはchromeコンテキスト上で、つまり拡張上で動作させることを前提としていますのでご注意ください。 下記コードを書く際にmodestで紹介されているnanot_viさんのサイトを参考にしました。またrange.createContextualFragment()実行時のセキュリティ上の課題を克服するためにkazさんのblogを参照させていただきました。 let getDOMHtmlDocument=function(str){ let doc; let range; if(document.implementation.createHTMLDocument){ // Firefox 4.0から doc=document.implementation.createHTML
Shibuya.js - Test.js LT テスターを支援する仕組みの話 - monjudoh’s diary
お前、誰よ 文殊堂といいます BePROUD社員 お仕事 最近は、JavaScript時々Objective-C 今日のお話 自動テストの話はしません テスターによるテストの話をします タイミングによって発生したりしなかったりする類のバグってありますよね テスターさんがモンキーテストをやってくれてる時に見つけてくれたりします でも報告されるのは… 「何をやっているときに」 「何が起こったか」 つまり、「操作」と「現象」だけです 原因箇所を特定するにはプログラマもその操作をなんども繰り返さないといけません ダルい 何とかしたい 問題の実例 IE(主に6,7)で「操作は中断されました」が出る What Happened to Operation Aborted? – IEBlog HTML解析中にまだ閉じタグまで解析されていない要素(bodyとか)に対して、子要素の追加や削除を行うと「操作は中
innerHTML = "" まとめ - latest log
HTML5をサポートしていないIE6〜IE8で、node.innerHTML = " ..."; のように HTML5 で追加された新要素含んだ文字列を innerHTML に与えると、次のいずれかの条件が成立した場合に親子関係の崩れたサブツリーを生成してしまいます。 innerHTML の前に document.createElement() が実行されていない node が DOM Tree に参加していない(オンザフライ) これらを回避するには、IE6〜IE8で以下のようします。 document.createElement("section"); // HTML5 Shiv function build(fragment) { // @param HTMLDocumentFragmentString: "<nav>...</nav>" // @return DocumentFrag
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kevindente/expect-dom: DOM-related assertions for expect.js
GitHub - Pomax/lib-font: This library adds a new Font() object to the JavaScript toolbox, similar to new Image() for images
IE で removeChild した要素はどこへいくか？ - IT戦記
