JavaScript 在各個瀏覽器中執(zhí)行的耐性
Firefox:執(zhí)行超過10秒出現(xiàn)提示。
Safari:執(zhí)行超過5秒出現(xiàn)提示。
Opera:無論執(zhí)行多久都不會出現(xiàn)提示,最有耐性。
Chrome:執(zhí)行超過約8秒(估計值)出現(xiàn)提示。
注:當彈出類似alert的模式對話框的時候,是不計時。
在Web開發(fā)的時候,經(jīng)常會遇到的一種情況就是瀏覽器提示腳本運行時間過長,停止還是繼續(xù),無論你選擇什么,相信你都會想盡一切辦法讓這個對話框遠離你的用戶們。可你是否知道,這些不同的瀏覽器究竟是如何判斷,哪些腳本處于“失控”狀態(tài)么?本文作者,就從Internet Explorer、Firefox、Safari、Chrome和Opera五種瀏覽器,分析了這個情況出現(xiàn)的原因。
【原文作者】Nicholas C. Zakas
以下是對原文的翻譯:
Web開發(fā)者經(jīng)常遇到并必須及時處理的問題就是“提示腳本運行時間過長的提示框”(或者稱為“失控腳本提示”),這些令人討厭的對話框會在你的腳本 執(zhí)行時間過長的時候出現(xiàn)。對于Web開發(fā)者的基本準則就是,無論什么時候,都不要讓用戶看到這些對話框,因為這會給人一種代碼缺乏結(jié)構(gòu)化的印象,更簡單的 說,你的代碼負擔太重了。
用Brendan Eich(JavaScript的發(fā)明人)的話來講,如果JavaScript運行的時間需要用秒來計算,一定是什么地方搞錯了。我個人可以忍受的上限可 能更小一些,不論什么腳本,在任何時間、任何瀏覽器上執(zhí)行,都不應(yīng)該超過100毫秒。如果實際執(zhí)行的時間長于這個底限,一定要將進程分解成若干更小的代碼 段。
另外,其實很少有人真正意識到究竟是什么原因?qū)е履_本在不同的瀏覽器中運行時間過長,連我自己都沒有深究過。所以我決定坐下來好好研究一下,我們究 竟會在什么情況才會看到那個討厭的對話框。判斷腳本是否失控,無外乎就兩種方法。一種是根據(jù)執(zhí)行了多少條語句,一種是判斷腳本執(zhí)行花費的時間。各個瀏覽器 判斷腳本失控的具體方法會有略微的不同。
Internet Explorer
Internet Explorer判斷一個腳本是否失控,主要通過JScript引擎執(zhí)行語句的總數(shù)來判斷。默認情況下,這個上限是500萬條語句,這個值是可以通過注冊表修改的。當你的腳本執(zhí)行的語句數(shù)量超過這個限制,你就會看到下面的窗口。
這個對話框提示:“這個頁面上有一段腳本導致Internet Explorer運行緩慢,如果你繼續(xù)運行,你的計算機可能會變?yōu)闊o響應(yīng)狀態(tài)”。要不是追求技術(shù)上的準確性,這樣說確實有點過了。對話框有兩個選項,要么 停止腳本執(zhí)行,要么允許腳本繼續(xù)運行。當這個對話框顯示的時候,腳本已經(jīng)被完全停止了。如果你選擇繼續(xù)運行腳本,就會重新計算當前執(zhí)行的語句數(shù),也就是 說,如果這個數(shù)值再次達到上限時,你會再次看到這個對話框。
Firefox
Firefox是根據(jù)腳本引擎持續(xù)執(zhí)行代碼的時間來判斷一段腳本是否失控。默認的上限是10秒,可以通過about:config頁面來修改這個值。這里需要注意的是,當彈出類似alert的模式對話框的時候,是不計時的。當瀏覽器執(zhí)行腳本的時間達到這個上限,F(xiàn)irefox就會顯示類似下面的對話框:
Firefox的對話框提示:“這個頁面的一段腳本目前運行忙,或者這段腳本已經(jīng)停止響應(yīng)。你可以停止執(zhí)行這段腳本,并在調(diào)試器中打開這段腳本,或 者保持這段腳本繼續(xù)運行”。更清楚的描述了遇到的問題,并且沒有IE說的那么恐怖。在這個對話框上可以執(zhí)行三種操作:停止腳本執(zhí)行、調(diào)試腳本或者讓腳本繼 續(xù)運行。和Internet Explorer一樣,當運行腳本繼續(xù)運行以后,對持續(xù)運行腳本時間的統(tǒng)計就會重置。調(diào)試腳本按鈕,只有在你安裝了Firebug,并在該頁面激活了調(diào)試 的時候才會出現(xiàn)。執(zhí)行調(diào)試腳本操作后,可以顯示執(zhí)行時間過長的代碼段的具體位置。
Safari
Safari同樣根據(jù)腳本引擎持續(xù)執(zhí)行腳本的時間來判斷,當我對Webkit的源代碼進行反復研究后,發(fā)現(xiàn)默認的超時時間是5秒,一旦達到這個上限,就會給出下面的對話框提示:
對話框提示:“在頁面url上的腳本讓Safari失去響應(yīng),你是要繼續(xù)運行腳本還是終止腳本”。同樣的,對于用戶來說,也不是什么可怕的提示。在Safari中,可以關(guān)閉失控腳本的檢測功能。
Chrome
Chrome在跟蹤技術(shù)上有點狡猾,失控腳本檢測功能似乎和tab的事故控制(crash control)關(guān)聯(lián)到一起。我仔細看了源代碼,卻沒有找到具體的限制,但基本確定的是,這個限制是以時間為基礎(chǔ)的,估計在10秒左右(要么是5秒,要么 是10秒,總要和Safari或者Firefox看齊么)。我正在聯(lián)系Chrome項目組中的朋友,看看能不能得到確定的信息。盡管如此,如果網(wǎng)頁中存在 失控的腳本,用戶還是會看到下面的對話框:
毫無疑問,Chrome的提示比起其他瀏覽器來說,顯得都更加嚴重。點擊“Wait”按鈕,腳本會繼續(xù)運行,直到達到下一個上限為止,也可以點擊“Kill pages”,直接關(guān)閉該頁面在內(nèi)存中的所有信息,并用一個空白頁取而代之。
Opera
Opera的情況比較有趣:他貌似沒有針對失控腳本的相應(yīng)限制。我運行了幾個很長的測試,甚至花了幾分鐘,而在這個過程中,瀏覽器一直可以正常響應(yīng),這很出我的意料之外。我不是很確定,對于現(xiàn)在的情況來說,這個方法是好是壞,但至少它生效了,不是么?
一些建議
無論你的用戶使用什么瀏覽器,都不應(yīng)該在任何時候看到類似的提示。在你的網(wǎng)站或者Web應(yīng)用程序作為產(chǎn)品發(fā)布之前,做一些常規(guī)的性能測試是非常有必要的。在這方面有很多工具可以加以利用,比如Firebug's profiler(只支持Firefox)、YUI Profiler (支持全部瀏覽器)或者Internet Explorer 8's Profiler。 你應(yīng)該毫不猶豫地將那些執(zhí)行時間超過100毫秒的腳本找出來,哪怕這些腳本只是在某些瀏覽器上運行不暢,這些腳本包含了一些需要執(zhí)行很長時間的代碼段,而 這些代碼應(yīng)該通過性能檢測工具進行重新評估。確保你不是使用Chrome作為測試的底線,因為Chrome在執(zhí)行JavaScript的速度上比其他瀏覽 器要高出一個數(shù)量級(和Firefox 3.1還有最新的WebKit Nightly相當)。最好使用Internet Explorer作為測試的底線,然后再測試其他瀏覽器,因為無論什么時候,IE的JavaScript引擎都是最慢的,當在IE上修復問題以后,十有八 九在其他瀏覽器上也可以正常運行了。
- JavaScript 全面解析各種瀏覽器網(wǎng)頁中的JS 執(zhí)行順序
- Html中JS腳本執(zhí)行順序簡單舉例說明
- javascript attachEvent綁定多個事件執(zhí)行順序問題
- 如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
- 如何確保JavaScript的執(zhí)行順序 之jQuery.html并非萬能鑰匙
- 如何確保JavaScript的執(zhí)行順序 之實戰(zhàn)篇
- 解決火狐瀏覽器下JS setTimeout函數(shù)不兼容失效不執(zhí)行的方法
- Javascript代碼在頁面加載時的執(zhí)行順序介紹
- js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
- javascript的解析執(zhí)行順序在各個瀏覽器中的不同
- js判斷瀏覽器類型為ie6時不執(zhí)行
- 探析瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序
相關(guān)文章
javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器
這篇文章主要介紹了javascript實現(xiàn)阻止iOS APP中的鏈接打開Safari瀏覽器,這個IOS APP一般是Web APP,否則沒法使用本文的代碼,需要的朋友可以參考下2014-06-06讓JavaScript中setTimeout支持鏈式操作的方法
這篇文章主要介紹了讓JavaScript中setTimeout支持鏈式操作的方法,本文直接給出代碼實例,需要的朋友可以參考下2015-06-06微信小程序?qū)W習筆記之本地數(shù)據(jù)緩存功能詳解
這篇文章主要介紹了微信小程序?qū)W習筆記之本地數(shù)據(jù)緩存功能,結(jié)合實例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage針對數(shù)據(jù)緩存的存取、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式
這篇文章主要給大家介紹了關(guān)于Echarts圖表如何利用formatter自定義tooltip的內(nèi)容和樣式的相關(guān)資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時候容易不知道怎么配置,需要的朋友可以參考下2023-06-06Express框架Router?Route?Layer對象使用示例詳解
這篇文章主要為大家介紹了Express框架Router?Route?Layer對象使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03