关于浏览器-简述

前端刺不刺客
290 阅读16分钟 
本文内容包括
    1.介绍浏览器种类，大概的内部结构，渲染过程
    2.浏览器引擎
    3.控制台使用一些技巧
    4.谷歌浏览器一些好用的扩展插件分享

前言🍗

网络浏览器一直被视为最受用户欢迎的软件，是现代计算机不可缺少的组成部分

作为 Web 开发人员，Learning Browser 的内部操作及其架构可帮助您在开发过程中做出更好的决策，并发现最佳和最差实践。

功能🥪

浏览器的主要功能是向服务器发送请求，在自身窗口中展示我们所选择的网络资源

种类🍕

开发调试代表：

  1. Chorme（谷歌浏览器《1》）
  2. Edge (微软推出的代替IE的浏览器)
  3. Firefox (火狐浏览器)
  4. Safari (是各类苹果设备默认的浏览器)

2021 年全球浏览器市场份额（所有平台）:

4.png

3.png

浏览器的组成🍟

想要知道浏览器的工作原理以及浏览器的内核，我们要先知道浏览器的结构。

简单来说浏览器可以分为两部分，外壳+内核。其中外壳的种类相对比较多各自有自己的特色，内核则比较少。

  • 外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。
  • 内核：是浏览器的核心，基于标记语言《2》显示内容的程序或模块。是浏览器的核心，包括浏览器内核和渲染内核两个核心模块，其中浏览器内核由网络进程、浏览器主进程和 GPU 进程组成的，渲染内核就是渲染进程。

高层结构:

  1. 用户界面：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，展示给用户看到的都属于用户界面。

6.png

  1. 浏览器引擎：通过渲染引擎协调用户界面(页面内容)。

  2. 呈现(渲染)引擎：由各大浏览器厂商依照 W3C 标准自行研发，负责显示请求的内容。将网页代码渲染为用户视觉可以感知的平面文档。Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

  3. 网络：用于网络调用，比如 HTTP 请求。

  4. 用户界面后端：是浏览器的图形库,用来绘制基本的浏览器窗口内控件,如输入框、按钮、单选按钮、组合框和窗口等,不同浏览器绘制的视觉效果不太想同,但功能基本都是一样的。

  5. JavaScript 解释器(JavaScript 引擎)：用于解析和执行 JavaScript 代码。

  6. 数据存储：这是持久层。这有助于浏览器在本地存储数据，如 Cookie、本地存储、会话存储、IndexedDB、WebSQL 和文件系统。

特性cookielocalStoragesessionStorageindexDB
数据生命周期一般由服务器生成，可以设置过期时间除非被清理，否则一直存在页面关闭就清理除非被清理，否则一直存在
数据存储大小4K5M5M无限
与服务端通信每次都会携带在 header 中，对于请求性能影响不参与不参与不参与

2.png

渲染流程🍦

在Webkit 内核下网页加载流程：

  1. 获取：呈现引擎一开始会从网络层获取请求文档的内容
  2. 解析：呈现引擎将开始解析 HTML 文档
  3. 转化：各标记逐个转化成“内容树”上的DOM节点，同时也会解析外部 CSS 文件以及样式元素中的样式数据
  4. 创建：创建DOM 树及CSSOM 树
  5. 合并：构建完毕之后。将 DOM 与 CSSOM 合并成一个渲染树。
  6. 布局：根据渲染树来布局，计算每个节点的位置
  7. 绘制：调用 GPU 绘制，合成图层，显示在屏幕上。

以上非严格按顺序执行，往往第1步还没完成，后面就已经开始了。所以，会看到这种情况：网页的 HTML 代码还没下载完，但浏览器已经显示出内容了。

因为这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。网络进程加载流多少数据，便解析多少数据

浏览器在渲染过程中，对应高层结构的处理：

5.png

渲染机制图：

27.png

引擎🌭

浏览器引擎：严格意义上讲是指浏览器进程，主要负责管理所有渲染进程和显示UI。 或 “它是用户界面和渲染引擎之间的桥梁”的说法也是正确的。

查看 Chromium 的架构，会注意到浏览器引擎(进程)通过渲染引擎(进程)协调页面内容。

渲染引擎： 它能够在浏览器屏幕中呈现给定 URL 的内容并解释 HTML、XML 和 CSS。它是单线程的。默认情况下，它根据您指定的内容类型显示数据。例如 HTML、图像、XML、CSS、JSON、PDF 等。

Rendering 引擎的关键操作是 HTML Parser(HTML 解析)

JavaScript 解释器(JavaScript 引擎)：

JavaScript 是一种解释型语言《7》，它不需要编译，由解释器实时运行，缺点是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言

  • 作用：对JavaScript代码进行一定的编译生成字节码（bytecode）的中间代码最后转为机器码或`直接把源码编译成机器码运行，以提高运行速度
  • 字节码存在的意义：直接转化为机器码，消耗大量内存，从而先转化为字节码解决内存问题；
  • 总结：字节码或机器码不能直接运行，而是运行在一个虚拟机（Virtual Machine）之上。所以称为是一个专门处理JavaScript脚本的虚拟机，负责编译代码，执行代码、分配内存以及垃圾回收《8》。

不同的浏览器有不同的渲染引擎，常用的有以下几种：

  • Firefox：Gecko 引擎[Mozilla开放源代码项目的网页浏览器引擎Gecko]《3》
  • Safari：WebKit 引擎 《4》
  • Chrome：Blink 引擎[最初使用WebKit，但最终将其分支为自行建构的Blink引擎。所有以Chromium为基础的浏览器都使用Blink，IOS 版本的 Chrome 使用了 IOS 平台的渲染引擎，而非 Blink。] 《5》
  • IE: Trident引擎[Trident已经被EdgeHTML所取代，2019年EdgeHTML被Blink取代] 《6》
  • Edge: EdgeHTML 引擎

不同的浏览器对应的渲染引擎，JavaScript 引擎：

7.png

控制台🍿

通用

  • Command

Command (命令)菜单可以帮助我们快速找到那些被隐藏起来的功能，这也是它本身必不可少的原因。

8.jpg

  1. 在 Chrome 的调试打开的情况下 按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )

  2. 或者使用 DevTools 的 dropdown 按钮下的这个选项:

9.jpg

  • 快速切换主题

​ 在 Command 菜单中寻找与 theme 相关的选项，实现 明亮(light) & 暗黑(drak) 两种主题之间的切换

​ 经常在电脑前一坐就是一天，所以我不能忍受一直看着白闪闪的屏幕。而且突然出现的强光也让人讨厌：我们一直都在黑暗的空间中工作，突然太阳出来了，照在你的 DevTools 上，导致你什么都看不到！

10.jpg

  • 代码块的使用

当我们想执行一段脚本却又记不住，但又会经常用到。这时我们就可以利用Snippets

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，然后你可以通过点击执行或者快捷键： [ctrl] + [enter] 来运行它了：

11.jpg

12.jpg

并且关闭当前会话窗口不会被删除掉！

当我在 DevTools 中预设了一组很棒的代码块以后，也可以通过Command快捷命令!调出所有代码块

执行Command-->按下backspace-->按下！-->选中相应代码块，就可以直接执行啦

13.jpg

console

  • $0

$0 是对我们当前选中(Elements栏中选中一个节点)的 html 节点的引用

  • $_

$_ 是对console上次执行的结果的引用

  • $i

DevTools 里面来使用 npm 插件, 运行 $i('lodash') 或者$i('npm上对应的插件名')，加载后，你就可以获取到 lodash等 了

前提得安装Chrome插件[Console Importer](#Console Importer),此次分享有提供

16.png

  • 增强 log 的阅读体验

假如有这么一堆你想要输出但看起来并不易读的数据, 你可能无法区分是哪个变量

为了让它变得更加易读，你可以打印一个对象 - 只需将所有 console.log 的参数包装在大括号中

17.png

  • 使用实时表达式

DevTools 在 Console 面板中按下 "眼睛" 符号，可以在那里定义任何 JavaScript 表达式。 它会不断更新，表达的结果将永远，存在 :-)

同时支持定义好几个：

14.png

Network

  • 隐藏 network overview

一般时间轴信息可能会很少关注，可以通过设置进行隐藏

18.png

19.png

  • 请求过滤

可以在Filter输入框内接受接口url中的某一段,特殊属性(method, status等),正则表达式，过滤请求

接口名模糊过滤：

20.png

method过滤：

21.png

  • 自定义请求表

在请求列表中，可以看到每个请求的几条信息，例如：Name(接口最后一段的名字), Status(状态码)， Type(请求类型)， Initiator(发起源)， Size(请求资源大小) 和 Time(请求时间)。但是可以添加更多(例如 我经常添加 Method(请求方式))

22.png

如何添加：在请求列表区域内点击右键，可以看到所有可以添加的项，添加后会加入到列中。打勾的表示已加入

23.jpg

  • 重新发送 XHR 的请求

如何重新发送 XHR 的请求？刷新页面？太老套了，试试这么做

选中一条请求，点击右键，可以看到Replay XHR，点击后会重新发起请求

24.jpg

Elements(元素面板)

  • 通过 'h键' 来隐藏元素

选中一个dom节点，按下'h键'即可隐藏元素(和加上visibility: hidden;属性显示效果一样）。再次按下即可还原啦

  • 在元素面板中展开所有的子节点

一个一个的去点击级联的 ▶ 按钮太慢了

  1. 使用右击节点后的 expand recursively 命令

25.jpg

  1. 使用alt+左键 点击 dom节点左侧的箭头
  • 检查你修改css的内容

通过浏览器进行设计和调整 css ：能够在代码执行的地方进行调试是方便又有趣的开发方式。 但在某些时候，你可能希望将 已更改的内容 与 最初加载的样式表 进行比较。

为此，可以使用 DevTools' Drawer 中的changes更改工具。

它不仅会使用差异形式的变化（像 Git 这样的源控制工具一样）向你展示，同时还可以撤销它们(还原更改)。

使用：

1. 选中一个节点，对其class或id样式进行更改，
2. 更改后查看，调出`Command`命令输入`changes` 或 `按下在控制台内按下ESC, 点击左上角更多的按钮，选中changes`
3. 在`changes`中可以看到所有的更改

26.png

注意1.changes不会监听style的更改。2.撤销在某些场景会失效

谷歌浏览器-扩展插件分享🍕

  • Git Master

Git代码目录树浏览工具，支持GitHub通知，Git文件历史可视化。

还支持下载使用 jsDelivr（下载GitHub文件使用jsDelivr加速），GitHub下载加速(GitHub克隆和Release下载加速)。这两项需要在扩展选项中开启

使用一个命令从控制台导入 JavaScript 和 CSS 资源

  • Screenity - 屏幕录像和标注工具

Chrome 最强大的屏幕工具。 可捕获，注释，编辑等。

  • 图片助手(ImageAssistant) 批量图片下载器

一款用于嗅探、分析网页图片并提供批量下载等功能及在线收藏、检索、分享服务的浏览器扩展程序。

  • bilibili图床

简单好用的图床。需要登录bilibili账号

扩展🙌

  1. 谷歌浏览器：

    由Google公司开发的免费浏览器，Chrome相应的开放源代码名为Chromium, 而chorme本身却不是开源的。Chrome浏览器基于Chromium代码来制作，所以比Chromium具有更多功能。

    发展目标是提升稳定性、速度和安全性，并创造出简单且有效率的用户界面。

    安全性：

    1. 黑名单：

    ​ 会定期地更新防止网络钓鱼和恶意软件的黑名单，比如我们在下载文件的时候，会对可能造成电脑损害予以警告

    1. 沙箱

    ​ 每一个标签页都是一个沙箱，以防止“恶意软件破坏用户系统”或“利用标签页影响其他标签页

    1. 多进程

    ​ 每个标签独立，有单独的进程，当资源过高或崩溃时，不会因为一个停顿而整个程序宕掉。Chromium 现在采用了所谓的多进程架构

    1. 无痕模式

    ​ 不会在电脑上留下其他痕迹，例如Cookie。并不意味完全隐身，互联网服务提供商、雇主及网站本身依然能够看见您的浏览活动并进行追踪。

    ​ ....。

    Chromium是一个开源浏览器项目，旨在为所有用户构建一种更安全、更快、更稳定的网络体验方式。

    相当于Chrome的工程版或称实验版。因为开源，许多其他浏览器也基于Chromium的代码，例如Microsoft Edge和Opera。

    在架构上使用了Apple发展出来的WebKit排版引擎、Safari的部份源代码与Firefox的成果，并采用Google独家开发出的V8引擎，以提升解译JavaScript的效率，而且设计了“沙盒”、“黑名单”、“无痕浏览”等功能，来实现稳定与安全的网页浏览环境。

  2. 标记语言：用约定好的标记, 来对电子文档进行标记，以实现对其的语义、结构、及格式的定义。

    当今广泛使用的标记语言是超文本标记语言（HyperText Markup Language，HTML）和可扩展置标语言（eXtensible Markup Language，XML）

  3. Gecko 引擎：俗称 Firefox 内核，Netscape6 开始采用的内核，后来的 Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器也很多，这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因。

  4. WebKit 引擎：是一种开放源代码呈现引擎，起初用于 Linux 平台，随后由 Apple 公司进行修改，从而支持苹果机和 Windows。是 Safari 浏览器在使用的内核。有关详情，请参阅 webkit.org。

  5. Blink 引擎：由 Google 和 Opera Software 开发，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。Blink 其实是 Webkit 的一个分支，添加了一些优化的新特性，例如跨进程的 iframe，将 DOM 移入 JavaScript 中来提高 JavaScript 对 DOM 的访问速度等，目前较多的移动端应用内嵌的浏览器内核也渐渐开始采用 Blink。

  6. Trident引擎：俗称 IE 内核，也被叫做 MSHTML 引擎，目前在使用的浏览器有 IE11 -，以及各种国产多核浏览器中的 IE 兼容模块。另外微软的 Edge 浏览器不再使用 MSHTML 引擎，而是使用类全新的引擎 EdgeHTML。

  7. 编译器和解析器：

    • V8 如何执行一段 JavaScript 代码的

      • 计算机语言可以分为两种：编译型和解释型语言。编译型语言经过编译器编译后保留机器能读懂的二进制文件，比如 C/C++，go 语言。解释型语言是在程序运行时通过解释器对程序进行动态解释和执行，比如 Python，JavaScript 语言。

      • 编译型语言的编译过程：编译器首先将代码进行词法分析、语法分析，生成抽象语法树（AST），然后优化代码，最后生成处理器能够理解的机器码；

      • 解释型语言解释过程：解释器会对代码进行词法分析、语法分析，并生产抽象语法树（AST），不过它会再基于抽象语法树生成字节码，最后根据字节码执行程序；

      • AST 的生成：第一阶段是分词（词法分析），将一行行源码拆解成一个个 token（语法上不可再分、最小单个字符）。第二阶段是解析（语法分析），将上一步生成的 token 数据，根据语法规则转为 AST，这一阶段会检查语法错误；

      • 字节码存在的意义：直接将 AST 转化为机器码，执行效率是非常高，但是消耗大量内存，从而先转化为字节码解决内存问题；

      • 解释器 ignition 在解释执行字节码，同时会手机代码信息，发现某一部分代码是热点代码（HotSpot），编译器把热点的字节码转化为机器码，并保存起来，下次使用；

      • 字节码配合解释器和编译器的计数实现称为即时编译（JIT）。

  8. 垃圾回收：

    • 垃圾数据如何自动回收

      • 栈中数据回收：执行状态指针 ESP 在执行栈中移动，移过某执行上下文，就会被销毁；
      • 堆中数据回收：V8 引擎采用标记-清除算法；
      • V8 把堆分为两个区域——新生代和老生代，分别使用副、主垃圾回收器；
      • 副垃圾回收器负责新生代垃圾回收，小对象（1 ～ 8M）会被分配到该区域处理；
      • 新生代采用 scavenge 算法处理：将新生代空间分为两半，一半空闲，一半存对象，对对象区域做标记，存活对象复制排列到空闲区域，没有内存碎片，完成后，清理对象区域，角色反转；
      • 新生代区域两次垃圾回收还存活的对象晋升至老生代区域；
      • 主垃圾回收器负责老生区垃圾回收，大对象，存活时间长；
      • 新生代区域采用标记-清除算法回收垃圾：从根元素开始，递归，可到达的元素活动元素，否则是垃圾数据；
      • 为了不造成卡顿，标记过程被切分为一个个子标记，交替进行。
avatar
文章
阅读
粉丝