当前位置: 首页 > Web前端 > CSS

关于css和js的位置

时间:2023-03-31 13:44:18 CSS

一天,小明在网上查资料。他在项目中遇到的问题需要通过查阅资料来解决。他看到一个有趣的标题,觉得这应该就是他要找的答案。于是他点了进去,但是进入网站没过几秒,网页还是一片空白,而且加载了很长时间。为什么会这样?说到这里,我们有必要了解一下网站加载的整个过程。首先浏览器从服务器接收到html代码,然后开始解析html构建DOM树(根据html代码自上而下构建),同时构建渲染树,遇到js文件加载执行,这将阻止DOM树的构建;对于css文件,会屏蔽渲染树的script标签中的defer属性:构建DOM树的过程和js文件的加载是异步的(并行的),但是js文件的执行需要asyncDOM树构建后script标签中的属性:构建DOM树、渲染树、异步(并行)加载执行js文件的过程调整css和js的放置需要做什么?从上面的过程我们可以知道,当js文件放在head中时,浏览器在构建DOM树时会阻塞js文件的加载,也就是说浏览器不会加载body中的标签,一旦js文件的数量和内容比较多,那么就会造成刚才小明遇到的情况,用户得不到很好的视觉反馈。在前端开发中,给用户的视觉反馈非常重要。我们现在很喜欢用进度条来描述一个过程,给用户的视觉反馈就是网页加载的进度条。对于现在快节奏的人来说,如果一个网页在打开后两秒内没有反??应,或者加载速度很慢,那么用户就会很不耐烦地关闭它,这就相当于被直接判了死刑。应该放在哪里?综上所述,script标签最好放在标签之前,因为body中所有标签之后,网页加载时不会出现空白,可以持续为用户提供视觉反馈。同时在某些情况下,会减少错误的发生。css标签应该放在标签之间,因为如果放在标签前面,那么在构建DOM树的时候,构建渲染树,那么在渲染的时候树建好了,浏览器服务器要重新渲染整个页面,造成资源浪费。效率也不是很高。如果放在之间,浏览器会边构建边渲染,效率会高很多。(个人意见,如有不足或错误,欢迎指出)欢迎来到我的个人博客