牧涯前端学习笔记

Appearance

浏览器工作原理 ​

具体看面试笔记文档：/Document/前端面试相关/底层原理面试题/浏览器原理：

浏览器原理 | 牡涯前端学习笔记 (muyacode.github.io)

浏览器 ​

浏览器历史 ​

1.1991 年，世界第一个浏览器 WorldWideWeb (后改为 Nexus)，功能简单，不支持图片

2.1993 年，Mosaic 浏览器出现，可以显示图片，为了区分浏览器是否能显示图片，出现了 UserAgent

3.1994 年，Mozilla 浏览器出现，也就是后来大名鼎鼎的网景浏览器 Netscape，它的 UserAgent 为 Mozilla/1.0

4.1995 年 IE 浏览器出现，为了抢夺市场，UserAgent 为 Mozilla/1.22

5.1998 年，网景浏览器失利，成立 Mozilla 组织

6.2003 年，网景公司解散，Mozilla 基金会成立，这个组织推进了后来的 Firefox

7.Mozilla 开发了 Geoko，变成了 Firefox，它的 UserAgentMozilla/5.0

8.群雄并起，众多公司的浏览器的 UserAgent 上都带有 Mozilla

9.chrome 和 safari 出现，占有了很大份额

查看用户代理 ​

1 打开 chrome 浏览器的控制台

2.在控制台中输入 navigator.userAgent

3 会发现类似字符串 Mozilla/5.0 (Macintosh; Intel Mac 0S X 10_12_1) AppleWebkit/537.36 (KHTMLlike Gecko)Chrome/64.0.3282.186 Safari/537.36

用户代理的作用 ​

1.判断浏览器类型，采用兼容方案

2.判断是否为移动端

3.标识 H5 容器，方便调用 H5 容器特定接口

4.要注意 userAgent 伪装成本很低，不要过于依赖

内核 ​

对于操作系统来说，内核是操作系统的核心，是第一层基于硬件的软件扩充，提供最核心最基础的服务。

应用程序通过内核进行系统调用来使用计算机的硬件，内核代码简洁高效，并且基本没有 bug，由于是最底层的服务，一点微小的错误也会造成整个系统的崩淡。好处当然也显而易见，基于一个稳定的内核，开发者可以构建适合不同场景的操作系统和应用软件。

对于浏览器来说，同样存在浏览内核，与操作系统内核相似，浏览器内核需要提供 API 给浏览器开发者使用，同时提供最核心的功能，如加载和渲染网页，调用操作系统所提供的服务。

对于浏览器厂商来说，高效使用和开发浏览器内核是核心问题。对于 web 开发者来说，理解浏览器内核的基本机制，才能开发出高性能的 web 应用

浏览器内核知识 ​

浏览器内核定义 ​

我们可以初步认为浏览器中负责将表示页面的字符转变成可视化的图像的模块就是浏览器内核。

浏览器页面渲染流程 ​

  • 1.DNS 解析(多级缓存)
  • 2.请求 (TCP 建连、HTTP 报文)
  • 3.解析 (解压、缓存处理、引用资源)
  • 4.构建: DOM 树(节点显隐、层次结构)
  • 5.构建:CSSOM 树(CSS 优先级)
  • 6.构建: Render 树 (CSS 匹配规则)
  • 7.脚本：文档状态(阻塞和延迟、内联和外联)
  • 8.渲染页面

从”URL 输入的到浏览器加载“问题 ​

我们将输入 URL 到远程内容返回之前的阶段略过，从“Response”开始

使用 Node.js 的 TCP 模块来获取，远程主机究竟给我们返回了什么：

参考：一文搞懂如何使用 Node.js 进行 TCP 网络通信 - 知乎 (zhihu.com)

js

Chromium 架构 ​

基于 webkit 内核就可以构建浏览器应用，了解著名的 chromium 浏览器对我们的 web 开发也有很多启发。 几个问题:

  • 1.除去 webkit 内核完成的功能，浏览器的工作有哪些?
  • 2.进程是什么?
  • 3.IPC 是什么?
  • 4.线程是什么?
  • 5.线程同步是什么?

现代浏览器的工作 ​

  • 资源管理：
  • 多页面管理：也就是多个标签页的管理.
  • 插件和扩展：如 fash，油猴，chrome 扩展程序
  • 账户和同步
  • 安全机制
  • 多系统支持

进程和线程 ​

  • 进程：对 CPU，主存，10 设备的抽象，操作系统对一个正在运行的程序的抽象。
  • 线程：组成进程的执行单元
  • 进程通信：进程间传输数据(交换信息)
  • 线程同步:

进程通讯的方式 ​

线程同步的方式 ​

chromium 的多进程架构 ​

主要进程介绍:

  • Browser 进程:主进程，负责浏览器界面，页面管理等
  • Renderer 进程:渲染程
  • NPAPI 插件进程
  • GPU 进程:当 GPU 硬件加速打开时才会创建

多进程架构的目的所在：

  • 1.职责分离，故障范围小
  • 2.隔离性
  • 3.性能

Repaint + Reflow ​

Repaint: 皮肤类外观改变引发的重新渲染，如背景色

Reflow: 位置、大小、盒模型等发生变化需要重新布局

常见的诱因：

  • 页面滚动
  • 页面缩放
  • 添加样式
  • 操作作 DOM(属性、样式、增删节点)
  • 计算宽高位置等

Released under the MIT License.

Copyright © 2022-2023 MuYa