为什么需要学习浏览器工作原理？

1. 准确评估 Web 开发项目的可行性

随着 Web 特性的极大丰富和浏览器性能的提升，越来越多的项目可以用 Web 来开发。所以，了解浏览器是如何工作的，能够让你更加准确地决策是否可以采用 Web 来开发项目。

2. 从更高维度审视页面

作为一名合格的开发者，你还要具备一项重要的技能，那就是：要能站在用户体验角度来考虑页面性能。我们看下面几个常见的用户体验指标。

• 当用户请求一个网站时，如果在 1 秒内看不到关键内容，用户会产生任务被中断的感觉。
• 当用户点击某些按钮时，如果 100ms 内无法响应，用户会感受到延迟。
• 如果 Web 中的动画没有达到 60fps，用户会感受到动画的卡顿。

这里的页面加载时长、用户交互反馈时长、Web 动画中的帧数都决定了用户体验的流畅度，并最终决定了用户体验的效果。在用户体验尤其重要的今天，我们必须能够有效地解决这些体验问题，以免给产品造成不可挽回的伤害。

但通常，这些指标是由一系列的复杂因素导致的。如果你要开发流畅的页面，或者诊断 Web 页面中的性能问题，那你就需要了解 URL 是怎么变成页面的，只有弄懂这些之后，你才可以站在全局的角度定位问题或者写出高效的代码。

而如果了解了浏览器的工作原理，更加可以把这些知识点串成线，连成网，最终形成自己的知识体系，练就像专家一样思考问题、解决问题的能力。

3. 在快节奏的技术迭代中把握本质

如果了解了浏览器的工作机制，那么你可以梳理出来前端技术的发展脉络，更加深刻地理解当前的技术，同时你也会清楚其不足之处，以及演化方向。

首先是脚本执行速度问题。

其次是前端模块化开发。比如，随着 Web 应用在各个领域的深入，Web 工程的复杂程度也越来越高，这就产生了模块化开发的需求，于是相应出现了 WebComponents 标准。我们所熟悉的 React 和 Vue 都在渐进地适应 WebComponents 标准，同时各种前端框架的最佳实践也会反过来影响 WebComponents 标准的制定。如果理解了浏览器工作原理，那么你会对 WebComponents 中涉及的 Shadow DOM、HTML Templates 等技术有更深刻的理解。

最后是渲染效率问题。同样，如果理解浏览器的渲染流程，那么你应该知道目前页面的渲染依然存在很大缺陷，然后你就清楚如何避开这些问题，从而开发出更加高效的 Web 应用。与此同时，Chrome 团队也在着手改善这些缺陷，比如正在开发的下一代布局方案 LayoutNG，还有渲染瘦身方案 Slim Paint，其目的都是让渲染变得更加简单和高效。

综上可以看出，触发这些改变的背后因素是当前技术制约了现实的需求，所以了解浏览器是如何工作的，能站在更高维度去理解前端。

此文章为2月Day3学习笔记，内容来源于极客时间《浏览器工作原理与实践》，推荐该课程。