2

【茶包射手日記】IE 開新視窗遲遲無反應

 1 year ago
source link: https://blog.darkthread.net/blog/ie-showmodaldialog-delay/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

【茶包射手日記】IE 開新視窗遲遲無反應

2022-10-31 09:54 PM 0 337

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

依直覺推論，超連結都顯示出來了代表後端處理都做法，開新視窗不是用 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>

測試結果揭曉：

Fig1_638028212594527710.gif

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK