每秒eval，400個(gè)方法調(diào)用；200多K的內(nèi)存泄漏，
<!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>
2.<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>
<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 發(fā)表評(píng)論
]]>2.移動(dòng)設(shè)備測試效果同1
3.桌面IE8下使用excanvas插件，可以打開看但效率很低，無法實(shí)現(xiàn)秒級(jí)刷新（IE9下效果未知）
使用canvas已可開發(fā)出非IE瀏覽器實(shí)時(shí)圖形，適合桌面和移動(dòng)系統(tǒng)
桌面IE8及以下，仍然沒有高效的圖形展示方案
如客戶端局部刷新，應(yīng)該能提高通訊、展示效率，但大大提升開發(fā)難度，但如想IE8下實(shí)現(xiàn)秒級(jí)刷新，估計(jì)只能依靠優(yōu)秀的局部刷新技術(shù)來實(shí)現(xiàn)
2
2
oathleo 2012-08-03 08:56 發(fā)表評(píng)論
]]>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();
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 發(fā)表評(píng)論
]]>Web的功能會(huì)越來越強(qiáng)大，這點(diǎn)基本上沒有多少人會(huì)反對(duì)。想想那么多在各種操作系統(tǒng)下跑的五花八門的應(yīng)用程序，今天基本都能在Web上找到類似的應(yīng)用，原因太簡單了，現(xiàn)在的客戶要求已經(jīng)隨著PC和互聯(lián)網(wǎng)的發(fā)展慢慢提高了，他希望能在iphone里看股票，希望在imac上辦公，在blackberry里收郵件，誰能跨這么多復(fù)雜而多變的各類系統(tǒng)？
只有Web。
有Web就離不開瀏覽器，當(dāng)然如果更加激進(jìn)些，哪天整個(gè)操作系統(tǒng)都是web，那可能就沒有瀏覽器一說了。就時(shí)下來說，Web真的已經(jīng)發(fā)展的很強(qiáng)大了。我們可以在瀏覽器里看新聞，逛論壇，采購物品，收發(fā)郵件，在線協(xié)同工作，操作office，游戲等等等等。如果說Web相當(dāng)于桌面應(yīng)用程序還有什么軟肋的話，那就是瀏覽器里的圖形展示。
說到這篇文章的重點(diǎn)，先大概梳理一下。目前瀏覽器端的圖形展示解決方案。Web里的圖形解決方案筆者自己給他大概分兩種，一種叫無插件，一種叫有插件。無插件嘛就是瀏覽器原生支持，就像打開html一樣。有插件嘛當(dāng)然就是要裝插件的，插件就類似ActiveX等。
先說說有插件的，里面按使用人數(shù)又有大眾版和專業(yè)版，大眾版筆者羅列了幾個(gè)
1.
Flash，Flex
2.
Java
Swing,JavaFX
3.
Silverlight
4.
VRML
在這幾項(xiàng)技術(shù)Flash，Flex感覺是個(gè)比較有前途的方向，面向?qū)ο蟮恼Z言，動(dòng)靜結(jié)合的對(duì)象，基本各類瀏覽器都兼容的插件和現(xiàn)實(shí)效果，豐富的動(dòng)態(tài)效果和絢麗的展示等，都是目前Web里圖形展示的Top one。唯一讓人感覺缺憾的是adobe這個(gè)設(shè)計(jì)師出生的公司，總讓程序員感覺不爽(要是IBM出的這技術(shù)該多好)。所以筆者是對(duì)Flex的源碼實(shí)現(xiàn)比較不齒，這哪里像個(gè)精品代碼應(yīng)有的樣子。如果說還有什么缺陷，效率是一個(gè)，無法集成入搜索是一個(gè)，回退算是一個(gè)吧。
Swing要在Web展示，只能Applet了，這項(xiàng)被千萬java程序員唾罵的技術(shù)還是有頑強(qiáng)的生命力。為什么？實(shí)在是沒有辦法，除了它還能誰？(相對(duì)java程序員) 其實(shí)swing是個(gè)很不錯(cuò)的技術(shù)，可惜了Sun好像不在意Applet的巨大潛力，只關(guān)系它的J2EE去了。唉！好在亡羊補(bǔ)牢，來了個(gè)新的JavaFX，只是java程序員已經(jīng)對(duì)Applet心有余悸，JavaFx發(fā)展如何，再看看吧。
微軟的程序員有大奔頭了，因?yàn)樗麄冇辛?/span>SL，看看SL剛剛出來時(shí)候，那聲勢浩大的場面，真的是……如果我是微軟程序員，我肯定會(huì)搞搞SL，雖然它組件依舊很少，客戶端依舊安裝率不高。我就不怕，等的就是內(nèi)置SL，絕對(duì)可以秒掉很多Flash的市場。
VRML最近才了解到的一個(gè)技術(shù)，看了下效果還是很震撼，可能程序員不是很熟原因也是它支持的公司基本都是設(shè)計(jì)軟件的公司。插件的安裝率估計(jì)是最低的，不了解的不說，一筆帶過。
上面說完了有插件，下面輪到無插件了，無插件的估計(jì)就那幾個(gè)：
1. VML
2. SVG
3. Canvas
VML(Vector Markup Language) 微軟的早期瀏覽器支持的圖形展示的一種格式。最大的特點(diǎn)就是只有IE支持，微軟估計(jì)當(dāng)年根本沒想到IE的占有率會(huì)跌到60%，唉千萬不要低估消費(fèi)者。你不行就靠邊，我用鼠標(biāo)說話。
SVG(Scalable Vector Graphics) 我在無插件里最看好的技術(shù)，XML的子集，W3C下的一個(gè)項(xiàng)目，早幾年不瘟不火的，這幾年起來了，何以見得？HTML5的標(biāo)準(zhǔn)，IE9原生支持，看看各大廠家，誰希望被Adobe的Flash把持這么大一塊市場。當(dāng)然由于微軟的原因IE9以前的版本還都需要插件才能支持SVG。
Canvas HTML5里另外一個(gè)重頭戲，介紹也是很多了，至于為什么會(huì)既有SVG又有Canvas我還真的不甚明白，誰知道W3C每天都在琢磨什么呢。最大的特點(diǎn)是2d的方式繪畫圖形，而不像SVG是標(biāo)簽式的。
oathleo 2010-06-21 21:36 發(fā)表評(píng)論
]]>
下
載:Internet
Explorer 9 預(yù)覽版
微軟稱，預(yù)覽版IE 9還不是一款完整的瀏覽器，目前還不包括地址欄等用戶導(dǎo)航工具以及安全功能。微軟發(fā)布了一個(gè)它稱之為“Test
Drive”的網(wǎng)站，方便網(wǎng)站設(shè)計(jì)人員、應(yīng)用開發(fā)者了解預(yù)覽版IE 9的功能。
預(yù)覽版IE 9只支持Windows 7、Windows Vista SP2和Windows Server R2。IE
9可以利用圖形處理器的處理能力加速文本和圖形的渲染。
用戶可以從Test Drive網(wǎng)站下載大小為31MB的預(yù)覽版IE 9。
=============================================================
里面圖形的Demo 包括Graphics 里面的幾個(gè)例子，都是用SVG實(shí)現(xiàn)，包括了Map Chart等。有了IE支持，看樣子SVG又要發(fā)第二春了。
Canvas暫時(shí)還沒有看到使用例子。
oathleo 2010-03-17 09:02 發(fā)表評(píng)論
]]>oathleo 2009-07-21 17:00 發(fā)表評(píng)論
]]>??????????????? var p = origclass.prototype;
??????????????? for (var method in overrides) {
??????????????? //IE下無法遍歷到
?????????????? //"toString", "toLocaleString", "valueOf",
?????????????? //"hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable"這幾個(gè)方法
??????????????????? p[method] = overrides[method];
??????????????? }
??????????????? if (TWaver.isIE) {? //IE 問題，目前只有'toString'用到，先處理
??????????????????? if (p['toString'] != overrides['toString']) {
??????????????????????? p['toString'] = overrides['toString'];
??????????????????? }
??????????????? }
??????????? }
??????? }
oathleo 2009-07-06 13:50 發(fā)表評(píng)論
]]>?特別的地方是：
??? instanceof不認(rèn)為原始類型值的變量是對(duì)象，
???1.?var?temp="a?string?for?test";???
???2.?//下面這句返回"string"???
???3.?alert(?typeof?temp);???
???4.?//下面這句返回"false"???
???5.?alert(temp?instanceof?String);???
???6.???
???7.?//看看Ext內(nèi)部實(shí)現(xiàn)，判斷String類型?
???8. if(? typeof temp== "string"){
?? 9. }
???2.?//下面這句返回"string"???
???3.?alert(?typeof?temp);???
???4.?//下面這句返回"false"???
???5.?alert(temp?instanceof?String);???
???6.???
???7.?//看看Ext內(nèi)部實(shí)現(xiàn)，判斷String類型?
???8. if(? typeof temp== "string"){
?? 9. }
其他附加問題：
- null：表示尚未存在的對(duì)象，注意，盡管尚未存在，也是個(gè)對(duì)象啊，所以用typeof檢測一個(gè)null值變量的結(jié)果是Object；不過，為了便于寫if語句，在js中，"undefined==false", "null=false", 因此，"undefined==null"。
- 整數(shù)：最容易犯的錯(cuò)誤就是，忘了070其實(shí)是個(gè)八進(jìn)制數(shù)，相當(dāng)于十進(jìn)制的56；
- 浮點(diǎn)數(shù)：“在進(jìn)行運(yùn)算之前，真正存儲(chǔ)的是字符串”——這應(yīng)該是解釋執(zhí)行的本質(zhì)決定的吧——直接后果是，alert(0.8)這樣的語句可以正確輸出，而alert(2*0.8)的輸出就成了"2.40000000000000003"
- 數(shù)字邊界： 數(shù)字有幾個(gè)邊界值，分別是Number.MAX_VALUE(最大值), Number.MIN_VALUE(最小值), Number.POSITIVE_INFINITY(正無窮), Number.NEGATIVE_INFINITY(負(fù)無窮), Infinity(無窮大，-Infinity，這個(gè)有點(diǎn)莫名其妙，不知道為啥又搞出一套)；特別地，還有一個(gè)isFinit(iNumber)函數(shù)來判 斷數(shù)字是否為無窮大。
- NaN：一些需要數(shù)字作為參數(shù)的函數(shù)，當(dāng)傳入的實(shí)參無法轉(zhuǎn)換為數(shù)字時(shí)，往往會(huì)返回這個(gè)值；關(guān)于NaN，最重要的就是要記住NaN!=NaN，因此判斷一個(gè)變量是否為NaN，一定要使用isNaN(var)函數(shù)。
- 將字符串轉(zhuǎn)換為數(shù)字：sVar.parseInt() 是最常用的函數(shù)，也最容易出錯(cuò)，為了保險(xiǎn)起見，最好每次調(diào)用的時(shí)候，都加上“進(jìn)制”的參數(shù)，比如：a.parseInt(10)，就制定了按十進(jìn)制轉(zhuǎn)換字 符串a(chǎn)；Number(sVar)也是一種轉(zhuǎn)換方式，不同的是，它要求整個(gè)字符串都得是有效數(shù)字，因此Number("4.5.5")將返回NaN；
oathleo 2009-06-29 18:11 發(fā)表評(píng)論
]]>如果要用對(duì)象做為Key，這個(gè)Map可以來實(shí)現(xiàn)。
效率上由于_getIndex方法每次都要遍歷，耗時(shí)很長，所以通常在1:10左右
總結(jié)以上，如果Map的Key是String，最好還是用Object來實(shí)現(xiàn)。
而且用in來遍歷Map，效率上不是網(wǎng)上說的那么差，和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 發(fā)表評(píng)論
]]><script>
function rand(m,n){
????? //生成一個(gè)m、n之間的整數(shù)
??????? var i=Math.random();
??????? return Math.round((n-m)*i+m);
?}
?????????? ?
?????????? ?
function getRandomArr(m,n,l){
? //m：生成隨即整數(shù)的最小值，n：生成隨即整數(shù)的最大值，l：生成的數(shù)組的長度
??? var resultArr=[];
??? for(var i=0;i<l;i++){
??????? resultArr.push(rand(m,n))
??? }
??? return resultArr;
}
??? ?
function partition(a,st,en) ?
{ ?
??? var s=st; ?
??? var e=en+1; ?
??? var temp=a[s]; ?
??? while(1) ?
??? { ?
??????? while(a[++s]<temp); ?
??????? while(a[--e]>temp); ?
??????? if(s>e)break; ?
??????? var tem=a[s]; ?
??????? a[s]=a[e]; ?
??????? a[e]=tem; ?
??? } ?
??? a[st]=a[e]; ?
??? a[e]=temp; ?
??? return e; ?
} ?
function doSort(a,s,e) ?
{ ?
??? if(s<e) ?
??? { ?
??????? var pos=partition(a,s,e); ?
??????? doSort(a,s,pos-1); ?
??????? doSort(a,pos+1,e); ?
??? } ?
} ?
??? ?
Array.prototype.quickSort = function() ?
{ ?
????? doSort(this,0,this.length-1); ?
}
function sortIntF(a,b){return a-b}
function pk(num){
??? //num: 用于排序的數(shù)組的元素個(gè)數(shù)
??? //生成用于排序的數(shù)組
??? var arr=getRandomArr(1,999999,num);
??? ?
??? //當(dāng)元素個(gè)數(shù)小于10000時(shí)，執(zhí)行n次取平均值 ?
??? var n=Math.ceil(10000/num);
??? ?
??? //生成多個(gè)用于排序的數(shù)組的拷貝
??? var quickSortArrs=[];
??? var sortArrs=[];
??? for(var i=0;i<n;i++){
??????? quickSortArrs.push(arr.slice(0));
??????? sortArrs.push(arr.slice(0));
??? }
??? ?
??? var t1=new Date();
??? ?
??? for(var i=0;i<n;i++){
??????? quickSortArrs[i].quickSort();
??? }
??? ?
??? var t2=new Date();
??? ?
??? for(var i=0;i<n;i++){
??????? sortArrs[i].sort(sortIntF);
??? }
??? ?
??? var t3=new Date();
??? ?
??? alert("性能比較，對(duì)于"+num+"個(gè)元素的數(shù)組，平均每次排序花費(fèi)時(shí)間如下：\n"
??? +"Array.prototype.sort："+((t3-t2)/n)+"ms\n"
??? +"quickSort："+((t2-t1)/n)+"ms\n"
??? );
??? ?
??? alert("排序結(jié)果是否正確："+(sortArrs[0].join()==quickSortArrs[0].join()));
}
pk(500);
pk(2000);
pk(30000);
</script>
oathleo 2009-06-17 12:10 發(fā)表評(píng)論
]]>oathleo 2008-12-17 11:15 發(fā)表評(píng)論
]]>oathleo 2008-07-07 10:40 發(fā)表評(píng)論
]]>oathleo 2008-07-01 15:18 發(fā)表評(píng)論
]]>oathleo 2008-06-30 18:21 發(fā)表評(píng)論
]]>oathleo 2008-06-17 14:23 發(fā)表評(píng)論
]]>oathleo 2008-05-29 13:59 發(fā)表評(píng)論
]]>oathleo 2008-04-07 11:00 發(fā)表評(píng)論
]]>