如何檢測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。
- @babel/parser - parse 程式碼為AST
- @babel/traverse - 搜尋 for/while loop
- @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中的死迴圈的文章就介紹到這了,更多相關檢測JavaScript死迴圈內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！