前言
Web业务的性能优化是一个系统工程，既有深度，又有广度。以下所简称性能均特指Web业务性能。
技术的广度上，主要从大背景下考虑到其各个相关方，基于共同的数据指标发掘和评估方案。
技术的深度上是一个渐进和迭代的过程。可以从性能的本质展到目前各端的主要优化方向。
性能的本质
性能的本质是快速传播, 要素是内容(数据)和流程，效果是：完备、快速。完备不是完整，而是接受的信息要一致，没有歧义。流程是内容处理的过程和方法。
流程从广义上看来源于后台服务器，以网络和客户端为媒介，以页面形式到达用户。落到各端，又可以再次细分为不同的内容和流程，层层拆解。
性能优化就是保障快速传播内容，可以概括为四个流程和三类方法。其中四个流程是指:
- 衡量: 设定指标，建立监控。
- 识别: 识别和梳理出整体到局部对各个层级的内容(数据)及流程。
- 实施: 针对性的进行优化。
- 评估和监控: 通过数据评估是否达成预期，并做定期监控。
各端实施前先理解全业务视角下的内容和流程，以及各自内部的内容和流程。以下为目前识别出的各端内容(数据)及流程:
| 各端 | 内容(数据) | 流程 |
|---|---|---|
| 整体 | 页面资源 | 后台服务 (图片服务) -> 浏览器(客户端) |
| 后台 | 页面资源 列表内容 页端接口 |
1.架构 (接入/Docker/爬虫/CDN) 2.发布上线流程 3.内容请求及响应流程(可继续细分, 涉及部署) …… |
| 图片服务 | 图片 | 1.图片请求接口 2.图片上传发布 …… |
| 页端 | 主文档 静态资源 动态资源 |
1.前端渲染流程 2.模块加载 3.懒加载 4.统计打点 …… |
| 客户端 | 统计数据 | 业务逻辑 |
| Web Engine | 页面资源 后台响应数据 网络性能数据 统计数据 |
1.网络连接 2.加载、解析、排版、渲染 3.JS执行 4.业务功能 (广告过滤、后台省流省电、统计……) …… |
定义出各层各端的内容及流程后，就可以着手进行优化。
选择优化时机
当我们发现一个问题点，如果确定是不是当时下手解决？ 这个还需要在经验中总结提炼．目前总结的原则有两条:
优先解决关键路径上的问题．
如果解决的问题，不在关键路径上，收益的评估可能不准，如果上线了，其实际效果也往往会被低估．如CSSOM优化．
对于不确定的问题，可以使用小步快走的方式，进行快速验证．如中转直连策略．
避免微优化。微优化往往会掩盖一些更核心的问题。
综合从各端和多维度考虑解决方案．
如果单从一端或一点考虑优化，容易出现边优化边引入问题的情况．这时可以通过开放讨论和实验室验证的方式减少影响．如页面之前一次主档精简．
性能优化方法
性能的优化方法上可以概括为: 简(化,减法)、分(离)、预(处理)三类。每一种方法都可以分别从内容和流程上展开典型的方法:
方法 目标 内容侧 流程侧
简化 尽量少(小)，直至没有!!! 1.去除冗余信息 (请求头，内容…)
2.去除无用的CSS/JS等资源
3.压缩或裁剪
4.缓存及Combo可以减少请求
5.图片优化图片出口流量
1.去除不必要的处理和计算
2. 使用更好的处理算法 (查表)
3. 动态策略减少中转或直连请求
4. 不必要的业务逻辑
5. 后台优化存储及服务器布署
6. SPA或模板的应用
7.PRPL原则的应用
分离 区分不同属性，更加有针对性。 动态内容与静态内容的分离
2. 首屏内容(资源)的分离
3. 主文档与正文内容的分离
4. 概要内容（包括低质量图片）与精细内容的分离 首屏渲染与懒加载
2. 同步请求改为异步请求
3. 前期不阻塞加载，中期不阻塞渲染
4.区分不同网络的优化
预处理 重要的内容和事，提前准备。 1.预加载(主文档及子资源)
2.预下发 1.预热
2.预DNS解析
3.预连接
4.连接复用(包括HTTP2)
技术演进和整合
演进与迭代
从性能优化上，虽然概括了四个过程和三类的手法，但整体却是一个由各端所在技术领域共同推动的迭代过程。
首先各端的技术领域有很大的交集，大致可以体现为:
但是各端所在的技术领域都有不同的技术演进，各自又都有相应的解决方案，其中以前端和浏览器内核的发展最为活跃,且有各有明显的分段:
端 技术要点
后台 1.由于操作系统可以定制，一是借助Linux系统协议栈上的优化，包括HTTP2/QUIC，以及在TCP栈上的优化，二是改进TCP栈的性能、HTTPS的性能、通过改进压缩算法提高数据传输性能等。
2.使用更加精细化的架构和系统来承载服务，同样存在通过细化识别出优化点的过程，包括CDN的部署等。
页端 自Steve Souders以YUI为始，定制了一套相关的基础规则，包括了Head中的JS, CSS的位置，Cache、Cookies等，并且固化到了YSlow这个工具内。参考<<高性能建站指南>>。
后面又基于Web App发展趋势而有了SPA (Single Page Application,也有称为模板页)模式。同时Responsive Web Design的提出，也有了一套相对应的优化策略。因为前端技术的发散和快速演进的特点，对于将工程化的需求更高。
FaceBook目前可以算是前端技术的领导者, 提出不少问题的前端技术方案，如Instant Article, Network Quality Classifier。特别是RN代表的native化方向，为前端技术应用带来了更大的空间。
浏览器 浏览器的发展前以Firefox和WebKit为马首，现以Chrome为主导。Chrome之前，浏览器侧重于H5/CSS3/JS等技术体系的支持。自Chrome始，除了继续将技术体系演进到Web Platform外，也再进一步将前端开发者的需求考虑到开发方向上来(见BlinkOn5资料)，以开发页面的真实需求驱动Web Platform发展，演进了PWA, AMP等技术，也提出RAIL模型，来统一页端和浏览器内核的目标。
在相同问题，Chrome和Facebook往往有不同的方案，比如AMP对应Instant Article, NQE对应Network Quality Classifier。与Facebook的Native化方向相比，Google则是以PWA(Progressive Web App)推动H5达成Native体验。
针对页端的YSlow, Chrome也在DevTools中提供更为强大的Audit (可以理解PageSpeed Insights增强版)，以及评价工具Lighthouse。在网络的层面，和服务器不同的是，Chrome提出了HTTP2(SPDY)和QUIC (UDP)，解决网络上问题。
从整体看浏览器和页端的技术演进，我们可以看到两个清晰的分段:
关注于单项(维度)技术的优化。往往可以从一个Check List的方式入手。比如: 优化点挖掘, 性能优化Check List。
体系化、多维度的技术创新。PWA和RN都不能算是技术创新，因为他们背后的技术原型都存在很久了，但是他们经过体系化后，被赋予了一个大愿景，再被不断完善充实，解决一个普遍性的问题。
*后台(服务器侧)因为个人能力和经验的限制，没有看到这个分界线。如果有，欢迎补充。
这两个分段基本也对应到目前性能优化的迭代阶段 (也可能各有若干迭代周期)：
基于现有技术架构进行各点(面)的优化。
这是最重要的基础，往往容易因关注新技术，而被忽略。从业务开发的角度，最好是从一开始就能应用工具和Check List不断纠偏。
这一阶段的细化，可以参考: 项目总结 - 过程。
应用体系化的技术改造，突破技术瓶颈。
技术整合
虽然Facebook和Google Chrome在技术方向有不同的选择，这是他们作为技术领导者的责任。但是从Web业务上看，技术整合才是必然的，包括Facebook和Google。一个代表前端有控制更多的需求，一个代表Web平台，支持更多的控制，两者的目标并不冲突。
从技术整合的角度来看，需要结合业务特点进行全局的技术方案评估和平衡。比如直出和前端渲染的选择，就还需要考虑到业务单位间的协作和运营的需求。
SPA与模板页
下面以SPA作为一个技术整合评估的示例。在实际业务场景，我们遇到了以下几种提法:
Single Page Application (SPA)
本地模板页
主文档缓存和#版本
后者基本一致，SPA与他们的差别就在于可能不需要缓存来实现。所以后两者可以理解为SPA的一种收益较大的实现。
它们的收益来源于：
主文档缓存或本地模板页减少主文档请求和响应数据。
第二次从页面内跳转到新的内容，可以复用当前运行环境，包括已经在运行的JIT Code, 已经解析完成的CSS Rule Set等。
它们也有缺点:
主文档缓存：考虑到改版， 需要使用条件请求，也就是仍然需要发送请求，只是响应在大多数情况会小很多。这个内核和页端配合可以解决，页端保证资源的一致性，内核则允许特定主文档后置验证。
本地模板页: 同样是改版的问题，只能是由客户端自己管理了。另一个影响是性能数据可能无法正确收集。
两者是不是有绝对的性能优势还取决于页面的逻辑设计：即使主文档本地化了，正文内容还是需要的，它的发送时间和响应的性能就成了关键因素了。
另外，复用运行环境的收益可以再放大。比如以类似预热的思路，提前加载到空的WebView中，当实际需要请求时，通过#版本的方式就可以完成了。
所以收益最大的方案是四端技术整合:
页端&后台: 完成动态数据和静态数据分离，提取出模板化的主文档，并设计启用304条件请求。
页端: 同时支持?版本和#版本，确保主文档和资源的一致性。
内核: 允许特定域名下的主文档走后置验证，而不是前置验证。
客户端: 利用预热的机制，建立一个空白WebView加载主文档。当用户需要打开页面时，切到已加载的WebView，并使用注入JS或#版本加载正文内容，也可以通过JSSDK向外壳直接取数据。
性能优化的方向
前面提到了目前可以确定的两个迭代阶段。我们现在还处于第一阶段。借助U4可以将性能优化推进到第二阶段，将各领域中体系化的技术加以评估、运用， 包括各端技术的深挖。
再往前一步，未来的页面型态会不断细分，相关的技术也会各有差异。我们可以先从业务类型区分开始，针对性的演进跨端的体系化方案。
对页面分类，从性能优化角度看，最终以页面在Web Platform（浏览器内核）上效果来体现．所以采用对内容(数据)和流程(行为)细化最为合理：
资源数
资源大小
多媒体资源占比
用户所处的网络环境
后台服务器部署
动态资源大小及占比
JS执行时间占比
渲染开销
依赖于特定的技术
……
定出类型后，就可能对应运用简分预挖掘优化策略。
转载自：https://blog.csdn.net/horkychen/article/details/63033913
来源：CSDN
作者：_philosopher
链接：https://blog.csdn.net/qq_37003559/article/details/103517782