整个web页面优化，涉及了传输，运行，渲染中的每个步骤。
自然每一步都有优化的可能性。
本质上使用的方法还是很朴素：
缓存(时、空局部性)
批量并发
类似方法在CPU的指令运行(cache,pipeline)，网络协议栈(累积发送)中都大量存在。
甚至公司、团体的组织运行 ，供应链的运行，都蕴含着相同的原理。所谓大道至简吧。
客观业务的多样性，导致这些方法在实际应用的过程中复杂多变。做起来有难度，有经济价值。
可从技术上，并没什么新意。
webpage的灵活性注定了它相对原生应用的低效。无论从传输代价或运行、渲染代价方面考量。
原生会有更高的执行效率，更少传输代价。可却没有了webpage的广泛适应性。例如各类大型联机游戏。
舍与得的动态平衡。
webpage这个臃肿的流程中，人们一直在尝试想出各种方法优化，更快的执行，更少的传输。
TCP太慢，换QUIC，UDP更小更快(网络)
React等框架不断优化DOM等操作以提升layout，repaint效率(排版算法)
客户端、服务器缓存
V8优化(虚拟机)
webassembly
更好的视频，图片压缩格式
webpack去除无用代码(编译原理)
分块加载，延迟加载，缓存
.
.
.
魔鬼在细节中，这些优化都不简单，原理也不是那么容易。
可就像搬砖垒墙一样，要耗费不少人力，有价值，有必要，可真无聊。
可在当下的人类生产力水平看来，这还是蛮有技术工作...
整个流程最大的麻烦就是没有边缘。也没办法，现实世界的复杂度决定的。
任何问题的思考，都需要有个抽象的边缘。否则层层嵌套，代价较大。
例如学习js，不是从js的层面了解即可。为了很好的利用这个语言，你需要学习虚拟机的实现，
编译原理，甚至CPU的体系结构等才能更好的使用它。这就是典型的没有抽象边缘。自然也可以不学这些，
可了解这些的人通常能写出更高效的程序，通常意味着更好的体验，更少的代价---更多的利益。有利益的
驱使...
再如webpage的渲染，涉及到复杂的排版算法，虽然不用大家完全了解，可还是要大致知道些，未知导致
恐惧，滋生玄学。这样写效率就高...
不过当下没有一门语言可以只学它的规则， 不用学习它的实现，就能用起来非常高效。理想总是那么遥远。
这种抽象边缘的缺失，导致真正想学好一门语言代价巨大，可从本质原理上又没有什么新奇的技术。
只是1+1换成了0+2
生命就在这种重复的内耗中流失(前进是螺旋的，迂回的...)，也是生在这个生产力低下的时代的悲哀。
不过相比以前，现在好多了.
整体大致流程
传输资源: 代码，图片等
少传
缓存
压缩
优先传，延迟传
运行代码
更少的代码
更好的利用V8的优化功能
计算页面布局
CSS更新
内容更新
批量更新
读写分离
60FPS
绘制
batch
Loading Performance
Optimizing Content Efficiency
Eliminating Unnecessary Downloads
Optimizing Encoding and Transfer Size of Text-based Assets
Image Optimization
Automating Image Optimization
Replace Animated GIFs with Video
JavaScript Start-up Optimization
Loading Third-Party JavaScript
Web Font Optimization
HTTP Caching
Adapting to Users with Client Hints
Delivering Fast and Light Applications with Save-Data
Optimizing JavaScript
Reduce JavaScript Payloads with Tree Shaking
Reduce JavaScript Payloads with Code Splitting
Never Load the Same Resource Twice
Offline Cookbook
Web Storage
Offline Storage for Progressive Web Apps
Using the Cache API
IndexedDB Best Practices
Offline UX Considerations
Lazy Loading Resources
Images and Video
Order Loading Thoughtfully
Critical Rendering Path
Constructing the Object Model
Render-Tree Construction Layout and Paint
Render-Blocking CSS
Adding Interactivity with JavaScript
Measuring the Critical Rendering Path
Analyzing Critical Rendering Path Performance
Optimizing the Critical Rendering Path
PageSpeed Rules and Recommendations
Introduction to HTTP2
PRPL Pattern
Push (or preload) the most important resources.
Render the initial route as soon as possible.
Pre-cache remaining assets.
Lazy load other routes and non-critical assets.
Resource Prioritization
Web Performance Optimization with webpack
Decrease Front-end Size
Make Use of Long-term Caching
Monitor and analyze the app
Rendering Performance
Optimizing JavaScript Execution
Reduce the Scope and Complexity of Style Calculations
Avoid Large Complex Layouts and Layout Thrashing
Simplify Paint Complexity and Reduce Paint Areas
Stick to Compositor-Only Properties and Manage Layer Count
Debounce Your Input Handlers
https://developers.google.cn/web/fundamentals/performance/get-started