从以下几个方面来做性能优化
- 缓存
- 资源文件
- 编码
缓存
使用 CDN，减少资源下载时间
CDN，内容分发网络，用户访问一个URL的时候，CDN会根据用户所在区域，访问的内容和服务器的负载情况，返回一台缓存服务器的IP地址给用户访问 CDN是什么？使用CDN有什么优势
根据http缓存
- 强缓存 设置expire和cache-control
- 协商缓存 设置etag和last-modified时间 （具体的看这一篇）
资源文件
指css、js、img这类型的资源文件
-
使用多域名
浏览器一般会限制每个域的并行线程（一般为 6 个，甚至更少），使用不同的域名可以最大化下载线程，但注意保持在 2-4 个域名内，以避免 DNS 查询损耗。
-
压缩大小
-
合并js、css文件，图片做成雪碧图，减少请求
-
懒加载
-
icon类可以使用iconfont或者SVG
编码
-
减少DOM操作
缓存DOM属性和元素、把DOM集合的长度缓存到变量中并在迭代中使用。读变量比读DOM的速度要快很多
-
减少重排与重绘
先让元素脱离文档流，处理完毕后再让元素回归文档流，这样浏览器只会进行两次重排与重绘（脱离时和回归时）
-
使用事件委托
性能监控
可以使用第三方工具。浏览器也有相应apiperformace.timing
- 白屏时间：responseStart - navigationStart
- 首屏时间：imgLoadTime(自己计算的，api没有) - navigationStart
- 用户可操作时间：domContentLoadedEventEnd - navigationStart;
- Dom加载完成时间：loadEventEnd - navigationStart
参考链接：
