关于页面的资源文件组织合理性探究

最新推荐文章于 2025-07-23 14:59:42 发布

原创最新推荐文章于 2025-07-23 14:59:42 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文件组织结构 #合理性

js性能专栏收录该内容

14 篇文章

订阅专栏

本文探讨了不同情况下JS和CSS加载顺序对网页渲染的影响，包括内外联资源的不同组合及浏览器处理方式，对于提高网页加载速度有实际指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要来自于kejun's Blog里面的js和css的顺序，个人做一些整理学习测试。

场景如下：

1、js和css都是外部资源：

//script在前
<script src="xxx.js"></script>
<link href="xxx.css" rel="stylesheet" type="text/css"/>

//link在后
<link href="xxx.css" rel="stylesheet" type="text/css"/>
<script src="xxx.js"></script>

无论在head里面的位置前后，css文件都不能和body里的请求并行
body里dom渲染取决于head里的js执行

2、 内联的js在css前面

<script type="text/javascript">
*******
</script>
<link type="text/css" href="****.css" rel="stylesheet"/>

css文件可以和body里的请求并行

3、 内联的js在css后面

<link type="text/css" href="****.css" rel="stylesheet"/>
<script type="text/javascript">
*******
</script>

css文件不能和body里的请求并行
要等js执行完

4、 内联css在外联css后面

<link type="text/css" href="****.css" rel="stylesheet"/>
<style type="text/css">
  ********
</style>

内联的在外联文件加载完成后生效

5、 内联css在外联css前面

<style type="text/css">
  ********
</style>
<link type="text/css" href="****.css" rel="stylesheet"/>

IE和FF下要等外联加载成功后生效，Safari|Chrome则是先生效，再加载外联

一些结论：

内联js要等到它前面所有外联的css文件加载完成后执行
外联js放在页面最后，高级浏览器会自动优化
内联长执行时间js，无论放在页面任何位置，都会影响整个页面的渲染