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

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的顺序，那么浏览器就无法实现其功能。

如果大家想要深入的了解的话可以去这个地方看看，写的非常的好：