1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Answers
    1
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default Answered: [4.2.0 beta 2] Text field regex validation is too slow in IE9 with some reg exp

    Answered: [4.2.0 beta 2] Text field regex validation is too slow in IE9 with some reg exp


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 beta 2
    Browser versions tested against:
    • IE9 - FAIL
    • Chrome - pass
    • FireFox - pass
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • Regex validation might be performed too slow in IE9 with some reg exp. It can cause even a browser crash.
    • There is a small delay even in Chrome. Though, insignificant. So, maybe, is the reg exp too complex? But it doesn't look so.
    • I understand it might be a weak place in the IE JavaScript engine and you can't do anything here. If so, any recommendations would be appreciated.
    Steps to reproduce the problem:
    • Open the sample in IE9
    • Type "&" at the end of the text (do not remove the existing text)
    The result that was expected:
    • Smooth validation
    The result that occurs instead:
    • The browsers lags
    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Regex slow issue</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
        <script src="../ext-all-debug.js"></script>
    
        <script>
            Ext.onReady(function () {
                Ext.create("Ext.form.field.Text", {
                    renderTo: Ext.getBody(),
                    width: 300,
                    value: "24 pages doc OCR-edocument",
                    regex: /^([^&/?*:\"|<>\\]+)+$/
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. It's pretty spectacular just how slow that regex runs, even in Chrome. But as Evan says, there's not a lot ExtJS can do as it's only running the regex once.

    Try changing it to this instead:

    Code:
    regex: /^[^&/?*:\"|<>\\]+$/
    As far as I can tell this is equivalent for validation purposes and it runs in a fraction of the time (about 10000 times faster in my Chrome test case). It's that extra + on the end that nukes it and you don't need it. I've also removed the capture group.

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,148
    Vote Rating
    673
    Answers
    474
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Moving to Q&A since it's not specific to 4.2 nor a bug report.

    There isn't a great deal you can do, it's executing the regex only once, so you're at the mercy of the browser.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,148
    Vote Rating
    673
    Answers
    474
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    Also, regexes tend to be a lot slower when you're looking for everything but <x> as opposed to <x>.

    See: http://www.regular-expressions.info/catastrophic.html
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,623
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    It's pretty spectacular just how slow that regex runs, even in Chrome. But as Evan says, there's not a lot ExtJS can do as it's only running the regex once.

    Try changing it to this instead:

    Code:
    regex: /^[^&/?*:\"|<>\\]+$/
    As far as I can tell this is equivalent for validation purposes and it runs in a fraction of the time (about 10000 times faster in my Chrome test case). It's that extra + on the end that nukes it and you don't need it. I've also removed the capture group.

  6. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    Answers
    1
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Evan and @skirtle, thank you for the answers. They are very helpful!

    Regular expressions are a bottleneck for me. Shame.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2