外联CSS(外部CSS引用)在IE、Firefox、Chrome浏览器中的渲染方式

日期:2016-02-11 01:29:18

留言:0

分类:经验心得

标签: css html

什么是CSS外联/外部引用?

即在html文档中,使用<link rel="stylesheet" tyle="text/css" href="xxx.css" />标签引入外部xxx.css。

测试前言

作者通过单个、多个CSS文件的引用,尝试多种复杂的组合情况分别插入到html文档的各个不同位置,并且对CSS、html文档通过线程休眠及flush模拟网络请求等待及网络阻塞的情况进行测试。

外联CSS在IE浏览器中的渲染方式

无论外联CSS节点插入在html文档的任何位置,CSS引用节点前面所有html加载多少渲染多少,无需等待CSS加载,CSS加载完后画面会重新渲染,如果有多个CSS相同样式覆盖,或进行多次渲染,CSS引用节点后面的html则需要等待该CSS引用节点前所有CSS加载完毕再进行一次性渲染。

外联CSS在Firefox浏览器中的渲染方式

CSS引用节点放在body前时

需要等待所有CSS加载完毕后页面再进行一次性渲染(只要body前面出现一个CSS引用节点,body后面再有其他CSS引用节点仍然按这种情况处理)。

CSS引用节点放在body中或后面时

html或CSS加载完时马上进行渲染,html和CSS谁先加载完谁先渲染(此处若html先加载完成,画面会出现无CSS的html文档),若有多个CSS相同样式覆盖时画面出现多次重绘。

外联CSS在Chrome浏览器中的渲染方式

不论CSS引用节点放在html文档任何地方,都要等待所有CSS加载完毕后画面再进行一次性渲染。

意外情况

由于html从上往下加载和渲染,如果网络阻塞或者web server提前进行flush,导致html文档后面的CSS引用节点还未加载到(还未出现在html文档中),则浏览器可能会按页面当前加载完成提前进行渲染,渲染规则遵循上面的规则(即假设浏览器当前只加载了整个html文档的一半内容,那么浏览器以这一半内容作为完整的html文档,按上面的规则进行渲染),但若已经加载的html中出现的CSS请求未完成加载完时,之前未加载完成的html文档在后续加载中出现新的CSS引用节点,则会刷新渲染规则,按最新加载的所有html文档内容进行以上的渲染规则处理,否则仍然会出现多次渲染的情况。

外联CSS在html中如何引用合适?

合并压缩建议

无论CSS引用节点放置在html的任何地方,加载的总时间是不变的,如果需要缩短加载时间,可以合并多个CSS文件,减少http请求数量,并且进行CSS文件的压缩(删除注释和多余空白),以及开启服务器的gzip压缩,都可以减小CSS文件的体积,缩短网络传输的时间花费。

引用建议

但是为了尽可能地减少浏览器的渲染次数,作者建议将CSS放置在body前,从规范上讲即放置在head中。

 

PS:本文为作者原创,请尊重作者劳动成果,转载时请注明引用出处。

给我留言
留言表
ZengDongwu
Hi ~ 当前还没有人留言,欢迎您给我留言 ^_^