setTimeout 導致的瀏覽器假死


 問題

   前幾天,同事遇到一個瀏覽器假死的問題。就是瀏覽器在響應一個請求的時候,就突然不響應時間,進入假死狀態,Cup也飆升到100%. 但是這個問題只出現在IE瀏覽器,chrome和Firefox等其他瀏覽器正常。

原因

  Js 代碼里面,看着也沒有什么耗時的操作和后台異步調用。沒辦法,只能從響應事件的最開始一步一步調查。經過一番調試之后,問題定位在setTimeout 函數。當把setTimeout 里面執行的函數去掉之后,立馬就不會出現這種情況。查看setTimeout 里面調用的函數,發現里面JS中有一些的DOM操作,函數里面還進行了html的拼接。難道是這個原因導致的。於是網上查原因:當一段JS腳本長時間占用着處理機就會掛起瀏覽器的GUI更新,而后面的事件響應也被排在隊列中得不到處理,從而造成了瀏覽器被鎖定進入假死狀態。說白了就是:瀏覽器無法在渲染頁面的同時執行js。在setTimeout 函數里面,確實有一些拼接html 和操作dom 的情況。可能就是js在執行的時候,js代碼里面又有一些拼接html 的操作。導致瀏覽器無法渲染頁面,而js 里面在操作這個頁面的內容。導致瀏覽器卡死。

瀏覽器的內核處理方式:

  瀏覽器的內核是多線程的,它們在內核制控下相互配合以保持同步,一個瀏覽器至少實現三個常駐線程:javascript引擎線程,GUI渲染線程,瀏覽器事件觸發線程。

  1. JavaScript引擎是基於事件驅動單線程執行的,JS引擎一直等待着任務隊列中任務的到來然后加以處理,瀏覽器無論再什么時候都只有一個JS線程在運行JS程序。
  2. GUI 渲染線程負責渲染瀏覽器界面,當界面需要重繪(Repaint)或由於某種操作引發回流(reflow)時,該線程就會執行。但需要注意 GUI渲染線程與JS引擎是互斥的,當JS引擎執行時GUI線程會被掛起,GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。
  3. 事件觸發線程,當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾,等待JS引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器內核的其他線程如鼠標點擊、AJAX異步請求等,但由於JS的單線程關系所有這些事件都得排隊等待JS引擎處理。

 

  明白了瀏覽器內核處理方式,就可以理解瀏覽器為什么會進入假死狀態了,當一段JS腳本長時間占用着cpu 時間時,就會掛起瀏覽器的GUI更新,而后面的事件響應也被排在隊列中得不到處理,從而造成了瀏覽器被鎖定進入假死狀態。另外JS腳本中進行了DOM操作,一旦JS調用結束就會馬上進行一次GUI渲染,然后才開始執行下一個任務,所以JS中大量的DOM操作也會導致事件響應緩慢甚至卡死瀏覽器。

 

  這個文章寫得更加透徹:http://www.nowamagic.net/librarys/veda/detail/787


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM