为什么把css放到顶部?

在web页面设计中,一般在HTML中不直接写样式,而是通过link标签引用一个CSS文件。在下载页面过程中,document最早开始下载,然后浏览器解析document,下载相关的css、js、图片、字体、视频等资源。css文件放置在head中和放在body底部,对css的下载时间不会有影响,但是对页面的呈现有着非常大的影响,与用户的体验密切相关。

那么为什么把css文件放到顶部?

CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级,更关键的是浏览器的渲染机制。

最理想的情况,我们希望浏览器逐渐的渲染下载好的CSS,将页面逐渐的展现给用户。但是浏览器为了避免样式变化时重新渲染绘制页面元素,会阻塞内容逐步呈现,浏览器等待所有样式加载完成之后才一次性渲染呈现页面。

如此,CSS文件如果放置底部,浏览器阻止内容逐步呈现,浏览器在等待最后一个css文件下载完成的过程中,就出现了“白屏”(新打开连接时为白屏,尔后先出现文字,图片,样式最后出现)。这点非常严重,因为在网速非常慢的情况下,css下载时间比较长,这样就给用户带来“白屏”的时间自然也就很长了,用户体验非常差。

将CSS放在底部,页面可以逐步呈现,但在CSS下载并解析完毕后,已经呈现的文字和图片就要需要根据新的样式重绘,这是一种不好的用户体验。

以上就是为什么把css放到顶部?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑