仕事で使うJavaScriptにClosureCompilerを推してみる - Qiita
価値観 AltJSが色々あって、追いかけるのも大変だし、振り回されたくもない 廃れた後、改修とかでそれらに依存したコードに遭遇してｳｯ…てなりたくない Vanilla JSだけが裏切らない という感じから始めます。 ClosureCompilerの概要 Google製 5年位前からあり、現在はGitHubで開発継続中 minifyや、コードの最適化ができる 依存関係の解決や、型の制約を提供してくれる JsDocのアノテーションによる型の宣言なのでソースの可読性が下がらない むしろ上がる どんな圧縮・最適化を行うのか ブラウザ上でコンパイルを試せるページがあります。 http://closure-compiler.appspot.com/home Advanced＋Pretty printを選択します。 ここでconsoleの手抜きラッパーの例で試してみます。 /** @constructo
20 Useful jQuery Notification Plugins and Tutorials | Tripwire Magazine
20 Useful jQuery Notification Plugins and Tutorials by Sonny M. Day | Last updated Dec 18, 2016 | jQuery Plugin Collections | 11 comments Just like jQuery sliders I think jQuery notification plugins have a very crucial potential in enhancing user experience for website visitors. The power of these scripts are oftentimes unnoticed, you see a jQuery notification plugin can be used for providing a ti
[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification
2秒後に自動で閉じるデモ [ad#ad-2] Notificationの実装 外部ファイル 「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> JavaScript showNotification(params); 「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。 showNotification({ message: "This is a sample Success
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
Nao Haida's weblog: JavaScript の オーバーロード
2007年11月26日月曜日 JavaScript の オーバーロード jQuery のコア開発者として知られている、John Resig さんのブログに JavaScript Method Overloading という大変面白い記事がありました。JavaScript のオーバーロードソースコードを見てみます。簡潔で素晴らしいコード。// addMethod - By John Resig (MIT Licensed) function addMethod(object, name, fn){ // 指定されたオブジェクトには， // 既に同じ名前のメソッドが定義されている // かもしれないので，一時変数に保存しておく var old = object[ name ]; // オブジェクトのプロパティに関数定義を上書き． object[ name ] = function(){ //
いやなブログ: 配列操作の比較表: Ruby, Python, JavaScript, Perl, C++
配列操作の比較表: Ruby, Python, JavaScript, Perl, C++ プログラムを書いていると、他のプログラミング言語の記憶とごっちゃになって、「配列の後ろに要素を追加するのは push だっけ、 append だっけ」などと混乱することがあります。特に Ruby, Python, JavaScript はコードの書き方が似ているので、この問題が起きがちです。 そこで、備忘録として、 Ruby, Python, JavaScript, Perl, C++ の配列操作の比較表を作りました。一番慣れている Ruby を基準にしています。間違いなどがあったらご指摘いただけると助かります。他の言語のもあるといいなあ。 Ruby (Array) Python (list) JavaScript (Array) Perl (@) C++ (std::vector)
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
正規表現のベンチマーク(String.match と RegExp.exec のざっくりとした違い) - latest log
2009-01-12追記 タイトル修正しました。 2009-01-14追記 String.indexOf と RegExp.test のスコアが逆に書かれてていたのを修正しました。 String.match ばかりで、RegExp.exec を使ったことがありませんでした。 ちょっと気になったので色々とベンチマークを取ってみました。 TEST TIMES IE6 Fx3.0 Fx3.1 (JIT) Safari3 Chrome1 (JIT) A. match(/\s*/) vs match(/ */) "aaaaaaaaaaaa".match(/\s*aa\s*/) 1000000 7203 1714 327 2375 2128 "aaaaaaaaaaaa".match(/ *aa */) 1000000 7156 1638 297 2328 2148 B. RegExp.exec vs
JavaScriptでマッチ文字列全置換はどうするのがいい？ - あらびき日記
この記事は abicky.net の JavaScriptでマッチ文字列全置換はどうするのがいい？ に移行しました
__proto__ = null - 素人がプログラミングを勉強していたブログ
__proto__プロパティにnullを代入すると、Object.prototypeのメソッドを継承しないクリーンなオブジェクトを手に入れることができる。 var o = {__proto__: null}; console.log(typeof o.toString); // undefined console.log('__proto__' in o); // false console.log(typeof o.__proto__); // undefined console.log(Object.getPrototypeOf(o)); // null console.log(o instanceof Object); // false '' + o; // TypeError: can't convert o to primitive type 何故か__proto__に代入すると
Object#tap - 素人がプログラミングを勉強していたブログ
RubyのObject#tapがすごく便利。tapかわいいよtap - (rubikitch loves (Emacs Ruby CUI Books))に書いてある。これを使うと、selfを返さないメソッドを使ってもチェインできる。 JavaScriptだと、こんな感じ。 Object.prototype.tap = function (fn) { fn.call(this, this); return this; }; ただ、JavaScriptだとyieldブロックがないから、少し野暮ったい。もう少し動作を限定させて、 Object.prototype.tap = function (name) { this[name].apply(this, Array.slice(arguments, 1)); return this; }; [1, 2, 3] .tap('push', 4, 5
これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT
php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます（もちろ
JavaScriptは怖くない - Pixel Pedals of Tomakomai
デブサミ版Google Hackathon行ってきました*1。OpenSocialに触れるのがもちろんメインテーマなんですが、今回それとは別に「JavaScriptを使いこなせるようになる」と言うサブテーマを自分に課してました。 今日一日でJavaScriptを好きになれたので、そのノウハウをメモっておきます。 参考: 今日書いたJS 名前空間 JavaScriptで何が嫌かって、裸で存在する変数やハンドラ類です。今まで start() とか init() なんて関数名とか普通に使ってたんですが、「こんなのいつかぶつかるに決まってるじゃん」、と非常に嫌な思いをしてました。 名前空間の作り方がわかれば、このストレスが一気になくなります。これだけでJavaScript嫌いが治るといっても過言じゃないくらい効果的です。 名前空間はオブジェクトとして作ればOKです*2。変数の局所化のために ( f
DocumentFragmentの考察 - Personnel
DOMユーザーの方は、このようなことが出来たら良いと思ったことはありませんか? NodeListのクローンを作成する NodeListをそのままappendChildのパラメータにする もちろんこのようなことは出来ません。NodeListのitem一つ一つのクローンを作成し、一つ一つをappendChildしなければならないのです。しかし、DocumentFragmentを利用することによって、このような感覚の操作をすることが可能になります。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/documentFragment.html#seeds ここに、文書A、文書B、文書C があったとします。 文書A <rootA> <item /> <item /> <item /> <
iPhone Webアプリにおける13のJavaScript高速化アレコレ：マピオンラボ(Javascript)
こんちは、中村です。 先日マピオンラボよりリリースしたiPad用地図「マピオンタッチ デラックス」のコアとなるフリースクロール地図ライブラリの開発を担当させて頂きました。せっかくなのでターゲットブラウザをMobileSafariに設定し、比較的スペックがプアなiPhone3Gや3GSでも十分な速度で動作するようJavaScript部分の高速化をアレコレ調べてみたのでまとめてみます。一番低スペックなiPhone3Gで実際にどの程度早くなるかをタイマーで計測してみましたってのが本エントリーのミソです。 JavaScriptパフォーマンスチェック - Googleドキュメント 1. new Object より {}（Objectリテラル） オブジェクトを１万個生成するならばリテラルで記述することで約26ms高速化！ loop=10000; for(var i=0;i<loop;i++){}; /
blog.katsuma.tv
JavaScriptでFirefoxがconst(定数宣言)をサポートしていることをフと思い出しました。で、定数宣言って速度向上とかにつながるのかな？思ってついカッとなってベンチマークとるコードをかいてみました。こんな感じ。 <html> <head><title>const test</title></head> <body> <script> window.load = monitor(); function monitor(){ var A = "TestA"; const B = "TestB"; var Klass = { C : "TestC" }; // 1st test var start = new Date(); for(var i=0; i<10000000; i++){ var b = A; } var end = new Date(); console.log("
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法３
8 ヶ月前に setInterval 書き換えのネタで作ったやつ id:amachang:20060104:1136344836 id:amachang:20060114:1137243389 ふと ちょっと設計変えたらすごく速くなる気がして、作り替えてみた。 でも、作ってみたら clearInterval がちょっとだけ速くなったけど、正直そこまで変わらなかった。 でも、設計はきれいになったと思うので公開します。 ダウンロード http://sample.ecmascript.jp/setInterval/setInterval03.js 以前のもファイル化した 最初の失敗作(utf-8だから適当にエンコードして使ってください) 次に作ったやつ、実績はこっちのがある(utf-8だから適当にエンコードして使ってください) 使いかた すべてのスクリプトより前に読み込む <script src
IT戦記 - 複雑で重くなった JavaScript を超超ちょ???高速化する方法。
前回(id:amachang:20060104)の改良版です。前回のでやっていたら、queueを走査する時間がかかりすぎるようになって結局崩壊してしまったので、さらに改良しました。ただし、今回のは時間が多少ずれる場合があります。なので、ストップウォッチなどのプログラムを作る場合は使わないでください。 主な改良点としては .(ドット) 減らす。 文字列リテラルをループ中に記述しない。 ループ。ループのネストを減らす。 new を減らす。 関数コールを減らす。 より早い演算を使う。(+1 を ++ にするとか。他にもいっぱい) これで、めっちゃ早くなりました。やヴぁいです。 ミニマム版 var _SIi=10,_SIM='第一引数が不正です。',_SIl=0,_SIc=0,_SIS ='string',_SIF='function',_SIf=window.setInterval,_SIp=[
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
以下のスクリプトを他のすべてのスクリプトよりも前に読み込む。 var nativeSetInterval = window.setInterval; _setInterval = {}; window.setInterval = function(process, delay) { var entry; if(typeof process == 'string') { entry = new _setInterval.Entry(function(){eval(process);}, delay); } else if(typeof process == 'function') { entry = new _setInterval.Entry(process, delay); } else { throw Error('第一引数が不正です。'); } var id = _setInterv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...