jQueryで多数の要素を生成して追加する場合のパフォーマンスについて | かたつむりくんのWWW
jQuery で多数の要素を生成して別の要素に追加する場合、どんな書き方が速いのかなーと思って試してみました。 今回は、3,000回ループを回して既存の要素に追加していくというのを、パッと思いつく感じの6パターンで試してみました。 サンプル（※モダンブラウザ以外では実行しない方が良いです！） さて、HTMLのソースは次の通り単純です。 このリストに結果を追記する また、次の1文は最初に定義しておきます。 var $result = $("#result"), n = 3000;1 : 毎回要素を生成して append() していくfor (var i = -1; ++i < n;) { var $li = $("").text(i).attr("id","id_" + i).addClass("class_" + i); $result.append($li); } 2-1 : 要素を文字
anything from herejquery.js (1.4) による要素位置の測定と適正な配置 (3) コード解読 (2)
これら 2 つの jQuery インスタンスメソッドは、共に読み取り専用で、返値は共に座標オブジェクトですが、座標系と計測箇所が異なります。 offset メソッドがドキュメント座標における対象要素のボーダー辺の座標値を取得するのに対して、position メソッドは、対象要素の margin 辺の、基準要素（ offsetParent ）内における座標値を取得します。つま、offset メソッドによる座標値は対象要素の margin 値を含むのに対して、position メソッドによる座標値は margin 値を含みません。 しかし、position メソッドは offset メソッドを利用して基準要素から margin 辺までの offset 座標値を算出します。 jQuery().position() コード解読 5857:jQuery.fn.extend({ // jQuery p
Googleが示すJavaScriptを350倍高速化する秘訣 - ぼちぼち日記
1. はじめに、 今年も Google I/O が開催されました。一度も現地に行って参加したことはないのですが、毎年セッションの内容は技術的に高度なものばかりでいつも注目しています。今年の一つ興味深いセッションで、 「Google I/O 2012 - Breaking the JavaScript Speed Limit with V8 (Daniel Clifford)」 スライド ,ビデオ というのがありました。（ビデオ・資料をすぐ公開してもらえるのはホントありがたいです。） ご存じの通り V8 は Chrome に搭載されているばかっ速い JavaScript エンジンで Node.js でも採用されています。このセッションは、 V8 の内部実装の解説を元にどう JavaScript の実行速度がパフォーマンスチューニングができるかという内容で、もうこれは必見で見逃せないものです。
ページ上の単語で補完 - caisuiの日記
ページ上の単語を completer に 出したいなと思って書きました。 現状、単語の区切り方がよろしくない(特に日本語)せいか、微妙です。 COMMAND_LINE,INSERT から の 補完 vimperatorrc に :js <<EOF userContext.word_completer_maps = [ [[modes.COMMAND_LINE, modes.INSERT], ["<C-Space>"], {screen: true}], ]; EOF のように 設定します。 の 状態から (割り当てた map) を 実行すると 単語補完に遷移します。 ここでは、hintMatcher を 利用して 絞ることができます。 (= migemo hint matcher を 利用していれば、migemo で 絞れます) 単語を指定後、を押せば、 commandline や inp
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
pixiv の javascript のコメントが面白い - Dlog 隔離館
イラスト コミュニケーションサービス[pixiv(ピクシブ)] お絵描きサイト、pixiv！ 何気なく、pixiv の javascript のソースを眺めてみると、いろんなコメントがありました。 ニョーン ... 7686: // マウスオーバーでおすすめタグをニョーンと出す 7687: var timer = null; ... マジ天使 ... 452: selectCover: function(c) { 453: // [IE マジ天使] 送れないので遷移させる 454: if ($.browser.msie) { ... pixiv.group.js http://source.pixiv.net/source/js/pixiv.group.js なげえｗ ... 248: if (handler) { 249: // TODO 引数再考。なげえ 250: handler =
CDNでウェブサイトを高速化するためのまとめ
CDNでウェブサイトを高速化するためのまとめです。 「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。 認識誤り等ありましたらどこかでつぶやいてください。 １．CDNとは CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Contents Distribution Network（コンテンツディストリビューションネットワーク）」のことで（注）、コンテンツを配信するために最適化されたネットワークを指します。 Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス（企業）が著名な商用CDNサービスを提供しているようです。 Akamai Technologies Limelight Networks
Hogan.js
Getting started Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates. If you're developing with Node.js, just use NPM to add the Hogan package. $ npm install hogan.js Alternatively, drop hogan.js in your browser by adding the following script. <script src="h
Download RequireJS
r.js: Optimizer and Node/Rhino/Nashorn/xpcshell adapter Download The r.js file allows you to run the optimizer as well as run modules in Node, Rhino, Nashorn or xpcshell. If you are running in Node, and want to use npm to install this file via npm, see the Use with Node page for more information. For information on its use, as well as how to get the JAR files to run it under Rhino/Nashorn, see the
並列処理のWorkerぽいWorkeroid実装。JavaScriptライブラリPot.js 1.17 リリース
並列処理のWorkerぽいWorkeroid実装。JavaScriptライブラリPot.js 1.17 リリース Pot.js 1.17 と PotLite.js 1.34 リリースしました。 Web Workersバックグラウンド処理、並列処理ができる HTML5 API の Web Workers は、 主要なブラウザですでに実装されています。 var worker = new Worker('child.js'); worker.onmessage = function(event) { alert(event.data); // 'hogefuga' がアラートされる }; worker.postMessage('hoge'); child.js onmessage = function(event) { postMessage(event.data + 'fuga'); }; 上
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
JavaScriptで並列処理ができる「Web Workers」 (1/5)
HTML 4時代のJavaScriptは主にWebページの装飾に使われていたので、マシンやブラウザーへの負担はそれほど高くなく、JavaScriptの処理にユーザーが待たされることはほとんどありませんでした。ところが「Webアプリケーションのプラットフォーム」と位置付けられるHTML5時代になると、JavaScriptのプログラムは巨大で複雑になります。そのため、各ブラウザーベンダーはJavaScriptエンジンを高速化し、複雑で時間のかかる処理を素早くこなせるように努力してきました。 しかし、いくら高速化しても回避できないこともあります。従来のJavaScriptはJavaのようなスレッド処理ができないので、時間のかかる処理を実行するとブラウザーが停止状態になってしまい、その間、ユーザーはUI操作がまったくできなくなる問題がありました。 そこで、ブラウザーで複数の処理を並行して実行させる
1分でWebアプリを作れて、3分で公開できた！オールJavaScriptでWebアプリを開発できるMeteorを触ってみた - IT-Walker on hatena
もうJavaもRubyも要らない？–JavaScriptオンリーの未来派WebアプリフレームワークMeteorがデビューという記事で知った、新しいフレームワークMeteor。 ちょっと気になったので、軽く触ってみました。すごすぎるフレームワークの登場です！！ 正確に言うと、実行環境＆フレームワーク＆クラウドPaaS＆パッケージマネージャーといったところでしょうか。Node.jsとHerokuとnpmが一緒になったようなもんだと思えば、イメージがわくと思いますが、実態はそれらを上回っています（パッケージ数はnpmの比じゃありませんが・・・使い勝手という意味で）。 インストール ターミナルをたちあげて、以下のコマンドを実行するだけ。 （行頭の$はターミナルであることを表してるだけで、コマンドの一部じゃありません） $ curl install.meteor.com | sh これで /usr/
Kango - Browser Extension Framework / Add-on / Toolbar - True bonus for developers
Kango - cross-browser extension frameworkTrue bonus for creators - extensions for browsers in minutes using JavaScript only! You only need to have just basic knowledge of JavaScript in order to develop extensions. Finnish online casinos are the latest considering using this framework to create wagering free bonuses, or kierrätysvapaa bonus, as it is in Finnish. The experience so far has been good
jscomplete-vim - hogehoge @teramako
https://github.com/teramako/jscomplete-vim 既存のvimに入っているautoload/javascriptcomplete.vimがアレだったので、もう少し賢そうなのを作りたいと思い、作り始めた。 初めてのVim scriptなので拙いコードだと思うけど。ある程度目的は達成できてきたと思うので、GitHubにアップしてみた次第。 .や[後のプロパティ名を補完することが目的。 そのために、ある程度の式をパースし、どんなオブジェクトが返るかを判断する。 "a,b,c,d" .split(",") .map(function(c){ return '"' + c + '"'; }) .join("\n") ._ // ↑カーソル位置 とある場合は、 "a,b,c,d" .split(",") .map(function(c){ return '"' +
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cdnjs - The #1 free and open source CDN built to make life easier for developers
Cached Home & Property
Create a new fiddle - JSFiddle
CSS 20 stunning examples of CSS 3D transforms
http://joelb.me/scrollpath/