使用者投訴,某審核作業網頁,點選超連結應另開視窗,卻遲遲無反應,懷疑我們系統有狀況,效能出了問題。

依直覺推論,超連結顯示出來了代表後端處理已完成,開新視窗不是用 showModalDialog 就是 window.open(),都發生在瀏覽器端,應與伺服器端效能無關;超連結網頁來自其他系統位於不同主機,嫌疑反而更大一些。但既然被人說我們吃了兩碗粉,還是得自清一下。

若問題出在要開啟的外部網頁回應過慢,會造成這種現象嗎?遇到這種狀況,瀏覽器是會先開視窗顯示空白網頁等內容,還是等到第一個 Byte 傳回才顯示?好問題! 我過去沒認真研究過,但印象中是前者,先顯示空白網頁等著才對。

問明使用者用的是 IE,心裡差不多有底,感覺 showModalDialog 作怪的機率頗高。(我對它成見很深呀! 好多見鬼案例都跟它有關)

寫一個簡單的測試網頁,分別用 window.open() 及 showModalDialog() 顯示一個 3 秒才會回傳的網頁:

<!DOCTYPE html>
<html>
    <body>
        <button id="btn" onclick="test(false)">window.open</button>
        <button onclick="test(true)">showModalDialog</button>
        <script>
            function test(showModal) {
                var btn = document.getElementById('btn');
                var btnRect = btn.getBoundingClientRect();
                var x = btnRect.left + window.screenX ;
                var y = btnRect.top + btnRect.height + window.screenY + 100;
                if (showModal) {
                    window.showModalDialog('slow.aspx',null,
                        "dialogLeft=" + x +"px;dialogTop=" + y + "px;dialogWidth:100px;dialogHeight:50px")
                }
                else {
                    var win = window.open('slow.aspx', '_blank', 
                        "popup=yes,width=100,height=50,left=" + x + ",top=" + y);
                }
            }
        </script>
    </body>
</html>

slow.aspx 用簡單的 Thread.Sleep(3000) 模擬 3 秒後才傳回結果:

<%@Page Language="C#"%>
<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3*1000);
        Response.Write("OK");
    }
</script>

測試結果揭曉:

window.open() 會先顯示空白網頁等結果;showModalDialog() 則會卡住無反應,網頁內容傳回來才顯示。

所以,問題出在目標網頁回應過慢,但因為是用 showModalDialog(),IE 沒顯示已連上網址等待回應的過程,被使用者認為清單介面偷懶沒動作而背了黑鍋。其實一開始我也沒 100% 把握,做完實驗心裡篤定,大方拿出不在場證明並通報問題網頁負責人調查,結案。

Experiment of window.open() and showModalDialog() behavior when openning slow web page.


Comments

# by 小雞

處理都做法=>是"的"嗎

# by Jeffrey

to 小雞,寫到昏頭了,已更正,謝謝提醒。

# by player

Modale(強制回應) 與 Modaless(非強制回應) 的區別。前者會卡UI,直到它返回。 window.open 的特性應該算是 Modaless 。 window.showModalDialog 是 Modale 。 以前有個 jQuery BlockUI Plugin 可以做為需要長時等待的提示。而不是讓User空等,以為UI卡死了。

# by Jeffrey

to player, 強迫回應的關鍵在於使用者必須完成該視窗的動作再返回,等待過程沒有進度資訊,使用者無從得知是程式正常運作等回應,還是頁面當掉了,算是槽糕的體驗,但因為是 IE,現在也無需計較了。

Post a comment