推荐将CSS放置于<head>标签中
首先，我们必须了解浏览器的渲染机制
webkit内核渲染机制
如上图，以Chrome、Safari等浏览器所用渲染内核webkit为例，我们来解释一下浏览器的渲染逻辑：
1.用户输入URL，向服务器请求数据
2.下载并解析HTML文件，形成DOM树【DOM Tree】
3.下载并解析CSS文件，解析出的是样式规则【即标签的颜色、边框之类】
4.DOM树和样式规则一起构建成attachment，在结合layout【布局】形成呈现树【render tree】，此时浏览器就可以把内容绘制到浏览器上用于展示了
尤其要注意的是在第二步和第三步中，文件是一个个开始下载的，无需等待DOM树构建完毕就可以继续后续操作，样式的呈现也是解析一行HTML代码，看是否有css样式规则，有就加载出来，没有就继续解析下一行HTML代码，在《浏览器的工作原理：新式网络浏览器幕后揭秘》一文中作者的描述是
这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树【render tree】和设置布局【layout】。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。
因此，若是不将css置于HTML的顶部，依照上述特性，会导致如下后果
1.在未解析到前端工程师写好的css时，和dom树结合的样式规则是浏览器的默认样式
2.在后续又解析到前端工程师写好的css时，由于产生样式覆盖，页面可能会产生FOUC现象【Flash of Unstyled Content无样式内容闪烁】
3.若是css处于HTML的文件底部，近乎等同于是说dom已经构建完毕，若是dom树过于复杂庞大，用户等待时间会过长，会出现白屏现象
参考文献
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
推荐将JS放置于<body>标签的底部
首先我们必须要知道JavaScript在HTML中的两个特征
1.阻塞后面内容的呈现
2.阻塞其后组件的下载
timeline
从上图中我们可以看到一个非常有趣的现象，每一个js文件下载之后，后面都会有一段空白——code executing【代码执行】，因此每个js文件的阻塞时间实际上是下载时间+执行时间。
所以，若是不将js置于<body>的底部，会导致如下后果
1.我们都知道的是，js文件里有很多例如document.write()、createElement等语句，这些语句会直接影响dom树的构建和css样式规则的解析，若是js文件内有大量类似于上述语句，可能会产生大量bug
2.若是js文件过大，js文件下载和执行的时间会大大增长，此时浏览器必须要等待这段时间结束才能进行后续渲染，用户此时看到的网页将是一片空白，即俗称白屏现象
使用defer或async解决将js置于HTML顶部产生的不良后果
1.async
async
作用：加载和渲染后续文档元素的过程将和script.js 的加载与执行并行进行（异步），但是无法保证顺序
2.defer
defer
作用：加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成，脚本延迟到文档解析和显示后执行，有顺序。
网友评论