前言：
思考1："从输入URL到加载完成"，经历了哪些过程？
这个问题，相信大多数前端开发面试常被问到。我们在探索性能优化方案前，必须先弄清楚这个问题，了解页面加载到渲染的完整机制，才能找到有效的优化策略及方案。页面初始化时，从加载到渲染大致经历了8大过程，具体如下图所示： 
- 构建请求：根据 url 构建请求
- 重定向：永久重定向、临时重定向
- 查询缓存：浏览器缓存、系统缓存、路由缓存、DNS缓存查找
- DNS解析：根域名、顶级域名、权威域名递归查找对应的ip地址
- TCP连接：传输层 TCP 三次握手建立连接
- HTTP请求：应用层 client 端向 server 端发起 HTTP 请求报文，server端收到请求处理后，响应 client 端返回响应报文（html、js、css等资源）
- 浏览器解析资源：解析 HTML 生成DOM Tree -> 解析 CSS 生成 CSSOM Tree -> render Tree -> layout -> compositing -> painting
- 页面呈现
对浏览器工作原理，有兴趣的可以学习下李兵大佬的：《浏览器工作原理与实践》
思考2：哪些因素会影响到性能？
我们再从宏观角度来看，页面通常可分为3个阶段：初始化加载阶段、运行时交互阶段、关闭卸载阶段。我们从这3个阶段，同时结合上述页面初始化加载经历8大过程，可分析出影响页面性能的因素：
- 加载阶段 ：从发起请求到渲染出完整的页面过程，影响这一阶段的因素有网络 、HTML 、图片 、CSS 和JS脚本
- 交互阶段 ：从页面加载后用户交互（比如：点击、滚动页面等）的过程，影响这一阶段的因素主要是网络 、JS脚本
- 关闭阶段 ：用户发出关闭质量页面做一些清理卸载工作，影响这一阶段的因素主要是JS脚本
问题分析与定位
当我们碰到页面性能、构建效率慢，我们首先需要分析定位具体问题。我们常用的参考性能指标和可视化问题分析工具主要有如下几种： 
性能优化方案
前面使用分析工具定位问题后，我们就可以制定相应的优化方案，可以从"网络层面、渲染层面"两方面展开探索~ 
性能优化案例
上述梳理的优化方案作为理论指导，接下来就可以应用实践了。我这边收集了工作中常见性能优化案例，具体如下图所示： 
总结
从原理方案到实践案例，整个闭环的性能优化完整的知识体系如下：wgkoy9iw2k.feishu.cn/mindnotes/I...
相关专栏文章：
- 【前端工程化-性能优化】性能优化系列之用户体验（概要篇）
- 【前端工程化-性能优化】性能优化系列之用户体验的问题分析与定位
- 【前端工程化-性能优化】性能优化系列之用户体验的优化方案（网络层面）
- 【前端工程化-性能优化】性能优化系列之用户体验的优化方案（渲染层面）
- 【前端工程化-性能优化】性能优化系列之用户体验的应用案例