Skip to main content

00 浏览器概览

浏览器的重要地位​

  1. 应用程序 Web 化。随着云计算的普及和 HTML5 技术的快速发展，越来越多的应用转向了浏览器 / 服务器（B/S）架构，这种改变让浏览器的重要性与日俱增，视频、音频、游戏几大核心场景也都在往 Web 的使用场景切换。
  2. Web 应用移动化。对于移动设备应用，Web 天生具有开放的基因，虽然在技术层面还有问题尚待解决（比如渲染流程过于复杂且性能不及原生应用、离线时用户无法使用、无法接收消息推送、移动端没有一级入口），Google 推出了 PWA 方案来整合 Web 和本地程序各自的优势。
  3. Web 操作系统化。Web 操作系统有两层含义：一是利用 Web 技术构建一个纯粹的操作系统，如 ChromeOS；二是浏览器的底层结构往操作系统架构方向发展，在整个架构演化的大背景下会牵涉诸多改变
    1. Chrome 朝着 SOA 的方向演化，未来很多模块都会以服务的形式提供给上层应用使用；
    2. 在浏览器中引入多种编程语言的支持，比如新支持的 WebAssembly；
    3. 简化渲染流程，使得渲染过程更加直接高效；
    4. 加大对系统设备特性的支持；
    5. 提供对复杂 Web 项目开发的支持。

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

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

了解浏览器是如何工作的，能够更加准确地决策是否可以采用 Web 来开发项目。

从更高维度审视页面​

要能站在用户体验角度来考虑页面性能：

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

要开发流畅的页面，或诊断 Web 页面中的性能问题，需要了解 URL 是怎么变成页面的，才可以站在全局的角度定位问题或者写出高效的代码。

可以站在更高的维度审视项目，通过全视野快速定位项目中不合理的地方。比如首屏的显示就涉及了 DNS、HTTP、DOM 解析、CSS 阻塞、JavaScript 阻塞等技术因素，其中一项没处理好就可能导致整个页面的延时。

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

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

脚本执行速度问题​

针对 JavaScript 设计缺陷和执行效率的问题：

  • 不断修订和更新语言本身，ES6、ES7、ES8，或者 TypeScript 的出现。这种修订对目前生态环境的改动是最小的。
  • 颠覆性地使用新的语言，WebAssembly 出现的原因。WebAssembly 需要经过编译器编译，体积小、执行速度快，使用它能大幅提升语言的执行效率，但是语言本身的完善，和生态的构建都是需要花很长时间来打造。

前端模块化开发​

随着 Web 应用在各个领域的深入，Web 工程的复杂程度也越来越高，产生了模块化开发的需求，于是相应出现了 WebComponents 标准。

理解了浏览器工作原理，会对 WebComponents 中涉及的 Shadow DOM、HTML Templates 等技术有更深刻的理解。

渲染效率问题​

目前页面的渲染依然存在很大缺陷，清楚如何避开这些问题，从而开发出更加高效的 Web 应用。

Chrome 团队也在改善这些缺陷，比如正在开发的下一代布局方案 LayoutNG，还有渲染瘦身方案 Slim Paint，都是让渲染变得更加简单和高效。