前端性能揭秘

整体读感还不错，涉及的比较全面了，算前端性能相关的一个overview吧

书中详细讲解了大部分的性能检测方式以及前端、跨端优化的方式，有许多参考意义，以下是我阅读之后的总结： 1、前端性能度量 首先确定优化目标：关键元素的渲染时间、滚动时的帧率； 首屏构建指标：均值、分位数、秒开率 （具体的统计指标如下：） 度量流畅度的指标： FPS：帧率，也就是每秒渲染的帧数（达到60fps会感到流畅，否则会感到卡顿）； FP：（白屏，首次绘制时间） FCP：（首屏，首屏绘制时间） LCP：（最大内容绘制时间） CLS：（累计位移偏移） 常用过程指标 DOMReady：也就是DOMContentLoad，在Network面板中底部就能看到 TTFB（Time To First Byte），是指客户端从发起请求到接收到服务器相应的第一个字节的时间，是反映网站性能的重要指标，静态页面一般在50ms是非常理想的值； Load：页面资源完全加载好的时间点； RTT（Round-Trip Time），即往返时延，从发送端发送数据开始，到发送端接收到来自接收端的确认时间，即一来一回的时间，一般来说这个时间由物理距离、网络传输路径等决定，确定RTT的时间，最简单的方式就是Ping一下，在Ping的时候可以看到time=xxms大致就是1个RTT； PerformanceAPI使用：Navigation Timing API（performance.timing检查页面性能相关的时间点）、Performance Entry API(performance.getEntries()检查页面中所有与资源加载相关的性能信息，包括加载时间线)、performance.getEntriesByType()【navigation、resource、mark、measure、paint、frame】、performance.getEntriesByName(); 2、度量工具 CHrome的DevTools：Network面板（请求列表、传输体积、时间和Waterfall、数据区【总结性数据：请求数量、整体传输体积】、模拟网速、）、Performance面板（操作区、选项【Screenshots、Memory、截图】）； WebPageTest： 3、优化相关检测指标 优化TTFB： 减少请求的传输量（避免在请求中携带过多的无用信息）、 减少服务端的处理时间（一方面尽可能优化服务器端的处理逻辑，增加缓存、优化慢SQL、并行化网络请求等；另一方面常用的手段是流式渲染，即让服务器先返回可渲染的内容，再流式地返回更多耗时的内容完成后续渲染【在Response Header中，增加Transfor-Encoding:chunked,告知浏览器HTML将会被一块一块地流式返回，Facebook构建了bigpipe】）； chunk：当前客户端chunk缓存区大小； 减少RTT：减小RTT，在离客户更近的地方增加服务器节点，除此之外，CDN的冬天加速能力可以帮助我们在不建立更多机房的前提下减小RTT； 优化建立连接：减少物理距离，RTT本质上来说就是网络传输耗时，物理距离缩短就能相应减少时间、preconnect、复用连接、域名收拢（解决加载阻塞问题）、TCP Fast Open、QUIC和HTTP/3 优化beforeFetch耗时：重定向逻辑前置、合并重定向、避免使用短链； Https协议优化：确保证书链完整、 启用TLS 1.3、不滥用EV证书、开启OSCP Stapling（开启OSCP验证）； 优化传输性能：可以根据不同的资源采用不同的压缩方式。● JavaScript/CSS等静态资源优先采用离线br压缩的方式。● 确保静态资源/接口/HTML等都至少开启了gzip压缩，启用压缩和完全不启用压缩的对比效果非常显著。 优化DOM操作：批量操作DOM，类似React中的batchUpdate、纯合成动画； 打包构建优化：Bundle分析、Tree Shaking、Scope Hoisting、Code Splitting、代码压缩、Vite和Bundleless； 4、跨端技术与性能 Webview和Native性能：减少通信数据量、 React Native：基于滚动容器/位置获取的懒加载、虚拟列表、react native通过metro、手动tree shaking、bable等减小打包体积。

介绍了最新视角下的前端性能优化方法论：度量（均值、分位数、秒开率、首屏、流畅度）、分析（TTFB、DOMReady、Load）、实验（A/B test），工具：Devtool、TTFB（RTT）、ServiceWorker（监听fetch、调用catch）、构建工具（tree shaking、splittting、压缩）、SSR（同构、缓存、数据预取、按需渲染、流式渲染）、Hybrid

累了 废话多，有的东西也基础 很难看下去，一句话的东西偏要写五六百字

比较提纲型：从方法论，网络协议、浏览器、工程、跨端、CDN大概系统讲了下性能相关的方方面面，对整体了解、初学入门有帮助 更加深度的内容需要进一步结合具体问题去深挖

当前看，对前端性能有着相对系统的介绍，值得读一读，对实践有一定指导性。