script标签放在header里和放在body底部里有什么区别？
将<script>标签放在<head>和<body>底部，会对页面的加载和性能产生不同的影响：
一、<script>标签放在<head>部分：
优点：
1.预加载：浏览器在渲染页面之前，会先下载和解析所有在<head>部分的脚本文件。这样可以确保脚本在页面加载过程中随时可以被调用。
2.全局可用性：一些脚本，特别是需要在页面一加载就运行的脚本，适合放在<head>中。
缺点：
1.阻塞渲染：浏览器在遇到<script>标签时会暂停HTML的解析和渲染，直到脚本下载并执行完毕。这可能会导致页面加载变慢，尤其是当脚本文件较大或者需要从远程服务器下载时。
2.页面白屏时间延长：用户可能会看到页面在加载过程中有一段时间的白屏，直到脚本加载完成。
二、<script>标签放在<body>底部：
优点：
1.非阻塞渲染：将<script>标签放在<body>底部意味着浏览器可以优先下载和渲染HTML内容，这样用户可以更快地看到页面内容。
2.更好的用户体验：用户不会因为等待脚本加载而长时间看到页面空白。页面内容会先显示出来，然后再执行脚本，这提高了页面的响应速度和用户体验。
缺点：
1.延迟脚本执行：如果某些脚本需要在页面加载之前运行（如某些初始化脚本），放在<body>底部可能会导致这些脚本运行延迟，影响功能。
三、现代优化技术：
1.defer属性：在<head>部分使用<script>标签时，可以添加defer属性。这个属性会告诉浏览器异步下载脚本，但在页面解析完成后再执行脚本。这样既可以保持脚本全局可用，又不会阻塞页面渲染。
2.async属性：async属性也用于异步加载脚本，但它会在脚本下载完成后立即执行，不考虑页面的解析速度。这对某些独立的、不会依赖于其他脚本或DOM结构的脚本很有用。
四、总结：
<head>部分：适合需要立即执行的脚本，但可能阻塞页面渲染。
<body>底部：适合一般脚本，能提高页面加载性能和用户体验。
使用defer或async：现在浏览器支持这些属性，可以同时兼顾性能和功能需求。