檬味博客 » 问答 » 为什么网页中css写在页面的头部而javascript写在尾部

为什么网页中css写在页面的头部而javascript写在尾部

我想说一下我的看法，关于JavaScript写在尾部的。至于为什么CSS写在头部，是因为浏览器预先加载CSS后，可以不必等待HTML加载完毕就可以开始渲染页面了。至于JavaScript写在尾部，这是因为JS主要扮演事件处理的功能。这样的话，页面渲染的时候和JS没有关系，放在后面慢慢加载，不要影响更重要的CSS和HTML的加载...
为什么网页中css写在页面的头部而javascript写在尾部
没有说javascript文件就一定要写在尾部，只是你这个js需要在文档全部加载以后再执行的，才有可能加载在尾部，
主要放在头部还是尾部取决于一个加载顺序，你也知道，一个网页毕竟也是有大小的，在网页传输过程当中，浏览器会先加载html，当加载头部以后会同步加载头部中引用的文件，等html全部加载以后再去下载html中的其他文件包括图片这些。
一般的网站的话，也不会随意的把JS文件放到HTML的尾部，至于必要的时候才这么做，好的前端，一般css，JS，html都是分的很清楚的，javascript的执行顺序也会由javascript代码来进行控制，不牵制于网页HTML的加载速度的，。2012-04-10
我想说一下我的看法，关于JavaScript写在尾部的。

至于为什么CSS写在头部，是因为浏览器预先加载CSS后，可以不必等待HTML加载完毕就可以开始渲染页面了。
至于JavaScript写在尾部，这是因为JS主要扮演事件处理的功能。这样的话，页面渲染的时候和JS没有关系，放在后面慢慢加载，不要影响更重要的CSS和HTML的加载。
BUT！
但是，现在随着JS技术的发展，JS也开始承担起页面渲染的工作了，比如JQuery UI之类。如果这类JS加载需要很长时间，就会影响用户的体验，因为用户看到的是一个渲染不完全的界面。
所以，需要把JS区分看待，承担页面渲染工作的JS和承担事件处理的JS要区分看待。
我的建议是，缓存类似JQuery UI这样的静态文件，剥离渲染页面的JS和事务处理的JS。
渲染页面的JS放在前面，事务处理的JS放在后面，HTML代码可以放在两者中间，或者两者之前，只要保证DOM加载后能迅速进行JS渲染就可以了。2014-10-23
网页中css写在页面的头部而javascript写在尾部，这个的话，其实不是一定的，这只是一个网页设计中，约定俗成的，这样都方便大家对代码的阅读，还有就是一般的JS的话，如果你放在前面他会在页面都没加载完就会调用JS，因为造成错误，当然你加个window.onload的事件，这样JS就会在html加载完之后，才会执行，这里我写一段代码
<html>

<head>
<style>
p{
font-size:12px;

}

</style>

</head>
<script>
window.onload = function(){ //加了这个window就问题的
alert('a');

}

</script>

<body>
<p>我是测试文字</p>

</body>

</html>2015-05-24
把CSS放在头部，可以让页面根据CSS样式逐步渲染；如果放在底部，要全部加载完成，才能渲染页面，这样有可能会看到没有样式的页面。

把JS放在底部，是因为浏览器在下载脚本文件时，不会启动其他任何的下载任务，放在底部有助页面加载速度。

你可以使用YSlow，雅虎出的关于网页性能的工具，上面就有介绍。2012-04-10
JS有时候需要操作网页标签，此时执行JS的时候，网页还没有生成，会失败。所以放在前面还是后面要看他的执行顺序。2012-04-10
javascript也可以写在开始2012-04-10
mengvlog 阅读 10 次 更新于 2025-07-20 00:02:28 我来答关注问题0
6 个回答檬味博客专题活动
  • o丨Reborn 为什么网页中css写在页面的头部而javascript写在尾部

    至于为什么CSS写在头部，是因为浏览器预先加载CSS后，可以不必等待HTML加载完毕就可以开始渲染页面了。至于JavaScript写在尾部，这是因为JS主要扮演事件处理的功能。这样的话，页面渲染的时候和JS没有关系，放在后面慢慢加载，不要影响更重要的CSS和HTML的加载。BUT！但是，现在随着JS技术的发展，JS也开始承担...

  • 蓝叶资源分享 css写在头部还是身体?

    css最好写在head头部里，也可以写在body里，写在头部的好处是先加载css，之后再body内容，不会使内容变形，如果放在body里，尤其放在body底部，那会让加载的内容无样式，等待css加载才显示样式，很不美观。

  • 智者总要千虑 什么是要把css样式直接放在标签之前,然后插入网页头部?

    1、直接在html标签元素内嵌入css样式，如我是div css测试内容-支持 效果如下图 2、在html头部head部分内style声明插入代码如下： 具体方法如下图：3、使用@import引用外部CSS文件方法

  • 翡希信息咨询 网页设计的header是什么意思

    在网页设计中，header通常位于网页的最顶部，是网页的头部区域。它主要用于显示网站的主要信息，如网站的标题、标志、导航栏、搜索栏、注册登录入口等。重要性：Header是用户访问网页时首先看到的内容，因此它对用户体验和网站形象至关重要。一个设计良好的header可以吸引用户的注意力，提高用户留存率，并引导...

  • assfafa 为什么CSS文本最好放在HTML之外

    因为如果先加载HTML，还没加载到CSS，内容就没有任何样式，浏览器就只能以默认样式显示。这段时间网页就没有任何排版布局，就像有时网速太慢打开的网页有内容了但是很乱一样，这种网页CSS文件引入一般靠后。等CSS加载完毕，再运用样式，浏览器有得重新渲染一遍界面，性能和体验都很糟糕。所以一般CSS写在...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部