一些JS開發心得

文章目錄

• FF7以下不支援座標平移
• 匿名函數的問題
• Chrome/Safari
• 匿名JS的處理
• 調試是否需要重新載入以及代碼格式化工具
• 內建JS執行採樣器
• 項目中表現出的瀏覽器效能

各個瀏覽器的差異問題Opera

HTML5提供了繪製圓弧的函數arc其定義為:

Arc(x,y,radius,startAngle,endAngle,antiClockwise)

該函數的最後一個參數表示是順時針還是逆時針繪製圓弧，在Opera下最後一個參數必須輸入，否則函數會出錯，圓弧無法繪製出來。而在IE9，FF, Chrome, Safari下最後一個參數可以不指定。

FireFoxFF7以下不支援座標平移

這個主要通過html5的isPointInPath可以發現，代碼如下

<DIV id="testDiv"><canvas id="test"width="500" height ="500"></canvas></DIV><SCRIPT>var canvasNode =document.getElementById('test');var ctx = canvasNode.getContext('2d');ctx.translate(8,8);ctx.beginPath();ctx.arc(0,0,8,0,2*Math.PI,true);ctx.closePath();ctx.stroke();alert(ctx.isPointInPath(8,8));</SCRIPT>

按照W3C的定義isPointInPath需要考慮座標平移後的情況，上面的代碼雖然繪製圓弧的函數制定圓心座標為0,0但是，之前做過了平移，所以繪製完畢後，圓心(8,8)(實際座標)應該在園內。FF6的測試結果是False, FF7以上版本解決了這個問題。

匿名函數的問題

以下是代碼片斷

destroy: function(){    console.log('args number:' +arguments.length + (arguments.length > 0?' first arg:' + arguments[0]:''));.....     this.inherited(arguments);}

arguments是函數對象的內建屬性，是參數數組。在這樣的上下文中，argumengts應該是空數組。可是在不同瀏覽器下，執行完全一樣的介面操作，我觀測到的控制台輸出分別為

FF 6:args number:1 firstarg:0args number:0args number:1 firstarg:-1Chrome:args number:0args number:0args number:0args number:0args number:0args number:0Safari:args number:0args number:0args number:0args number:0args number:0IE9日誌: args number:0 日誌: args number:0 日誌: args number:0 日誌: args number:0日誌: args number:0

可見FireFox對於匿名函數的arguments處理存在BUG，在項目中通過其他方式規避了這個問題。

Chrome/Safari

當Dom結構比較複雜的時候，以WebKit為核心的瀏覽器在處理contentable=true的DIV時存在BUG,使得該屬性失效。這個問題的解決方案為在DIV外增加一個IFRAME使得該DIV和外界Dom隔離，任你外面如何複雜，IFRAME裡面的還是很簡單的。

各瀏覽器比較

這個標題比較大，這裡只談一下調試器和瀏覽器效能

匿名JS的處理

由於項目使用了dojo,dojo的一大特點就是JS動態載入，其原理是JS執行過程中通過調用dojo.require這個API向伺服器發送http請求，獲得JS文本，再通過eval函數執行對應的js代碼。

對於這樣的文本，chrome的調試器可以直接顯示對應的檔案清單，chrome15以上版本會對這個JS的目錄做了個整理輸出。在IE下這些匿名JS全是一些編號，但是選擇這些JS文本可以顯示。在FireBug下，如果是源碼包，可以看到這些JS。如果是發布包這些JS也是一些編號，但是比較糟糕的是，JS文本看不到。Safari調試器完全感知不到這些JS。

調試是否需要重新載入以及代碼格式化工具

相比於chrome/safari。IE，Firebug要求重新載入JS。另外除了FireBug其餘瀏覽器的調試器都提供了代碼格式化工具，這樣非常方便對於混淆JS的調試。

內建JS執行採樣器

IE8、9的調試器都提供了查看器功能。在查看器簽頁，點擊開始採樣（IE8下為開始設定檔），瀏覽器開始記錄從現在開始，JS函數的執行情況。點擊結束採樣，下方的表格會出現所有執行的JS函數列表，這個功能對於一個新手定位問題非常的有協助。同時顯示的JS執行情況支援調用棧視圖，非常的棒。

 

	匿名JS處理	調試時是否需要重新載入	調試器內的JS格式化	內建JS執行情況統計工具
Chrome	最佳，可以很清楚的顯示	不需要	支援	NA
IE8,9	一般，可以顯示文本，但不能顯示檔案名稱	需要	支援	有
FireFox	一般	需要	不支援	NA
Safari	差，不能顯示	不需要	支援	NA

通過以上表格，我個人感覺Chrome的調試是非常便利的，確實應了一句話“Chrome能蠶食FireFox的原因之一就是WEB開發人員越來越喜歡使用Chrome的調試器”。 IE表現中庸， Firebug比較一般。

項目中表現出的瀏覽器效能

項目中存在一個大表格，有兩百條資料，每一列都用了dojo的FilteringSelect,。所以展現這樣一個表格非常的耗時（當然，後續的設計作了最佳化）。在這樣的一個情境下，各瀏覽器的表現分別為

FireFox和Chrome/Safari在介面失去響應近25 秒後彈出了提示框------問使用者是否繼續等待。這個時候點擊確定後繼續等待，介面還是可以出來。
IE在介面失去響應近30秒後，介面還是出來了。

在Opera下介面隨著指令碼的執行不斷地變化，11秒就全部搞定，果然是最快的瀏覽器。

從上面我個人感覺FireFox和Chrome的處理方式不太好，彈出的對話方塊很容易讓人誤以為指令碼存在問題，導致瀏覽器忙；Opera是一邊渲染一邊執行，給使用者的感覺最佳。IE則是一個悶頭做事的小夥子，只要能搞定，就決不吭聲，雖然它不快：）