JS基础知识——CSS和JS的放置顺序
2017-10-26 09:38
295 查看
相关知识点
css,js的放置位置浏览器的渲染机制
白屏现象
FOUC
async和defer
正确的放置姿势是,将css文件放在head中,将js文件放在body内,而且最好把js放在body的底部。
下面我们来探讨一下原因。
首先,我们需要知道浏览器的渲染机制。
解析html标签,构建dom tree。解析css标签,构建cssom tree。
把dom tree和cssom tree组合成渲染树(render tree)。
在渲染树的基础上进行布局,计算每个节点的几何结构。
把每个节点绘制到屏幕上。
为什么需要把css文件放在前面?
如果我们把样式放在了底部的话,对于ie浏览器,某些场景下(新窗口 ,刷新等情况下),页面会出现白屏现象,而不是内容逐步展现,即使是使用@import标签,将css放入link,并且放在头部依然会出现白屏现象。为什么需要把js文件放在底部?
如果把js文件放在前面会阻挡后面内容的呈现,会阻塞其后组件的下载。对于图片和css,在加载时会并发加载,但在加载js时,会禁用并发,并且阻止其它内容的下载,所以把js放在页面顶部会导致白屏现象。
FOUC
既然提到了白屏现象,那么我们再来看看另一个常常会出现的现象,无样式内容闪烁(FOUC):其实,有的是叫做浏览器样式闪缩,两种叫法都指的是,浏览器逐步加载无样式的内容,也就是先解析了html,等加载了css后再突然出现样式。
解决方法就是乖乖使用link标签把css文件放在head中就好啦。
上述看来,难道js只能在加载完html,css后才能被加载吗?我们的理想情况应该是js的加载和其它文档的加载同时进行,而且不影响dom的渲染,那么,下面我们来谈谈js的异步加载。
js异步加载
平时,我们最常见的js加载模式就是这样的同步加载模式,也叫做,阻塞模式,就像是塞车道路一样,得一辆辆的走,不能同时过好几辆。<script src="script1.js"></script> <script src="script2.js"></script> <script src="script3.js"></script>
async
<script async src="script1.js"></script>
async属性是HTML5新增的属性,加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行,但是要在onload事件触发之前完成。
“Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载,但是要注意,async会覆盖掉defer。”
defer
<script defer src="script1.js"></script>
添加了defer后,加载后续文档元素的过程将和script.js的加载并行进行,但是js文件的执行要在所有元素解析完成后。这样的话,就可以把js文件放在head中了,而不用放在body的底部。
“但是并非所有的浏览器都支持defer(对于一些modern浏览器,如果声明defer,其内部脚本将不会执行document.write及DOM渲染操作。IE4+均支持defer属性)。这意味着,如果想确保自己的延迟脚本能在文档加载后运行,就必须将所有延迟脚本的代码都封装在诸如jQuery之$(document).ready之类的结构中。这是值得的,因为差不多97%的访客都能享受到并行加载的好处,同时另外3%的访客仍然能使用功能完整的JavaScript。”
[ 参考链接 ——《谈谈异步加载JavaScript》]
相关文章推荐
- JS一起学01:css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
- HTML+CSS+JS基础知识
- css和javascript的一些笔记(二) js基础知识
- js基础知识温习:构造函数与原型
- C++基础知识(2)--构造一个类的一般顺序
- H5基础知识第七课时(CSS负边距的使用)
- JS学习2(基础知识)
- js的一些基础知识
- js基础知识整理
- VUE.JS的基础知识
- CSS基础知识 - 盒模型/定位/浮动
- html,css,js加载顺序
- Html5+CSS3基础知识汇总-CSS3篇
- JS基础知识
- CSS基础知识-五(CSS定位、左右布局方法)
- Js基础知识学习
- JavaWeb基础知识:Html和Css实战WebView实现手机显示网页
- html和css的基础知识
- html、css、js文件加载顺序及执行情况
- Js_基础知识学习_01