JavaScript中如何檢測死循環

這篇文章運用簡單易懂的例子給大家介紹JavaScript中如何檢測死循環，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

前言

如果我們需要執行用戶寫的代碼，如和避免死循環？我們最近遇到了這個問題，因為寫錯代碼很常見，所以我們進行了一下嘗試。

首先我們需要使用iframe

這主要是安全考慮，我們需要一個sandbox環境來執行JavaScript，避免影響到整體。iframe的sandbox屬性可以用來禁止彈窗等等，非常有用。

地址可以選擇Blob url，不過blob url會持有當前web page的origin，如果用戶拷貝一些亂七八糟的代碼不小心執行的話，會有安全問題。所以最終決定用data URI。

iframe的執行仍然在同一個thread

iframe中執行了代碼，發生死循環的時候，瀏覽器還是死掉了，因為iframe和parent還是在同一個thread。也就是說，我們無法在parent中進行timeout檢測，因為檢測代碼在死循環發生時永遠不會被執行。

Web Worker可行但不支持DOM API

如果是純粹的JavaScript代碼，或許用web worker可以，但是我們需要DOM API，所以Web Worker也不在考慮范圍之中。

看來只能修改用戶代碼了

假設大多數死循環都是由while/for引起的，如果我們能插入一些代碼并在每一次循環中進行檢測，我們也許就可以根據某些條件提前終止循環。

比如這樣的代碼

function abc() {
 while (true) {
  console.log(Date.now())
 }
}

如果我們插入一個 __detectInfiniteLoop() 方法，并在while loop里面調用的話，就可以在loop 10000次的時候報錯終止執行。

let __count = 0
const __detectInfiniteLoop = () => {
 if (__count > 10000) {
  throw new Error('Infinite Loop detected')
 }
 __count += 1
}

function abc() {
 while (true) {
  console.log(Date.now())
  __detectInfiniteLoop()
 }
}

操作AST在合適位置插入代碼

通過字符串匹配來編輯代碼細節太復雜容易出錯，我們可以用編輯AST的方式，實際上非常簡單。

用到babel的3個package。

1. @babel/parser - parse 代碼為AST
2. @babel/traverse - 搜索 for/while loop
3. @babel/generator - 生成插入后的代碼
    

首先 parse用戶的代碼為AST

import { parse } from '@babel/parser'
const ast = parse(code)

然后我們準備一下需要插入的代碼。

代碼有兩部分，第一部分是function定義，實際上可以在頭部插入，所以字符串就夠了。第二部分是function的調用，這部分需要插入到AST中，所以也需要parse一下。

const prefix = `
 let __count = 0
 const __detectInfiniteLoop = () => {
  if (__count > 10000) {
   throw new Error('Infinite Loop detected')
  }
  __count += 1
 }
`

const detector = parse(`__detectInfiniteLoop()`)

接下來就找到 while/for/do..while 的位置，然后插入detector的調用。

import traverse from '@babel/traverse'
traverse(ast, {
 ForStatement: function (path) {
  path.node.body.body.push(...detector.program.body)
 },
 WhileStatement: function (path) {
  path.node.body.body.push(...detector.program.body)
 },
 DoWhileStatement: function (path) {
  path.node.body.body.push(...detector.program.body)
 }
})

AST修改好了，最后一步就是生成最終的代碼，然后放到iframe中執行。

import generate from '@babel/generator'
const newCode = prefix + generate(ast).code

關于JavaScript中如何檢測死循環就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。