JavaScriptでHTMLをダイナミックに書き換える 後編
まとめて更新を行う（DocumentFragment） これまで、HTMLの要素をDOMを使って自由に操る方法を学んできました。基本はすでに身についていますので、あとは応用で、いろいろなWebアプリケーションを作ることができるはずです。しかし、Webアプリケーションを作り込むうえで、パフォーマンスという問題から逃れることはできません。 サーバー上で動作するアプリケーションの場合は、サーバーの負荷を軽減するためにさまざまな工夫をしますが、JavaScriptといえども例外ではありません。近年のWebアプリケーションにおいては、ブラウザ側で実行されるJavaScriptの役割が重要になり、複雑な処理が求められるようになってきました。JavaScriptの書き方によって、表示速度が大きく変わってしまうことがあります。この処理時間とは、ブラウザのレンダリング時間のことです。この点を考慮に入れてJa
なめらか卵のとろけるプリン - latest log
今日はおもに、Effectのなめらかさを向上させる方法を模索していました。 Effectはタイマードリブンです。タイマーから定期的なタイミングで呼ばれ式を評価し結果を描画します。 タイマーを細かく設定すれば理論上のなめらかさは向上しますが、実際にはブラウザの描画が追いつかずガクガクするだけで逆効果となります。 uupaa.js ver0.5までは、ブラウザの違いを区別せず、10msで駆動させていました。 もしかしてブラウザ毎にインターバルタイマーの最小値(分解能)は違うのではないか? setIntervalの最小分解能を調べたところ、予想通りブラウザ毎に異なっていました。 Google Chrome 1ms Firefox3 10ms IE, Opera, Safari 16ms この値を元に、V8とGeckoなら10msで、その他のブラウザは16msで駆動するように修正したところ、見た目
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
メソッドチェーンの作り方 - あと味
メソッドチェーンはわかりやすくて便利です。jQueryなどではメソッドチェーンが効果的に使えるように設計されているので、jQueryでメソッドチェーン使用している人も多いと思います。 このメソッドチェーンですが、作り方を解説するページがあまりない気がするので、JavaScriptを例にメソッドチェーンの作り方を紹介してみようと思います。 メソッドチェーンの原理 メソッドチェーンとは、名前のとおり、メソッドを実行して、その結果に対してさらにメソッドを実行する感じで、メソッドを繋げながら何らかの処理をしていく仕組みです。 例 hoge().fuga().piyo(); メソッドで返す値がメソッドを持っていることがメソッドチェーンを実行できる条件になります。 JavaScriptには最初からメソッドチェーンが実行できるメソッドがある JavaScriptには最初からメソッドチェーンが実行できるメ
2分でわかる uupaa.js の サクサク :: handsOut.jp
スライド1: 2 分でわかる uupaa.js~ Speedy ~uupaa.js@gmail.com スライド2: 今日のテーマは「サクサク」 スライド3: サクサクにするには1. 名前解決コストを減らす2. ガベージレス3. Hash で評価4. Hash の事前生成5. イベントハンドラの軽量化 スライド4: 1. 名前解決コストを減らす• スコープ内に alias を作成し、そちらを参照する– STYLE B は JIT 非搭載ブラウザで特に効果的例: IE6で 6%, IE7,IE8で 9%, Firefox3で 12%, Opera10で 3% 高速化例: 関数の alias を用意すると IE6で 2.7倍 高速化// 元のコード (STYLE A)var _regexp = /regexp/;(function() {(function job() {for () {
JavaScript + Canvas で動くカオスアトラクタ生成器作ってみた - mooz deceives you
カオスアトラクタ by edvakf in hatena を見ていて Canvas でピクセル操作が出来るらしいことを知り、早速カオスアトラクタ生成器を作ってみた。 アクセスは C.H.A.O.T.I.C C.A.N.V.A.S から。 動作は Firefox 3.5 と Google Chrome で確認。処理速度は Chrome の方が 5 倍ほど速いので、一応 Chrome 推奨。 Safari や Opera では未確認。 で、操作説明。 Draw ボタンを押せばカオスアトラクタが描画される。 Settings 右のプルダウンメニューにいくつかプリセットの設定を用意しておいたので、はじめはそちらを試されるのが良いと思う。 Coefficients の値をちょびっとづつ変えていくと、生成される画像が綺麗に変化していってくれる。一期一会な感じが小憎い。画像は Firefox なら右クリ
JavaScriptの動かないコード (JavaScriptエラー集) - 主に言語とシステム開発に関して
「このJavaScriptコードが動かないのは，なぜですか？」というミニクイズ集。 すべて制限時間は１分。 別名，JavaScriptのエラー事典。またはアンチパターンのまとめ。 中級編 初級編 番外編 2015年５月現在，全５３記事。 中級編 JavaScriptの仕様関連 p要素への appendChild() で失敗する かけ算を間違える イベントハンドラが見る値のエラー クロージャを使わない場合に起きるエラー オブジェクトのprototypeを変更した時のエラー 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照 jsonオブジェクトをevalできないエラー 不要なイベントが連鎖で発生してしまう （バブリングの対処） オブジェクトのプロパティ定義にthisを使って失敗するエラー setTimeoutのタイマーが指定時刻に動かないエラー オブジェクトのメソッドを
+new Date を Date.now() に差し替えると200〜400% 高速化も - latest log
CSS を利用したアニメーションでは、必ず現在時刻を取得するコードが入ります。 var now = +new Date; ECMAScript-262 5th では Date.now() が新しく追加されました。 Date.now() は +new Date と同じ機能(現在時刻を数値で返す)を持ちながら、new の必要がないため速そうです。 ベンチ <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { Date.now || (Date.now = function() { // Date.now が実装されていないブラウザ用の実装 return +new Date; }); job1(); job2(); } function job1() { var
Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック TechTalkManiacs
などという煽り気味なタイトルをついつけてしまいたくなる記事がGoogleCodeBlogに掲載されていました。 最初のほうはごく普通にJavaScriptを使ったRIAアプリケーションはどうしても起動が遅くなるため、それをどう減らすか、というテーマにそって書かれています。 方法として挙げられているのは、最初にすべてを読み込まず、モジュール単位で分割して遅延ローディングすること。ただし、それだけだと回線速度が遅く不安定なモバイル環境では問題が生じるためHTML5のキャッシュ機能を利用するといいとのこと。 遅延ローディングのためのさまざまな手法の得失や、例えばユーザーデータを読み込むときには動的ロードしない、というようにユーザーの操作を妨害しないよう留意することなどについても述べられていてそれだけでもノウハウとして十分に有意義なのですが、決め手として最後に出てくる方法がすごいです。 その方法と
JavaScript初心者におくる24のグレイトなtips - 三等兵
私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。 うっとうしい場合は原文をどうぞ。 24 JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎 ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は「わし、数値も文字列も中身が一緒だ
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
ブラウザ×ボタン対応
JavaScript（もしくはVBScript）を使用して、×ボタン押下時にScriptイベントを発生させたいのですが。リロードや、移動、POST時にはイベントを発生させたくありません。OnUnloadや、OnBeforeUnloadでは、×ボタン押下時以外の上記のパターンでもスクリプトが実行されてしまいます。×ボタン（ウィンドウが閉じられる）処理だけをHookすることはできないでしょうか？尚、ブラウザは、IE限定で良いです。（6以降)
JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
ie以外でもクリップボードが使えるsetClipboard.js
ie以外でもクリップボードが使えるsetClipboard.js Check Tweet 配布元：[to-R]とあるWEBクリエイターのblog ライセンス：MIT-License setClipboard.jsはie以外で、flashプレーヤ―のsetClipboard関数を利用してクリップボードを使用する為のjsライブラリになります。 設置方法 ダウンロードしたファイルを解凍してできる『setClipboard.js』と『setClipboard.swf』は同じディレクトリにアップしてください。 header要素などでsetClipboard.jsを読み込みます。 <script type="text/javascript" src="./setClipboard.js"></script> 以下の関数を実行することでクリップボードに指定したIDの中身をコピーします。 第２引数でコピー
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
ハタさんのブログ : Javascriptによる大規模開発の覚え書き
未だに半年前のエントリにブクマされるみたいなので、もう少しjavascriptについて書いてみる。 今回は大規模化開発におけるJavascriptの注意点とかそういうの。当てはまらない環境の方もいます。(しかも基本的な事だらけで大したことは書いてないです) ほぼリッチクライアントを主目的としたjavascripterとコードを対象とします。 どちらかというと、ライブラリを提供する側の視点から 1.ログを出力せよ あなたが書いたコードは遅い、と必ず言われます。なので言われる前から、自分の書いたコードの処理時間をログするようにしましょう。 次のような処理時間を計測するロガーを作ります。 var TraceLog = function (){ this.startTime = -1; var outer = document.getElementById('_outer'); if(oute
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
