Css 工具，用于计算 html 中有多少(以字节为单位)内联 css

Question

有 Firebug AddOn - “Inline Code Finder”，但它没有显示多少字节!你知道有什么工具可以做到这一点吗？

Answer 1

您可以在 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 提供

---

变体 - 排除 SPAN 和 P，并计算其他所有内容:

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