浏览器工作原理学习总结（一）

ToSchool
383 阅读7分钟

面试问：

  • 对浏览器的工作原理了解多少？
  • 前端的新技术有哪些？
  • 项目开发过程中遇到的挑战有什么？
  • 说一下浏览器（以chrome为例）的进程架构
  • 说一下浏览器的渲染流程
  • html5的发展趋势
  • 页面劫持是什么，浏览器安全
  • 如何提高页面的性能

原文

08年Chrome 浏览器推出，完全颠覆了之前浏览器的架构设计，在速度和安全性上占据了绝对优势。在 2010 年底，Google 还推出了一款网络操作系统——ChromeOS。

浏览器的三个大发展方向（ Web 应用能做什么，未来能适用于哪些新领域）

  • 应用程序 Web 化。云计算和 HTML5 技术的发展，越来越多的应用转向了浏览器 / 服务器（B/S）架构，视频、音频、游戏几大核心场景也都在往 Web 的使用场景切换。

  • Web 应用移动化。移动端web存在的问题：渲染流程过于复杂且性能不及原生应用、离线时用户无法使用、无法接收消息推送、移动端没有一级入口，但 Google 推出了 PWA 方案来整合 Web 和本地程序各自的优势。

  • Web 操作系统化。Web 操作系统有两层含义：

    • 一是利用 Web 技术构建一个纯粹的操作系统，如 ChromeOS；

    • 二是浏览器的底层结构往操作系统架构方向发展：

      • Chrome 朝着 SOA （面向服务的架构）的方向演化，未来很多模块都会以服务的形式提供给上层应用使用；
      • 在浏览器中引入多种编程语言的支持，比如新支持的 WebAssembly；
      • 简化渲染流程，使得渲染过程更加直接高效；
      • 加大对系统设备特性的支持；
      • 提供对复杂 Web 项目开发的支持。

浏览器已经逐步演化成了操作系统之上的“操作系统” 。依靠浏览器的网络操作系统。

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

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

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

  2. 优化web页面的性能

    站在用户体验角度来考虑页面性能。几个常见的用户体验指标：页面加载时长、用户交互反馈时长、Web 动画中的帧数。这些指标是由一系列的复杂因素导致的。如果你要开发流畅的页面，或者诊断 Web 页面中的性能问题。

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

  3. 把握技术发展的方向和本质

    理解现有的web技术存在的不足，理解未来的web技术的针对这些不足而创造的新技术方案。

    Node.js 是前端发展的一个核心推动力。

    为什么 Node.js 能如此快速地发展？根本原因还是浏览器功能以及整个前端的开发环境，不足以支撑日益增长的需求。随着脚本执行效率的提高、页面渲染性能的提升和开发工具链的完善，接下来的前端会进入一个相对平稳的阶段。通俗地理解就是：等到核心技术足以支撑核心需求，那么前端生态会进入一个相对稳定的状态。

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

为了不断的解决web技术无法满足开发需要的现实问题，web技术针对它们不断演进。

前端技术演进:

  • 首先是脚本执行速度问题。比如针对 JavaScript 设计缺陷和执行效率的问题，可以从以下两个途径去解决：

不断修订和更新语言本身，知道 ES6、ES7、ES8，或者 TypeScript 出现的必要性。

使用新的语言 WebAssembly 。WebAssembly 需要经过编译器编译，所以体积小、执行速度快，使用它能大幅提升语言的执行效率，但是语言本身的完善，和生态的构建都是需要花很长时间来打造的。

  • 前端模块化开发。Web 工程的复杂程度越来越高，这就产生了模块化开发的需求，于是相应出现了 WebComponents 标准。

React 和 Vue 都在渐进地适应 WebComponents 标准，同时各种前端框架的最佳实践也会反过来影响 WebComponents 标准的制定。如果理解了浏览器工作原理，那么会对 WebComponents 中涉及的 Shadow DOM、HTML Templates 等技术有更深刻的理解。

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

触发改变的背后因素是当前技术制约了现实的需求。

《webkit技术内幕》—— 朱永盛

宏观视角看浏览器：

  • Chrome进程架构
  • TCP协议
  • HTTP请求流程
  • 导航流程
  • 渲染流程

浏览器中JavaScript执行机制：

  • JS执行顺序（编译和执行）
  • 调用栈
  • 作用域
  • 词法环境和变量环境
  • this

V8工作原理：

  • 堆栈内存
  • 垃圾回收
  • 编译器和解释器

事件循环系统：

  • 消息队列和事件循环及其代表性API：setTimeout和XMLHttpRequest
  • 宏任务和微任务：Promise和async/await

WEB页面的性能优化：

  • 利用Chrome做应用性能分析
  • 其他性能优化
  • js脚本对DOM树的影响

HTTP不同版本：

  • HTTP/1
  • HTTP/2
  • HTTP/3

浏览器安全：

  • 同源策略
  • 跨站脚本攻击
  • 跨站点伪造请求
  • 沙盒
  • https

前端工程师需要具备哪些核心的基础技能呢？

  • 利用UI层来展示一些数据和承载交互
  • 前端工程化（node.js）
  • 渲染工具：浏览器
  • 数据结构与算法
  • 图形学（webgl，canvas，glsl）
  • 计算机学科基础

目前Chrome的排版引擎是Blink，Blink是从Webkit分支独立出来 的，起初和Webkit基本是一样的，但是随着Google在Blink上的发力，目前的差异已经非常大了。其实站在大的结构层面来看，Blink，WebKit ， Gecko三者的渲染流水线基本是类似的，只是一 些术语有些不同。但是落实到具体实现层面来看，差别就很大了，如JS引擎的实现，排版过程，绘制过程等都有很 大差异。

浏览器获取服务端响应的set-cookie 后，浏览器请求里的cookie是调用了浏览器本身内置的方法写进去的吗？

把http响应头看成是服务器和浏览器对话的语言， 响应头中的set-cookie字段就是告诉浏览器：“浏览器，帮我把这段Cookie写到本地去”！ 所以浏览器在接收set-cookie后，就会将cookie写到本地！

avatar
文章
阅读
粉丝