I am houbiao beta 0.1

双飞翼布局(三栏布局-左右固定-中间动态变化)及DOM优先加载

分类:Optimize

两个问题,一个是经久不衰的双飞翼布局,即左右各显示一个侧栏,中间显示主体内容,如图双飞翼布局(三栏布局-左右固定-中间动态变化)及DOM优先加载,另一个则是很重要的性能问题-DOM的加载顺序。

双飞翼布局很适合博客之类的阅读性站点,因此被广泛应用,实现它的方式也多种多样。入门的布局代码就不介绍了,我们来分析一下他的加载顺序,图中所示依次为左-中-右,但是我们也注意到页面关键的内容绝大部分都在“中”,就是说必须“左”这个DIV全部加载完毕,才能开始继续加载“中”,试想一下,如果在网速慢、“左”的数据和资源特别多的情况下,用户是不是得等很长时间?怎么解决这个默认的加载顺序呢?

这就要求我们要对HTML的结构代码和相应的CSS样式做一些改变了。我们要让浏览器优先载入主要的“中”部分,然后才开始“左”和“右”。结构代码和CSS代码详见DEMO - Flying wing layout & DOM Priority load 双飞翼布局 & DOM优先加载

本示例经测试,完全兼容IE6,7,8,Firefox,Chrome,Safari,Opera等主流浏览器。

4801 reads 1 comments

上一篇:getElementById(ClassName) querySelector jquery 选择器的性能对比及使用推荐

回复信息

Santosh

Home run! Great slugging with that asnewr!

Leave a comment

*