美文网首页饥人谷技术博客
js和css在网页中的放置顺序是怎样的

js和css在网页中的放置顺序是怎样的

作者: 饥人谷张雪莲 | 来源:发表于2019-08-28 10:07 被阅读0次

css是放在head里面;

js是放在body里面,接近body的底部标签;

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link href="index.css"  rel="stylesheet">
<style>
             h1 {
                     background-color: red;
             }
</style>
<body>
             <h1>标题</h1>
<script src="index.js"></script>
<script>
      alert(1);
</script>
</body>
</html>

这样放置的原因是什么

1.首先浏览器加载页面是按从上到下的顺序加载,加载js并执行的时候,会阻塞其他资源的加载。这是因为js可能会有dom、样式的操作,所以浏览器要先加载这段js并操作,再加载放在它后面的html、css。因此,加入一段巨大的js放在最上面,浏览器首先要加载并执行,在这段时间里面,页面是空白的。和相比加载了部分html和css,但没有js的交互功能,后者对浏览者体验显然更好。
2.为了避免chrome白屏和firefox的无样式内容闪烁;
3.js会阻塞后面内容的呈现以及阻塞其后组件的下载,写js的作用是为了操作页面的元素(节点),若把script 放在css 的前面,则此时页面还无内容,也就无法操作,则可能会报错;对于图片和css,在加载时会并发加载(如一个域名下同事加载两个文件)但在加载javascript 时,会禁用并发,并且阻止其他内容的下载,如果把javascript放在顶部,则可能会有白屏现象的发生。

相关文章

  • js基础——基本概念、数据类型、运算符、流程控制语句

    一、CSS和JS在网页中的放置顺序是怎样的? CSS和JS在网页中的放置顺序 二、解释白屏和FOUC 白屏问题如果...

  • JavaScript 基础

    CSS和JS在网页中的放置顺序是怎样的? CSS 推荐放置在 中的 link 标签 JavaScript 推...

  • js简单认知

    1.CSS和JS在网页中的放置顺序是怎样的? css link引入放置在头部 标签里 js放置在网页底部 2.解释...

  • JS相关概念

    CSS和JS在网页中的放置顺序是怎样的? CSS应放置在head标签中,使用link标签引入。JS应放置在页面底部...

  • js相关概念

    1. CSS和JS在网页中的放置顺序是怎样的 CSS最好放置在head标签中,JS最好放置在 之前. 2. 解...

  • JS相关概念

    CSS和JS在网页中的放置顺序是怎样的? CSS放置在head标签内。JS放置在body标签底部。 解释白屏和FO...

  • 进阶1-JS相关概念

    1.CSS和JS在网页中的放置顺序是怎样的? CSS:是在 中用 JS:在 标签底部

  • JS相关概念

    CSS和JS在网页中的放置顺序是怎样的 CSS通过link标签引入,放置在 标签内。JS放置在页面底部,通过 标签...

  • 记12月26日作业

    Q1:CSS和JS在网页中的放置顺序是怎样的? CSS在网页中放置在网页的开头 ~ 中; js在网页中一般放置在网...

  • 浏览器渲染机制

    1 CSS和JS在网页中的放置顺序是怎样的? css样式放在head中。js放置在body标签内的最后 2 ...

网友评论

    本文标题:js和css在网页中的放置顺序是怎样的

    本文链接:https://www.haomeiwen.com/subject/tixpectx.html