BlogJava-咖啡伴侣-随笔分类-Web

IE下 eval 内存泄漏

oathleo — Wed, 15 Aug 2012 08:53:00 GMT

下面2段代码是测试代码，IE9下测试
都有泄漏，非IE浏览器没问题。困惑

每秒eval，400个方法调用；200多K的内存泄漏，

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>eval 测试title>
        <script>

    var afunction = function(_name,_mask){
         return false;
    }

    var bfunction = function(_color){
    }

    var cfunction = function(_color){
    }

var _action = function(){

    for(var i=0;i<40;i++){


         var _script = "if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00');";
         _script += "if(afunction('222','333')) cfunction('0xCDCD00'); else if(afunction('222','333')) cfunction('0xCDCD00');  else if(afunction('222','333')) cfunction('0xCDCD00'); else if(afunction('222','333')) cfunction('0xCDCD00'); else if(afunction('222','333')) cfunction('0xCDCD00');";
         var _func = new Function(_script);
          _func();

    }

}

window.onload = function() {
    setInterval(_action,1000);
};

script>

    head>
    <body>

    body>
html>

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>eval 测试title>
        <script>

var _action = function(){

    var afunction = function(_name,_mask){
         return false;
    }

    var bfunction = function(_color){
    }

    var cfunction = function(_color){
    }

    for(var i=0;i<40;i++){
         var _script = "if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00'); else if(afunction('111','222')) bfunction('0xCDCD00');";
         _script += "if(afunction('222','333')) cfunction('0xCDCD00'); else if(afunction('222','333')) cfunction('0xCDCD00');  else if(afunction('222','333')) cfunction('0xCDCD00'); else if(afunction('222','333')) cfunction('0xCDCD00'); else if(afunction('222','333')) cfunction('0xCDCD00');";
         eval(_script);
    }

}

window.onload = function() {
    setInterval(_action,1000);
};

script>

    head>
    <body>

    body>
html>

oathleo 2012-08-15 16:53 发表评论

html5 canvas 在不同浏览器下效率

oathleo — Fri, 03 Aug 2012 00:56:00 GMT

1.目前使用全刷策略，即每秒全刷整张图(xml格式)，复杂图形通讯量在30K左右（gzip压缩），桌面浏览器：FF、Google Chrome 运行CPU占用3%左右

2.移动设备测试效果同1

3.桌面IE8下使用excanvas插件，可以打开看但效率很低，无法实现秒级刷新（IE9下效果未知）

使用canvas已可开发出非IE浏览器实时图形，适合桌面和移动系统

桌面IE8及以下，仍然没有高效的图形展示方案

如客户端局部刷新，应该能提高通讯、展示效率，但大大提升开发难度，但如想IE8下实现秒级刷新，估计只能依靠优秀的局部刷新技术来实现

2

oathleo 2012-08-03 08:56 发表评论

canvas draw椭圆

oathleo — Tue, 31 Jul 2012 02:21:00 GMT

1.canvas draw椭圆通过 scale
2.arc 前必须beginPath

canvas_context.save();
        canvas_context.scale(1, _scale);
        canvas_context.beginPath();
        canvas_context.arc(_centerX, _centerY, parseInt(_bounds[2] * 0.5), 0,(Math.PI/180)*360, true);

        canvas_context.restore();

oathleo 2012-07-31 10:21 发表评论

浏览器里的图形展示

oathleo — Mon, 21 Jun 2010 13:36:00 GMT

Web的功能会越来越强大，这点基本上没有多少人会反对。想想那么多在各种操作系统下跑的五花八门的应用程序，今天基本都能在Web上找到类似的应用，原因太简单了，现在的客户要求已经随着PC和互联网的发展慢慢提高了，他希望能在iphone里看股票，希望在imac上办公，在blackberry里收邮件，谁能跨这么多复杂而多变的各类系统？

只有Web。

有Web就离不开浏览器，当然如果更加激进些，哪天整个操作系统都是web，那可能就没有浏览器一说了。就时下来说，Web真的已经发展的很强大了。我们可以在浏览器里看新闻，逛论坛，采购物品，收发邮件，在线协同工作，操作office，游戏等等等等。如果说Web相当于桌面应用程序还有什么软肋的话，那就是浏览器里的图形展示。

说到这篇文章的重点，先大概梳理一下。目前浏览器端的图形展示解决方案。Web里的图形解决方案笔者自己给他大概分两种，一种叫无插件，一种叫有插件。无插件嘛就是浏览器原生支持，就像打开html一样。有插件嘛当然就是要装插件的，插件就类似ActiveX等。

先说说有插件的，里面按使用人数又有大众版和专业版，大众版笔者罗列了几个

1. Flash，Flex

2. Java Swing,JavaFX

3. Silverlight

4. VRML

在这几项技术Flash，Flex感觉是个比较有前途的方向，面向对象的语言，动静结合的对象，基本各类浏览器都兼容的插件和现实效果，丰富的动态效果和绚丽的展示等，都是目前Web里图形展示的Top one。唯一让人感觉缺憾的是adobe这个设计师出生的公司，总让程序员感觉不爽(要是IBM出的这技术该多好)。所以笔者是对Flex的源码实现比较不齿，这哪里像个精品代码应有的样子。如果说还有什么缺陷，效率是一个，无法集成入搜索是一个，回退算是一个吧。

Swing要在Web展示，只能Applet了，这项被千万java程序员唾骂的技术还是有顽强的生命力。为什么？实在是没有办法，除了它还能谁？(相对java程序员) 其实swing是个很不错的技术，可惜了Sun好像不在意Applet的巨大潜力，只关系它的J2EE去了。唉！好在亡羊补牢，来了个新的JavaFX，只是java程序员已经对Applet心有余悸，JavaFx发展如何，再看看吧。

微软的程序员有大奔头了，因为他们有了SL，看看SL刚刚出来时候，那声势浩大的场面，真的是……如果我是微软程序员，我肯定会搞搞SL，虽然它组件依旧很少，客户端依旧安装率不高。我就不怕，等的就是内置SL，绝对可以秒掉很多Flash的市场。

VRML最近才了解到的一个技术，看了下效果还是很震撼，可能程序员不是很熟原因也是它支持的公司基本都是设计软件的公司。插件的安装率估计是最低的，不了解的不说，一笔带过。

上面说完了有插件，下面轮到无插件了，无插件的估计就那几个：

1. VML

2. SVG

3. Canvas

VML(Vector Markup Language) 微软的早期浏览器支持的图形展示的一种格式。最大的特点就是只有IE支持，微软估计当年根本没想到IE的占有率会跌到60%，唉千万不要低估消费者。你不行就靠边，我用鼠标说话。

SVG(Scalable Vector Graphics) 我在无插件里最看好的技术，XML的子集，W3C下的一个项目，早几年不瘟不火的，这几年起来了，何以见得？HTML5的标准，IE9原生支持，看看各大厂家，谁希望被Adobe的Flash把持这么大一块市场。当然由于微软的原因IE9以前的版本还都需要插件才能支持SVG。

Canvas HTML5里另外一个重头戏，介绍也是很多了，至于为什么会既有SVG又有Canvas我还真的不甚明白，谁知道W3C每天都在琢磨什么呢。最大的特点是2d的方式绘画图形，而不像SVG是标签式的。

oathleo 2010-06-21 21:36 发表评论

Internet Explorer 9 预览版 SVG 第二春

oathleo — Wed, 17 Mar 2010 01:02:00 GMT

微软IE团队总经理迪恩·哈克莫维奇(Dean Hachamovich)今天发表声明称，IE 9与以往的IE版本有很大不同。他表示，微软将每8周对预览版IE 9进行一次升级，第一次升级将在5月中期。但哈克莫维奇没有披露正式版IE 9的发布时间。

下载:Internet Explorer 9 预览版

微软称，预览版IE 9还不是一款完整的浏览器，目前还不包括地址栏等用户导航工具以及安全功能。微软发布了一个它称之为“Test Drive”的网站，方便网站设计人员、应用开发者了解预览版IE 9的功能。

预览版IE 9只支持Windows 7、Windows Vista SP2和Windows Server R2。IE 9可以利用图形处理器的处理能力加速文本和图形的渲染。

用户可以从Test Drive网站下载大小为31MB的预览版IE 9。

=============================================================

里面图形的Demo 包括Graphics 里面的几个例子，都是用SVG实现，包括了Map Chart等。有了IE支持，看样子SVG又要发第二春了。

Canvas暂时还没有看到使用例子。

oathleo 2010-03-17 09:02 发表评论

TWaver3.1 Web SVG推出拓扑新元素 Grid 机架板

oathleo — Tue, 21 Jul 2009 09:00:00 GMT

摘要: 阅读全文

oathleo 2009-07-21 17:00 发表评论

IE下js无法继承toString方法

oathleo — Mon, 06 Jul 2009 05:50:00 GMT

override: function(origclass, overrides){
            if (overrides) {
                var p = origclass.prototype;
                for (var method in overrides) {
                //IE下无法遍历到
               //"toString", "toLocaleString", "valueOf",
               //"hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable"这几个方法

                    p[method] = overrides[method];
                }
                if (TWaver.isIE) { //IE 问题，目前只有'toString'用到，先处理
                    if (p['toString'] != overrides['toString']) {
                        p['toString'] = overrides['toString'];
                    }
                }
            }
        }

oathleo 2009-07-06 13:50 发表评论

JS instanceof 判断类型问题

oathleo — Mon, 29 Jun 2009 10:11:00 GMT

判断变量类型：一般情况下，可以先用typeof 运算符，如果结果是"object"，再用instanceof来判断；
特别的地方是：
instanceof不认为原始类型值的变量是对象，

   1. var temp="a string for test";
   2. //下面这句返回"string"
   3. alert( typeof temp);
   4. //下面这句返回"false"
   5. alert(temp instanceof String);
   6.
   7. //看看Ext内部实现，判断String类型
   8. if( typeof temp== "string"){
   9. }

其他附加问题：

null：表示尚未存在的对象，注意，尽管尚未存在，也是个对象啊，所以用typeof检测一个null值变量的结果是Object；不过，为了便于写if语句，在js中，"undefined==false", "null=false", 因此，"undefined==null"。
整数：最容易犯的错误就是，忘了070其实是个八进制数，相当于十进制的56；
浮点数：“在进行运算之前，真正存储的是字符串”——这应该是解释执行的本质决定的吧——直接后果是，alert(0.8)这样的语句可以正确输出，而alert(2*0.8)的输出就成了"2.40000000000000003"
数字边界：数字有几个边界值，分别是Number.MAX_VALUE(最大值), Number.MIN_VALUE(最小值), Number.POSITIVE_INFINITY(正无穷), Number.NEGATIVE_INFINITY(负无穷), Infinity(无穷大，-Infinity，这个有点莫名其妙，不知道为啥又搞出一套)；特别地，还有一个isFinit(iNumber)函数来判断数字是否为无穷大。
NaN：一些需要数字作为参数的函数，当传入的实参无法转换为数字时，往往会返回这个值；关于NaN，最重要的就是要记住NaN!=NaN，因此判断一个变量是否为NaN，一定要使用isNaN(var)函数。
将字符串转换为数字：sVar.parseInt() 是最常用的函数，也最容易出错，为了保险起见，最好每次调用的时候，都加上“进制”的参数，比如：a.parseInt(10)，就制定了按十进制转换字符串a；Number(sVar)也是一种转换方式，不同的是，它要求整个字符串都得是有效数字，因此Number("4.5.5")将返回NaN；

oathleo 2009-06-29 18:11 发表评论

JS Map 总结

oathleo — Thu, 18 Jun 2009 08:12:00 GMT

js 里 Object本身可以做为Map。
条件是Key只能是String

如果要用对象做为Key，这个Map可以来实现。
效率上由于_getIndex方法每次都要遍历，耗时很长，所以通常在1:10左右

总结以上，如果Map的Key是String，最好还是用Object来实现。
而且用in来遍历Map，效率上不是网上说的那么差，和for()差不多

TWaver.Map = function(){
    this._entrys = null;
    this.initialize.apply(this, arguments);
}

TWaver.Map.prototype = {
    initialize: function(){
        this._entrys = new Array();
    },
    put: function(key, value){
        if (key == null || key == undefined) {
            return;
        }
        var index = this._getIndex(key);
        if (index == -1) {
            var entry = new Object();
            entry.key = key;
            entry.value = value;
            this._entrys[this._entrys.length] = entry;
        }else{
            this._entrys[index].value = value;
        }
    },
    get: function(key){
        var index = this._getIndex(key);
        return (index != -1) ? this._entrys[index].value : null;
    },
    remove: function(key){
        var index = this._getIndex(key);
        if (index != -1) {
            this._entrys.splice(index, 1);
        }
    },
    clear: function(){
        this._entrys.length = 0;;
    },
    contains: function(key){
        var index = this._getIndex(key);
        return (index != -1) ? true : false;
    },
    getCount: function(){
        return this._entrys.length;
    },
    getEntrys: function(){
        return this._entrys;
    },
    _getIndex: function(key){
        if (key == null || key == undefined) {
            return -1;
        }
        var _length = this._entrys.length;
        for (var i = 0; i < _length; i++) {
            var entry = this._entrys[i];
            if (entry == null || entry == undefined) {
                continue;
            }
            if (entry.key === key) {//equal
                return i;
            }
        }
        return -1;
    }
}

oathleo 2009-06-18 16:12 发表评论

快速排序（转）

oathleo — Wed, 17 Jun 2009 04:10:00 GMT

在ie6.0中快速排序算法比Array对象的sort方法快多了，对于元素比较少的，快速排序的速度基本上是sort方法的5倍左右，对于30000个元素快速排序是sort方法速度的十几倍
在ff2.0中两种排序算法速度基本上差不多，快速排序算法稍微快一点

oathleo 2009-06-17 12:10 发表评论

TWaver2.6 Released!电信拓扑Web解决方案

oathleo — Wed, 17 Dec 2008 03:15:00 GMT

摘要: 电信拓扑Web解决方案阅读全文

oathleo 2008-12-17 11:15 发表评论

Javascript与CSS在IE和Firefox中的误区及区别（引用）

oathleo — Mon, 07 Jul 2008 02:40:00 GMT

摘要: 阅读全文

oathleo 2008-07-07 10:40 发表评论

SVG主要元素和属性

oathleo — Tue, 01 Jul 2008 07:18:00 GMT

摘要: 阅读全文

oathleo 2008-07-01 15:18 发表评论

JS 常用功能

oathleo — Mon, 30 Jun 2008 10:21:00 GMT

摘要: 阅读全文

oathleo 2008-06-30 18:21 发表评论

JS 类的公有私有

oathleo — Tue, 17 Jun 2008 06:23:00 GMT

摘要: 阅读全文

oathleo 2008-06-17 14:23 发表评论

IE 兼容问题

oathleo — Thu, 29 May 2008 05:59:00 GMT

摘要: 阅读全文

oathleo 2008-05-29 13:59 发表评论

Ext服务器交互技术详解(一)

oathleo — Mon, 07 Apr 2008 03:00:00 GMT

摘要: Ext是一个非常好的Ajax框架，其华丽的外观表现确实令我们折服，然而一个应用始终离开不服务器端，因此在实现开发中我们需要对Ext与服务器端的交互技术有较为详细的了解，在开发中才能游刃有余地应用。本文对Ext应用中与服务器交互的常用方法作具体的介绍，本文的内容大部份来源于《ExtJS实用开发指南》。　　总体来说，Ext与服务器端的交互应用可以归结为三种类型，包含表单FormPanel的处理(提交、... 阅读全文

oathleo 2008-04-07 11:00 发表评论

BlogJava-咖啡伴侣-随笔分类-Web

IE下 eval 内存泄漏

html5 canvas 在不同浏览器下效率

canvas draw椭圆

浏览器里的图形展示

Internet Explorer 9 预览版 SVG 第二春

TWaver3.1 Web SVG推出 拓扑新元素 Grid 机架板

IE下js无法继承toString方法

JS instanceof 判断类型 问题

JS Map 总结

快速排序 （转）

TWaver2.6 Released!电信拓扑Web解决方案

Javascript与CSS在IE和Firefox中的误区及区别（引用）

SVG主要元素和属性

JS 常用功能

JS 类的公有私有

IE 兼容问题

Ext服务器交互技术详解(一)

TWaver3.1 Web SVG推出拓扑新元素 Grid 机架板

JS instanceof 判断类型问题

快速排序（转）