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

Question

有Firebug AddOn -“内联代码查找器”，但它没有显示多少字节！你知道做这件事的工具吗？

Answer 1

Stoyan Stefanov创建了一个非常好的工具来计算页面上js/css的值，并将其命名为statsy。

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

以下是取自他的网站的解释

结果

一旦你运行了bookmarklet，它就会提醒这些统计点：

• ​
  • JS属性(例如onclick) -这是包括属性名称在内的所有onclick、onmouseover等等的总和。举个例子，代码和CSS样式属性的总和是11个字符(字节)-所有style="..."
  • Inline JS的总和-所有脚本标记的所有内容的总和(不包括标记itself)
  • Inline CSS-所有标记内容的总和
  • innerHTML -这是document.documentElement.innerHTML.length，它应该接近未压缩的页面大小，前提是页面没有做大量的DOM manipulation
  • DOM元素-页面上的元素总数是

简单地使用document.getElementsByTagName('*').length进行计数

​

Answer 2

您可以在Firebug控制台中运行以下JS，以获取所有effective inline style rules as CSS的字节大小。

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

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

(转换为字节可以正确处理UTF-8，由dt.in.th/2008-09-16.string-length-in-bytes提供

Variation -排除跨度和P，并计算其他所有内容：

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

Answer 3

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