??? 前幾天遇到一個bug,在一個填email的文本框,當用戶錄入比較長的一段文本后(比如40位以上),頁面就死掉了。檢查后發現校驗Email的是下面這樣一段javascript代碼:
? function checkEmail(email)
? {
??????? if (email.length == 0 )
??????????? return true;
???????? var validEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
???????? if (validEmail.test(email))
???????? {
???????????????? return true
????????? }
?????????? return false
??? }
??? checkEmail("123456789012345678901234567890123456789012345abcdefghijkl");
?? 第一反應是正則表達式寫的有問題,'@'前后的 ([\.-]?\w+)* 都可能會引起效率問題。下面仔細分析一下:
1. 從輸入的值來看, engine會首先匹配 \w+, 這是一個貪婪匹配,可以一直匹配到結尾;
2. 然后按優先級開始匹配 ([\.-]?\w+)*中的 [\.-]?\w+,這個時候前面的 \w+ 為了后面的匹配成功,必須要重現匹配,讓出一點匹配的內容,假設先讓出的是 'l',([\.-]?\w+)*匹配成功;
3. ([\.-]?\w+)* 意味著要盡量去匹配多次,再第二次對 [\.-]?\w+ 匹配,這個時候為了第二次匹配的成功,第一次匹配的 [\.-]?\w+ 要讓出能滿足第二次 [\.-]?\w+ 的內容,也就是它匹配到的'l',這個時候,第一次匹配的 [\.-]?\w+ 又不滿足了,\w+ 又得讓出來一個'k'。
4. 這樣未知匹配次數的 ([\.-]?\w+)* 就形成了一個很大的循環,而在正則表達式中,每次匹配時被括號里模式匹配的東西都是要被存起來供以后使用的,大量的中間結果被緩存,最終導致IE死掉。
?? 所以這是一條典型的因為循環嘗試匹配導致效率低下的正則表達式, 表達式中兩個 ([\.-]?\w+)* 都可能導致解釋器的crash,在本例中不需要利用匹配的中間結果,所以解決的辦法很簡單,在括號加入一個冒號,不保存中間結果就是了。即將那個正則表達式改成如下:
? /^\w+(?:[\.-]?\w+)*@\w+(?:[\.-]?\w+)*(\.\w{2,3})+$/
如果性能還是不能滿足需求,可以考慮把這個正則表達式拆成幾個小的表達式,分別進行驗證。