css放上面js放下面的原因：1、在加载html生成DOM tree的时候，可以同时对DOM tree进行渲染，这样可以防止闪跳，白屏或者布局混乱；2、javascript加载后会立即执行，同时会阻塞后面的资源加载。
本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑。
推荐：css视频教程
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的解析。
当解析过程中遇到标签的时候，便会停止解析过程，转而去处理脚本，
如果脚本是内联的，浏览器会先去执行这段内联的脚本，
如果是外链的，那么先会去加载脚本，然后执行。
在处理完脚本之后，浏览器便继续解析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被触发的时间。
以上就是为什么css放上面js放下面的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1617578.html
微信扫一扫 
支付宝扫一扫 
