说一说性能优化有哪些性能指标，如何量化？

解题思路

得分点

        加载速度、第一个请求响应时间、页面加载时间、交互动作的反馈时间、帧率FPS、异步请求完成时间 Lighthouse、Throttling 、Performance、Network、WebPageTest

标准回答

        常用的性能优化指标

                1 Speed Index（lighthouse，速度指数）

                2 TTFB（Network，第一个请求响应时间）

                3 页面加载时间 - 首次渲染 - 交互动作的反馈时间

                4 帧率FPS（动画 ctrl+shift+p）

                5 异步请求完成时间 使用性能测量工具进行量化

                6 Chrome DevTools

                7 开发调试、性能评测 - Audit(Lighthouse)

                8 Throttling 调整网络吞吐

                9 Performance 性能分析

                10 Network 网络加载分析

                11 Lighthouse - 网站整体质量评估 

                12 还可以提出优化建议 - WebPageTest

                13 测试多地点(球各地的用户访问你的网站的性能情况)

                14 全面性能报告（first view,repeat view,waterfall chart 等等）

                15 WebPageTest 还可以进行本地安装，让你的应用在还没上线的时候就可以测试。

加分回答

        常用的性能测量API

        DNS 解析耗时: domnLookupEnd - domnLookupStart

        TCP 连接耗时: connectEnd - connectStart

        SSL 安全连接耗时: connectEnd - secureConnectionStart

        网络请求耗时 (TTFB): responseStart - requestStart

        数据传输耗时: responseEnd - responseStart

        DOM 解析耗时: domInteractive - responseEnd

        资源加载耗时: loadEventStart - domContentLoadedEventEnd First

        Byte时间: responseStart - domnLookupStart

        白屏时间: responseEnd - fetchStart         

        首次可交互时间: domInteractive - fetchStart

        DOM Ready 时间: domContentLoadEventEnd - fetchStart

        页面完全加载时间: loadEventStart - fetchStart         

        http 头部大小： transferSize - encodedBodySize

        重定向次数：performance.navigation.redirectCount

        重定向耗时: redirectEnd - redirectStart