摘要 - 性能优化

【可测量指标】：DomReady（DomContentLoaded）事件发生时

【可使用工具】：Network、performance、rendering、FPS、coverage

【可优化方法】：DNS prefetch

TCP：连接复用、并行化、HTTP管道、多路复用、server push

HTTP：资源合并、内联、压缩、精简、cookie free、CDN、缓存、内容协商

代码：位置、拆分、动态导入、懒加载、预加载、CSS优化、JS优化

两个常考问题 - 基础篇

前端面试中经常遇见这两个常考的、非常大的、一旦被面试官深挖经常会哑口无言的问题：

输入URL发生了什么？浏览器如何渲染页面

看似这两个问题是在考察你对整个浏览器原理的理解程度，但实际上不仅限于此，当你弄清这两个问题中所有的过程以及逻辑以及各个环节的关联，其实是在为前端的性能优化做准备。

了解清楚这些知识点，才知道前端能够性能优化的点在哪里，这也对以后工作中有帮助。话不多说，且看下文。

graph LR; A(用户在浏览器输入 URL)-->B(DNS 解析); B-->C(建立 TCP 连接); C-->D(发送 HTTP 请求); D-->E(服务器处理请求); E-->F(服务器返回 HTTP 响应); F-->G(浏览器解析响应); G-->H(浏览器渲染内容);

graph LR; A["浏览器接收 HTML、CSS、JS 等资源"] --> B["构建 DOM 树"]; B --> C["构建 CSSOM 树"]; C --> D["结合 DOM 和 CSSOM 生成渲染树"]; D --> E["布局（计算每个元素的位置和大小）"]; E --> F["绘制（将元素绘制到屏幕上）"];

上面两个流程图就是前面两个问题的答案。

性能优化 - 工具

打开开发者工具，找到检查即可查看运行情况

性能优化 - 方法DNS prefetch 预解析，一种方法是通过在dns中的head头加入dns- prefetch标签

rel="dns-prefetch" href="//example.com">

2. TCP