css insert-js-vs-jq

Benchmark created on

Description

fastest way to dynamically insert css

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

Teardown


    head = document.getElementsByTagName('head')[0];
    l = document.querySelectorAll('link[href="/folder/folder/file.css"]');
    for(var i = 0; i < l.length; i++){
    head.removeChild(l[i]);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
js
h = document.getElementsByTagName('head')[0];
c = document.createElement('link');
c.rel = 'stylesheet';
c.type = 'text/css';
c.href = '/folder/folder/file.css';
h.insertBefore(c, h.firstChild);
ready
jq
$('head').prepend('<link rel="stylesheet" type="text/css" href="/folder/folder/file.css">');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.