Day30 X 系列文总结

这是我第三年参加铁人赛，每一次来到第 30 天，都有种如释重负的感觉，不过同时也会感到一些遗憾，因为总是没能把自己在开赛前预期的内容好好呈现出来。不论是主题内容还是文笔，都有能够再加强的空间。

今年应该算是我最认真准备的一年，除了系列文的前面几篇以外，剩下的篇章应该内容都还蛮足够的，先来回顾一下这次系列文介绍了哪些主题：

Getting Ready: Planning And Metrics

Day1 : 系列文大纲
Day2 : 为什麽需要在前端做效能优化？
Day3 : Performance Analyzers Introduction
Day4 : Core Web Vital & RAIL Model

Assets Optimizations

Day5 : Code Minimize & Uglify
Day6 : 图片最佳化
Day7 : Image Sprites

Delivery Optimizations & Render Process Optimizations

Day8 : 浏览器架构演进史 & 网页渲染流程
Day9 : Resource Hints & Non-blocking script
Day10 : Virtualized List
Day11 : Lazy Loading
Day12 : Writing high performance CSS
Day13 : CSS GPU Acceleration

Build Optimizations

Day14 : Code Splitting & Dynamic Import
Day15 : Tree Shaking
Day16 : Polyfill-less Bundling Script && File Compression

Caching & Networking

Day17 : HTTP Caching
Day18 : Service Worker Caching
Day19 : Application Shell Architecture
Day20 : CDN
Day21 : Upgrading HTTP : From HTTP 1.1 to H2 or H3

Worker & WebAssembly

Day22 : Web Worker
Day23 : WebAssmebly

Framework, Architecture and Memory Management

Day24 : Web Rendering Architectures
Day25 : ESR: Rendering On The Edge
Day26 : Memory Management In JavaScript
Day27 : Stale While Revalidate
Day28 : Browser Devtool Performance Tab Introduction
Day29 : 面对高流量，前端可以做些什麽？
Day30 : 系列文总结

自己认为有把身为前端开发者面对效能优化时一定要拥有的知识点都涵盖进去了，除此之外，还另外加了一些没有那麽「纯前端」的主题，例如 Networking、WebAssembly...等等。但因为我认为现在的前端开发者越来越倾向也需要懂一些後端或架构面的知识，再加上我也将自己定义为杂食性的软件工程师，因此这些没那麽「纯前端」的主题我觉得也非常值得学习。

在时间压力下，总会产生一些遗珠

其实前端效能优化这个主题花 30 篇文章讲解也是有点不够的，虽然铁人赛没有规定只能发 30 篇文章，要发 40 篇 50 篇也是可以的，但我的准备期真的太长且太累的，所以还是先维持在 30 天吧 ?。有一些主题是我觉得没有机会在这 30 天内被收录进去有点可惜的遗珠，例如：

WebAssembly 的实作

在系列文当中，虽然有一天的主题是 WebAssembly，不过碍於篇幅与时间，只介绍了基本概念还有如何使用现成的 wasm module，而没有讲到如何实际写一个 WebAssembly 的程序，当然这又是一个很复杂的 topic 了，我自己很期待 WebAssembly 的未来发展，所以闲暇之余已经开始学习 Rust，未来也计画要再撰写一篇 Rust + WebAssembly 的文章，如果有兴趣的朋友可以追踪我的 Medium 喔！

实际的测试看看效能优化前後的差异

虽然系列文介绍了很多效能优化的技巧，但几乎都是独立的，学习完後如果不实际去实做看看，应该也不会知道到底能优化多少效能，又或者多个优化技巧一起使用会不会产生什麽意外的结果。

lazy-hackathon 是一个刻意弄的很慢的网站，是胡立大大为程序导师计画做的一个练习效能优化的 project，可以到这个 repo 的 issue看看其他学生的优化过程与成果，我觉得蛮有趣的，社群上应该也可以找到类似故意拖垮效能的网站来让各位练习。

太少关於 bundler 的 config 实作

其实有很多优化技巧都可以透过 bundler 来达成，这次系列文只简单示范了一些 bundler 的操作，例如用 webpack 做 code splitting 与 minimize 等等，不过其实 bundler 还可以有更多复杂的操作，现在也越来越多功能与效能都比 webpack 还要好的 bundler，这系列中没有太着重在这里，算是一个小小的遗珠。

Demo 太过简单，未必符合实际情境

虽然蛮多篇章都有附上 demo 的，不过这些 demo 都有点过於简单，有可能会与真实开发时遇到的情境有一些脱节。因此才在第一天的时候强调可以多去参考效能优化的一些成功案例，毕竟为了练习而自己创造出来的效能瓶颈与实际状况还是有差的。建议读者可以针对在工作上或是 side project 等比较大型且复杂的专案去找找效能瓶颈并试着优化，经过这个过程才能真的内化在这个系列文中的各种技巧。

系列文的最後

其实还有太多太多的遗珠了，所以即便我很认真的完成了这次的铁人赛，我也没办法很有自信的说前端效能优化大补帖这个主题名称我当之无愧了。不过至少我达成了自己比铁人赛的目标：「把想写的东西用力得写下来。」就是这麽简单。虽然我也知道读者可能没办法接受铁人赛出现这麽长篇大论的文章，但我就是单纯把想写的东西记录下来，并且趁着年轻的时候享受这份热血！

当然还是要有点责任感，不能只管自己有没有完赛，我同时也非常期望我的系列文能够真的帮助到在萤幕前花时间阅读的你，也谢谢你给了我 30 天的机会去传达我想分享的东西。

最後的最後，给自己一点掌声吧！你们撑过来了！

如果你喜欢我的系列文，可以多多分享，有任何的指教批评，也非常欢迎！

若有兴趣，也可以追踪我的 Medium 或是 Github

Medium: https://oldmo860617.medium.com/
Github: https://github.com/kylemocode

希望这次外送的 Web 前端效能优化大补帖还算好吃并饱足，我是 Kyle 老莫，我们下次见 ?