Helium是在一个网站多个页面中发现未使用的CSS的工具。这个工具是基于javascript的,运行在浏览器。

Helium的原理:

Helium 接受一组网站不同部分的url,然后加载并解析每个页面,生成一个所有页面样式表的列表。然后它会访问url列表中的每个页面去检查样式表中的选择器在页面中是否使用。最后它会生成一个报告,其中会详细记录了每个样式表中那些在所给页面中没有被用到的选择器。

注意:

你应该在本地开发环境或你的网站的不公开版本运行Helium.如果你运行在公开的网站,每一个访问者都会看到Helium的测试环境。

安装:

  1. 添加一个script到每一个需要被测试的页面的某个地方。一般添加到head或footer部分: <script type="text/javascript" src="path/to/helium.js"></script>
  2. Helium 通过“helium.init()”启动。这个必须放在页面加载完成之后执行的地方。比如:

    <script type="text/javascript">
    window.addEventListener('load', function(){
    
        helium.init();
    
    }, false);</script>
    

用法:

  1. Helium安装好了后,当你加载你的网站,你会看见一个用于输入URL列表的文本框。
  2. 在你粘贴你的链接列表之后,点击左下的Start开始。点击“Reset to Beginning” 来清空文本框和已存储的数据。
  3. 测试将加载和处理你给的每个URL。当他完成后,你会看到一个报告窗口,它会列出每个被检测的的样式表的URL并且在每个样式表下面会列出那些在任何页面都没有被使用的css选择器。
  4. 选择器是有颜色的:
    绿色:没有匹配的选择器,那些主要被检测为未使用的选择器

黑色:基本上这意味着多个选择器被定义在一起,就像“ H1 ,H2,H3 {}” 。所有的选择都经过单独测试,这些显示为了使他们在样式表后更容易找到。

红色:格式不正确的选择器,这些可能比较罕见,这意味着当浏览器试图检测一个选择器,它不能分析它的语法。就像“.classname# idname{}”或一个经常用于IE的“CSS hack”。

蓝色:伪类选择器,就像“div:hover”或“input:focus”.这些选择器需要用户交互来激活。目前Helium还不能模拟交互来确定这些选择器是否有用。开发者可以手动来测试。
浏览器支持:

支持LocalStorage和document.querySelector的现代浏览器。作者决定永远不会支持IE6和7。

重要的东西:

没有跨域的样式表:Helium必须通过XHR才能解析出选择器,以测试加载在您的网站的样式表。这意味着所有的样式表的URL必须在同一域中的网页进行测试。公司目前旗下有没有后端服务器的代理请求,但是这可能是对未来的选择。
页面上没有javascript错误:如果Helium运行一个页面,有一个或多个javascript错误的,它可以很容易地阻止Helium和其他脚本从页面上运行。这将阻止你的测试。
不支持站点地图XML:目前URL列表必须用行来分割。CSV和站点地图XML格式现在不被支持,虽然他将会出现在未来的版本。
项目GitHub主页:https://github.com/geuis/helium-css

标签: none

添加新评论