JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
textarea のキャレット位置に文字列を挿入
JavaScript を使って textarea のキャレット（カーソル）位置に文字列を挿入するサンプルです。 挿入する文字列を入力するために jQuery UI の dialog を利用していますが、それ以外は JavaScript のみを使用しています。 Firefox などの場合は、選択された部分の先頭、末尾の index （整数型）を、それぞれ selectionStart、selectionEnd で取得できますが、IE の場合はそれに該当するプロパティがないのが問題です。 IE の場合は、document.selection プロパティで selection オブジェクト（textarea 要素そのものではなく、textarea 要素の中の選択された文字の部分）を取得し、さらに createRange メソッドを使って TextRange オブジェクトを作成し、それを操作するこ
モダンブラウザとモーダルダイアログの動作（2013年3月版） - 小さい頃はエラ呼吸
はじめに JavaScriptでモーダルウインドウを表示するためのメソッドwindow.showModalDialogが、最新のブラウザたちでどのように動作するかを検証してみました。 ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)posted with amazlet at 13.03.09外村 和仁 技術評論社 売り上げランキング: 71,370 Amazon.co.jpで詳細を見る 用意したブラウザ OSはWindows 7 Enterprise（SafariのみMac OS X Lion） Firefox 19.0.2 Opera12.14 Google Chrome 25.0 Safari 6.0.2(Mac) IE9 IE10 検証結果 ブラウザ動作コメント Firefox 19.0.2○ Opera12.14×ダイアログが開きませ
はらぺこ日誌» ブログアーカイブ » SVG の 要素を JavaScript で生成して DOM ツリーに追加しても何も表示されない←んなこたぁない
(投稿直後に追記: この問題は既に解決しております…) ご無沙汰しております…。決算期が近づいて参りましたね。今期はほとんど売上立ってませんが… orz それはさておき、新しい仕事で使うことになりそうな技術の調査がてらプロトタイプ作りを進めようとしているのですが、HTML5 のインライン SVG を DOM から操作する際、 ID から要素を参照してその写像を表示する <use> 要素の扱いについて疑問点があったので、ちょっとメモしておくことに。 <use> エレメントについてはW3C の仕様勧告にサンプルがあるのですが (インライン SVG として簡略化して書くと以下のような感じ)、 <svg width="10cm" height="3cm" viewBox="0 0 100 30"> <defs> <rect id="MyRect" width="60" height="10"/>
DOMで作ったラジオボタンが選択できない | OKWave
Sleipnirの「選択部分のソースを表示」で確認したところ、name属性がセットされていないようです JavaScript DOM で作成したラジオボタンが選択できません。 Sleipnirの「選択部分のソースを表示」で確認したところ、 name属性だけがセットされていないようで、選択できない原因はそれだと思いますが、 セットできない理由が分かりません。 どなたか解決策を教えて頂けないでしょうか。 なお、下記の何れの方法でもダメなようです。 obj.name = "hogehoge" obj.setAttribute("name", "hogehoge"); 念のため、現象確認用のソースも貼っておきます。 <html> <head> <script type="text/javascript"> function create1() { var rObj = document.creat
教科書に載らないWebアプリケーションセキュリティ 第1回 ［これはひどい］IEの引用符の解釈 − ＠IT
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます（編集部） 小さな話題が面白い 皆さん、はじめまして。はせがわようすけと申します。 「教科書に載らないWebアプリケーションセキュリティ」ということで、Webアプリケーションのセキュリティに関連する、普段あまり見掛けないような小さな話題を取り上げていきたいと思います。 セキュアなWebアプリケーションを実現するために、開発者の方だけでなく、Webアプリケーションの脆弱性検査を行う方々にも読んでいただきたいと思っています。重箱の隅を楊枝でほじくるような小さな話題ばかりですが、皆さんよろしくお願いします。 さて第1回は、Internet ExplorerがHTMLを解釈する際の引用
Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit
へっへっへ: 国民宿舎はらぺこ 大浴場
javascript - CSSをいじくる (404 Blog Not Found さま) 実は似たようなギミックを使って、UI の実験をしていたりしますｗ 京葉チャット サンプルページ 現時点のソースファイル 今のところ、以下のブラウザにて動作確認済みです。(すべて Windows XP sp2 環境下) Internet Explorer 6 (スクロール時のウィンドウの動きが微妙だったり、右上のトグルボタンの形が微妙だったりします ^_^;) Internet Explorer 7 Firefox 2 Opera 9 (ウィンドウをドラッグ移動しまくっているとあっさりクラッシュしてしまう模様。原因は不明。。。) なお、サンプルページに書かれている内容はドラフトというか適当というかかなりデタラメなので現時点では信用しないでください。ｗ ページの左下に半透明のウィンドウらしきものが表示さ
「はてブのしっぽ」実験中: 国民宿舎はらぺこ 大浴場
スクリプト サンプル 概要 もう既にお気づきかと思われますが (初見の人はワカランだろうけどｗ)、ハイパーリンクのリンク先 URI がはてなブックマークにてブックマークされている場合に (っていうか動作的にはされてなくてもなんだけど)、ブックマークページへリンクする、ブックマークでの参照数を表す画像を、ハイパーリンクのお尻にしっぽのようにくっつけてしまうスクリプトを書いてみました。 流石ブログだけあってカレンダーメニューだのなんだのやたらとハイパーリンクが多いために微妙に動作が重たくなっておりますが、この辺は改良の過程で動作対象のフィルタリング機能とか追加していく方向で解決することとして、とりあえず「実験中」ということで公開だけしてしまうことにします (^_^; 。 使い方 スクリプトを任意のサーバーに up した上で、以下のような HTML 文をどこかしらに書いておけば ok です。 <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript] documentオブジェクトの魔法-ウンコード・マニア
DOM & checkbox(checked status)