前端性能优化-开篇

前端性能优化问题是每个前端需要掌握的技术。这篇文章从渲染优化、代码优化、资源优化、构建优化、传输加载优化、更多流行优化技术6大角度讲解前端性能优化。再讲之前，我们先了解一下性能优化指标和一些测量工具。

一、性能优化的指标和工具

1.1性能指标和优化目标

RAIL测量模型
R -> response 响应：处理事件应在50ms以内完成。Click事件等
A -> animation 动画：每10ms产生一帧。
I -> Idle 空闲：尽可能添加空闲时间。
L-> load 加载：5s内完成内容加载并可以交互。

1.2性能测量工具

1.2.1WebPageTest多测试地点、全面性能报告

网址 https://webpagetest.org/

测量结果（不同的浏览器测试结果项可能不同）

测量结果中有首次和第二次访问各项数据，这里介绍我们比较关心的几项
First Byte 发出的第一个请求得到响应的时间，反应了后台处理能力和网络回路的情况。
Start Render 首屏渲染时间
First Contentful Paint 首次有内容页面渲染时间
Speed Index 速度指数 4s合格
Total Blocking Time 页面被阻塞时间综合，不可交互的时间 绿色表示达标

第一轮测量结果细节

瀑布图

测量结果各项数据很多，有兴趣的同事，可以深入的学习。

1.2.2 Lighthouse网站整体质量评估。Chrome开源的一个项目

npm install lighthouse -g 安装
lighthouse https://www.taobao.com/ 使用 自动打开浏览器默认是移动端测量。测试完成后，会生成测试报告html文件。

打开测试报告

Performance 性能
Accessibility 可访问性
Best Practices 网络实践
SEO 网站优化
Progressive Web App 渐进式应用

我们只关注 Performance 测量结果
First Contentful Paint 第一次有意义内容渲染时间
Speed Index 速度指数
Largest Contentful Paint 最大资源渲染时间
Time to Interactive 可交互时间

Opportunities 优化建议，罗列出问题，告诉我们怎么去处理，会优化多少时间
Diagnostics 诊断程序性能一些问题。

1.2.3 Chrome DevTools开发调试、性能评测。

Chrome DevTools Newwork 网络加载分析

Chrome DevTools Performance 性能分析

Timings 页面加载时间节点

Main 主线程
Performance 各项性能分析，可以让我们分析出，页面各个节点时间，及主线程任务状态，性能问题。
分析项很多，这里不做太细节的分析，感兴趣的同事，可以深入学习。

1.3 常用的性能测量APIs

performance 对象
performance.timing 对象包含很多时间时间节点，可以计算出任务耗时

重定向耗时 = redirectEnd - redirectStart;
DNS查询耗时 = domainLookupEnd - domainLookupStart;
TCP链接耗时 = connectEnd - connectStart;
HTTP请求耗时 = responseEnd - responseStart;
解析dom树耗时 = domComplete - domInteractive;
白屏时间 = responseStart - navigationStart;
DOMready时间 = domContentLoadedEventEnd - navigationStart;
onload时间 = loadEventEnd - navigationStart;