您現在的位置是:電腦技術吧?>? 組裝維修 ??>??ie瀏覽器假死,瀏覽器卡死??>??正文詳情

ie瀏覽器假死,瀏覽器卡死

蘇綠凝2019-11-07 18:02:06 人圍觀
簡介瀏覽器看視頻卡死在web開發中,經常會遇到瀏覽器對事件沒有響應而進入偽死狀態的事件,甚至會彈出腳本運行時間過長的提示框如果發生這種情況,則意味著腳本失控瀏覽器中至少有

在Web開發的時候經常會遇到瀏覽器不響應事件進入假死狀態,甚至彈出腳本運行時間過長的提示框,如果出現這種情況說明你的腳本已經失控了。

一個瀏覽器至少存在三個線程:js引擎線程(處理js)、GUI渲染線程(渲染頁面)、瀏覽器事件觸發線程(控制交互)。

JavaScript引擎是基于事件驅動單線程執行的,JS引擎一直等待著任務隊列中任務的到來然后加以處理,瀏覽器無論再什么時候都只有一個JS線程在運行JS程序。

GUI 渲染線程負責渲染瀏覽器界面,當界面需要重繪(Repaint)或由于某種操作引發回流(reflow)時,該線程就會執行。

但需要注意 GUI渲染線程與JS引擎是互斥的,當JS引擎執行時GUI線程會被掛起,GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。

事件觸發線程,當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾,等待JS引擎的處理。

這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器內核的其他線程如鼠標點擊、AJAX異步請求等,但由于JS的單線程關系所有這些事件都得排隊等待JS引擎處理。

了解了瀏覽器的內核處理方式就不難理解瀏覽器為什么會進入假死狀態了,當一段JS腳本長時間占用著處理機就會掛起瀏覽器的GUI更新,而后面的事件響應 也被排在隊列中得不到處理,從而造成了瀏覽器被鎖定進入假死狀態。

另外JS腳本中進行了DOM操作,一旦JS調用結束就會馬上進行一次GUI渲染,然后才 開始執行下一個任務,所以JS中大量的DOM操作也會導致事件響應緩慢甚至真正卡死瀏覽器,如在IE6下一次插入大量的HTML。

而如果真的彈出了腳本 運行時間過長的提示框則說明你的JS腳本肯定有死循環或者進行過深的遞歸操作了。

現在如果遇到了這種情況,我們可以做的不僅僅是優化 代碼,html5的webWorkers提供了js的后臺處理線程的API,它允許將復雜耗時的單純js邏輯處理放在瀏覽器后臺線程中進行處理,讓js線 程不阻塞UI線程的渲染。

這個線程不能和頁面進行交互,如獲取元素、alert等。

多個線程間也是可以通過相同的方法進行數據傳遞。

直接看代碼:例子:用戶輸入一個數字,進行加法運算( =)以前的做法:!DOCTYPE HTMLhtml lang=enheadmeta charset=UTF-8titlewebworkerscalculate/title/headbodyinput id=num name=num type=text/button onclick = calculate()計算/buttonbr /div id=result style=color:red;/divdiv id=time style=color:red;/divscript type=text/javascript src=calculate.js/scriptscript type=text/javascriptfunction calculate(){data1 = new Date().getTime();var num = document.getElementById(num).value;var val = parseInt(num,10);var result =0;for(var i =0; inum;i ){result = i;}data2 = new Date().getTime();document.getElementById(result).innerHTML =計算結果: result;document.getElementById(time).innerHTML =普通 耗時: (data2 data1) ms;}/script/body/html使用webWorkers以后:calculate.html!DOCTYPE HTMLhtml lang=enheadmeta charset=UTF-8titlewebworkerscalculate/title/headbodyinput id=num name=num type=text/button onclick = calculate()計算/buttonbr /div id=result style=color:red;/divdiv id=time style=color:red;/divscript type=text/javascript src=calculate.js/scriptscript type=text/javascriptvar worker = new Worker(calculate.js);var data1 =0;var data2 =0;worker.onmessage = function(event){var data = event.data;data2 = new Date().getTime();document.getElementById(result).innerHTML =計算結果: data;document.getElementById(time).innerHTML =workers 耗時: (data2 data1) ms;};function calculate(){data1 = new Date().getTime();var num = document.getElementById(num).value;var val = parseInt(num,10);worker.postMessage(val);}/script/body/htmlcalculate.jsonmessage = function(event){var num = event.data;var result = 0;for(var i = 0; inum;i ){result = i;}postMessage(result);};webWorker需要將代碼放入web服務器中, 如果使用的是localhost請用高版本的chrome瀏覽器打開,firefox瀏覽器在處理localhost的時候會出現Could not get domain!的錯誤,關于這個可以參考:https://bugzilla.mozilla.org/show_bug.cgi?id=682450 對比上面的兩種實現方式,當計算值達到100億的時候,普通做法耗時已經很長,且一般會卡死了。

▲webWorkers在Chrome15下的效果更正:getTime()返回的應該是毫秒(ms),而不是秒(s)。

如下圖所示:

▲普通方法在Chrome15下的效果可見webWorkers在未來的web應用中還是非常有價值的。

版權聲明:本文由 蘇綠凝 整理編輯。

原標題:電腦為什么瀏覽器假死,360極速瀏覽器假死

轉載注明出處:http://www.dn9ww09s.icu/assemble/11493.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦酷狗怎么傳歌,酷狗傳歌到電腦

    電腦酷狗怎么傳歌,酷狗傳歌到電腦 相關圖片酷狗傳歌在哪里隨著科技時代的飛速發展,現在很多高科技越來越方便,那么你還在擔心電腦版的酷狗對著手機唱歌嗎現在它不像以前那么乏味了,也不需要數據線這對小白來說是個空...

  • 電腦顯示器調亮度,電腦顯示屏怎么調亮度調節

    電腦顯示器調亮度,電腦顯示屏怎么調亮度調節 相關圖片臺式電腦屏幕亮度怎么調電腦基本上是人手,很多人每天都會用電腦瀏覽網頁、上網、看視頻、面對電腦屏幕,眼睛有點受不了,對吧屏幕亮度是個大問題,那么如何調整電腦屏幕亮度...

  • 什么是元素,元素

    什么是元素,元素 相關圖片元素B教程詳細信息摘要:HTML5詳細信息標簽困難:主要支持瀏覽器:Chrome 12 版本我最喜歡的新HTML5標簽是details元素,它剛剛集成到Chrome的E元素...

  • 電腦主要看什么配置,買電腦主要看哪些配置

    電腦主要看什么配置,買電腦主要看哪些配置 相關圖片如何查看電腦配置參數隨著網絡時代的到來,計算機的普及程度越來越高面對電腦問題,仍然有很多問題其他學校的很多人都會問,買電腦時需要看什么樣的配置,什么樣的品牌又好又...

  • 文字放置,文字放置類

    文字放置,文字放置類 相關圖片放置文字掛機游戲CSS不依賴于容器的底部來對齊文本布局參數,一個好的方法也更好即使用position屬性來解決問題看下面的代碼,利用位置的相對定位和絕對定位功能,很容易實現DI純文...

  • as ssd benchmark,ssdbenchmark怎么看

    as ssd benchmark,ssdbenchmark怎么看 相關圖片ssd固態硬盤測試軟件現在很多學生已經更換了固態硬盤,當然,他們也想測試它的性能比原來的機械硬盤快多少然后作為SSD基準,幫助用戶檢測SSD的連續讀取as ssd下載...

  • 3動畫,補間動畫

    3動畫,補間動畫 相關圖片c4d動畫HTML的第一個例子中的HTML標記非常簡單我們在頁面上創建一個UL列表標記,并在其中創建幾個div來控制其整體進度動畫代碼如下:123456789101213傳統補間動畫...

  • 路由器怎么連接筆記本,筆記本連接路由器

    路由器怎么連接筆記本,筆記本連接路由器 相關圖片無線網隱藏了筆記本怎么連接越來越多的人使用電腦有些人有不止一臺電腦如果他們想同時訪問互聯網,他們需要使用路由器與有線路由器相比,無線路由器更受歡迎但如何將筆記本電...

  • 什么地漫談,漫談

    什么地漫談,漫談 相關圖片心漫談我們對HTML5有很高的期望希望它能繼承web應用開發簡單、部署升級方便、跨平臺、本地應用等功能強大、操作簡單友好的優點我還談到了為什么HTML5如此流行,為什漫談式...

  • 電腦cpu散熱硅脂,cpu上的硅脂

    電腦cpu散熱硅脂,cpu上的硅脂 相關圖片cpu硅脂在臺式機的CPU上涂抹硅脂是非常重要的它關系到計算機的綜合性能和CPU的使用壽命有必要知道計算機CPU的重要性,即核心處理器有個朋友不知道怎么涂硅脂,CPU直接cpu散熱硅脂排...

熱評文章

  • 守望先鋒2配置,守望先鋒2配置要求

    守望先鋒2配置,守望先鋒2配置要求 相關圖片守望先鋒對電腦配置要求高嗎《守望先鋒》是暴雪制作的第一款團隊射擊游戲,目前在中國正式上市這個游戲是基于不久的將來的地球來自世界各地的超級英雄將用他們獨特的能力在戰...

  • 基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的

    基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的 相關圖片平板貨車寬度能超出多少當我們定義divwidth時,它可能包含很多內容,這些內容將超過它我們將大力支持div或tables,這將影響網頁的美觀介紹了一種利用CSS強制隱藏冗余內容和自床的寬度...

  • 局域網共享查看工具,一鍵局域網共享工具

    局域網共享查看工具,一鍵局域網共享工具 相關圖片局域網文件夾共享如果我們想訪問計算機局域網中的共享文件夾,我們需要計算機在同一個網絡中并建立一個局域網過去,計算機常常建立局域網,訪問計算機中的共享文件夾,但這也...

  • 電腦藍屏修復按哪個鍵,電腦突然死機怎么辦

    電腦藍屏修復按哪個鍵,電腦突然死機怎么辦 相關圖片電腦老是藍屏怎么修復如今,計算機已經走進千家萬戶,給人們的生活帶來了便利然而,電子產品不可避免地存在一些問題在使用計算機時,用戶將遇到計算機崩潰,這將影響計算機用...

  • 代碼示例文字英文,楔形文字

    代碼示例文字英文,楔形文字 相關圖片文ai聊天對話文本效果很簡單只需將以下代碼復制到您自己的頁面并按如下方式運行:DOCTYPE HTML public-//W3C//DTD XHTML 1.0 transitio楔形文字是哪個國家的文字...

  • gtx顯卡,gtx960顯卡怎么樣

    gtx顯卡,gtx960顯卡怎么樣 相關圖片顯卡買rtx還是gtx視頻卡是計算機中非常重要的硬件設備其主要功能是實現電信號與圖像信號的相互轉換如果您需要玩游戲或工作,您可能想添加一個更好的視頻卡,如果您有高要求的軟...

  • 模擬流體,免費流體模擬

    模擬流體,免費流體模擬 相關圖片流體模擬漢化版第1頁繪制橢圓把現實世界當中的物體模擬到計算機當中,一些簡單的物理實驗、碰撞旋轉等等難度還是不算很大,難度較大的應當算流體模擬。本文將在Canvas當中模擬出...

  • 華碩筆記本開機后黑屏,華碩筆記本黑屏沒反應

    華碩筆記本開機后黑屏,華碩筆記本黑屏沒反應 相關圖片筆記本開機后一直黑屏在使用筆記本電腦的過程中,至少會遇到一些問題,長時間使用筆記本電腦后會出現問題然而,無論問題是什么,都會有解決的辦法或理由當筆記本打開時,黑屏...

  • 怎么右對齊,右對齊

    怎么右對齊,右對齊 相關圖片excel右對齊使用CSS來實現正確的對齊似乎是一個太基本的例子,但越是基本,越有可能出錯,有時甚至找不到線索這也是我開始寫CS時遇到的問題今天,我向CSS初學者演示了一個非常字符...

  • 筆記本怎么調節屏幕亮度,聯想筆記本屏幕亮度怎么調

    筆記本怎么調節屏幕亮度,聯想筆記本屏幕亮度怎么調 相關圖片聯想電腦亮度調節失靈現在有筆記本電腦的朋友不在少數他們中的許多人已經使用筆記本電腦很長時間了,但他們不知道如何調整筆記本電腦屏幕的亮度筆記本電腦的屏幕與普通顯示器...

關注微信

变脸官网查询