前端性能优化清单

1、雅虎军规

2、几个经验值

同一个域名下的js不超过3个
首屏加载的js总数不超过5个
gzip之后每个文件大小不超过32.2kB 压缩之前100kB

3、预加载技术-DNS Prefetch

用于告知浏览器，尽可能预先解析指定域名的DNS

<-- 这是用来告知浏览器当前页面要做DNS预解析 -->

4、异步加载技术

利用脚本的async和defer属性可以实现异步加载

利用这两个属性的script标签都可以实现异步加载，同时不阻塞脚本解析。但是使用async属性的脚本执行顺序是不能得到保证的。而使用defer属性的脚本执行顺序可以得到保证。另一方面，defer属性是在HTML文档解析完成后，DOMContentLoaded事件之前就会执行js。async一旦加载完js后就会马上执行，最迟不超过window.onload事件。所以，如果脚本没有操作DOM等元素，或者与DOM事后加载完成无关，直接使用async脚本就好。如果需要DOM，就只能使用defer了。

5、动态加载技术

动态加载脚本就是利用JavaScript代码来加载脚本，通常是手工创建script元素，然后等到HTML文档加载完毕后插入到文档中去。这样就可以很好地控制脚本加载的时间，从而避免阻塞问题。

function loadJs(src){
  const script = document.createElement('script');
  script.src = src;
  document.getElementsByTagName('head')[0].appendChild(script);
}
loadJs('http://example.com/aaa.js');

6、利用manifest、service workers实现缓存。

7、Offline.js：自动提示在线/离线状态

8、合理利用浏览器缓存机制、或者localstorage 将js存储在本地（适用移动端）

// 注意 localStorage一个域名下最大限制 5M 小米手机超过2.5M会造成卡顿
  --------------可以借助postMessage实现localStorage扩容
//1、localStorage在浏览器的隐私模式下面是不可读取的
//2、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
//3、localStorage不能被爬虫抓取到

if (localStorage['index.js']) {
    eval(localStorage['index.js'])
} else {
    $.ajax({
        url: 'http://aa.com/index.js',
        dataType: 'text',
        success: function(data) {
            eval(data);
            localStorage['index.js'] = data
        }
    })
}

9、区分机型、网络情况处理

10、服务端渲染（SSR）更好的有利于SEO，减少页面首屏加载时间

11、使用压力测试工具 WRK

PV 当日访问人数 pv每天几十万甚至上百万需要考虑压测
UV 独立访问人数
QPS=PV/t

wrk -t 4 -c 100 -d 10s -s http_get.lua http://cool.test.net/v1.f4v
用4个线程模拟100个连接 10s内

参数说明：
-t 需要模拟的线程数 （一般线程数不能过多 核数的2-4倍就够了）
-c 需要模拟的连接数
--timeout 超时的时间
-d 测试的持续时间

其他工具
JMeter
node自带的工具 process.memoryUsage
memwatch+headdump

12、使用Chrome Devtools调试工具调试Node

node --inspect app.js
chrome://inspect/#devices
录制 wrk测试