JavaScript >> Javascript 文檔 >  >> JavaScript

是什麼決定了腳本是長時間運行的?

Web 開發人員經常遇到的編程障礙之一是可怕的長時間運行的腳本對話框(也稱為失控腳本對話框)。每當您的 JavaScript 代碼執行時間過長時,就會顯示這些可怕的對話框。 Web 編程的基本規則是用戶永遠不應該看到這個對話框,因為它表明缺乏適當的 JavaScript 代碼架構。或者簡單地說:你的代碼做的太多了。

引用 JavaScript 的創建者 Brendan Eich 的話說,“[JavaScript] 在整秒內執行可能是做錯了什麼......”我個人的閾值實際上要小得多:在任何瀏覽器上執行任何腳本的時間都不應該超過 100 毫秒。任何時候。如果需要更長的時間,則必須將處理分成更小的塊。

儘管如此,很少有 Web 開發人員真正了解是什麼觸發了各種瀏覽器中長時間運行的腳本對話框,包括我自己。所以我決定坐下來弄清楚在什麼情況下你會看到這個對話框。基本上有兩種不同的方法可以確定腳本是否長時間運行。首先是跟踪執行了多少語句,其次是計算腳本執行所需的時間。毫不奇怪,每個瀏覽器採用的方法略有不同。

Internet Explorer 根據 JScript 引擎已執行的語句總數確定腳本是否長時間運行。默認情況下,該值為 500 萬條語句,並且可以通過註冊表設置進行更改。當您的腳本超過此最大語句數時,您將看到以下對話框:

消息“此頁面上的腳本導致 Internet Explorer 運行緩慢。如果它繼續運行,您的計算可能會變得無響應。”如果在技術上不准確,那就有點苛刻了。這裡的選項是停止腳本或允許它繼續運行。顯示對話框時腳本執行完全停止。如果您選擇繼續運行腳本,則執行的語句計數將被重置。如果語句數再次達到最大值,您將再次看到該對話框。

Firefox 通過計時腳本引擎連續執行代碼的時間來確定腳本是否長時間運行。默認時間設置為 10 秒,可以通過 about:config 進行更改。請注意,顯示警報等模式對話框的時間量不計入腳本引擎執行代碼。當達到此執行時間時,Firefox 會顯示一個對話框,其中包含以下消息:

Firefox 的消息,“此頁面上的腳本可能正忙,或者它可能已停止響應。你現在可以停止腳本,在調試器中打開腳本,或者讓腳本繼續運行,”比 IE 更具描述性,可以說沒有那麼可怕。此對話框上的選項是停止腳本、調試腳本或允許腳本繼續。與 Internet Explorer 一樣,允許腳本繼續執行會重置腳本執行的超時。只有在給定頁面上安裝並激活了 Firebug 時,才會出現“調試腳本”按鈕;調試腳本會帶您進入導致 Firebug 問題的腳本視圖。

Safari 還使用腳本引擎執行時間來確定腳本何時變為長時間運行。在對 WebKit 源代碼進行一些挖掘之後,看起來默認超時是 5 秒。當達到該閾值時,將顯示以下對話框:

這裡的消息是,“頁面 [url] 上的腳本使 Safari 無響應。你想繼續運行腳本,還是停止它?”再一次,對於用戶來說並不是非常理想。您可以通過在“開發”菜單下選擇“禁用 Runaway JavaScript Timer”來關閉長時間運行的腳本檢測。

Chrome 有點難以追踪。長時間運行的腳本控制似乎與任何給定選項卡的崩潰控制相關聯。我已經深入研究了源代碼,但無法確定腳本的確切限制,但它似乎是基於時間的,可能是 10 秒(可能是 5 或 10 秒,以匹配 Safari 或火狐)。我正在嘗試與項目中的某個人取得聯繫以確認。儘管如此,長時間運行的腳本會導致以下對話框:

顯然,Chrome 對話框比其他瀏覽器更惡毒一些。單擊“等待”會導致頁面繼續處理,直到達到下一個腳本超時;點擊“Kill pages”會從內存中刪除整個頁面,並替換為佔位符。

Opera 是一個有趣的案例:它似乎沒有長時間運行的腳本限制。我運行了幾個測試,即使在幾分鐘的代碼執行後也完成了。在此期間,瀏覽器大多保持響應,這令人印象深刻。目前我不確定這種方法是好事還是壞事,但它就是實施的。

無論使用哪種瀏覽器,您的用戶都不應遇到此對話框。在部署到生產環境之前,定期對站點或 Web 應用程序中的 JavaScript 進行性能測試非常重要。您可以使用許多工具,例如 Firebug 的分析器 (Firefox)、YUI Profiler(所有瀏覽器)和 Internet Explorer 8 的 Profiler。您應該尋找在任何給定瀏覽器上需要 100 毫秒或更長時間的任何單個腳本執行;應該評估那些涉及如此長時間執行的方法的性能問題。確保你不使用 Chrome 作為基準,因為它的 JavaScript 執行速度比其他速度快幾個數量級(Firefox 3.1 和最新的 WebKit nightlies 也是如此)。最好以 Internet Explorer 為基準,然後再看看其他瀏覽器;由於 IE 通常是最慢的 JavaScript 引擎,因此修復它的問題肯定也會修復其他瀏覽器中的問題。

更新 (1/9): 為每個對話框顯示的消息添加了更多描述。

翻譯

  • 中文(簡體):
    http://cuimingda.com/2009/01/what-determines-script-long-running.html
  • 西班牙語:
    http://ernestdelgado.com/zakas/long-running-script.html

Tutorial JavaScript 教程
  1. 將僅構建的 React 應用程序部署到 Heroku

  2. 套接字 IO 重新連接?

  3. 如何從 Ozark(電視節目標題序列)創建流暢的動畫

  4. Preact 入門(通過重建 React 應用程序)

  5. 正則表達式入門

  6. 使用 JSON 模式進行 JSON 驗證

  7. React:訂閱事件並使用 RxJS 去抖動

  1. 如何在 Vue 中通過選擇標籤使用 @change

  2. 你能用 JavaScript 觸發自定義 HTML5 表單錯誤嗎?

  3. 什麼是大 O 表示法?了解 JavaScript 中的時間和空間複雜性。

  4. 當不同的瀏覽器選項卡處於活動狀態時,useEffect 中的函數行為

  5. 發布適用於 Eclipse Oxygen.1A 的 Red Hat Developer Studio 11.1.0.GA 和 JBoss Tools 4.5.1.Final

  6. 加載中... Vanilla JavaScript 中的動畫

  7. Deno 的代理中間件

  1. 如何在持續集成過程中使用 Netlify

  2. 教程:以太坊區塊鏈開發(五)

  3. 是否可以從命令行運行 JavaScript 文件?

  4. useHug:創建自定義 React Hooks 🥰