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

2017年11月17日 2.06k 次阅读 0 条评论

通过一段代码实现统计网页中 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);

效果演示

Vtrois

没有天生的高手,更没有永远的菜鸟!

发表评论

在发表评论前请确认您的言论中没有违反中国各项法律、法规和违背社会道德的内容。任何无意义的留言内容都会被直接删除。