css文件和js文件应当放在页面哪里

前提:问的是性能优化 ?

css文件放在页面的头部
why?

<link rel="stylesheet" href="home.css">

link标签里面的href(HyperText reference)属性表示超文本引用,当CSS使用href引用,浏览器会识别该文档为CSS,并行下载,不会停止对当前文档的加载,在加载html生成DOM tree的时候,就可以同时对DOM tree进行渲染,这样可以防止闪跳,白屏或者布局混乱

js文件放在body的闭合标签之前
why?

<script src="home.js"></script>

src(source)资源,是页面必不可少的一部分,当script使用src引用,浏览器解析到该元素时会停止对文档的渲染,直到该资源加载完成。这也是将script放底部而不是头部的原因。加载js文件会停止对dom的创建,而且js加载完会立即执行,同时会阻塞后面资源的加载

追问:我现在就是要把js文件放在头部,怎么处理?
当浏览器解析到script标签时,默认会先先下载js文件下载完了就执行,脚本的执行时同步和阻塞的,为了解决阻塞的问题,script标签新增了两个布尔属性,分别是defer(延迟)和async(异步)

<script src="home.js" defer></script>
<script src="home.js" async></script>

当使用defer时,js和html并行下载,不会阻塞dom树的创建,当dom树创建完成时才会执行js
当使用async时,js和html并行下载,当下载完会立即执行js,执行期间会阻塞html的解析
三种模式对比

发布了70 篇原创文章 · 获赞 7 · 访问量 9212

猜你喜欢

转载自blog.csdn.net/qq_41893334/article/details/100944591