javascript、style在html中的位置

cxy_zj97

于 2020-07-27 11:35:18 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/cxy_zj97/article/details/107608447

前端基础专栏收录该内容

4 篇文章

订阅专栏

本文探讨了JavaScript和Style在HTML中的最佳位置。JavaScript在<head>中可能导致页面加载延迟，而在<body>底部能减少影响。style放置在<head>中会逐步渲染，但可能在DOM未构建完成时阻止JS操作DOM；放于<body>底部则允许先渲染页面，但可能影响到后续的JS操作。理解这些原理有助于优化网页性能。

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

html基础

js位置

在head标签中写js
但是影响页面加载速度，等待js加载完毕进行页面渲染

      <head>
      <script type="text/javascript" src="file1.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css">
     </head>

在body标签中写js
为了尽量减少对整个页面的影响，让页面渲染完成之后开始下载执行js文件

<html>
  <head>
      <title>JS位置</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
      <script type="text/javascript" src="file1.js"></script>
 </body>
 </html>