JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
prototype.js で element にメソッドを追加する方法
prototype.js で element にメソッドを追加する方法 2007-07-06-1: [JavaScript] prototype.js 1.5 から $ メソッドが改良されて $('foo').show(); のように書けるようになりました． prototype.js のソースを読んでいくと Element.Methods に好きなメソッドを追加できそうなのでやってみました． Element.Methods.warning = function(element) { $(element).style.color = '#f00'; return element; }; Element.addMethods(); // addMethods しないと追加されない！ 上記は，指定された element を赤色にして警告するものです (いい例が思いつかない……)． 以下のようにし
Enjoy*Study - undefined
変数、プロパティが定義されていない(undefined)かの判定処理を、その時々で適当いろいろな書き方をしてしまっているので、自分の中で整理してみます。 良く使う/見かけるのは、下記の3つです。 (!x) (x == undefined) (typeof x == 'undefined') 上記はそれぞれ成立する条件が異なりますので、下記にそれぞれ記載します。 (!x) コード一番短くて済むので多用するのですが、、 !xが成立するのは、xがundefinedの場合だけじゃなくて、多岐にわたるので使用時に注意が必要だと思います。 !xがtrueになるようなものには下記があります。 (思いつくままに挙げてみたので、これもそうだよ！！とかあったらコメントいただけると助かります) undefined null false 0 NaN '' (空文字) プロパティが存在するかどうかで、数値(Numb
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
Ten Javascript Tools Everyone Should Have
Filed: Sun, Mar 04 2007 under Programming|| Tags: toolbox javascript popular list Javascript frameworks have exploded on the scene over the last few years but they're no replacement for a good toolbox: those little snippets of code you seem to include in every single project. Here's my list of 10 essential Javascript tools everyone should have at their fingertips! #0 - Trim. Trim is one of th
最速インターフェース研究会 :: JavaScriptの関数の結果を期限付きでキャッシュする
処理に時間がかかるけれども、一定時間は結果が変わらないような関数の結果をキャッシュしたい。 例えばgetElementsByTagName("*")なんかを頻繁に呼び出すようなコードがあったとして、結果をキャッシュしたいけれど画面描画が発生すると使えなくなってしまう。setTimeoutで0ミリ秒後にキャッシュを消す処理を入れておいて、画面描画と関係のある処理はタイマーで実行するような制約を付けてコードを書けばDOMが絡む処理の結果もキャッシュすることができる。というようなケースに使えるような気がする。 Function.prototype.timed_memoise = function(ms){ var self = this; ms = ms || 0; var memo = {}; var clear_q = false; function clear_cache(){memo={
jmblog.jp - Lightbox JS v2.0 shortcut keys add-on
[追記 2007-04-12] Lightbox 2 が v2.03 にバージョンアップして、キーボードショートカットの機能が改善されました。右カーソル、左カーソルでの移動が可能になり、Escキーで閉じることができるようになっています。ということで、このスクリプトは無用の長物と相成りました・・・ Lightbox JS v2.0 という画像をかっこよく表示させる有名なスクリプトがあります。複数の画像を「Image Set」として用意するとスライドショーが作成され、キーボードで前後に移動することができるのですが、nキーとpキーでしか移動できないので、あまり感覚的ではありません。そこで、カーソルキーでも移動できるようにしてユーザビリティを向上させるスクリプトを作成してみました。 Lightbox JS v2.0 shortcut keys add-on »sample 使い方はカンタン。Lig
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法:phpspot開発日誌
JavaScript: クロスブラウザでブロック要素内のクリック座標を得る方法 ちょっとやることがあって調べてみたら案外情報が見つからず、実現するのに時間がかかったのでメモしておきます。 <script type="text/javascript"> <!-- function clickhandler(event) { if (!event) { event = window.event; } var hx, hy; if (document.all) { // for IE hx = event.offsetX; hy = event.offsetY; } else { hx = event.layerX; hy = event.layerY; } alert("x:"+hx+",y:"+hy); // return [hx,hy]; } //--> </script> <div on
BlogFish: tooltip.js
For a recent project I needed JavaScript tooltip functionality for showing detail information. All tooltip libraries that I came across were too complicated and bloatet, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js 1.5: Download it here (BSD license): tooltip-v0.2.js A live demo can be fo
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(後編): CodeWeb
前編の続きです。 bodyの中からイベントハンドラをなくす(Mozilla) さて、ここからが本題です。HTMLソースからイベントハンドラをなくします。尚サンプルはFireFoxとかじゃないと動きません。IE非対応。 で、onclickさんがどっかいっています。どこにいったかというと、 document.getElementById("button3").addEventListener("click",test3,false); この行にいます。addEventListenerというのがイベントハンドラの変わりになるものです。 オブジェクト.addEventListener(イベント,関数,false)ってなかんじで書くと制御できるんですが、これだとHEADの中に書いても下のソースが読み込む前に実行されるのでエラーがおきてしまいます。なのでこの一文が入ります。 window.addEve
最速インターフェース研究会 :: SafariのAjaxの文字化けをクライアント側だけで対応するバッドノウハウ
SafariでXMLHttpRequestのresponseTextが文字化けするという話。 http://blog.33rpm.jp/garbled-on-safari.html 最近のバージョンだとcontent-typeがちゃんとしてれば化けなかったような記憶があるけど、まあともかくとして、Safariで文字化けするのはJavaScript側だけで対処することができたりする。 http://kawa.at.webry.info/200511/article_9.html これ読んでほんとかよ、って感じだったんだけど案外役に立った。livedoor Readerで使われてたり。 実際に使われてるコードはこんなの。 if(browser.isKHTML){ ajax.filter.add(function(t){ var esc = escape(t); return(esc.index
Ajaxを勉強しよう
このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章 Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちょっと便利なCSS Tips いろいろ - DesignWalker
Flashのパーマリンク問題をSWFAddressで解決 (Unknown Quality)
http://www.missingmethod.com/projects/slider.html
http://youmos.com/news/webdesign.html
http://getelementsby.com/
Google maps簡単作成ツール：GMapCreator (v2 API 対応版)