从输入URL到页面展示完成浏览器做了些什么

为什么输入 URL 就可以显示想要的页面？
输入 URL 后浏览器做了些什么？
前端可以针对这些做哪些优化？

浏览器的 主要功能 是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。
那么从输入 URL 到浏览器显示完成，大致是分为 2 个阶段。首先解析 url，完成后通过 http 获取页面资源，最后将获得的资源渲染展示出来。

HTML 页面加载和解析流程
1. 用户输入网址（假设是个 html 页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回 html 文件；
2. 浏览器开始载入 html 代码，发现标签内有一个标签引用外部 CSS 文件；
3. 浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件；
4. 浏览器继续载入 html 中部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头重新渲染这部分代码；
7. 浏览器发现了一个包含一行 Javascript 代码的