Css工具，用于计算html中内联Css的数量（以字节为单位）

有Firebug插件-“内联代码查找器”，但它没有显示多少字节！你知道有什么工具可以做到这一点吗？

Stoyan Stefanov创建了一个非常好的工具，在页面上计算js/css的值，并称之为statsy

下面是他网站上的解释

结果

运行书签后，让它发出警报 这些统计数据包括：

• • JS属性（例如onclick）-这是所有onclick的总和， onmouseover等，包括 属性名。例如，11个字符（字节） JavaScript属性代码
  • CSS样式属性-所有样式的总和=“…”
  • Inline JS-所有脚本标记的所有内容的总和（不包括 标签本身）
  • 内联CSS-所有标记内容的总和
  • 所有innerHTML-这是document.documentElement.innerHTML.length， 它应该靠近打开的拉链 页面大小，前提是页面 没有做很多DOM操作
  • DOM元素-页面上的元素总数为 仅使用 document.getElementsByTagName（'*'）.length

---

对找到的CSS进行字符计数-通常1个字符是1个字节。

您可以在Firebug控制台中运行以下JS位，以获取所有CSS的字节大小

（解开所有链接样式表，加载页面并运行此JS，以有效地获得唯一声明的内联CSS大小）

（字节转换正确处理UTF-8，由

---

变量-排除跨距和Ps，并计算所有其他变量：

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

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