前端面试-性能优化篇

从以下几个方面来做性能优化

• 缓存
• 资源文件
• 编码

缓存

使用 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性能优化地图

前端性能优化最佳实践

转载于:https://juejin.im/post/5cfb6efde51d45599e019d84