JS高性能优化

1、脚本位置—放到底部

脚本会阻塞页面渲染，直到他们全部下载并执行完成，页面渲染才会继续。

浏览器在解析到标签之前，不会渲染页面的任何部分。

把脚本放到页面顶部将会导致明显的延迟，通常表现为显示空白页面。

应将标签尽可能放到标签的底部。

2、组织脚本

减少页面中外链接脚本的数量，一个脚本就是一次HTTP请求。

3、无阻塞的脚本

在页面加载完成后才加载js代码。即，在window对象的load事件触发后再下载脚本。

（1）延迟脚本

带有defer属性的标签可以放到任何位置。

对应的js文件在页面解析到标签时开始下载，但不执行，

直到DOM加载完成（onload事件被触发钱）。

一个带有defer属性的js文件下载时，不会阻塞浏览器的其他进程。

这类文件可与其他文件并行下载。

（2）动态脚本

用标准的DOM方法创建新的元素

（3）XMLHttpRequest脚本注入

先创建一个XHR对象，然后下载js文件，最后创建动态元素将代码注入页面中。

局限在于，js文件必须与所请求的页面处于相同的域，

意味着js不能从CDN下载。

4、DOM编程

DOM是一个与语言无关的API，他在浏览器中却是用js实现的。

innerHTML（非标准但支持良好）和DOM方法（document.createElement()和document.createTextNode()）

前者在老浏览器中会快得多，在新的浏览器中差别不大或者慢一些。

事件的3个阶段

捕获-》到达目标-》冒泡

5、构建并部署js

合并js文件，减少HTTP请求数

压缩js文件

设置HTTP响应头来缓存js文件

使用CDN