高性能JavaScript

管理浏览器中的JavaScript代码是个棘手的问题，因为代码执行阻塞了其他浏览器处理过程，注入用户界面回执。每次遇到 < script > 便签，页面必须停下来等待代码下载（如果是外部的）并执行，然后再继续处理页面其他部分。但是，有几种方法可以减少JavaScript对性能的影响：

1、将所有< script > 标签放置在页面的底部，紧靠body关闭标签< /body>的上方。此方法可以保证页面运行之前完成解析。

2、将脚本成组打包。页面的< script > 标签越少，页面的加载速度就越快，响应也更加迅速。不论外部脚本文件还是内联代码都是如此。

几种方法可以使用非阻塞方式下载JavaScript：

1、为< script >标签添加defer属性（有浏览器兼容问题）
补充：defer属性指明元素中所包含的脚本不打算修改DOM，因此代码可以稍后执行。

2、动态创建< script >元素，用它下载并执行代码

3、用xhr对象下载代码，并注入到页面中

小知识：defer和async区别

defer：加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。推迟的脚本原则上按照它们被列出的次序执行。

async：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。异步脚本不能保证按照它们在页面中出现的次序执行。