There is Firebug AddOn - "Inline Code Finder", but it doesn't show how many bytes! Do you know any tool doing it?
Add a comment
|
3 Answers
You can run the following bit of JS in the Firebug Console for the size in bytes of all the effective inline style rules as CSS.
(unhook all linked stylesheets, load page and run this JS to effectively get the only-declared-inline CSS size).
var styleText = '';
$('*').each(function(){
styleText += this.style.cssText;
});
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length
console.log(styleTextLengthInBytes);
(conversion to bytes handles UTF-8 correctly, courtesy of dt.in.th/2008-09-16.string-length-in-bytes
Variation - exclude SPANs and Ps, and count everything else:
var styleText = '';
$('* :not(span,p)').each(function(){
styleText += this.style.cssText;
});
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length
console.log(styleTextLengthInBytes);
Comments
Stoyan Stefanov created a really nice tool fr working out the values of js/css on a page and called it statsy
http://www.phpied.com/statsy-more-data-points-for-markup-quality/
Below is an explanation taken from his site
the results
Once you run the bookmarklet it alerts these stats points:
- JS attributes (e.g. onclick) - this is the sum of all onclick, onmouseover and so on including the attribute names. So for example is 11 characters (bytes) of JavaScript attributes code
- CSS style attributes - the sum of all style="..."
- Inline JS - the sum of all the contents of all script tags (excluding the tag itself)
- Inline CSS - sum of all tag contents
- All innerHTML - this is document.documentElement.innerHTML.length, it should be close to the ungzipped size of a page, provided the page is not doing a lot of DOM manipulation
DOM elements - the total number of elements on the page is
counted simply using document.getElementsByTagName('*').length
Comments
Do a character count on the found CSS - usually 1 char is 1 byte.
