文章关键字 ‘渲染’

分析border边框属性在浏览器中的性能对比

2010年05月7日

当初写完了《分析border边框属性在浏览器中的渲染方式》这篇日志后,有人跟我说,“小志啊,你这个并不能说明border:0 none;方式性能就是好的啊”。这点我承认,的确如此,因为那篇日志仅仅只是说明了border针对input标签和button标签在渲染方式的一个渲染方式对比。

然而今天在涛哥的勾引下,我使用了谷歌浏览器作为平时默认浏览器,顺带安装了一些插件,值得一提的是谷歌浏览器自带的有一个叫“任务管理器”的东西比较好玩,可以看很多参数,比如什么“缓存”啦、“内存”啊之类的。

“内存”这个东西我看了之后,突然想到曾经不是有人说border渲染后的性能么,于是乎,就在原来的那个demo基础上针对border:0;border:none;以及border:0 none;这三个做了一个简单的对比。

(全文…)

拥有阴影并且能自适应的弹出层

2010年04月5日

依稀记得今天所要与大家分享的这点内容是以前在迅雷工作的时候,大仙曾与几位重构师分享过,不过当时并没十分在意,只是依稀记得大致的实现方式,这次自己再在这个大致的实现方式上去实验,最终将结果分享出来供大家批斗,不妥的地方请大家多多提意见。

弹出层是现在网站中使用率很高的一个效果,有半透明的黑屏中叠加一个层,也有弹出层的旁边出现透明边框的方式。总之呢,形式呢是多姿多彩,但基本的原理都是差不多,小志这次要跟大家分享的并不是面面俱到的所有方式的弹出层,而是一个拥有阴影(或者说是透明边框)并且能自适应宽高的弹出层。

实现的方式有几种,但为了页面的整体性能会对IE进行选择性的舍弃。废话不多说了,先来看一下大概的页面表现效果吧。

>>>点击查看demo<<<
(全文…)

分析border边框属性在浏览器中的渲染方式

2010年02月24日

针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理。其中当然也是有我自己为什么要做的原因,对于这个原因在下面的分析中将会提到。在对border边框属性进行分析之前,需要说明的几点内容是:

  1. 小志我并不是一个分析专家,只是借助Firebug和IE developer这两个工具在FF浏览器和IE浏览器中查看浏览器的渲染结果;
  2. 因为只是查看了FF浏览器和IE浏览器的渲染结果,并不能代表所有的浏览器都是相同的方式进行渲染。

为了能更好的对边框的样式进行对比,这里我们选用的是“按钮”元素,但使用的标签却是不同的,它们分别是input标签元素和button标签元素。顺带需要提到的一点就是,这两个标签元素在各个浏览器中的共同点是都属于系统控件元素,边框样式以及按钮背景都是跟系统主题有着绝对性的关系。

(全文…)