前端性能优化--文件位置问题

JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：

1. JS 有可能会修改 DOM。 典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
2. JS 的执行有可能依赖最新样式。比如，可能会有 var width = $(‘#id’).width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
3. 现代浏览器很聪明，会进行 prefetch 优化。性能是如此重要，现代浏览器在竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了 prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先，和位置无关。
   以上三点可简述为三条基本定律：

定律一：资源是否下载依赖 JS 执行结果。
定律二：JS 执行依赖 CSS 最新渲染。
定律三：现代浏览器存在 prefetch 优化。

浏览器渲染html是从上往下渲染的，即先执行head标签里的内容，再执行body标签里的，一行行渲染下去

将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。

当我们在浏览器的地址栏里输入一个url地址，访问一个新页面时候，页面展示的快慢就是由一个单线程所控制，这个线程叫做UI线程，UI线程会根据页面里资源（资源是html文件、图片、css等）书写的先后顺序，
它会按照资源的类型发起http请求来获取资源，当http请求处理完毕也就意味着资源加载结束。

但是碰到javascript文件则不同，它的加载过程被分为两步，第一步和加载css文件和图片一样，
就是执行一个http请求下载外部的js文件，但是javascript完成http操作后并不意味操作完毕，
UI线程就会通知javascript引擎线程来执行它，如果javascript代码执行时间过长，那么用户就会明显感觉到页面的延迟。

无论当前的js代码是内嵌还是外联的文件，当js放在head中，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。

为避免这样的问题一般将全部javascript文件放到body元素中页面内容的后面