为什么要求将JS代码写到页面的最底部？

为什么要求将JS代码写到页面的最底部？

​ 在学习 JavaScript 时，我们了解到 js 代码可以写到绘制页面的 HTML 代码的头部、底部或者标签中等其他位置。但为什么在实际制作项目往往会要求将 js 代码写到底部或者另起一个文件并在最后引入呢？想要搞清楚这个问题我们首先需要明白页面渲染的流程。

页面渲染流程

​ 在这里简单介绍以下页面的渲染流程：浏览器请求到 HTML 和 CSS 内容转成 DOM树 和 CSS树，然后再将这两部分合并成渲染树，之后进行布局，最后将布局绘制到页面上。从这里我们可以了解到，JS代码在渲染树之前就要执行，所以 JS代码的加载、解析和执行势必会阻塞 DOM 的构建，阻塞页面渲染。

防止阻塞的方法

​ 有些小伙伴可能想知道防止阻塞的方法，但实际这种想法是不合理的。我们可以按照上面的渲染流程来设想这么一个场景：在渲染页面的过程中，一边形成渲染树，一边进行页面 DOM 的构建，同时又在使用 JS 修改 DOM；如果不对此进行阻塞，如何保证最后得到的是正确的 DOM？有可能会出现 JS 执行前后 DOM 不一致等问题，所以 JS 必须对 DOM 的构建进行阻塞，从而导致 js 也无法获取在其之后的元素，因为浏览器并未对此进行实质的构建、

​ 以上就是要求将JS代码写到页面的最底部的原因，尽量保证在 DOM 树生成完毕后再去加载 JS，从而得到最终且完整正确的DOM。

​ 这里是万物之恋，我们下次再见了！