Results 1 to 5 of 5

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

  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,017
    Answers
    1
    Vote Rating
    125
      0  

    Default 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>
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | 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
    18,430
    Answers
    650
    Vote Rating
    858
      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
    18,430
    Answers
    650
    Vote Rating
    858
      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,790
    Answers
    583
    Vote Rating
    390
      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
    1,017
    Answers
    1
    Vote Rating
    125
      0  

    Default

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

    Regular expressions are a bottleneck for me. Shame.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •