jQuery の ID で対象ノードを取得する処理を高速にしたい - tilfin's note 跡地
てっく煮ブログさんのエントリー jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ をみてて、jQuery の $("#xxxx") を速くしたいと考えていたことを思いだした。それについて書く。 jQuery の $("#xxxx") について セレクタをどう処理しているのか jquery-1.2.6.js で確認してみよう。 まず下記の init が $() に相当する。Handle HTML stringsのところで引数が string だと quickExpr.exec が走る。これは正規表現でのセレクタ解析処理である。 その後、HANDLE: $("#id")のところでマッチして取得した ID を使って、var elem = document.getElementById 使い、それを return jQuery(elem) として再び init が呼び出され
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
Markdown記法をJavaScriptで·Showdown MOONGIFT
個人的には一番好きな記法であるMarkdown。Wikiも良いのだが、エンジンによって記法のばらつきがあるのが問題だ。その点、記法だけを考えればMarkdownは統一されているので、シェアさえ広がれば皆使えるようになる。 Markdown記法のリアルタイムプレビュー だが書くときはテキストエリアで、実際のレンダリング結果は送信してみないと分からないというのは面倒くさい。そこでShowdownを使ってみよう。 ShowdownはJavaScriptを使ってMarkdown記法をパースするオープンソース・ソフトウェアだ。 Showdownは言わばJavaScriptによるMarkdownエンジンだ。ブラウザベースで動作するのでリアルタイムプレビューに向いている。入力した内容がその場で見られれば失敗も少なくなるし、色々試すことができる。 HTMLソース さらに便利なのが、ドロップダウンでプレビュ
しゃおの雑記帳 - その場で生成された短縮URLがわかるTinyURLブックマークレットを作ったよ
TinyURLは長いURLをTwitterやメール、メッセンジャーなどに書き込むときに便利なんだけど、いちいちTinyURL.comのサイトからURLをコピペするのが面倒だな、と思ったので作成。TinyURLによって生成された URI がプロンプトとして即時に返ってきますのでコピペとかしやすいかと。 使い方 TinyURL! ←このリンクをブックマークツールバーにドラッグ、または右クリックなどでブックマークに登録。下記のソースをコピーしてブックマークに登録してもOKです javascript:var%20b=document.body;if(b){_cb=function(s){void(window.prompt('Converted URI',s))};void(z=document.createElement('script'));void(z.src='http://remysh
モダンなブラウザ＋未来のブラウザのSunSpiderベンチマークまとめ - 肉とビールとパンケーキ by @sotarok
散々いろんなところで既出ですが、Opera 10 alpha が出たのをきっかけに、全部とってみました。 ベンチマーク環境は、 対象 SunSpider JavaScript Benchmark (In Progress...) OS : Windows XP Professional SP3 CPU : Core 2 Quad Q6600 2.4GHz Mamory : 3.25GB 対象は、以下の4ブラウザ8バリエーションおまけ1です Opera 9.62 Opera 10.0 preview (alpha) Firefox 3.0.4 (アドオンいっぱい : グリモン、Firebug〜いろいろ) Firefox 3.0.4 (アドオンなし) Firefox 3.1 beta 2 (当然TraceMonkeyはOn) Safari 3.1.2 Webkit Nightly Build
Jeditable - Edit In Place Plugin For jQuery
Inplace editing for jQuery. Currently unmaintained. Interested in becoming a web developer? Start with JavaScript Essentials (free) and continue to earn a full Techdegree (free trial). Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul's editable. For
はてなブックマーク JavaScript 高速化計画 補足 - IT戦記
はじめに id:jkondo さんがブクマしてくれてるのでちょっとだけ補足 以下のつづき http://d.hatena.ne.jp/amachang/20081126/1227700830 追加修正 id:Yuichiro さんのハック 2008-11-27 - つれずれなるままに… 注意：ただ、これ appendChild 時のコストが増えていることが分かったのでちょっと要確認ですね。 id:Yuichiro さんのハックを getImage にも適用 gotImage: [], getImage: function(container) { var src = Hatena.Star.Button.getImgSrc(Hatena.Star.Star,container); if (!this.gotImage[src]) { var newimg = document.create
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
jQuery の配列系のメソッドをメモ - てっく煮ブログ
JavaScriptjQuery は機能が豊富なので、しばらく使わないと忘れてしまう。ここでは、jQuery と配列の関係に絞って目的別に逆引きできるようにしておく。配列から jQuery オブジェクトを作成$ 関数に渡せばOK $([1,2,3]) NodeList のような配列っぽいものを渡しても解釈してくれる。 $(document.getElementsByTagName("div")) // $("div") と同じ ※内部的には setArray メソッドが呼ばれてるが、外から使うことは稀。jQuery を配列のように扱う要素数を取得するlength プロパティを使えばOK。 $("div").length // document.getElementsByTagName("div").length と同じ jQuery のメソッドを使って操作する限りは、適切に length
Javascriptは最後に・・・ - WolaWola
WolaWola YSlowで指摘される、高速化のためには、Javascriptを最後に置けというのを、変数を使って実現する手段を紹介します。 Home Plugins Profile This_site Mailform Search Archives YSlow for Firebug使ってる方いると思うんですが、体感速度を上げる方法として、「CSSは最初に読み込み」「Javascriptは最後に読み込む」ってのがあるみたいです。 基本的な画面表示は先に終わらせるってことみたいです。 それで、スクリプトをまとめて、フッターの後・</body>の直前に置こうと思った場合に、問題になる点があります。 ひとつは、コメントフォームでのグリーティング表示部分。もう一つはウィジェット部にスクリプトが含まれるようなケースです。 このサイトでは、その様なテンプレートの途中で
jQuery.brbr Pluginを作成しました。 - KAYAC Engineers' Blog
高知から帰ったら席がのっとられていたagoです。 このたび弊社ではYUREX™ - ビンボーゆすりを科学したコラボ・プロダクトを開発として、YUREX製品サイトをOPENしました。 今回はこのサイトで使用している、文字や画像のリンク部分を揺らすjavascriptをjQuery.brbrとして（無駄に）jQuery Plugin化したので公開したいと思います。 使い方はjQueryと一緒に読み込み、揺らしたいelementsに対して.brbr()を指定するだけ。 $(function () { $(/* or selector */).brbr(); }); これで該当要素以下のリンクをカーソルで指定した場合にゆれるようになります。 指定できるパラメータと初期値は以下の通りです。 $(/* or selector */).brbr({ /* ゆれる方向を指定。 top,left,''を指定
Serie3 - Workshops
ABOUT The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self. Demonstration HOW TO USE It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3
HOKYPOKY. | MULTICOL. jQuery Plugin
MULTICOL. はHTMLで雑誌のような美しい段組みレイアウトを実現するだけのシンプルなjQueryプラグインです。 もちろん、日本製のプラグインなので日本語もきれいに段組みにします。 一 或春の日暮です。 唐の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。 若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費な身分になっているのです。 何しろその頃洛陽といえば、天下に並ぶもののない、繁昌は、まるで画のような美しさです。 しかし杜子春は相変らず、門の壁に身を凭かと思う程、かすかに白く浮んでいるのです。 「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし——こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」 杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしてい
SEOブログパーツ「検索くん」
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
新規でサイトを作るのに使えそうなの一式。Ver 3
随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。 中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。 それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。 新規でサイトを作るのに使えそうな一式。Ver 3をDL（zip：40kb） Ver 3を見る Ver.3の中身ご説明 主な変更点を。 style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。 default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。 default.cssのfont-familyの指定を若干変更。 index.htmlにGoogleカスタムサーチ用に使えるソースを記入。 Ja
Firebugでブレークポイントを利用したJavaScriptデバッグを - builder by ZDNet Japan
ビジネスのためのデータ基盤構築 DX時代の企業成長はデータ活用が鍵 新たな展開を後押しするSQL Server活用 ITインフラ運用からの解放 HCI＋JP1による統合運用による負荷激減で 次世代IT部門への役割変革へ一歩前進 体験から学んだ成功への知見 マネーフォワード×エム・フィールド対談 Fintechプラットフォーム開発の「鍵」 コンテナをエンプラITに！ コンテナ活用の基礎 本番実装が増える背景とメリット 激変するビジネス環境の中でのDX モダンアプリケーション戦略への取り組みが 市場の競争力の源泉となる 高まるゼロトラストの気運 妥協のない安全のために適材適所で組合せ トップ4社によるゼロトラストセキュリティ 身近な改善の第一歩！ ニューノーマルな働き方を前提にした これからの時代のWi-Fi環境構築のポイント ライバル同士がタッグを組む理由 マイクロソフトとヴイエムウェアが連
シングルクォートもきちんとエスケープする - 素人がプログラミングを勉強していたブログ
追記2：2007-10-11 - hoshikuzu | star_dust の書斎を見ると、下に書いてるような対策では不十分なようだ。 追記：エスケープすべき文字は、Re: JavaScript内（文字列）にデータを出力する場合の適切なエスケープ手順｜freeml byGMOなどを参考に。 シングルクォート(')をエスケープせずXSSの原因になっているサイトをけっこう見かけたので、どういう時問題になるのか書いておく。 JavaScriptの文字列を動的に埋め込む場合。 <script> var q = 'hoge"fuga'; document.getElementById('word').appendChild(document.createTextNode(q + 'の検索結果')); </script> のように、変数に代入する文字列を動的に作っている場合、RubyのCG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス: Douglas Crockford (著), 水野貴明 (翻訳): 本
Code Tutorials | Envato Tuts+
bizcaz.com