css为什么要放在头部?

为什么将css放在头部?

将css放在头部可以增加页面的性能。

CSS放头部,在加载html生成DOM tree的时候,就可以同时对DOM tree进行渲染。这样可以防止闪跳,白屏或者布局混乱。

现在浏览器为了更好的用户体验,渲染引擎会尝试尽快在屏幕上显示内容,它不会等到所有的HTMl元素解析之后在构建和布局dom树,所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom,尽快的减少白屏的时间。

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

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

javascript放在后面

javascript可能会改变DOM tree的结构,所以需要一个稳定的DOM tree。

javascript加载后会立即执行,同时会阻塞后面的资源加载。(javascript加载和执行的特点)

假如我们将js放在header,js将阻塞解析dom,dom的内容会影响到dom树的绘制,导致dom绘制延后。所以说我们会将js放在后面,以减少dom绘制的时间,但是不会减少DOMContentLoaded被触发的时间。

Image placeholder
前端答疑
未设置
  86人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Redis为什么是单线程、及高并发快的3大原因详解

Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快; 2.redis是单线程的,省去了很多上下文切换线程的时间; 3.redis使用多路复用技术,可以处理并发的连接。非阻塞

nodejs为什么叫node?

nodejs为什么叫node?最开始NodeJs作者Dahl取的名字叫web.js,仅仅是一个web服务器,是Apache和其他“阻塞”服务器的替代方案。但是该项目很快就超出了他最初的Web服务器库的

在头条和百度搜索了100个关键词之后,我们发现……

作者|闫丽娇苏琦编辑|苏琦• 常用名词搜索方面,百度站外内容占比更高,内容来源比头条更多元。头条搜索的信息流广告目前还没有接入;• 疑问解答类搜索,百度的内容发散性更杂,而头条在信息准确度上更能理解用

为什么要初始化css代码?

为什么要初始化css代码?首先是因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。其次初始化CSS样式可以提高编码质量,保持代码的统一

HTML主体结构及头部常用标签笔记

上面这种方式是HTML4中设置页面字符集的标签 5秒一刷新 5秒以后跳转到百度 网页关键词

css文件放在哪个目录

css文件放在哪个目录css文件放在项目目录下的任何一个目录都可以,但是为了项目目录规范整洁,我们通常是放在css目录下。不同的框架放置的位置也不同。可以按照框架的规范来。下面给出一份web项目目录参

css文件放在项目哪里?

css文件放在项目哪里?css文件一般放在项目目录的css文件夹中,也可以根据框架要求放在不同的位置,例如react中,一个React组件一般就是一个文件夹,将相应的js和css文件放在组件文件夹即可

为什么要前后端分离?有什么优缺点

作者:Cherry300来源:jianshu.com/p/c86cee16b418一、前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个node

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

为什么要学习 Rust

缘起为什么学习Rust?于我而言,也许是两年前当我迈入区块链的第一脚时就已经决定了。选择一门编程语言是很困难的,但却又是重要的,其重要程度绝对不亚于你选择在哪个地方买房子或者是你选择在哪个地方扎根发展

ERP为什么要上云的三个理由!

很多企业之所以不想把ERP迁移到云端,是因为流程和数据是最大的壁垒。我们都知道,ERP是企业的关键业务系统,包含大量与业务相关的数据,因此很多企业迟迟不愿意上云,甚至干脆拒绝上云。但是,ERP迁云却是

Testin用iTestin开启下一代测试,测试行业为什么要“重新来过”?

测试,其实并不是一个新话题。从有软件开发开始,就有测试,最早的测试就是找Bug。后来,自动化测试、云测试、众包测试的模式开始成为流行趋势,今天又迎来以智能化为核心的下一代测试。但是,“测试”从简单的软

为什么要用Node.js?

JavaScript的日益发展带来了很多变化,当今的Web开发面貌已经变得截然不同。在几年前是很难想象在服务器上运行JavaScript的。在深入研究Node.js之前,你可能想了解使用跨栈的Java

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

写SERVLET再重启tomcat 后台模板放在新建的manage

写SERVLET再重启tomcat后台模板放在新建的manage

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

为什么使用div css布局?

提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。为什么

为什么用CSS?

CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥

scss和sass的区别是什么?

另外,SCSS还能识别大部分CSShacks(一些CSS小技巧)和特定于浏览器的语法,例如:古老的IEfilter语法。由于SCSS是CSS的扩展,因此,所有在CSS中正常工作的代码也能在SCSS中正

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

Scss与Sass是什么?

之间的区别是什么?下面本篇文章就来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。Sass是什么?Sass是一门高于CSS的元语言,它能用来清晰地、结构化地描述文件样式

sass与scss的区别是什么?

Sass是采用Ruby语言编写的一款CSS预处理语言,它诞生于2007年,是最大的成熟的CSS预处理语言。最初它是为了配合HAML(一种缩进式HTML预编译器)而设计的,因此有着和HTML一样的缩进式

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定