はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
正規表現を明記せず、RegExp#exec を String#split にするとちょっとハッピーに - latest log
JavaScript の小ネタです。 UserAgent 文字列(window.navigator.userAgent) "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.814.0 Safari/535.1"から、Windowsのバージョン(6.1)を取り出すようなコードをよく見かけますね。 ちょっと前の私は RegExp#exec + parseFloat で、こんな(↓)感じにしていたり、 function getWindowsVersion() { var m = /Windows NT (\d+(\.\d+)?)/.exec(navigator.userAgent); if (m) { return parseFloat(m[1]); } return 0;
戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法
スマートフォンを含む最近のブラウザでは、戻るボタンで前のページに戻った際に、JavaScriptも含めて前回の最後の状態を復元します（Back Forward Cacheと呼ばれます）。これはとても便利なのですが、ページを作成する立場からすれば、余計なお世話であることもあります。 Back Forward Cacheの無効化はとても簡単に実現できます。ページの中にonunloadを書くだけです。 <!DOCTYPE html> <html><head><title>onunload test</title> <script> window.onunload = function() {}; window.onload = function() { var count = 0; var loop = function() { document.getElementById("num").in
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
実行間隔を調整する - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう！
JavaScriptDebouncing Javascript Methods | Unscriptable.com 密に処理が実行されてしまうのを避けるため、二つのかたちがあるとのこと。下のデモ。throttleは、0.5秒ごとに点の位置が変わる。debounceは、0.5秒いると赤くなる。 デモ throttleひとつ目は一定間隔以内の呼び出しは間引いて無視する方法。イベントの発生頻度が多く、処理が重い場合に使う。 Function.prototype.throttle = function(threshold, alt){ threshold = threshold || 100; var me = this; var last = Date.now(); return function(){ var now = Date.now(); if(now - last debounceも
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め） | tech.kayac.com - KAYAC engineers' blog
弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイドの分業が進んだことや表示速度の兼ね合いもあり、単一ファイルに全体を記述しサーバサイドでは全ページでその一ファイルのみを読み込むような形になることが多いです。 単一ファイルの利点としてはサーバサイドの実装に依存せずに任意の機能を追加できることがありますが、欠点として機能毎の切り分けが難しくなると言う点があります。 jQueryを使用して$('.selector')で切り出す方法もありますが、マークアップの全体像を正確に把握できていないと不要なページで間違って実行されてしまう危険性もあります。 そこで、以下のようなJSを先に読み込み、各URL
Togetter - 「scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの?」
@monjudoh scriptタグ内を<!-- // -->で括ってからJavaScript書くのってどの辺のブラウザ向けにやってるんだっけ? #javascript
高度な JavaScript 技集
JavaScript で作って意味があるのかどうか分かりませんが、作ってみました。 応用編 入力したテキストをページ上に書き出し、個々の文字をドラッグ＆ドロップ で動かせるようにする ソースを読んでも中身が分からない HTML を作成する パスワードチェックの部屋 (パスワードは「開けごま」ですが、HTML のソースや JavaScript を解析しても、絶対にパスワードが分からない仕組みになっています。) バー ライブラリ編 こんなの JavaScript で作るかよってな代物です。 できてしまったものはしょうがないでしょう。 utf.js (UTF-8 <-> UTF16 変換) base64.js (Base64 encode/decode) md5.js (MD5) des.js (DES 暗号化/復号化) zlib.js (JavaScript による zlib 実装、zlib
Array に Hash を被せる(AOH) - latest log
配列を返す関数は、素の配列を返すよりも、first や last などの付加情報も一緒に返すといいんじゃないかな。 というお話です。 たとえば FakeArray → Array NodeList や arguments は FakeArray(Array Like Object) と呼ばれる擬似配列です。 FakeArray には join() や push() などの便利なメソッドがないため、FakeArray を一旦 Array に変換する(↓)toArray のような関数が、どうしても必要になります。 # Array.prototype.slice.apply(fakeArray) を使うケースは説明しないよ 素の Arrayを返す toArray 関数 function toArray(fakeArray) { // @param Array/FakeArray: // @ret
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
String.toJSON(), JSON.stringify(), JSON.parse() の実装比較一覧 - latest log
"あa".toJSON() JSON.stringify("あa") JSON.stringify({"あa": null}) Google Chrome6(dev) "あa" ""\u3042a"" "{"\u3042a":null}" Safari5 not impl ""あa"" "{"あa":null}" Opera10.60β not impl '"あa"' '{"あa":null}' Firefox3.6.3 "あa" ""あa"" "{"あa":null}" IE8 "あa" ""\u3042a"" "{"\u3042a":null}" IE6, IE7 not impl not impl not impl JSON.parse('"あa"') JSON.parse('"\u3042a"') Google Chrome6(dev) "あa" "あa" Safari5 "あa"
Function.applyを使って、クラスをMix-in - nothing but trouble
Firebugのコードを読んでから、apply廚になりはじめている。 var Foo = function() { this.name = "Foo"; this.foo = "foo"; this.hage ="foo"; } var Bar = function() { this.name = "Bar"; this.bar = "bar"; this.hage = "bar"; } var Hoge = function() { this.name ="Hoge"; } new Hoge(); // Object name="Hoge" Foo.apply(Hoge.prototype); new Hoge(); // Object name="Hoge" foo="foo" hage="foo" Bar.apply(Hoge.prototype); new Hoge(); // O
Nicole Sullivan「再フロー＆再描画：Javascriptを重くするCSS」 - 以下斜め読んだ内容
Yahoo!のNicole Sullivanの2009.3.27のブログエントリ Reflows & Repaints: CSS Performance making your JavaScript slow? ウェブページのパフォーマンスを遅くさせるCSSの使い方。およびその回避策がテーマ 再フロー＆再描画をどうやって減らすか。 TIPSは6つ紹介されてる。が、javascriptを書かないCSS書きに関係するのは、5〜6番目の table要素は特殊。固定レイアウトアルゴリズムでレンダリングされるようにしろ。 MS独自仕様のcss expression使うな。 のみ。 以下斜め読んだまとめ。 Operaの記事「Efficient JavaScript」によると再描画と再フローがjsが重くなるのに影響してる 同僚のStoyan Stefanovと一緒にこの問題の定量化に取組中 再描画と再フ
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-finally を使うのはやめよう eval と with は隔離しよう グローバル変数を使うのはやめよう 暗黙のオブジェクト変換に気をつけよう 性能を決める関数で for-in を使うのはやめよう 文字列は累積スタイルで使おう プリミティブの操作は関数呼び出しより速い setTimeout() や setInterval() には文字列でなく関数を渡そう DOM 再描画と再フロー 再フローの回数をでき
Firebugを使って無名関数への参照を手に入れる - monjudoh’s diary
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂の応用編 参照が欲しい無名関数の中の適当な所で、 breakpointを設定し、条件を↓にする。 (window.someFunction = arguments.callee),false この無名関数が1度でも実行されれば、someFunctionで参照できるようになっている。 someFunction.toSource(); とかやると以下のようになる。 (function ($) {var map = new Array;$.Watermark = {ShowAll: function () {for (var i = 0; i < map.length; i++) {if (map[i].obj.val() == "") {map[i].obj.val(map[i
minifyされたJavaScriptにconsole出力等の処理を挟む、特定経路を通った場合に処理を挟む - monjudoh’s diary
minifyされたJavaScriptへのブレークポイントでの処理の挟み込み Firebugのブレークポイントは行に貼るのでminifyされたJavaScriptと相性が悪い。 例えばjQuery.ajaxが定義されている行にFirebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂の要領でconsole出力を挟んだとして、 無関係な関数の呼び出しまで対象になってしまう。 それを回避するためにブレークポイントに設定する条件を変えてみる。 !(!(arguments.callee === jQuery.ajax) || (/* やりたい事(式)をカンマ区切りで start */console.info(arguments.callee.toSource())/* end */,true)) コピペ用 !(!(arguments.ca
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォーカスされている要素を取得する方法 - sawatのブログ
http://moto-mono.net/2010/03/15/set-styles-like-jquery-css-method.html