Outil Css, pour calculer le nombre de css en ligne (en octets) en html

Question

Il ya Firebug AddOn - "Inline Code Finder", mais il ne montre pas combien d'octets! Connaissez-vous un outil qui le fait?

Answer 1

Stoyan Stefanov a créé un outil vraiment sympa fr travailler les valeurs de js/css sur une page et a appelé statsy

http://www.phpied.com/statsy-more-data-points-for-markup-quality/

Voici une explication tirée de son site

les résultats

Une fois que vous exécutez le bookmarklet il alerte ces points de stats:

• • JS attributs (par exemple, onclick) - c'est la somme de tous les onclick, onmouseover et ainsi de suite, y compris les noms d'attribut . Ainsi, par exemple est de 11 caractères (octets) JavaScript attributs Code
  • attributs de style CSS - la somme de tous style = « ... »
  • Inline JS - la somme de tout le contenu de toutes les balises de script (à l'exception l'étiquette lui-même)
  • Inline CSS - somme de tous les contenus de tag
  • tous innerHTML - c'est document.documentElement.innerHTML.length, il devrait être proche de la taille ungzipped d'une page, à condition que la page est ne pas faire beaucoup de manipulation DOM

  • éléments DOM - le nombre total d'éléments sur la page est

    compté simplement en utilisant document.getElementsByTagName ('*') Longueur

Answer 2

Faites un nombre de caractères sur le CSS trouvé. - habituellement 1 char est 1 byte.

Answer 3

Vous pouvez exécuter le bit suivant de JS dans la console Firebug pour la taille en octets de tous les effective inline style rules as CSS. (Décompressez toutes les feuilles de style liées, chargez la page et exécutez ce JS pour obtenir efficacement la taille CSS déclarée en ligne uniquement).

var styleText = ''; 
$('*').each(function(){ 
    styleText += this.style.cssText; 
}); 
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length 
console.log(styleTextLengthInBytes); 

(conversion en octets gère UTF-8 correctement, avec la permission de dt.in.th/2008-09-16.string-length-in-bytes

---

Variation - exclut SPAN et Ps, et compter tout le reste:

var styleText = ''; 
$('* :not(span,p)').each(function(){ 
    styleText += this.style.cssText; 
}); 
var styleTextLengthInBytes = encodeURIComponent(styleText).replace(/%../g, 'x').length 
console.log(styleTextLengthInBytes);