将css放在头部，js放在尾部可以优化页面？？？

Posted 2023-02-18 考拉的墨尔本

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被触发的时间。

5.点击打开链接