JavaScript和CSS在HTML文档中不同位置的区别_引入css文件位置和js文件位置有怎么不同-CSDN博客

本文探讨了浏览器渲染HTML的顺序以及JavaScript的运行机制。浏览器按从上到下的顺序渲染页面，CSS无论放置何处都能正常应用，而JavaScript的位置会影响其执行时机。通过onload事件，可以确保JavaScript在页面加载完成后运行，实现页面与脚本的正确交互。理解这些基础知识对于前端开发至关重要。

JavaScript和CSS在HTML文档中不同位置的区别

一、浏览器是如何渲染HTML的？
二、JS的运行机制
总结

JS在HTML中放在不同位置的地方会有什么问题呢？我将在这篇文章按照自己的理解为大家介绍一下浏览器渲染页面的顺序和JS的运行机制。（一篇文章搞定如何在HTML页面中写CSS和JavaScript）
在这里插入图片描述

一、浏览器是如何渲染HTML的？

首先一个HTML文件是长这样的：
我们一般在body里面编写HTML元素，在head里面编写CSS样式，但是CSS的样式有三种写法：
1.行内式
2.嵌入式（我在文章里面用的比较多，主要是代码方便上传）
3.链接式（标准方法，建议大家多用这种）。

CSS嵌入式放在HTML的位置重要吗？不重要，放在head里面主要是为了写法标准一点。
不信的话大家可以试一下，无论是放在下面那个位置，除了title里面（这个是标题啊，不要忘记咯）效果都是一样的
在这里插入图片描述
效果图如下：

在这里插入图片描述
那是不是JavaScript也是一样的呢？显而易见，不是。不然我写这篇文章干嘛！

在这里插入图片描述

直接上图给大家看看：

效果图如下：

重点来了

浏览器是以从上到下的形式对文档流进行渲染的，那你们是不是会问CSS放在最后面为什么会先加载出来呢？

嘿嘿，浏览器是先将HTML文件全部先渲染出来再加载出来的，简单的说就是浏览器先看一遍你的代码，觉得可以，就显示到你的电脑上了，那JavaScript为什么不可以呢？

这就是一个很深奥的问题了，简单去理解就是浏览器先加载HTML和CSS，后加载JavaScript，如果不先声明一下JavaScript的顺序，那么浏览器就无法实现其功能。

如果大家想要深入的了解的话可以去这个地方看看，写的非常的好：浏览器渲染原理与过程

为了方便大家理解，所以我准备先放一波技能，上图：
在这里插入图片描述
效果图：

上面三个都是写在下面的位置，这就可以用，是不是有点迷糊了呢？
只要记住浏览器是按从上到下的顺序渲染页面，这就很好理解了。

持续放技能，上图：
在这里插入图片描述

这样是不是就很好理解啊

下面是真正的大招了，上图：

大家想想这个是不是也能用啊！

效果图如下：
在这里插入图片描述

二、JS的运行机制

那为什么这样写放在前面也可以用啊？

在这里插入图片描述

来来来，这个时候就要讲到事件操作了

onload事件：会在页面或图像加载完成后立即发生。

这是什么意思呢？也就是说，当我用onload属性时，我是将这个函数定义为最后加载的，就是把JavaScript脱离出来，浏览器先把HTML和CSS先渲染，最后再来渲染JS。

这样的话，我的JS在文档的什么位置都是可以使用的，因为它已经不是按照从上到下的顺序去渲染了，我已经定义了JS在页面加载完后再使用。

上图：
在这里插入图片描述

所以大家的写法一定要规范，符合标准，一般做复杂的网页都要实现CSS和JS与HTML文档分离处理，这样的代码才能够简洁、美观（多用链接式，将CSS和JS写成单独的文件）

大家可以用源码去试试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
<script>
    window.onload=function () {
        var div = document.querySelector('div');
        div.addEventListener('mousemove',function () {
            div.style.backgroundColor='pink'
        })
    }
</script>

总结

这篇文章是理解HTML、CSS、JS三者关系最为基础的部分，多看几遍，加深理解。如果大家还有什么不懂的地方，可以留言、私信我。又或者你觉得我写的不全面、不够好，也要去查阅相关资料，这才是学好前端必不可少的学习精神。我只是一个在读的学生，按照自己课程和自学的经验对前端的知识点进行了总结，同时也欢迎各位读者多多提出意见。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！