共计 850 个字符，预计需要花费 3 分钟才能阅读完成。
不论是内联还是外链 js 都会阻塞后续 dom 的解析和渲染
如果把 JavaScript 放在页面顶部，下载和解析 JavaScript 的时间里面，dom 迟迟得不到解析和渲染，浏览器一直处于白屏，所以把 JavaScript 文件放在页面底部更有利于页面快速呈现。
defer 和 async
首先，async 和 defer 对于内联 JavaScript 都是无效的
defer
设置了 defer 的 script 外链文件，在下载 js 文件期间不会阻塞 HTML 的解析，而且等 js 下载完毕时若 HTML 还没解析完毕，js 会等到 HTML 文档解析完毕后再执行。如果有多个 js 下载文件，那么执行时也是按照顺序执行。
async
设置了 async 的 script 外链文件，在下载 js 文件期间不会阻塞 HTML 的解析，但是 js 下载完毕之后就会立即执行，无论现在 HTML 是否正在解析。defer 和 async
首先，async 和 defer 对于内联 JavaScript 都是无效的
https://segmentfault.com/img/…
Css 为什么要放在 HTML 文档的 <head> 标签内
Css 阻塞渲染
首先说结论：
对于一个 HTML 文档来说，不管是内联还是外链的 css，都会阻碍后续的 dom 渲染，但是不会阻碍后续 dom 的解析。
如果把 css 文件引用放在 HTML 文档的底部，浏览器为了防止无样式内容闪烁，会在 css 文件下载并解析完毕之前什么都不显示，这也就会造成白屏现象。（但是在 firefox 浏览器中测试，会出现样式闪烁，这也算是不同浏览器的权衡吧，要么等 css 全解析完一起显示，要么先显示然后 css 解析完再重新画上新样式）
当 css 文件放在 <head> 中时，虽然 css 解析也会阻塞后续 dom 的渲染，但是在解析 css 的同时也在解析 dom，所以等到 css 解析完毕就会逐步的渲染页面了。
怎么优化
因为 Css 的解析会阻塞页面的渲染，为了让页面尽早的呈现处理，那么就要避免一些无用的 css 文件。
使用媒体查询可以让 css 文件只在必要的时候解析，进而避免不必需的渲染阻塞，加快页面呈现时间
