javascript、style在html中的位置

本文探讨了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>

style位置

1、head标签中
浏览器渲染时,逐步渲染,写在head中,但是此时的js不能操作dom,因为dom还没渲染
浏览器渲染过程:加载资源 → html&css → dom&style→ Render → Layout → paint


重绘:dom元素不影响文档流中的位置
重排:影响dom元素的位置、大小等、删除、添加元素等
2、 在body标签后

js文章參考:https://blog.youkuaiyun.com/weixin_44510465/article/details/86422035

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值