pucispeedtest

JavaScript performance comparison

Revision 3 of this test case created

Info

personal test for form validation

Preparation code

      <div id="container">
             
                <header id="main-header" class="clearfix">
                        <div id="logo">
                                <img src="img/logo.png" alt="YOOX" /><h1>Yoox</h1>
                        </div>
                </header>
             
                <div id="menu">
                        <menu>
                                <ul>
                                        <li><a href="#">Menu 1</a></li>
                                        <li><a href="#">Menu 2</a></li>
                                        <li><a href="#">Menu 3</a></li>
                                </ul>
                        </menu>
                </div>

                <h1>About Yoox Group</h1>

                <!-- About Yoox section -->
                <section id="about">

                        <h2>What we do</h2>
                        <p><strong>YOOX Group</strong> is the global Internet retailing partner for leading fashion &amp; design brands.
                                It has established itself amongst the market leaders with the multi-brand stores yoox.com,
                                thecorner.com and shoescribe.com, as well as with numerous mono-brand online stores all
                                &quot;Powered by YOOX Group&quot;.
                        </p>
                                <p>
                                        The Group has offices and operations in the <strong>United States</strong>, <strong>Europe</strong>,
                                        <strong>Japan</strong>, <strong>China</strong> and Hong Kong
                                        and delivers to more than 100 countries worldwide.
                                </p>

                                <h3>Some of our works</h3>
                                <ul>
                                        <li><a href="http://marni.com" target="_blank">marni.com</a>, launched in September 2006</li>
                                        <li><a href="http://emporioarmani.com" target="_blank">emporioarmani.com</a>, launched in August 2007</li>
                                        <li><a href="http://diesel.com" target="_blank">diesel.com</a>, launched in November 2007</li>
                                </ul>

                                <p><a class="download" href="#">Click here to download a PDF of our recent work</a></p>
               
                </section>

                <!-- News section -->
                <section id="news">
                        <h2>News</h2>
                        <div id="news-toggler">
                                <p>Show/Hide news item</p>
                        </div>
                        <div id="news-item">
                                <p>10 October 2012 - Fashion, design and now art. Since 2000, yoox.com has featured the
                                        captivating and the hard to find from the worlds of fashion and design. Now we are adding
                                        a whole new dimension, waiting to be discovered – Art at yoox.com.</p>
                                        <p>Federico Marchetti, Founder and CEO YOOX Group:</p>
                                        <blockquote><a href="http://yoox.com" target="_blank">yoox.com</a> provides the art world with the
                                                opportunity to capitalize on our global platform,
                                                and our over 7 million monthly visitors. Our current fashion and design offer draws huge audiences
                                                and we're confident adding art to the mix, together with our impeccable service and Swiss delivery
                                                times will enable more people to consume and enjoy art</blockquote>
                        </div>
                </section>

                <section id="contact-form">
                        <h2>More Information</h2>
                        <p>For more information about the services we offer, and how we can work with you,
                                please provide us with the following items of information.</p>
                        <p><small>Fields marked with * are required.</small></p>

                        <form id="request-information" action="." method="get">
                                                <fieldset>
                                                        <ol>
                                                                <li>
                                                                        <label for="name">Contact name: *</label>
                                                                        <input id="name" name="name" placeholder="Your name" value="" />
                                                                </li>
                                                                <li>
                                                                        <label for="email-address">Contact email address: *</label>
                                                                        <input class="input-large" id="email-address" name="email-address" placeholder="Email address" />
                                                                </li>
                                                                <li>
                                                                        <label for="phone-number">Contact phone number:</label>
                                                                        <input class="input-large" id="phone-number" name="phone-number" placeholder="Phone Number" />
                                                                </li>
                                                        </ol>
                                                        <p id="validation">
                                                                Please fill in all the required fields.
                                                        </p>
                                                        <div id="submit">
                                                                <input type="submit" value="Submit" />
                                                        </div>
                                                </fieldset>
                                        </form>
                </section>
                <footer>
                                <div class="footer-content">
                                        <section id="credits">
                                                <p><small>&copy; 2013 Yoox Group s.p.a.</small></p>
                                        </section>
                                </div>
                        </footer><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


        </div>

Preparation code output

About Yoox Group

What we do

YOOX Group is the global Internet retailing partner for leading fashion & design brands. It has established itself amongst the market leaders with the multi-brand stores yoox.com, thecorner.com and shoescribe.com, as well as with numerous mono-brand online stores all "Powered by YOOX Group".

The Group has offices and operations in the United States, Europe, Japan, China and Hong Kong and delivers to more than 100 countries worldwide.

Some of our works

Click here to download a PDF of our recent work

News

Show/Hide news item

10 October 2012 - Fashion, design and now art. Since 2000, yoox.com has featured the captivating and the hard to find from the worlds of fashion and design. Now we are adding a whole new dimension, waiting to be discovered – Art at yoox.com.

Federico Marchetti, Founder and CEO YOOX Group:

yoox.com provides the art world with the opportunity to capitalize on our global platform, and our over 7 million monthly visitors. Our current fashion and design offer draws huge audiences and we're confident adding art to the mix, together with our impeccable service and Swiss delivery times will enable more people to consume and enjoy art

More Information

For more information about the services we offer, and how we can work with you, please provide us with the following items of information.

Fields marked with * are required.

Please fill in all the required fields.

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Optimized
$(document).ready(function() {

  var
    $newsItem = $('#news-item'),
    $validation = $('#validation'),
    $newsToggler = ('#news-toggler');

  $newsItem.hide();
  $validation.hide();

  $newsToggler.on('click',function(){
    $newsItem.fadeToggle('slow');
  })

  /* form validation */

  $('#request-information').submit(function() {
    var $name = $('#name'),
        $nameVal = $name.val(),
        $emailAddress = $('#email-address'),
        $emailAddressVal = $emailAddress.val(),
        $phoneNumber = $('#phone-number'),
        $phoneNumberVal = $phoneNumber.val(),
        message = '<span class="message">invalid value</span>',
        isValid = true;
       
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var numberReg = /^(0|[1-9][0-9]*)$/;


    // check for required fields and data validity
    $('.message').remove();
    if (nameVal == '' || nameVal == 'Your name') {
      isValid = false;
    }
    if (emailAddressVal == '' || emailAddressVal == 'Email address') {
      isValid = false;
    } else if (!emailReg.test(emailAddress)) {
      $emailAddress.parent().append(message);
      isValid = false;
    }
    if (phoneNumberVal == '' || phoneNumberVal == 'Phone Number') {
      isValid = false;
    } else if (!numberReg.test(phoneNumber)) {
      $phoneNumber.parent().append(message);
      isValid = false;
    }
    // if form not valid
    if (!isValid) {
      $validation.slideDown();
      return false;
    }
  });

});
pending…
Nonoptimized
$(document).ready(function() {

  $('#news-item').hide();
  $('#validation').hide();

  $('#news-toggler').click(function() {
    $('#news-item').fadeToggle('slow');
  });

  /* form validation */

  $('#request-information').submit(function() {
    var name = $('#name').val();
    var emailAddress = $('#email-address').val();
    var phoneNumber = $('#phone-number').val();

    /* regular expression for email and phone number validation test */
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var numberReg = /^(0|[1-9][0-9]*)$/;
    var message = '<span class="message">invalid value</span>';

    var isValid = true;

    // check for required fields and data validity
    $('.message').remove();
    if (name == '' || name == 'Your name') {
      isValid = false;
    }
    if (emailAddress == '' || emailAddress == 'Email address') {
      isValid = false;
    } else if (!emailReg.test(emailAddress)) {
      $('#email-address').parent().append(message);
      isValid = false;
    }
    if (phoneNumber == '' || phoneNumber == 'Phone Number') {
      isValid = false;
    } else if (!numberReg.test(phoneNumber)) {
      $('#phone-number').parent().append(message);
      isValid = false;
    }
    // if form not valid
    if (!isValid) {
      $('#validation').slideDown();
      return false;
    }
  });

});
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment