前端面试-性能优化篇

从如下几个方面来作性能优化

• 缓存
• 资源文件
• 编码

缓存

使用 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

参考连接：

嗨，送你一张Web性能优化地图

前端性能优化最佳实践