一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

浏览器工作原理：从输入URL到页面加载完成

概述

• 这个问题涵盖的内容非常广，在主要的核心内容保证回答到位，可针对个人深入理解的部分进行细致的描述。如：HTTP、缓存、CDN、渲染等。
• 浏览器是多进程的，在浏览器中打开一个网页相当于新起了一个独立的浏览器进程（进程内有自己的多线程）
  • Browser进程
  • 第三方插件进程
  • GPU进程
  • 浏览器渲染（Render）进程（浏览器内核）
    • GUI渲染线程
    • JS引擎线程
    • 事件触发线程
    • 定时触发器线程
    • 异步HTTP请求线程

概念分析

1. GUI渲染线程与JS线程互斥
   • JS可以操作DOM，如果GUI和JS线程可以用时运行，那么最后的DOM是不可预测的。
2. WebWorker
   • Web Worker 允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制，且不得操作 DOM 。并没有改变 JavaScript 单线程的本质。
   • WebWorker只是属于该render进程下的一个线程，SharedWorker由独立的进程管理，多个render进程可以共享。
3. JS阻塞页面
   • 由于JS线程和GUI线程互斥，所以一旦某段JS代码执行时间过长，页面渲染就会渲染不连贯，出现“加载阻塞”页面渲染的现象。
   • 优化
     • JS加载逻辑放到页面底部，减少JS加载对GUI渲染工作的影响
     • 避免重排/回流/Reflow（影响布局和大小的CSS样式），减少重绘/Repaint（颜色改变）
     • 避免DOM嵌套层级过深
     • 使用 requestAnimationFrame 来实现动画视觉变化，setTimeout 或 setInterval 的回调在帧的某个时间点运行，如果刚好在末尾，可能导致丢帧，引发卡顿
4. CSS加载会否阻塞页面
   • CSS是由单独的网络请求线程异步下载的
   • CSS下载不会阻塞DOM树解析（DOMContentLoaded），但会阻塞render树渲染（loaded）

简要过程

1. DNS解析
2. TCP连接+HTTP请求
3. web服务器=>后端服务
4. 分析处理报头，检测缓存304，下载文档
5. 浏览器解析渲染页面

浏览器渲染

1. 处理 HTML 标记并构建 DOM 树
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 调用 GPU 绘制，合成图层，显示在屏幕上

DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。