DDR爱好者之家

对css性能优化的一点看法
站长资源 2024/11/24 佚名
22 1538
DDR爱好者之家 Design By 杰米

现在据我知道比较好的用来测试网页性能的工具有两个，分别为：老牌的雅虎yslow,新秀google page Speed。

怎么会突然想起谈css与性能优化呢？其实这个问题我已经想了很久了，想写，但是也不知道从何写起，今天就简单的说一下，近段使用通过使用page Speed，对css性能优化的一点看法吧！

在市场上的很多书，讲的css的写法都大同小异，并没有说，如何写好，如何写不好！只是说到了id和class是作为css和js的挂钩，我们可以通过id与class来控制页面的展现效果。并且还谈到了css层级写法的强大威力，所以大多数为了减少在页面中定义id与class，都大量的使用了css层级的写法，比如：

<div class=”list”>

<ul>

<li><span>01</span>测试列表</li>

<li><span>01</span>测试列表</li>

</ul>

</div>

这样的一个结构，如果我们想修改li中的span的话，为了尽量的减少class的定义，我们可以这样写：

.list ul li span{样式}

.list li span{样式}

list span{样式}

这三种写法有什么好处与不好的地方呢？

如果使用第一种方法，我个人觉得太长了，没有必要，那如果使用第三种写法呢？怕的是如果在这个div与ul平级也有span的时候，这时候这个span也会被继承到样式，我个人平时都比较喜欢第一种写法，相对来说，对span比较安全，而且可以节约几个字符吧！嘿嘿！但是我的这种写法通过page Speed的检测结果是属于低效的！因为需要检测的层级太多！就像我们上楼梯和下楼梯一样！故而像这种地方，我们完全可以在html中为span增加class,更有可能这个class我们以后还用得着！

<div>

<ul>

<li><span class=”num”>01</span>测试列表</li>

<li><span class=”num”>01</span>测试列表</li>

</ul>

</div>

结构被我改成了这样，如果需要对这个span进行修饰的话，自然你也知道应该如何写啦：

.num{样式}

这样的话，浏览可以直接找到num这个样式，直接赋予他样式，这样是不是更简洁，更高效呢？如果你不信，可以试试吧！

当然，class的定义与层级的使用的话，还有很多，很多，我在这里就仅仅是举了一个简单的例子。如果你与我有不同看法的，请指正。

节约样式

我们在写一个网站的时候，特别是在站不大不小的时候，都会把样式写在一个样式表中，但是这样的话，第一次加载的样式的时候，会相对比较慢，我们是否有一些其他的方法来解决这样的问题呢？通过我这段时间的反思，也不知道是否可行，我觉得是有的，不过我的想法可能过于理想化，那么就是前期必须知道页面的整体风格！不过一般在现实中，还有设计师的一些特殊想法，相对实现起来可能一些麻烦，下面我们来看看：

1、找出真正的公共样式

2、每个页面中在增加一个属于自己页面的独特的样式

3、通过谷歌的预加载方法（JS实现），通过空闲时间将其他页面的样式下载到本地缓存中

其他页面也是如此，这样感觉是工作量可能会大一些，但是我觉得通过这样的方法，的确可以对性能是有所提升的，这仅仅是说到CSS，其实JS也可以使用同样的方法来解决，还有图片，等等！

今天就说到这里，在看看，在改改！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米