《高新能网站建设》(6)--将样式表放在顶部

将DHTML特征的样式表放在文档顶部(Head中)能使页面加载得更快(改善页面加载时间)。

逐步呈现

当浏览器逐步加载页面时,页头,导航栏,顶部logo等,这些为等待页面的用户提供了视觉反馈(这改善了整个用户体验)。

将样式表放在文档底部会导致在浏览器中阻止内容逐步呈现,将样式表放在文档顶部对于加载页面所需的实际时间没有太多的影响,影响更多的是浏览器对这些组件顺序的反应。

将CSS放在底部

将样式表放在文档底部延迟页面加载只发生在IE浏览器中,在IE浏览器中将样式表放在文档底部会导致白屏问题的情形有三种:在新窗口中打开时,重新加载时和作为主页时

将CSS放在顶部

为了避免白屏可以将样式表放在文档顶部的Head中。

将样式表包含在文档中有两种方式:使用link标签和@import规则。

使用link标签:

 <head>
    <link rel="stylesheet" type="text/css" href="styles1.css">
 </head>

使用@import规则的style标签:

<style>
@import url("styles2.css");
</style>

一个style块可以包含多个@import规则,@import规则必须放在其他规则之前。

link标签相比@import会带来性能上的收益。

@import可能会带来白屏现象(即使是放在文档的Head标签中也一样),并且使用@import规则会导致组件下载时的无序性。

无样式内容的闪烁

无样式内容的闪烁:即FOUC(Flash of Unstyle Content)。样式表被(不正确地)放在了底部。当页面逐步加载时,文字首先显示,然后是图片。最后,在样式表正确地下载并解析之后,已经呈现的文字和图片要用新的样式重绘了,这就是“无样式内容的闪烁”

白屏是对POUC问题的弥补(可以选择浏览器延迟呈现到所有样式表下载完后导致白屏或者浏览器逐步呈现但是要承担闪烁的风险)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,041评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,312评论 19 139
  • 从小到大的记忆告诉我,我的父亲不爱我。直到我出嫁那天,我才明白,父亲的爱藏的这么深… 小时候,我一直告诉我自己:如...
    七色妖花阅读 2,607评论 0 1
  • 因为公司项目需求,推送过来的内容需要加密,所以就用到了ios 10新推出的 UNNotificationServi...
    男儿心阅读 10,759评论 12 8