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

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

營星菱2019-11-04 22:41:15 人圍觀
簡介瀏覽器看視頻卡死瀏覽器中至少有三個線程:JS引擎線程(處理JS)、GUI呈現線程(呈現頁面)、瀏覽器事件觸發線程(控制交互)javascript引擎是基于事件驅動的單線程執行,瀏覽器死了

一個瀏覽器至少存在三個線程: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等。

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

直接看代碼:例子:用戶輸入一個數字,進行加法運算( =)以前的做法:

  1. !DOCTYPEHTML
  2. htmllang=en
  3. head
  4. metacharset=UTF-8
  5. titlewebworkers--calculate/title/head
  6. body
  7. inputid=numname=numtype=text/
  8. buttononclick=calculate()計算/buttonbr/
  9. divid=resultstyle=color:red;/div
  10. divid=timestyle=color:red;/div
  11. scripttype=text/javascriptsrc=calculate.js/script
  12. scripttype=text/javascriptfunctioncalculate(){
  13. data1=newDate().getTime();
  14. varnum=document.getElementById(num).value;
  15. varval=parseInt(num,10);
  16. varresult=0;
  17. for(vari=0;inum;i ){
  18. result =i;
  19. }
  20. data2=newDate().getTime();
  21. document.getElementById(result).innerHTML=計算結果: result;
  22. document.getElementById(time).innerHTML=普通耗時: (data2-data1) ms;
  23. }
  24. /script
  25. /body
  26. /html
使用webWorkers以后:calculate.html
  1. !DOCTYPEHTML
  2. htmllang=enhead
  3. metacharset=UTF-8
  4. titlewebworkers--calculate/title
  5. /head
  6. body
  7. inputid=numname=numtype=text/
  8. buttononclick=calculate()計算/buttonbr/
  9. divid=resultstyle=color:red;/div
  10. divid=timestyle=color:red;/div
  11. scripttype=text/javascriptsrc=calculate.js/script
  12. scripttype=text/javascript
  13. varworker=newWorker(calculate.js);
  14. vardata1=0;
  15. vardata2=0;
  16. worker.onmessage=function(event){
  17. vardata=event.data;
  18. data2=newDate().getTime();
  19. document.getElementById(result).innerHTML=計算結果: data;
  20. document.getElementById(time).innerHTML=workers耗時: (data2-data1) ms;
  21. };
  22. functioncalculate(){
  23. data1=newDate().getTime();
  24. varnum=document.getElementById(num).value;
  25. varval=parseInt(num,10);
  26. worker.postMessage(val);
  27. }
  28. /script
  29. /body
  30. /html
calculate.js
  1. onmessage=function(event){
  2. varnum=event.data;
  3. varresult=0;
  4. for(vari=0;inum;i ){
  5. result =i;
  6. }
  7. postMessage(result);
  8. };
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/program/10979.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 電腦開機斷電,電腦開機一會就斷電

    電腦開機斷電,電腦開機一會就斷電 相關圖片電腦開機2秒自動斷電在電腦的日常使用中,一旦電腦開機后自動關機失敗,一旦電腦開機關機,讓我們習慣從軟件開始的學生沒有辦法啟動,該怎么辦?現在,小編為大家帶來了電腦開...

  • 電腦上為什么打不出字,電腦打不出字

    電腦上為什么打不出字,電腦打不出字 相關圖片電腦有輸入法但是打不出字我們每臺電腦上都有一些單詞庫。這個是電腦自帶的當然,只有這幾種。如果我們需要更多的字體樣式,我們需要在網上下載,但當我們在電腦上打字時,有...

  • 令人期待的,非常期待

    令人期待的,非常期待 相關圖片期待夏天的說說HTML5是超文本標記語言的下一個重要版本。自1999年html 4.01發布以來,html的開發一直處于停滯狀態。從1999年開始,正是網絡飛速發展的時候。當期待英...

  • 孺教網平板電腦能用嗎,孺教網平板電腦能買嗎

    孺教網平板電腦能用嗎,孺教網平板電腦能買嗎 相關圖片聯想平板電腦可以打電話伙計們,你們在用平板電腦嗎我還沒有擁有自己的平板電腦,但我還是對它有所了解。接下來,我將告訴你一些關于平板電腦是否可以打電話的事情平板電腦是...

  • 如何配色,配色app

    如何配色,配色app 相關圖片拾色器配色如何使網頁顏色匹配初學者誰是完全基本的?今天@?16個瘋狂的夜晚?本文從網頁的基本顏色、重音顏色、深色到整個配色方案的應用,都有詳細的過程和教學。幾乎每一步...

  • 突然黑屏自動關機電腦,電腦黑屏然后自動關機

    突然黑屏自動關機電腦,電腦黑屏然后自動關機 相關圖片電腦黑屏怎么關機許多網友反映,他們的筆記本電腦在玩游戲時總是自動關機。他們不知道怎么處理。如果他們不玩游戲,就不會自動關機。看電影沒關系當他們玩游戲的時候就會這樣...

  • 電腦bios,各種電腦bios圖解中文

    電腦bios,各種電腦bios圖解中文 相關圖片華碩電腦開機進入bios每次我進入bios,都是一種痛苦。我一點也不懂一堆英文字符。他們認識我,我不認識他們。我相信很多小朋友都有這種感覺事實上,如果我把bios設置為中文,操作...

  • 有用分享,分享

    有用分享,分享 相關圖片有用的家務分享幾年前,HTML5的前景還很模糊,只有少數互聯網極客關心。現在,隨著現代主流瀏覽器對HTML5的不斷支持和改進,越來越多的開發人員開始使用HTML5開發各種功能分享小知...

  • 電腦看視頻一卡一卡的,電腦無視頻輸入怎么辦

    電腦看視頻一卡一卡的,電腦無視頻輸入怎么辦 相關圖片電腦看視頻卡頓不流暢我不知道在用電腦看視頻的過程中是否遇到過卡片。許多朋友可能會遇到這樣的問題。用電腦看視頻是一卡通很不愉快。視頻卡首先需要考慮寬帶的速度和硬件的...

  • ES6特性,頻率特性常用表示方法有

    ES6特性,頻率特性常用表示方法有 相關圖片常用塑料特性一覽表HTML5必須對每個人都很熟悉,因為有太多的媒體在討論這項技術。然而,你能確切地告訴HTML5帶來了哪些新功能嗎?本文總結了html5為您帶來的15個新特性,讓頻率特性...

熱評文章

  • ctrl鍵失靈怎么辦,兩個ctrl鍵同時失靈

    ctrl鍵失靈怎么辦,兩個ctrl鍵同時失靈 相關圖片ctrl鍵作為鍵盤的控制鍵,ctrl鍵的功能非常大,一旦ctrl鍵失效,會給我們的電腦操作帶來很多不便。所以今天,小編要告訴你當ctrl鍵失敗時該怎么做。我們都知道ctrctrl鍵沒有反應...

  • 背景音樂,添加背景音樂

    背景音樂,添加背景音樂 相關圖片PPT如何設置背景音樂當制作個人網站時,許多人喜歡在網頁中插入他們最喜歡的背景音樂。今天的編輯器將向您展示如何使用Dreamweaver插入背景音樂實際上,打開需要插入背景音樂的頁面...

  • 為什么shift鍵失靈,兩個shift鍵同時失靈

    為什么shift鍵失靈,兩個shift鍵同時失靈 相關圖片電腦shift鍵失靈我們通常什么時候用換檔鍵?事實上,很多地方都需要使用。例如,當我們想輸入一些符號時,我們需要使用“shift鍵 數字鍵”因此,當換檔鍵失效時,它將對我們的計算...

  • 鏈接推送錯誤,請檢查你的網絡,滴滴鏈接推送錯誤請檢查網絡

    鏈接推送錯誤,請檢查你的網絡,滴滴鏈接推送錯誤請檢查網絡 相關圖片手機軟件提示請檢查網絡設置當我們建立一個網站,通常有許多網頁下的網站,可能有數百個甚至更多的超鏈接在網頁上。我們如何檢查出有問題的鏈接?今天的編輯將介紹如何在Drea...

  • 筆記本電腦cpu溫度過高怎么辦,臺式電腦cpu溫度多少算正常

    筆記本電腦cpu溫度過高怎么辦,臺式電腦cpu溫度多少算正常 相關圖片夏天筆記本cpu溫度多少正常當小編的電腦在玩游戲時,CPU的溫度很高,小編不敢玩太久。后來,因為好奇,小編上網了解CPU。知道CPU的溫度是正常的。所以今天的編輯筆記本cpu90度正常嗎...

  • html做網頁,如何用html制作網頁

    html做網頁,如何用html制作網頁 相關圖片html網頁制作的基本步驟內容  1. HTML 5有什么不同?2. 最終,一個任何人都可以記住的文檔類型3. 最基本的語義結構1. header2. nav3. section1. ahtml網頁制作步驟...

  • 刻錄光盤,哪有刻錄光盤的

    刻錄光盤,哪有刻錄光盤的 相關圖片光盤刻制小編前段時間在看私信的時候,看到有小伙伴留的問題是怎么刻錄光盤。在收到私信之后小編就試著操作了一下,發現難度不大,所以接下來小編就來告訴你們怎么刻錄光盤。...

  • 筆記本電腦開機沒反應,筆記本電腦無法開機

    筆記本電腦開機沒反應,筆記本電腦無法開機 相關圖片筆記本電腦開機藍屏筆記本電腦使用的時間長了,都是會出現一些小故障,大毛病什么的,比如說像開機后,電源指示燈亮,但是電腦的顯示器屏就是沒有反應。這個問題讓用戶慌了神...

  • email,email是什么

    email,email是什么 相關圖片如何注冊email制作網頁時,我們經常需要添加郵箱鏈接,今天小編就為大家介紹一下在dreamweaver中如何鏈接email鏈接。  首先在插入菜單中選擇電子郵件鏈接,如下圖所示email什么意思...

  • 高主頻cpu有哪些,高主頻cpu

    高主頻cpu有哪些,高主頻cpu 相關圖片i3主頻最高的cpu在電腦配置購買時通常我們考慮的是CPU,而CPU主頻是否高是判斷CPU好壞的標準之一。那么CPU主頻是不是越高越好呢?特別多的的朋友認為CPU主頻越高和機器的性雙核最高主...

關注微信

变脸官网查询