使用Helium找出页面上无用的CSS样式
- - WebHek我最无法忍受的一个事情就是多余的代码. 不论是页面中的CSS还是JavaScript，还是浮肿的HTML代码或没有优化的图片，这是我们的懒惰和错误让成千上万的访问用户受连累. 有一个非常棒的工具，叫做 Helium，它能帮助程序员找出样式表中无用的或有问题的样式规则. 第一步是把这个脚本嵌入到你的页面中，在脚本加载后初始化它：.
使用Helium找出页面上无用的CSS样式
标签：
技术技巧
css
css优化
Helium
工具
| 发表时间：2014-04-16 11:50 | 作者：santiago
出处：http://www.webhek.com
我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript，还是浮肿的HTML代码或没有优化的图片，这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具，叫做 Helium，它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!
第一步是把这个脚本嵌入到你的页面中，在脚本加载后初始化它：
<script type="text/javascript" src="js/lib/helium-css/helium.js" onload="helium.init()" async></script>
当这个页面加载完成后，你就能看到一个文本框，在这个文本框里输入你要测试的页面的url。这些页面会被抓取，分析，并生成一份报告，里面详细的列出无用的样式规则、有问题的样式选择器、以及需要手工测试的伪元素选择器：
Helium是一个出色的帮你找到无用CSS样式的好工具。程序员可以根据Helium提供的信息，删除无用的CSS样式。十分适合程序员快速的对他们的CSS代码进行优化。事实上，我还没发现有比这个更简单更实用的工具。你也试试吧！
相关 [helium 页面 无用] 推荐：
Web页面入门
- - 可咔酷 | 网络杂货铺开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有. 确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化.
关于页面字体
- Hu DongHai - DBA Notes关于 Web 页面字体这方面，我是门外汉，弄不出来长篇大论 -- 这样也没必要，从观察统计上简单分析一下看看就够了. 几个页面字体适配度比较好的，HTML body 字体的定义：. 豆瓣：font: 12px/162% Arial,Helvetica,sans-serif;. 新浪微博：font-family: Arial,Helvetica,sans-serif;.
页面构建小工具
- Han - 所有文章 - UCD大社区我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍.. 页面bug调试工具–Firebug. 实时测量工具–Measureit. 实时颜色选取工具–Colorzilla. SEO优化工具–SenSEO. CSS使用效率优化工具–CSS usage.
新的Google 404页面
- bubble - Solidot谷饭 写道 "Google悄悄上线了新版本的404页面，如：http://www.google.com/solidot. 页面首先说，That’s an error，之后简要提示路径不存在，然后调侃了一句：That’s all we know. 然而在IE6浏览器里，那个可爱的机器人就没有了. 我们发现了一个错误，看标题栏，三个叹号，被打成两个叹号的一个1...".
Google.com页面或被修改
- Lcube - Solidot大约大去之期不远矣 写道 "刚刚测试发现，从墙内访问google.com时页面的关键字输入框失踪，同时css错位. 比对页面源代码之后发现，是html中input相关代码被移除.
页面导航原则 [www.aliued.com]
- - ChinaUEDCollection著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划，将面包屑撒在来时的路上，虽然当月亮升起时，面包屑被鸟吃掉了，但是现在的互联网设计师们从这个故事中找到了灵感，设计出不会被鸟吃掉的固定“面包屑”. 图1:互联网上各种各样的面包屑. 汉赛尔和格莱特为了在森林中找到回家的路，撒下了面包屑，这是一种导航方式，如果没有被鸟吃掉，无论走到森林的任何地方都可以知道如何从当前的位置走回家去.
iframe子父页面调用
- - CSDN博客Web前端推荐文章1、iframe子页面调用 父页面js函数. 子页面调用父页面函数只需要写上window.praent就可以了. 子页面取父页面中的标签中的值，比如该标签的id为“test”,则：. 但是我在chrome浏览器下却发现此方法无效了. 查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的.
如何做页面优化
- - 互联网的那点事改版是在原有基础上做较大的改变；而优化是做些小的调整，快速提升效果. 但不管是改版还是优化，都需要考虑以下的步骤：. 1.问题现状（数据、用户反馈等）/ 用户调研（问卷、访谈等内容，尽量结合数据看）/ 竞品分析. 2.结合上面三点，确定优化目标. 3.根据目标确定设计计划（如何达成目标）. 4.结果检验（数据、用户反馈等指标）.