2009年03月31日

クロスブラウザ対応やってみて思った事

HTMLやらCSSやらJavaScriptやら色々弄った感想

- Firefox, Safari, Google Chrome なんかは割と手がかからない
- Opera も上の3つ抑えてればだいたいok
- なんかSafari4のJavaScriptの挙動が3と微妙にちがう
- IEは死ね、IE7からだいぶ互換性的な物がよくなってるけどIEは死ね。
-- IE6のサポートを切り捨てる時代はまだか?
- IE8は確かにJavaScriptが速くなってるがGoogle Chromeは劣るしSafariとか本当速い、Firefox3.0は結構遅い
- z-indexの事を考えてないで作ってると、いざとなったら本当にびっくりする
- pngの透過画像をあわせるのは案外しんどい
-- DXImageTransform.Microsoft.AlphaImageLoader使うんだけど、background-imageが入ってると混ざる、そしてDXImageTransform.Microsoft.AlphaImageLoaderで出すと画像が背景画像じゃなくなる
-- classにpngimgみたいなのが入ってるときはbackgroundをnoneにするのやってみたけど、#idname:hover {} みたいに hover されたときだけpng画像を変えたりとかenable/disableクラス与え状態によってpng画像のurlを変えたりすると上手くDXImageTransform.Microsoft.AlphaImageLoaderが当たんなくなる
- 元から配布されてるjqueryライブラリを俺俺改造されてると他の人が困るので、元のは弄らずに外部からわかり易くmethod差し替えたりするとよい。
- アンダースコアハックとかCSSの人がハックハック言ってる物はPHPのクラス名の区切りにバックスラッシュ使うようなもんだと思ってるから使いたく無い
-- ブラウザ毎のCSSを吐き出すジェネレータ書いてHTMLから読む時にブラウザによって変えるのが正解なんだろなー

- float: leftしまくった要素を持つ親要素の縦横も、IEだけは float: left してる要素分だけ加算されるので、上のブラウザと全然違う事になったからjavascriptで縦横辻褄合わせた。
-- たいていの非互換製はJavaScript使う力技でなんとかなったり
- IE6なんかはpadding-leftの値を1px変えるだけですっきりしたり

まとめ


たんぽぽを乗せるだけの簡単な仕事じゃないんだけど、殆どの苦労は機械的に解消出来そうな感触を得た春であった

IEを使わないでJavaScriptを書く時に陥る一番の罠としてはハッシュの最後の要素に,を付けてしまうという事(Perlでは皆よくやってる)だが

var hash = {
key: name,
last: value, // ここの ,
};

これはIEでは動かないのだが、コードが多くなると探すのがとても大変である。
が、そんな時はJavaScript Lintを使えば良い。
アプリケーションのユニットテストの中に、これを使ってlintかけるテストなんか入ってると興奮が止まらないだろう。
たとえば
#!/usr/bin/perl
use strict;
use warnings;
use Test::More;
use Text::SimpleTable;
plan skip_all => 'this test requires "jsl" command' unless `jsl` =~ /JavaScript Lint/;

my @files = <htdocs/js/*.js>;
plan tests => 1*@files;

my $table = Text::SimpleTable->new(25, 5, 5);

for my $file (@files) {
# 0 error(s), 6 warning(s)
my $out = `jsl -stdin < $file`;
if ($out =~ /((\d+) error\(s\), (\d+) warning\(s\))/) {
my ($msg, $err, $warn) = ($1, $2, $3);
$file =~ s!htdocs/js/!!;
$table->row($file, $err, $warn);
is $err, 0, $file;
} else {
ok 0;
}
}
diag $table->draw;

こんなのを書いてもらって使ってる。

これ使ってると、「ああ、JavaScriptのスコープってfunction毎なんだな」ってのが良く思い出せて良いです。

(はてなに書こうとしてたフォーマットをそのままコピペしたのでみにくいかなっと)

Posted by Yappo at 13:44 | Comments (2) | TrackBack

2009年03月27日

CPUの気持ちは大事だけど、VMの気持ちも考えようよ

CPUの気持ちになってプログラムを書くということ Kansai.pm#11 参加記その1 - プログラマになりたい

 ちなみに、下記のコードはデータハザードを解消する為のコーディング例です。データハザードは、命令が利用するデータ間に依存関係がある場合に発生します。前の命令が終わらないと後ろの命令が実行できないとか。ですので、それを解きほぐしてやれば、並列で処理が出来るようになります。
という感じでnaoyaさんもぶこめで
loop unrolling は perl でもちゃんと効果がある
って書いてるけど、それforブロック(スコープ)が一段増えてる事で差が出てるんじゃないかと思うわけです。はい。

以下検証コード

use strict;
use warnings;
use Benchmark qw(:all);

cmpthese(5000000, {
    'pseudo loop unrolling' => sub {
        my $sum = 10;
        my $i   = 1;
        $sum = $sum + ($i + 0);
        $sum = $sum + ($i + 1);
        $sum = $sum + ($i + 2);
    },
    'scope 1' => sub {
        {
            my $sum = 10;
            my $i   = 1;
            $sum = $sum + ($i + 0);
            $sum = $sum + ($i + 1);
            $sum = $sum + ($i + 2);
        };
    },
});
そして結果
$ perl ./loop.pl 
                           Rate               scope 1 pseudo loop unrolling
scope 1               1524390/s                    --                  -25%
pseudo loop unrolling 2040816/s                   34%                    --
なぜかブロックを1つ増やしただけなのに、こんなに差がでちゃいましたね!不思議!

まとめ

ブロックがあるという事は、スコープがあると同義なのは当たり前ですが、スコープが変わるという事はレキシカル変数の処理などをやらなきゃいけないわけで、{}があるだけでもPerlは処理をいっぱいするわけです。
別にブロック増やすなというわけではないですが、ベンチマークを取る時にはこういう所にも気をつけたい所ですね。

追記

!hyoshiokさんが、そもそもloop unrollingがperlで意味あるか?というのを気にしていたようなので、効果あるよって言うベンチマークしたす。

forしたコードと、for文だと3回scopeの出入りがあるので、それにあわせるコードも追記して、さらにmy $jのコストも加算するようにした。

use strict;
use warnings;
use Benchmark qw(:all);

cmpthese(5000000, {
    'pseudo loop unrolling' => sub {
        my $sum = 10;
        my $i   = 1;
        $sum = $sum + ($i + 0);
        $sum = $sum + ($i + 1);
        $sum = $sum + ($i + 2);
    },
    'scope 1' => sub {
        {
            my $sum = 10;
            my $i   = 1;
            $sum = $sum + ($i + 0);
            $sum = $sum + ($i + 1);
            $sum = $sum + ($i + 2);
        }
    },
    'scope 3' => sub {
        {
            my $sum = 10;
            my $i   = 1;
            {
                $sum = $sum + ($i + 0);
            }
            {
                $sum = $sum + ($i + 1);
            }
            {
                $sum = $sum + ($i + 2);
            }
        }
    },
    'scope 3 and my $j' => sub {
        {
            my $sum = 10;
            my $i   = 1;
            {
                my $j = 0;
                $sum = $sum + ($i + $j);
            }
            {
                my $j = 1;
                $sum = $sum + ($i + $j);
            }
            {
                my $j = 2;
                $sum = $sum + ($i + $j);
            }
        }
    },
    'loop' => sub {
        my $sum = 10;
        my $i   = 1;
        for my $j (0..2) {
            $sum = $sum + ($i + $j);
        }
    },
});
結果
$ perl ./loop.pl 
                           Rate loop scope 3 and my $j scope 3 scope 1 pseudo loop unrolling
loop                   683995/s   --              -11%    -17%    -48%                  -63%
scope 3 and my $j      772798/s  13%                --     -6%    -42%                  -58%
scope 3                823723/s  20%                7%      --    -38%                  -55%
scope 1               1322751/s  93%               71%     61%      --                  -28%
pseudo loop unrolling 1824818/s 167%              136%    122%     38%                    --
dh004:t ko$ perl ~/bin/htmlescape.pl loop.pl 
やる意義については置いておいて、意味はあるとは思うですよ。

Posted by Yappo at 13:49 | Comments (1) | TrackBack

2009年03月26日

danさんのllevalをもっと便利にするラッパー作った

404 Blog Not Found:Ajax - Lightweight Languages を実行するAPI

今度はPerlだけではありません。
一時はcodepadの1/100くらいの利便性まで下がってしまって心配しましたが、80倍便利になってぼくたちのDan the APIが帰って来ました。

しかし、まだ物足りない所として貼付けたcodeのpermalinkが取れないので、実行結果を友達に教えてhackに役立てるのが不便でした。
そこでDan the APIを利用する形で、貼付けたcodeのpermalinkを作るCGIを作りました。
http://seiitaishougun.com/lleval.cgi

ソースコードは公開されてるので、自己責任で遊んで下さい。実際に動いてる物はYacafiのpack機能をつかって1つのファイルにしてあります。(Data::ModelやらJSONやらに依存しててポータブルじゃないけど。がはは)

無保証
です。仕様変更、サービスの停止、廃止など、私とdanさんとlivedoorの中の人の胸先三寸と心得てください。
Enjoy!

Posted by Yappo at 17:33 | Comments (1) | TrackBack