MENU

快速统计 HTML/JS/CSS 的大小

• January 3, 2018 • Read: 131 • Code

通过一段代码实现统计网页中 HTML、JS、CSS 的大小,很实用的一个小方法,只需要在浏览器控制台 Console 中运行即可。

注意:因为这段代码是遍历页面中的 style 标签,所以如果是引用进来的 CSS 资源无法进行统计。

const total = document.documentElement.innerHTML.length;
const scripts = Array.from(document.getElementsByTagName('script')).reduce((total, e) => total += e.innerHTML.length, 0);
const styles = Array.from(document.getElementsByTagName('style')).reduce((total, e) => total += e.innerHTML.length, 0);
console.log("JS:", scripts, "CSS:", styles, "HTML:", total - scripts - styles);

[title]效果演示[/title]