zepto-vs-jquery-selectors

JavaScript performance comparison

Revision 32 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//zeptojs.com/zepto.min.js"></script>
<script>!function(t){"use strict"
function n(t,n){return"number"!=typeof t||n&&a[n]?t:t+"px"}function e(t){return t&&t.nodeType===t.DOCUMENT_NODE}function i(t){return"[object Object]"===Object.prototype.toString.call(t)}function r(t){return"string"==typeof t}function o(n){return n===t}function c(t){return c.init(t)}var s=Array.prototype,u=s.slice,h=Array.isArray,f=Object.keys,a={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1}
c.cache={events:{},display:{}},c._UID=0,c.get=function(t){return void 0===t?this.q:t>-1?this.q[t]:this.q[this.q.length+t]},c._getUID=function(t){return o(t)?"window":e(t)?"document":t.getAttribute("uid")},c.init=function(t){return t=t||[],this.q=t instanceof NodeList||t instanceof HTMLCollection?h(t)?t:u.call(t):h(t)?t:[t],this},c.isObject=i,c.noop=function(){},c._setCache=function(t,n){var e=this._getUID(n),i=this.cache[t]
return e||(e=++this._UID+"",n.setAttribute("uid",e)),i[e]="events"===t?i[e]||{}:i[e]||void 0,i},c.attr=function(t,n){var e,i
return e=r(t)?void 0:f(t),i=e?function(n){e.forEach(function(e){n.setAttribute(e,t[e])})}:function(e){e.setAttribute(t,n)},this.q.forEach(i),this},c.removeAttr=function(t){var n
return n=h(t)?function(n){t.forEach(function(t){n.removeAttribute(t)})}:function(n){n.removeAttribute(t)},this.q.forEach(n),this},c.addClass=function(t){var n=t.split(" ")
return this.q.forEach(function(t){t.classList&&n.forEach(function(n){t.classList.add(n)})}),this},c.removeClass=function(t){var n=t.split(" ")
return this.q.forEach(function(t){t.classList&&n.forEach(function(n){t.classList.remove(n)})}),this},c.toggleClass=function(t){var n=t.split(" ")
return this.q.forEach(function(t){t.classList&&n.forEach(function(n){t.classList.contains(n)?t.classList.remove(n):t.classList.add(n)})}),this},c.css=function(t,e){var i,o
return i=r(t)?void 0:f(t),o=i?function(e){i.forEach(function(i){e.style[i]=n(t[i],i)})}:function(i){i.style[t]=n(e,t)},this.q.forEach(o),this},c.offset=function(){if(!this.q.length)return null
var n=this.q[0].getBoundingClientRect()
return{left:n.left+t.pageXOffset,top:n.top+t.pageYOffset,width:Math.round(n.width),height:Math.round(n.height)}},c.on=function(t,n,e,i,r){var o,s,u=t.split("."),h=u[0],f=u.splice(1).join(".")
return r||"focus"!==h&&"blur"!==h||!e||(r=!0),this.q.forEach(function(t){s=c._setCache("events",t)[c._getUID(t)],s[h]=s[h]||[],o=function(r){var o
f&&(r.namespace=f),i&&(r.data=i),e?(!c(t).find(e).q.indexOf(r.target)||(o=c.contains(r.target).q[0]))&&(o=o||r.target,r.delegateTarget=o,n.call(o,r)):n.call(t,r)},s[h].push({ns:f,sel:e,cb:o,fn:n,cap:r}),t.addEventListener(h,o,r)}),this},c.off=function(t,n,e){var i,r=t.split("."),o=r[0],s=r.splice(1).join("."),u="*"===o
return this.q.forEach(function(t){i=c.cache.events[c._getUID(t)],i&&(u?f(i).forEach(function(r){i[r].forEach(function(i,o,c){e||"focus"!==r&&"blur"!==r||!i.sel||(e=!0),s&&s!==i.ns||n&&n!==i.fn||e!==i.cap||(t.removeEventListener(r,i.cb,i.cap),delete c[o])}),i[r]&&(i[r]=i[r].filter(function(t){return void 0!==t}))}):[o].forEach(function(r){i[r].forEach(function(i,o,c){e||"focus"!==r&&"blur"!==r||!i.sel||(e=!0),s&&s!==i.ns||n&&n!==i.fn||e!==i.cap||(t.removeEventListener(r,i.cb,i.cap),delete c[o])}),i[r]&&(i[r]=i[r].filter(function(t){return void 0!==t}))}))}),this},c.trigger=function(t){var n=document.createEvent("Event")
return n.initEvent(t,!0,!0),this.q.forEach(function(t){t.dispatchEvent(n)}),this},c.height=function(t){return this._hw("height",t)},c.width=function(t){return this._hw("width",t)},c._hw=function(t,i){var r,c={height:{w:"innerHeight",d:"scrollHeight"},width:{w:"innerWidth",d:"scrollWidth"}},s=this.q[0],u=e(s)?s.documentElement:null,h=o(s)?s:null,f=c[t]
return i?(this.q.forEach(function(e){e.style[t]=n(i)}),this):s?h?h[f.w]:u?u[f.d]:(r=this.offset())&&r[t]:0},c.is=function(t){return this.q=this.q.filter(function(n){return c.matches(n,t)}),this},c.not=function(t){return this.q=this.q.filter(function(n){return!c.matches(n,t)}),this},c.create=function(t){var n=document.createElement("div")
return n.innerHTML=t,c(n.removeChild(n.firstElementChild))},c.remove=function(){function t(t){delete c.cache.events[t.getAttribute("uid")]}return this.q.forEach(function(n){u.call(n.querySelectorAll("[uid]")).forEach(t),t(n),n.parentNode.removeChild(n)}),this},c.hide=function(){return this._sh("hide")},c.show=function(){return this._sh("show")},c.toggle=function(){var t=u.call(this.q)
return t.forEach(function(t){"none"===getComputedStyle(t).display?c(t).show():c(t).hide()}),c(t)},c._sh=function(t){function n(t){return r?"none"!==t:"none"===t}function e(t){return r?"none"!==t:"none"===t}function i(t){return r?"none"===t:"none"!==t}var r="show"===t
return this.q.forEach(function(t){var o=c._setCache("display",t),s=t.getAttribute("uid"),u=o[s],h=getComputedStyle(t).display,f=t.style.display,a=h||f
n(a)?e(u)&&delete o[s]:u&&e(u)?(t.style.display=u,delete o[s]):f&&i(f)?(o[s]=f,t.style.display=r?"":"none"):t.style.display=r?"block":"none"}),this},c.closest=function(t){var n=[]
return this.q.forEach(function(i){for(;i&&!c.matches(i,t);)i=!e(i)&&i.parentNode;-1===n.indexOf(i)&&n.push(i)}),c(n)},c.contains=function(t){var n
return this.q.some(function(e){return e.contains(t)?n=e:void 0}),c(n)},c.find=function(t){function n(t){e.push(t)}var e=[]
return this.q.forEach(function(e){e.querySelectorAll&&s.forEach.call(e.querySelectorAll(t),n)}),c(e)},c.parent=function(){var t,n=[]
return this.q.forEach(function(e){-1===n.indexOf(t=e.parentElement)&&t&&n.push(t)}),c(n)},c.parents=function(){var t,n=[]
return this.q.forEach(function(i){for(t=i;(t=t.parentElement)&&!e(t);)-1===n.indexOf(t)&&n.push(t)}),c(n)},c.val=function(t){return this.q.forEach(function(n){n.value=t}),this},c.deserialize=function(t){var n,e={}
return t.split("&").forEach(function(t){t&&(n=t.split("="),e[decodeURIComponent(n[0])]=decodeURIComponent(n[1]))}),e},c.extend=function(){function t(t){i[t]=n[t]}for(var n,e=u.call(arguments),i=e.shift();e.length&&(n=e.shift());)f(n).forEach(t)
return i},c.matches=function(t,n){return 1!==t.nodeType?!1:(this._matchesSelector||(this._matchesSelector=t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector||t.matchesSelector),this._matchesSelector.call(t,n))},c.serialize=function(t){var n=[]
return f(t).forEach(function(e){n.push(encodeURIComponent(e)+"="+encodeURIComponent(t[e]))}),n.join("&")},t.dom=c}(window)
</script>
<div id="banner">
  <h1 id="title">
    <a href="http://www.w3.org/"><img alt="W3C" width="110" height="61" id="logo" src="./images/w3c.png"></a>
    <a href="./"><span>Markup Validation Service</span></a>
  </h1>
  <p id="tagline">
    Check the markup (HTML, XHTML, …) of Web documents
  </p>
</div>
<div id="frontforms">
  <ul id="tabset_tabs">
    <li class="selected">
      <a href="#validate_by_uri"><span>Validate by</span> URI</a>
    </li>
    <li class="">
      <a href="#validate_by_upload"><span>Validate by</span> File Upload</a>
    </li>
    <li class="">
      <a href="#validate_by_input"><span>Validate by</span> Direct Input</a>
    </li>
  </ul>
  <div id="fields">
    <fieldset id="validate-by-uri" class="tabset_content front" style="visibility: visible; zoom: 1; opacity: 1; display: block; ">
      <legend class="tabset_label">
        Validate by URI
      </legend>
      <form method="get" action="check">
        <p class="instructions">
          Validate a document online:
        </p>
        <p>
          <label title="Address of page to Validate" for="uri">
            Address:
          </label>
          <input type="text" name="uri" id="uri" size="45">
        </p>
        <fieldset id="extra_opt_uri" class="moreoptions">
          <legend class="toggletext">
            <a href="#validate_by_uri+with_options"><img id="toggleiconURI" class="toggleicon" src="./images/arrow-closed.png" alt="Show "> More Options</a>
          </legend>
          <div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: static; overflow-x: hidden; overflow-y: hidden; height: 0px; ">
            <div class="options" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: -192px; ">
              <table>
                <tbody>
                  <tr>
                    <th>
                      <label for="uri-charset">
                        Character Encoding
                      </label>
                    </th>
                    <td>
                      <select id="uri-charset" name="charset">
                        <option value="(detect automatically)" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="utf-8">
                          utf-8 (Unicode, worldwide)
                        </option>
                        <option value="utf-16">
                          utf-16 (Unicode, worldwide)
                        </option>
                        <option value="iso-8859-1">
                          iso-8859-1 (Western Europe)
                        </option>
                        <option value="iso-8859-2">
                          iso-8859-2 (Central Europe)
                        </option>
                        <option value="iso-8859-3">
                          iso-8859-3 (Southern Europe)
                        </option>
                        <option value="iso-8859-4">
                          iso-8859-4 (North European)
                        </option>
                        <option value="iso-8859-5">
                          iso-8859-5 (Cyrillic)
                        </option>
                        <option value="iso-8859-6-i">
                          iso-8859-6-i (Arabic)
                        </option>
                        <option value="iso-8859-7">
                          iso-8859-7 (Greek)
                        </option>
                        <option value="iso-8859-8">
                          iso-8859-8 (Hebrew, visual)
                        </option>
                        <option value="iso-8859-8-i">
                          iso-8859-8-i (Hebrew, logical)
                        </option>
                        <option value="iso-8859-9">
                          iso-8859-9 (Turkish)
                        </option>
                        <option value="iso-8859-10">
                          iso-8859-10 (Latin 6)
                        </option>
                        <option value="iso-8859-11">
                          iso-8859-11 (Latin/Thai)
                        </option>
                        <option value="iso-8859-13">
                          iso-8859-13 (Latin 7, Baltic Rim)
                        </option>
                        <option value="iso-8859-14">
                          iso-8859-14 (Latin 8, Celtic)
                        </option>
                        <option value="iso-8859-15">
                          iso-8859-15 (Latin 9)
                        </option>
                        <option value="iso-8859-16">
                          iso-8859-16 (Latin 10)
                        </option>
                        <option value="us-ascii">
                          us-ascii (basic English)
                        </option>
                        <option value="euc-jp">
                          euc-jp (Japanese, Unix)
                        </option>
                        <option value="shift_jis">
                          shift_jis (Japanese, Win/Mac)
                        </option>
                        <option value="iso-2022-jp">
                          iso-2022-jp (Japanese, email)
                        </option>
                        <option value="euc-kr">
                          euc-kr (Korean)
                        </option>
                        <option value="ksc_5601">
                          ksc_5601 (Korean)
                        </option>
                        <option value="gb2312">
                          gb2312 (Chinese, simplified)
                        </option>
                        <option value="gb18030">
                          gb18030 (Chinese, simplified)
                        </option>
                        <option value="big5">
                          big5 (Chinese, traditional)
                        </option>
                        <option value="big5-HKSCS">
                          Big5-HKSCS (Chinese, Hong Kong)
                        </option>
                        <option value="tis-620">
                          tis-620 (Thai)
                        </option>
                        <option value="koi8-r">
                          koi8-r (Russian)
                        </option>
                        <option value="koi8-u">
                          koi8-u (Ukrainian)
                        </option>
                        <option value="iso-ir-111">
                          iso-ir-111 (Cyrillic KOI-8)
                        </option>
                        <option value="macintosh">
                          macintosh (MacRoman)
                        </option>
                        <option value="windows-1250">
                          windows-1250 (Central Europe)
                        </option>
                        <option value="windows-1251">
                          windows-1251 (Cyrillic)
                        </option>
                        <option value="windows-1252">
                          windows-1252 (Western Europe)
                        </option>
                        <option value="windows-1253">
                          windows-1253 (Greek)
                        </option>
                        <option value="windows-1254">
                          windows-1254 (Turkish)
                        </option>
                        <option value="windows-1255">
                          windows-1255 (Hebrew)
                        </option>
                        <option value="windows-1256">
                          windows-1256 (Arabic)
                        </option>
                        <option value="windows-1257">
                          windows-1257 (Baltic Rim)
                        </option>
                      </select>
                    </td>
                    <td>
                      <input id="uri-fbc" name="fbc" type="checkbox" value="1">
                      <label for="uri-fbc" title="Use selected Character encoding only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <label for="uri-doctype">
                        Document Type
                      </label>
                    </th>
                    <td>
                      <select id="uri-doctype" name="doctype">
                        <option value="Inline" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="HTML5">
                          HTML5 (experimental)
                        </option>
                        <option value="XHTML 1.0 Strict">
                          XHTML 1.0 Strict
                        </option>
                        <option value="XHTML 1.0 Transitional">
                          XHTML 1.0 Transitional
                        </option>
                        <option value="XHTML 1.0 Frameset">
                          XHTML 1.0 Frameset
                        </option>
                        <option value="HTML 4.01 Strict">
                          HTML 4.01 Strict
                        </option>
                        <option value="HTML 4.01 Transitional">
                          HTML 4.01 Transitional
                        </option>
                        <option value="HTML 4.01 Frameset">
                          HTML 4.01 Frameset
                        </option>
                        <option value="HTML 4.01 + RDFa 1.1">
                          HTML 4.01 + RDFa 1.1
                        </option>
                        <option value="HTML 3.2">
                          HTML 3.2
                        </option>
                        <option value="HTML 2.0">
                          HTML 2.0
                        </option>
                        <option value="ISO/IEC 15445:2000 (&quot;ISO HTML&quot;)">
                          ISO/IEC 15445:2000 ("ISO HTML")
                        </option>
                        <option value="XHTML 1.1">
                          XHTML 1.1
                        </option>
                        <option value="XHTML + RDFa">
                          XHTML + RDFa
                        </option>
                        <option value="XHTML Basic 1.0">
                          XHTML Basic 1.0
                        </option>
                        <option value="XHTML Basic 1.1">
                          XHTML Basic 1.1
                        </option>
                        <option value="XHTML Mobile Profile 1.2">
                          XHTML Mobile Profile 1.2
                        </option>
                        <option value="XHTML-Print 1.0">
                          XHTML-Print 1.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0">
                          XHTML 1.1 plus MathML 2.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0 plus SVG 1.1">
                          XHTML 1.1 plus MathML 2.0 plus SVG 1.1
                        </option>
                        <option value="MathML 2.0">
                          MathML 2.0
                        </option>
                        <option value="SVG 1.0">
                          SVG 1.0
                        </option>
                        <option value="SVG 1.1">
                          SVG 1.1
                        </option>
                        <option value="SVG 1.1 Tiny">
                          SVG 1.1 Tiny
                        </option>
                        <option value="SVG 1.1 Basic">
                          SVG 1.1 Basic
                        </option>
                        <option value="SMIL 1.0">
                          SMIL 1.0
                        </option>
                        <option value="SMIL 2.0">
                          SMIL 2.0
                        </option>
                      </select>
                    </td>
                    <td>
                      <label for="uri-fbd">
                        <input id="uri-fbd" name="fbd" type="checkbox" value="1" title="Use selected Document Type only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <input type="radio" name="group" id="urigroup_no" value="0" checked="checked">
                      <label for="urigroup_no">
                        List Messages Sequentially
                      </label>
                      <input type="radio" name="group" id="urigroup_yes" value="1">
                      <label for="urigroup_yes">
                        Group Error Messages by Type
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="uri-ss" name="ss" type="checkbox" value="1">
                      <label title="Show Page Source" for="uri-ss">
                        Show Source
                      </label>
                    </td>
                    <td colspan="2">
                      <input id="uri-st" name="st" type="checkbox" value="1">
                      <label for="uri-st">
                        Clean up Markup with HTML-Tidy
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="uri-outline" name="outline" type="checkbox" value="1">
                      <label title="Show an Outline of the document" for="uri-outline">
                        Show Outline
                      </label>
                    </td>
                    <td>
                      <input id="uri-No200" name="No200" type="checkbox" value="1">
                      <label title="Validate also pages for which the HTTP status code indicates an error"
                     for="uri-No200">
                        Validate error pages
                      </label>
                    </td>
                    <td>
                      <input id="uri-verbose" name="verbose" type="checkbox" value="1">
                      <label title="Verbose Output" for="uri-verbose">
                        Verbose Output
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
        <p class="submit_button">
          <input type="submit" title="Submit for validation" value="Check" style="display: none; ">
          <a class="submit" href="#"><span>Check</span></a>
        </p>
      </form>
    </fieldset>
    <fieldset id="validate-by-upload" class="tabset_content front" style="display: none; ">
      <legend class="tabset_label">
        Validate by File Upload
      </legend>
      <form method="post" enctype="multipart/form-data" action="check">
        <p class="instructions">
          Upload a document for validation:
        </p>
        <p>
          <label title="Choose a Local File to Upload and Validate" for="uploaded_file">
            File:
          </label>
          <input type="file" id="uploaded_file" name="uploaded_file" size="30">
        </p>
        <fieldset id="extra_opt_upload" class="moreoptions">
          <legend class="toggletext">
            <a href="#validate_by_upload+with_options"><img class="toggleicon" src="./images/arrow-closed.png" alt="Show "> More Options</a>
          </legend>
          <div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: static; overflow-x: hidden; overflow-y: hidden; ">
            <div class="options" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
              <table>
                <tbody>
                  <tr>
                    <th>
                      <label for="upload-charset">
                        Character Encoding
                      </label>
                    </th>
                    <td>
                      <select id="upload-charset" name="charset">
                        <option value="(detect automatically)" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="utf-8">
                          utf-8 (Unicode, worldwide)
                        </option>
                        <option value="utf-16">
                          utf-16 (Unicode, worldwide)
                        </option>
                        <option value="iso-8859-1">
                          iso-8859-1 (Western Europe)
                        </option>
                        <option value="iso-8859-2">
                          iso-8859-2 (Central Europe)
                        </option>
                        <option value="iso-8859-3">
                          iso-8859-3 (Southern Europe)
                        </option>
                        <option value="iso-8859-4">
                          iso-8859-4 (North European)
                        </option>
                        <option value="iso-8859-5">
                          iso-8859-5 (Cyrillic)
                        </option>
                        <option value="iso-8859-6-i">
                          iso-8859-6-i (Arabic)
                        </option>
                        <option value="iso-8859-7">
                          iso-8859-7 (Greek)
                        </option>
                        <option value="iso-8859-8">
                          iso-8859-8 (Hebrew, visual)
                        </option>
                        <option value="iso-8859-8-i">
                          iso-8859-8-i (Hebrew, logical)
                        </option>
                        <option value="iso-8859-9">
                          iso-8859-9 (Turkish)
                        </option>
                        <option value="iso-8859-10">
                          iso-8859-10 (Latin 6)
                        </option>
                        <option value="iso-8859-11">
                          iso-8859-11 (Latin/Thai)
                        </option>
                        <option value="iso-8859-13">
                          iso-8859-13 (Latin 7, Baltic Rim)
                        </option>
                        <option value="iso-8859-14">
                          iso-8859-14 (Latin 8, Celtic)
                        </option>
                        <option value="iso-8859-15">
                          iso-8859-15 (Latin 9)
                        </option>
                        <option value="iso-8859-16">
                          iso-8859-16 (Latin 10)
                        </option>
                        <option value="us-ascii">
                          us-ascii (basic English)
                        </option>
                        <option value="euc-jp">
                          euc-jp (Japanese, Unix)
                        </option>
                        <option value="shift_jis">
                          shift_jis (Japanese, Win/Mac)
                        </option>
                        <option value="iso-2022-jp">
                          iso-2022-jp (Japanese, email)
                        </option>
                        <option value="euc-kr">
                          euc-kr (Korean)
                        </option>
                        <option value="ksc_5601">
                          ksc_5601 (Korean)
                        </option>
                        <option value="gb2312">
                          gb2312 (Chinese, simplified)
                        </option>
                        <option value="gb18030">
                          gb18030 (Chinese, simplified)
                        </option>
                        <option value="big5">
                          big5 (Chinese, traditional)
                        </option>
                        <option value="big5-HKSCS">
                          Big5-HKSCS (Chinese, Hong Kong)
                        </option>
                        <option value="tis-620">
                          tis-620 (Thai)
                        </option>
                        <option value="koi8-r">
                          koi8-r (Russian)
                        </option>
                        <option value="koi8-u">
                          koi8-u (Ukrainian)
                        </option>
                        <option value="iso-ir-111">
                          iso-ir-111 (Cyrillic KOI-8)
                        </option>
                        <option value="macintosh">
                          macintosh (MacRoman)
                        </option>
                        <option value="windows-1250">
                          windows-1250 (Central Europe)
                        </option>
                        <option value="windows-1251">
                          windows-1251 (Cyrillic)
                        </option>
                        <option value="windows-1252">
                          windows-1252 (Western Europe)
                        </option>
                        <option value="windows-1253">
                          windows-1253 (Greek)
                        </option>
                        <option value="windows-1254">
                          windows-1254 (Turkish)
                        </option>
                        <option value="windows-1255">
                          windows-1255 (Hebrew)
                        </option>
                        <option value="windows-1256">
                          windows-1256 (Arabic)
                        </option>
                        <option value="windows-1257">
                          windows-1257 (Baltic Rim)
                        </option>
                      </select>
                    </td>
                    <td>
                      <input id="upload-fbc" name="fbc" type="checkbox" value="1">
                      <label for="upload-fbc" title="Use selected Character encoding only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <label for="upload-doctype">
                        Document Type
                      </label>
                    </th>
                    <td>
                      <select id="upload-doctype" name="doctype">
                        <option value="Inline" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="HTML5">
                          HTML5 (experimental)
                        </option>
                        <option value="XHTML 1.0 Strict">
                          XHTML 1.0 Strict
                        </option>
                        <option value="XHTML 1.0 Transitional">
                          XHTML 1.0 Transitional
                        </option>
                        <option value="XHTML 1.0 Frameset">
                          XHTML 1.0 Frameset
                        </option>
                        <option value="HTML 4.01 Strict">
                          HTML 4.01 Strict
                        </option>
                        <option value="HTML 4.01 Transitional">
                          HTML 4.01 Transitional
                        </option>
                        <option value="HTML 4.01 Frameset">
                          HTML 4.01 Frameset
                        </option>
                        <option value="HTML 4.01 + RDFa 1.1">
                          HTML 4.01 + RDFa 1.1
                        </option>
                        <option value="HTML 3.2">
                          HTML 3.2
                        </option>
                        <option value="HTML 2.0">
                          HTML 2.0
                        </option>
                        <option value="ISO/IEC 15445:2000 (&quot;ISO HTML&quot;)">
                          ISO/IEC 15445:2000 ("ISO HTML")
                        </option>
                        <option value="XHTML 1.1">
                          XHTML 1.1
                        </option>
                        <option value="XHTML + RDFa">
                          XHTML + RDFa
                        </option>
                        <option value="XHTML Basic 1.0">
                          XHTML Basic 1.0
                        </option>
                        <option value="XHTML Basic 1.1">
                          XHTML Basic 1.1
                        </option>
                        <option value="XHTML Mobile Profile 1.2">
                          XHTML Mobile Profile 1.2
                        </option>
                        <option value="XHTML-Print 1.0">
                          XHTML-Print 1.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0">
                          XHTML 1.1 plus MathML 2.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0 plus SVG 1.1">
                          XHTML 1.1 plus MathML 2.0 plus SVG 1.1
                        </option>
                        <option value="MathML 2.0">
                          MathML 2.0
                        </option>
                        <option value="SVG 1.0">
                          SVG 1.0
                        </option>
                        <option value="SVG 1.1">
                          SVG 1.1
                        </option>
                        <option value="SVG 1.1 Tiny">
                          SVG 1.1 Tiny
                        </option>
                        <option value="SVG 1.1 Basic">
                          SVG 1.1 Basic
                        </option>
                        <option value="SMIL 1.0">
                          SMIL 1.0
                        </option>
                        <option value="SMIL 2.0">
                          SMIL 2.0
                        </option>
                      </select>
                    </td>
                    <td>
                      <label for="upload-fbd">
                        <input id="upload-fbd" name="fbd" type="checkbox" value="1" title="Use selected Document Type only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <input type="radio" name="group" id="uploadgroup_no" value="0" checked="checked">
                      <label for="uploadgroup_no">
                        List Messages Sequentially
                      </label>
                      <input type="radio" name="group" id="uploadgroup_yes" value="1">
                      <label for="uploadgroup_yes">
                        Group Error Messages by Type
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="upload-ss" name="ss" type="checkbox" value="1">
                      <label title="Show Page Source" for="upload-ss">
                        Show Source
                      </label>
                    </td>
                    <td colspan="2">
                      <input id="upload-st" name="st" type="checkbox" value="1">
                      <label for="upload-st">
                        Clean up Markup with HTML-Tidy
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="upload-outline" name="outline" type="checkbox" value="1">
                      <label title="Show an Outline of the document" for="upload-outline">
                        Show Outline
                      </label>
                    </td>
                    <td>
                      <input id="upload-No200" name="No200" type="checkbox" value="1">
                      <label title="Validate also pages for which the HTTP status code indicates an error"
                     for="upload-No200">
                        Validate error pages
                      </label>
                    </td>
                    <td>
                      <input id="upload-verbose" name="verbose" type="checkbox" value="1">
                      <label title="Verbose Output" for="upload-verbose">
                        Verbose Output
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
        <!-- invisible -->
        <p class="submit_button">
          <input title="Submit for validation" type="submit" value="Check" style="display: none; ">
          <a class="submit" href="#"><span>Check</span></a>
        </p>
      </form>
      <p>
        <strong>
          Note
        </strong>
        : file upload may not work with Internet Explorer on some versions of Windows XP
        Service Pack 2, see our
        <a href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information page</a>
        on the W3C QA Website.
      </p>
    </fieldset>
    <fieldset id="validate-by-input" class="tabset_content front" style="display: none; ">
      <legend class="tabset_label">
        Validate by direct input
      </legend>
      <form method="post" enctype="multipart/form-data" action="check">
        <p class="instructions">
          <label title="Paste a complete (HTML) Document here" for="fragment">
            Enter the Markup to validate
          </label>
          :
          <br>
          <textarea id="fragment" name="fragment" rows="12" cols="80">
          </textarea>
          <!-- <br />
         <label for="parsemodel">
           Treat as:
         </label>
         <select id="parsemodel" name="parsemodel">
           <option value="sgml">
             HTML
           </option>
           <option value="xml">
             XML (and XHTML)
           </option>
         </select>
         -->
        </p>
        <fieldset id="extra_opt_direct" class="moreoptions">
          <legend class="toggletext">
            <a href="#validate_by_input+with_options"><img class="toggleicon" src="./images/arrow-closed.png" alt="Show "> More Options</a>
          </legend>
          <div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: static; overflow-x: hidden; overflow-y: hidden; ">
            <div class="options" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
              <table>
                <tbody>
                  <tr>
                    <th colspan="3">
                      <input id="direct_prefill_no" name="prefill" type="radio" value="0" checked="checked">
                      <label for="direct_prefill_no">
                        Validate Full Document
                      </label>
                    </th>
                  </tr>
                  <tr class="subchoice" id="choice_full">
                    <th class="subchoice_head">
                      <label for="direct-doctype">
                        Use Doctype:
                      </label>
                    </th>
                    <td>
                      <select id="direct-doctype" name="doctype">
                        <option value="Inline" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="HTML5">
                          HTML5 (experimental)
                        </option>
                        <option value="XHTML 1.0 Strict">
                          XHTML 1.0 Strict
                        </option>
                        <option value="XHTML 1.0 Transitional">
                          XHTML 1.0 Transitional
                        </option>
                        <option value="XHTML 1.0 Frameset">
                          XHTML 1.0 Frameset
                        </option>
                        <option value="HTML 4.01 Strict">
                          HTML 4.01 Strict
                        </option>
                        <option value="HTML 4.01 Transitional">
                          HTML 4.01 Transitional
                        </option>
                        <option value="HTML 4.01 Frameset">
                          HTML 4.01 Frameset
                        </option>
                        <option value="HTML 4.01 + RDFa 1.1">
                          HTML 4.01 + RDFa 1.1
                        </option>
                        <option value="HTML 3.2">
                          HTML 3.2
                        </option>
                        <option value="HTML 2.0">
                          HTML 2.0
                        </option>
                        <option value="ISO/IEC 15445:2000 (&quot;ISO HTML&quot;)">
                          ISO/IEC 15445:2000 ("ISO HTML")
                        </option>
                        <option value="XHTML 1.1">
                          XHTML 1.1
                        </option>
                        <option value="XHTML + RDFa">
                          XHTML + RDFa
                        </option>
                        <option value="XHTML Basic 1.0">
                          XHTML Basic 1.0
                        </option>
                        <option value="XHTML Basic 1.1">
                          XHTML Basic 1.1
                        </option>
                        <option value="XHTML Mobile Profile 1.2">
                          XHTML Mobile Profile 1.2
                        </option>
                        <option value="XHTML-Print 1.0">
                          XHTML-Print 1.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0">
                          XHTML 1.1 plus MathML 2.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0 plus SVG 1.1">
                          XHTML 1.1 plus MathML 2.0 plus SVG 1.1
                        </option>
                        <option value="MathML 2.0">
                          MathML 2.0
                        </option>
                        <option value="SVG 1.0">
                          SVG 1.0
                        </option>
                        <option value="SVG 1.1">
                          SVG 1.1
                        </option>
                        <option value="SVG 1.1 Tiny">
                          SVG 1.1 Tiny
                        </option>
                        <option value="SVG 1.1 Basic">
                          SVG 1.1 Basic
                        </option>
                        <option value="SMIL 1.0">
                          SMIL 1.0
                        </option>
                        <option value="SMIL 2.0">
                          SMIL 2.0
                        </option>
                      </select>
                    </td>
                    <td>
                      <input id="direct-fbd" name="fbd" type="checkbox" value="1">
                      <label for="direct-fbd">
                        Only if Doctype is missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <th colspan="3">
                      <input id="direct_prefill_yes" name="prefill" type="radio" value="1">
                      <label for="direct_prefill_yes">
                        Validate HTML fragment
                      </label>
                    </th>
                  </tr>
                  <tr class="subchoice" id="choice_frag">
                    <th class="subchoice_head">
                      Use Doctype:
                    </th>
                    <td colspan="2">
                      <input type="radio" name="prefill_doctype" id="directfill_doctype_html401" value="html401"
                     checked="checked">
                      <label for="directfill_doctype_html401">
                        HTML 4.01
                      </label>
                      <input type="radio" name="prefill_doctype" id="directfill_doctype_xhtml10" value="xhtml10">
                      <label for="directfill_doctype_xhtml10">
                        XHTML 1.0
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <input type="radio" name="group" id="directgroup_no" value="0" checked="checked">
                      <label for="directgroup_no">
                        List Messages Sequentially
                      </label>
                      <input type="radio" name="group" id="directgroup_yes" value="1">
                      <label for="directgroup_yes">
                        Group Error Messages by Type
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="direct-ss" name="ss" type="checkbox" value="1">
                      <label title="Show Page Source" for="direct-ss">
                        Show Source
                      </label>
                    </td>
                    <td colspan="2">
                      <input id="direct-st" name="st" type="checkbox" value="1">
                      <label for="direct-st">
                        Clean up Markup with HTML-Tidy
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="direct-outline" name="outline" type="checkbox" value="1">
                      <label title="Show an Outline of the document" for="direct-outline">
                        Show Outline
                      </label>
                    </td>
                    <td>
                      <input id="direct-No200" name="No200" type="checkbox" value="1">
                      <label title="Validate also pages for which the HTTP status code indicates an error"
                     for="direct-No200">
                        Validate error pages
                      </label>
                    </td>
                    <td>
                      <input id="direct-verbose" name="verbose" type="checkbox" value="1">
                      <label title="Verbose Output" for="direct-verbose">
                        Verbose Output
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
        <p class="submit_button">
          <input title="Submit for validation" type="submit" value="Check" style="display: none; ">
          <a class="submit" href="#"><span>Check</span></a>
        </p>
      </form>
    </fieldset>
  </div>
  <!-- fields -->
</div>
<!-- frontforms -->
<div class="intro">
  <p>
    This validator checks the
    <a href="docs/help.html#validation_basics" title="What is markup validation?">markup validity</a>
    of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific
    content such as
    <a href="http://validator.w3.org/feed/" title="Feed validator, hosted at W3C">RSS/Atom feeds</a>
    or
    <a href="http://jigsaw.w3.org/css-validator/" title="W3C CSS Validation Service">CSS stylesheets</a>
    ,
    <a href="http://validator.w3.org/mobile/" title="MobileOK Checker">MobileOK content</a>
    , or to
    <a href="http://validator.w3.org/checklink" title="W3C Link Checker">find broken links</a>
    , there are
    <a href="http://www.w3.org/QA/Tools/">other validators and tools</a>
    available. As an alternative you can also try our
    <a href="http://validator.w3.org/nu">non-DTD-based validator</a>
    .
  </p>
</div>
<div class="intro" id="don_program" style="min-height: 76px; ">
  <script type="text/javascript" async="" src="http://api.flattr.com/js/0.6/load.js?mode=auto">
  </script>
  <span id="don_program_img" lang="en" dir="ltr">
    <a href="http://www.mozilla.com"><img src="http://www.w3.org/QA/Tools/logos_sup/moz_logo.jpg" alt="Mozilla Foundation Logo"></a>
  </span>
  <span style="float:right;">
    <iframe src="http://api.flattr.com/button/view/?url=http%3A%2F%2Fvalidator.w3.org&amp;title=View%20W3C-Validator%20on%20flattr.com&amp;"
   class="FlattrButton" width="55" height="62" frameborder="0" scrolling="no" border="0"
   marginheight="0" marginwidth="0" allowtransparency="true">
    </iframe>
  </span>
  <span id="don_program_text" lang="en" dir="ltr" style="padding-top: 36px; padding-bottom: 36px; ">
    The W3C validators are developed with assistance from the Mozilla Foundation, and
    supported by community donations.
    <br>
    <a href="http://www.w3.org/QA/Tools/Donate">Donate</a>
    and help us build better tools for a better web.
  </span>
  <div style="clear:both">
  </div>
</div>
<script type="text/javascript" src="http://www.w3.org/QA/Tools/don_prog.js">
</script>
<ul class="navbar" id="menu">
  <li>
    <a href="./" accesskey="1" title="Go to the Home Page for The W3C Markup Validation Service">Home</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./about.html" title="Information About this Service">About...</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./whatsnew.html" title="The changes made to this service recently">News</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./docs/" accesskey="3" title="Documentation for this Service">Docs</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./docs/help.html" title="Help and answers to frequently asked questions">Help&nbsp;&amp;&nbsp;<acronym title="Frequently Asked Questions">FAQ</acronym></a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./feedback.html" accesskey="4" title="How to provide feedback on this service">Feedback</a>
  </li>
  <li>
    <a href="./contribute.html" title="How to contribute to the validator project">Contribute</a>
  </li>
</ul>
<div id="footer">
  <p id="activity_logos">
    <a href="http://www.w3.org/Status" title="W3C's Open Source, bringing you free Web quality tools and more"><img src="http://www.w3.org/Icons/WWW/w3c_home_nb" alt="W3C" width="72" height="47"><img src="./images/opensource-55x48.png" alt="Open-Source" title="We are building certified Open Source/Free Software. - see www.opensource.org" width="55" height="48"></a>
  </p>
  <p id="support_logo">
    <a href="http://www.w3.org/QA/Tools/Donate">
    <img src="http://www.w3.org/QA/Tools/I_heart_validator" alt="I heart Validator logo" title=" Validators Donation Program" width="80" height="15">
    </a>
  </p>
  <p id="version_info">
    This service runs the W3C Markup Validator,
    <a href="./whatsnew.html#v13"><abbr title="version">v</abbr>1.3</a>
    .
  </p>
  <p class="copyright">
    <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
    © 1994-2012
    <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>
    ® (
    <a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>
    ,
    <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>
    ,
    <a href="http://www.keio.ac.jp/">Keio</a>
    ), All Rights Reserved. W3C
    <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>
    ,
    <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    ,
    <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
    and
    <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
    rules apply. Your interactions with this site are in accordance with our
    <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a>
    and
    <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a>
    privacy statements.
  </p>
</div>
<script>
Benchmark.prototype.setup = function() {
    var el, res, domEl;
};
</script>

Preparation code output

Validate by URI

Validate a document online:

Show More Options

Check

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets , MobileOK content , or to find broken links , there are other validators and tools available. As an alternative you can also try our non-DTD-based validator .

Mozilla Foundation Logo The W3C validators are developed with assistance from the Mozilla Foundation, and supported by community donations.
Donate and help us build better tools for a better web.

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
zepto id
el = Zepto('#uri-ss');
pending…
jquery id
el = jQuery('#uri-ss');
pending…
zepto classname
res = Zepto('.options');
pending…
jquery classname
res = jQuery('.options');
pending…
zepto tag
res = Zepto('li');
pending…
jquery tag
res = jQuery('li');
pending…
dom id
domEl = dom(document.getElementById('uri-ss'));
pending…
dom classname
domEl = dom(document.getElementsByClassName('options'));
pending…
dom tag
domEl = dom(document.getElementsByTagName('li'));
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