一个再普通不过的思考题

从输入 URL 到页面加载完成，发生了什么？

这个过程大致可以分为如下几个步骤：

1. DNS 解析
2. TCP 连接
3. HTTP 请求抛出
4. 服务端处理请求，HTTP 响应返回
5. 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
6. 浏览器的JS引擎还会注册一些响应事件用于响应用户操作

这几个步骤很关键，将涉及前端方方面面的知识和优化方案。

举几个例子：

1. DNS解析，涉及了浏览器 DNS 缓存和 DNS prefetch，还可以使用CDN优化响应静态资源的速度
2. 连接过程会涉及网络和安全的课题，比如TCP协议和HTTP协议
3. TCP握手挥手过程涉及了长连接、预连接、接入 SPDY 协议
4. HTTP协议还会涉及缓存机制、同源策略、跨域请求等
5. 为了优化网络传输效率，可以通过减少请求次数和减小请求体积
6. 浏览器渲染会涉及HTML、CSS、JS的交互和运行原理，可优化的地方也很多，比如如何避免回流与重绘，批量DOM操作的优化方案，还有图片加载优化方案
7. JS脚本会涉及JS引擎、ECMAScript规范、事件循环

借鉴《前端性能优化原理与实践》作者的一张图：

参考

《前端性能优化原理与实践》
一道面试题：《从输入 URL 到页面加载完成，发生了什么？》