为什么css放上面js放下面?

href和src的区别

一般加载CSS用href,并放在头部;加载script用src,放在body内的下方。

href

是hypertext reference的缩写,表示超文本引用,用来建立当前元素和文档间的链接。常用的有link,a。

当CSS使用href引用,浏览器会识别该文档问CSS,并行下载,不会停止对当前文档的加载。

src

是source的缩写,是资源,页面必不可少的一部分,src指向的内容会嵌入到文档中当前标签的位置。常用的有img, script, iframe。

当script使用src引用,浏览器解析到该元素时会停止对文档的渲染,直到该资源加载完成。这也是将script放底部而不是头部的原因。

把CSS放头部,script放下方的原因

1、CSS放头部

在加载html生成DOM tree的时候,就可以同时对DOM tree进行渲染。

这样可以防止闪跳,白屏或者布局混乱。

2、javascript放在后面

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

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

拓展知识:

1、首先让我们先认识几个常见的问题:

1.在进行页面优化的时候,需要将css放在头部,将js文件放在尾部,这样做为什么能够实现页面的优化?

2.在使用jquery的时候,为什么把函数写在$(document).ready()事件中?

3.javascript会阻塞dom的解析。

当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,

如果脚本是内联的,浏览器会先去执行这段内联的脚本,

如果是外链的,那么先会去加载脚本,然后执行。

在处理完脚本之后,浏览器便继续解析HTML文档。

2.DOMContentLoaded函数和load函数解析

1.DOMContentLoaded事件其实就是dom内容加载完毕。

举个例子来说我们在打开一个网页的时候,

一开始页面是空白的,什么都看不到,一段事件之后页面展示出内容,但是还是有一些图片资源看不到,此时页面是可以进行正常的交互的,

再过一段时间之后,页面上所有的资源都加载完成,继而整个页面加载完成。

从页面空白到展示出页面内容的过程就会触发DOMContentLoaded事件,而这段事件就是HTML文档被加载和解析完成。

2.页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件,页面的load事件会在DOMContentLoaded被触发之后才触发。

3.关于jquery中的ready函数

jquery中的ready函数其实监听的DOMContentLoaded事件,

所以我们将函数写在ready函数中,可以在页面解析完成之后,

我们可以访问到页面所有的元素,缩短页面的交互时间,提高页面的整体体验

4.为什么将css放在头部,js放在尾部可以增加页面的性能

现在浏览器为了更好的用户体验,渲染引擎会尝试尽快在屏幕上显示内容,

它不会等到所有的HTMl元素解析之后在构建和布局dom树,所以部分内容将被解析并显示。

也就是说浏览器能够渲染不完整的dom树和cssom,尽快的减少白屏的时间。

假如我们将js放在header,js将阻塞解析dom,dom的内容会影响到dom树的绘制,导致dom绘制延后。

所以说我们会将js放在后面,以减少dom绘制的时间,但是不会减少DOMContentLoaded被触发的时间。

更多web开发知识,请查阅 HTML中文网 !!

以上就是为什么css放上面js放下面?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » 前端答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏