javascript高速化のポイント12
Swift/Objective-C/Java/Ajax/JavaScript/CSSなどの情報、開発中にはまったことなどをメモしていきます。 WEBアプリケーションのパフォーマンスにおいて、RIAの普及によりクライアント側の実装も複雑化してきておりサーバ側だけでなくクライアント側のパフォーマンスも非常に重要な要素となっている今日この頃。 複雑なクライアントを作ったときに、javascriptのパフォーマンスが気になったので実装レベルのイディオム的に高速化できるポイントをまとめてみた（羅列してみた）。 まぁ他にもjavascriptのロード方法とかiframeの使い方とか、はたまたjQueryなどのフレームワークを使用しているとか色々あると思うが、それはまた次回ということで。 １．length の参照を減らす ２．タイマ値はなるべく長く ３．同じイベントに登録する関数が多い場合は実行制御関数
escapeHTML の実装 3 パターン (ベンチマーク付き) - (new Hatena).blog()
ウェブを扱うライブラリやプログラムで必ずと言って良いほど見かけるものに、escapeHTML という関数があります。 "&" 等、特別な意味を持つ文字を、表示等のために実体参照 (&) に変換するお決まりの関数なんですが、実装には色々とバリエーションがあるものです。 1. String#replace メソッドを繰り返す (MochiKit 等) function escapeHTML(str) { return str.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">"); }このパターンが最も多く見受けられます。Ruby でも同様に gsub を繰り返す方式を見かけることがあります (例: RSS::Utils.html_escape)。 2. Str
SimpleBoxes | [javascript]文字の実体参照化
Javascript で文字の実体参照化を行う関数が phpspot開発日誌 にて、紹介されています。 引用元なんでしょうか、Tudástár - Prog.Hu というサイトにリンクが張られていましたが、当方の環境からではオリジナルのコードを見つけられませんでした。 function htmlspecialchars(ch) { ch = ch.replace(/&/g,"&") ; ch = ch.replace(/"/g,""") ; ch = ch.replace(/'/g,"'") ; ch = ch.replace(/</g,"<") ; ch = ch.replace(/>/g,">") ; return ch ; } ここでは replace を使って正規表現による文字置換によって実装されています。 「Javascript で HTM
Web Developer Extension on chrispederick.com
All the work on chrispederick.com is distributed for free, but your donation allows me to continue my development and any amount is greatly appreciated. Donate The Web Developer extension adds various web developer tools to a browser. The extension is available for Chrome, Firefox and Opera, and will run on any platform that these browsers support including Windows, macOS and Linux.
Firebug Lite
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
IEでもJavaScriptをデバッグできるDebugBar 5.2
Microsoft Internet ExplorerでFirebugのようにJavaScriptをデバッグできるプラグイン「DebugBar」が23日、新しいバージョンアップ5.2が公開された。DOM解析や、JavaScriptのデバックといった従来の機能のほか、IETesterでURLを表示させることもできるようになった。 JavaScriptはブラウザさえあればどこでも実行できる手軽なプログラミング言語だが、いざ本格的なアプリケーションを開発しようとするときに、デバッガやIDEといったプログラミング環境が十分ではないようだ。けっきょくブラウザで実行することから、Firefoxのアドオン「Firebug」がよく使われている。また最近では、Google ChromeやSafari 4のように、オフィシャルで開発環境が用意されているブラウザも登場している。 そんな中で最大の難関となるのが、
【コラム】イマドキのIDE事情 (28) IEで利用可能なJavaScriptデバッグツール | エンタープライズ | マイコミジャーナル
JavaScript開発ツールの現状 Webアプリケーションには欠かせないJavaScriptだが、読者の皆さんはどのように開発しているだろうか? 最近ではAptanaなど、JavaScriptのコーディングを積極的にサポートするIDEも登場してきているし、EclipseやNetBeansの次期バージョンでもJavaScript関連の機能が強化される予定になっている。 しかし現状ではやはりテキストエディタで記述し、ブラウザで動作確認という方法が最も手っ取り早いのではないだろうか。特にFirefoxではFirebugという強力なエクステンションがある。Firebugを使うとHTMLのDOMツリーを参照できたり、JavaScriptをグラフィカルにデバッグすることができるなど、IDE顔負けの機能をFirefox上で利用することができるのだ。FirebugはもはやJavaScript開発に欠かせ
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
Eclipseとも連携するJavaScriptのユニットテスター·JsTestDriver MOONGIFT
まだ本格的なWebアプリケーションを作り込んだことがないので、JavaScriptのユニットテストを必要としたことはないのだが、jQueryやMooToolsなどのJavaScriptフレームワークの利用が進んでいる昨今では間もなくJavaScriptにも適切なテストを行うべきかもしれない。 キャプチャ状況 キャプチャしたデータ テストの基本となるものとしてユニットテストが有名だ。JavaScriptの場合、実行エンジンが各ブラウザに依存するのが難点だが、JsTestDriverを使えばブラウザを越えたテストができるようになる。 今回紹介するオープンソース・ソフトウェアはJsTestDriver、JavaScriptのテストフレームワークだ。 JsTestDriverはサーバとして動作するソフトウェアで、指定したディレクトリにあるJavaScrptファイルとそのユニットテストファイルを読み
様々なブラウザに対応したJavaScriptデバッグツール·Javascript Debug Toolkit MOONGIFT
JavaScriptがWebアプリケーションを構築する上で欠かせない技術になっている以上、そのデバッグ方法も洗練される必要がある。Firefoxの場合は有名なFirebugがあるが、他のブラウザになるとそれぞれのやり方があったり、そもそも使い勝手が悪かったりと開発効率が落ちてしまう。 多数のブラウザに対応したJavaScriptデバッガ そんな中、Javascript Debug Toolkitでは多数のブラウザをサポートしたJavaScriptのデバッグが可能なようだ。 今回紹介するオープンソース・ソフトウェアはJavascript Debug Toolkit、WindowsやLinuxに対応したJavaScriptデバッグツールだ。 Javascript Debug Toolkitはスタンドアローン版とEclipseプラグイン版が提供されている。Eclipse版であればMac OSXで
JavaScriptでお手軽にLightBox風を実現する
twitter facebook hatena google pocket Ajaxを知らしめた「LightBox」ですが、わりと導入が面倒だったり、デザインが地味だったりします。 そこで、今回は簡単にLightBox風味を実現するjavascriptを紹介します。 via : A Cool CSS Effect - Dashboard sponsors 使用方法 まずCSSを以下のようにします。 .dashboard { background:#000000; opacity: 0.7; /* Safari, Opera */ -moz-opacity:0.70; /* FireFox */ filter: alpha(opacity=70); /* IE */ z-index: 20; height: 100%; width: 100%; background-repeat:repea
Lightboxより、ちょっとオシャレなJavaScript 「Lightview」 - BLOG MONKEY -グラフィックデザインやWEBデザインなど、日常から感じたログ。-
Lightboxが世に出回った時は、かなり衝撃的にかっこよさを覚えましたが、 あれから、色々改良が進められてるみたいですね。 Lightview http://www.nickstakenburg.com/projects/lightview/ ↑のように角丸が付いたり、テキスト周りが少しオシャレだったり Lightboxより洗練されていそうなjavascriptです。 拡張性は、色々と改善点がありそうですがデザイン重視にしたいならアリかも。 （ちなみに以下が、Lightbox） また、他にも色々と拡張されているみたいなのでメモしときます。 フラッシュやムービー、音声、htmlなど色々読み込み可能な multibox http://www.phatfusion.net/multibox/ （ブラックが好きな人はこちら） multiboxでやれることもできて、youtubeの動画が取り込
Leightbox
I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible. Mind you, i've completely removed the AJAX calls. Leightbox 1 Leightbox 2 Leightbox 3 Download Source · Simon de Haan · E
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
S2ファクトリー | Web/アプリ/システム/デザイン/ディレクション
Google Code Archive - Long-term storage for Google Code Project Hosting.
DOM Samples /Core Node/removeChild() [Javascript] All About![DOM Samples /Core Node/removeChild() [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
Ajax 動的なテーブル書き換え [Javascript] All About
http://youmos.com/news/lightview
Lightboxスクリプトいろいろ - DesignWalker
