本文依然属于高性能web前端优化指南》系列,此文主要讲一下table标签的相关优化。

table标签曾经因为使用简单——从firework里面直接导出来就是一个table网页——所以出现了大量使用table布局的网站;而后来又因为table布局太过死板修改不便而且冗余代码众多,又被网站开发者痛批导致跌入人生低谷。其实,table是无辜的,因为发明他的初衷不是为了用来布局。

如果你的网页整体架构是通过table实现的,强烈建议你废除。table只适用于做数据列表。继续阅读

这个主题由于加入了很多JS效果,所以本身自带的JS文件就有3个,然后我又启用了几个插件,也引入了几个JS文件,所以现在本站处于JS文件太多而超标的状态。

看来又得修改主题了,先把他自带的JS文件给精简掉。

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色)。我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点。

兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟)。兄弟节点同理,下面是一个常规的获取兄弟节点的办法。

function siblings(elm) {
	var a = [];
	var p = elm.parentNode.children;
	for(var i =0,pl= p.length;i<pl;i++) {
		if(p[i] !== elm) a.push(p[i]);
	}
	return a;
}

思路:先获取此元素的父节点的所有子节点,因为所有子节点也包括此元素自己,所以要从结果中去掉自己。

还有另外一种看起来比较奇特的方法,是jQuery里面获取兄弟节点的源码:

function sibling( elem ) {
		var r = [];
		var n = elem.parentNode.firstChild;
		for ( ; n; n = n.nextSibling ) {
			if ( n.nodeType === 1 && n !== elem ) {
				r.push( n );
			}
		}

		return r;
	}

思路:先找到此元素的父节点的第一个子节点,然后循环查找此节点的下一个兄弟节点,一直到查找完毕。

我很奇怪为什么jQuery会使用这个方法,难道这个方法比第一个方法效率更高?

经过我初步测试——1500多个li,上面两个方法效率几乎无差别,都是几毫秒内就获取成功了。测试环境是chrome与firefox。

如果有获取所有兄弟节点的需求,可以使用以上任一方法。

当然,我会在以后的使用过程中验证以上两个方法,如果有出入,再更新吧。

html5自从出道以来,一直被某些人冠以flash杀手的称号。对这一现象,我宁愿理解为有关人员为html5做大宣传用的噱头。

html5给我们带来什么?

1,语义化的标签

现在流行的div布局方式很不错,但蛋疼的是网页完成后通篇都是div套div。而html5改善了这种状况,加入了更多语义化标签,如header,nav,article,footer等等等等。这些标签通常都能望文生义,很便于理解,而且大大改善了标签重复的情况。

2,原生的视频与音频播放支持

可以直接用video及audio标签在网页上插入视频或音频,并能控制暂停,继续,跳播等。

3,神奇的canvas标签

canvas,画布也。可以让你在网页上画出随意图形。

4,硬件加速

意思是你显卡好的话,浏览html5网页也会更快。但具体我并不明白

下面看flash的。继续阅读

从我开始学html的第一天,老师就给我们灌输一个理念:现在流行的是div+CSS布局,千万不要用table布局。以至于后来看到很多招聘启示上,都把会写前端代码叫做“会DIV+CSS布局”。

其实从事实上讲,div布局方式比table布局方式的确效率更高,也更精简。让我们来了解一下table布局的缺点,明白为什么我们不用他。

1,嵌套深度

用table在页面放置一个元素,比如h3吧,结构如下:table>tr>td>h3(可能还有个tbody),而用DIV来做,一般只需要div>h3.太深的嵌套,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。继续阅读

数组乱序的意思是,把数组内的所有元素排列顺序打乱。

常用的办法是给数组原生的sort方法传入一个函数,此函数随机返回1或-1,达到随机排列数组元素的目的。

arr.sort(function(a,b){ return Math.random()>.5 ? -1 : 1;});

这种方法虽直观,但效率并不高,经我测试,打乱10000个元素的数组,所用时间大概在35ms上下(firefox)
继续阅读

如题,只有思路,没有代码。

这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。

比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。继续阅读

之前我写过一篇关于CSS透明度的文章,抱怨CSS对一个元素设置透明度后,导致它里面的元素也跟着透明了。最近我发现,其实这样挺好的。

有时候我们想要一个背景半透明文字不透明的效果,比如一个“信息警告框”,但当我们给这个元素加上opacity属性后,发现背景和他里面的所有东西都半透明了,导致辨认困难。

如果你硬揪着opacity不放,你会发现用opacity来实现背景半透明文字不透明的效果很困难。于是,像我一样,觉得W3C关于透明度的设置真是蛋疼。

其实,是我们理解错了。

如果要背景半透明文字不透明这种效果,只要把background设置成rgba形式就可以了!如:

background:rgba(0,0,0,0.5);

相反,你要文字半透明而背景不管,就把color设置成rgba格式即可!

而在你需要此元素所有子元素都保持一个透明度是,才会用到opacity属性:

opacity:0.5;

效果图如下:


我们可以这样想,如果你想要某区域里所有元素都保持一个透明度,但CSS的opacity不能继承的话,那你将会多么蛋疼!你需要设置多少个元素的opacity呢?

所以,我觉得CSS现在的透明度设置挺好的我很赞成——不过,我怎么又恨起IE来了呢?妈的,IE支持rgba的颜色格式吗!

 

关于网站侧边栏应该在左边还是在右边,看起来好像是个无所谓的问题,但网上有很多讨论的文章,甚至上升到了是否影响用户体验的高度。

其实我想说:这很无聊。

既然有侧边栏,就有主体栏。两者相比,无疑主体栏才是你想展示给用户的东西。而侧边栏的作用,就是提供一些与主体相关或额外的信息,希望用户在浏览了主体内容后,能点击侧边栏的链接浏览更多内容。这就是侧边栏存在的目的。继续阅读

所谓网站分页导航,就是如图所示的这种了:

分页导航样式

分页导航样式

这张图片截取自我收集的一个分页导航制作网页。网站分页导航的作用,就是在单网页内容较多,需要分页显示的时候,提供给用户进行前后翻页,以便于浏览更多内容。

在设计分页导航的时候,可参考这些要点:继续阅读