IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

トップ > IE

IE で removeChild した要素はどこへいくか？

JavaScript IE

普通のブラウザだと

parent.removeChild(child);
alert(child.parentNode); // null

なぜか、 IE だと DocumentFragment が生成されている。

parent.removeChild(child);
alert(child.parentNode);          // [object]
alert(child.parentNode.nodeName); // #document-fragment

な、なぜ？

変なブラウザだなー

僕も半透明 png を使うためのライブラリ作った！

JavaScript IE

いろいろと古い IE で半透明 png を使うための JS が紹介されています

で、自分も使おうと思ったのですが。

ライブラリの依存とか、 window の load イベントの時に処理されるのがちょっとだけ嫌だったので、自分用のを作りました。

意外と便利だったので公開します

デモ(IE5.5 or IE 6 で見てください)

http://usrb.in/amachang/static/AlphaLoader/demo.html

使いかた
ダウンロードして使いたい場合

以下の二ファイルを同じディレクトリに置く

例
<img src="hoge.png" width="100" height="100"><!-- ← こいつは透過される -->
<script src="http://usrb.in/aj/apng.js"></script>
<img src="fuga.png" width="100" height="100"><!-- ← こいつは透過されない -->
<img src="piyo.png" width="100" height="100"><!-- ← こいつは透過される -->
<script src="http://usrb.in/aj/apng.js"></script>
詳しい情報は

http://usrb.in/amachang/wiki/AlphaLoader

DOM 系の関数は IE に合わせればいいんじゃね？

JavaScript IE

IE 以外のブラウザは HTML 要素(Element)の prototype がとれる

prototype とはクラスの定義のようなもの。

具体的には

以下のようにとれる

ブラウザ 方法
Opera HTMLElement.prototype
Firefox HTMLElement.prototype OR document.documentElement.__proto__.__proto__
Konqueror (たぶんSafariも(情報求む)) document.documentElement.__proto__

prototype を書き換えるとそれと繋がるオブジェクトは全て書き換わる

これはおもしろい。

例のごとく IE だけ取れないので

動作が違う関数はすべて IE に合わせてやればいいんじゃない！？（ﾋﾗﾒｷ！）と思った

たとえば。。。

Ptototype.js の Event.observe もワンライナーで書けるよ！

//Executable
(HTMLElement.prototype||document.documentElement.__proto__||{}).attachEvent=function(name,func){this.addEventListener(name.replace(/^on/,''),func,false)};

IE が SVG をサポートしたら、僕は間違いなく SVG に没頭する

IE

今日、こんなエントリーを発見しました

Untitled

信じられない！と思った

それの元記事には確かに

Microsoft publicly stated IE will have core engine support for SVG in IE7.x (most likely 7.2)

http://allforces.com/2006/06/01/see-windows-vista/

しかし、具体的な根拠は見つからない

元々記事を見ても、そこまで具体的なことは書いていない。
さらに、コメント欄には

Actually, I did not state that IE7.X will have SVG support. I did say that I think SVG is gaining momentum as part of the interoperable web standards platform, and as such I expect we will add support for it in the future.

As for “IE7.2″ - I have not heard anyone inside or outside Microsoft say that, certainly not me. It’s a myth.

それは神話だそうです。

しかし、求められているのは事実

SVG、canvas、vml、XAML、XULなど、似たようなのはいろいろある。求められているからこそ、いろいろでてくるのだ。
「IE + 他のブラウザ」が同じ何かをサポートした瞬間祭りになるだろう。
来るべきものは確実に来る。
大本命はやはり、 SVG だと思う。ぜひ、実装して欲しい！

文字列外部化による JavaScript 高速化についての考察

JavaScript IE

JavaScript において、文字列を外部化することで本当に高速化できるのかについて考察してみました。
まず、以下のコードを用いて IE 6.0 SP2, Opera 8.5, Firefox 1.5.0.1 でテストしてみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <title>文字列外部化のテスト</title>
        <script type="text/javascript">
//          <![CDATA[
window.onload = function() {

    {
        // 空のfor文
        var start = new Date().getTime();

        for(var i = 0; i < 1000000; i ++) { }

        var end = new Date().getTime();

        document.getElementById('result-0').firstChild.nodeValue = end - start;
    }

    {
        // 文字列を外部化したfor文
        var start = new Date().getTime();
        var text = '(´・∀・`)';

        for(var i = 0; i < 1000000; i ++) { text }

        var end = new Date().getTime();

        document.getElementById('result-1').firstChild.nodeValue = end - start;
    }

    {
        // 文字列リテラルを含むfor文
        var start = new Date().getTime();

        for(var i = 0; i < 1000000; i ++) { '(´・∀・`)' }

        var end = new Date().getTime();

        document.getElementById('result-2').firstChild.nodeValue = end - start;
    }

    {
        // 文字列オブジェクトをnewするfor文
        var start = new Date().getTime();

        for(var i = 0; i < 1000000; i ++) { new String() }

        var end = new Date().getTime();
        document.getElementById('result-3').firstChild.nodeValue = end - start;
    }
}
//          ]]>
        </script>
    </head>

    <body>
        <div><span id="result-0" style="margin:1em;">0</span>[ms]</div>
        <div><span id="result-1" style="margin:1em;">0</span>[ms]</div>
        <div><span id="result-2" style="margin:1em;">0</span>[ms]</div>
        <div><span id="result-3" style="margin:1em;">0</span>[ms]</div>
    </body>
</html>

一番上から、空のfor文、文字列を外部化したfor文、文字列リテラルを含むfor文、文字列オブジェクトをnewするfor文。
どれも、やってることはそんなにかわらない。では、実行速度はどうだろうか？

ちゃんと文字列リテラルは最適化されるだろうか？

Firefoxでの結果

  • 157[ms]
  • 140[ms]
  • 156[ms]
  • 3297[ms]

うん。最適化されてる。

Operaでの結果

  • 297[ms]
  • 219[ms]
  • 219[ms]
  • 1359[ms]

うん。最適化されてる。

IEでの結果

  • 250[ms]
  • 171[ms]
  • 1094[ms]
  • 3235[ms]

・・・・・・・はぁ(ﾟдﾟ)？

考察

ブラウザ界の支配者でこれだけの差が出てるんだから、どのサイトでも文字列の外部化をやらないとまずくないのかな？そう思って調べてみた。
でも、ほとんどのサイトがやっていない。。。

お。やってるサイトがあった！

http://www.live.com/

・・・・ん(・o・)？

これって ＭＳ さんのサイトだよね？うーんとえーと。何かが・・・違う。

そうだ！気付いてるなら頼むからブラウザを直してくださいよ！！！ゲイツさん！！