猫说

浏览器基础知识

2020/10/15 前端优化

最近要做公司项目优化，整理一下优化方面的知识，这篇就针对浏览器的基础知识整理一下。

1、浏览器

浏览器是用来检索、展示以及传递Web信息资源的应用程序，可以认为是用户通过界面解析和发送HTTP协议的软件。

判断用户的浏览器的信息可以使用navigator.userAgent。

2、userAgent的作用

  1. 判断浏览器类型，采用兼容方案。
  2. 判断是否为移动端。
  3. 标识H5容器，方便调用H5的特定接口。
  4. userAgent伪装成本很低，不可过于依赖。

3、内核

对于操作系统来说，内核是操作系统的核心，是第一层基于硬件的软件扩充，提供最核心最基础的服务。浏览器也存在浏览器的内核，作用相似，提供最核心的功能，比如加载和渲染网页，作为开发者要理解内核的基本机制，才可以更好的开发出高效的web应用。

对于前端来说，浏览器内核提供最重要的就是渲染引擎了，渲染引擎通过调用系统的外部模块(网络、GPU等模块)来渲染出网页。

渲染引擎主要由以下几点组成：

  1. HTML解释器：将HTML文本解析成DOM树
  2. CSS解释器：将CSS解析成CSSOM树，并为DOM对象计算出样式信息
  3. JavaScript引擎：解析JavaScript代码，并使JavaScript有调用DOM接口和CSSOM接口的能力
  4. 布局：结合css计算出每个DOM对象的大小位置信息
  5. 绘图：将经过布局计算的DOM节点绘制成图像

4、进程和线程

老生常谈的话题了，简单写一下好了。

  1. 进程：对CPU、主存、IO设备的抽象，操作系统对一个正在运行的程序的抽象。
  2. 线程：组成进程的执行单元，比进程的概念要轻一点。
  3. 进程通信：进程间传输数据

浏览器的进程：

  1. 主进程(browser进程)：负责浏览器界面的管理之类的工作。
  2. 渲染进程(renderer进程)：负责渲染工作。
  3. NPAPI插件进程：网景插件应用程序编程接口，现在已经被禁用了。
  4. GPU进程：使用GPU加速时才会创建。

设置多进程的目的：

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

JavaScript中的线程：

JavaScript是单线程语言，单线程就是执行的代码必须按顺序执行，同一时间只能做同一件事情，没类似Java语言的烦恼，也就没有锁这种概念，相似的问题需要注意的就是异步了。不过现在允许创建子线程了(为了利用CPU的计算能力HTML5提出的Web Worker标准)，但是子线程完全受主线程控制，且不得操作DOM，所以JavaScript本质上还是单线程。

为什么JavaScript是单线程语言： JavaScript作为浏览器脚本语言，JavaScript的主要用途是与用户交互，包括操作DOM，这就决定了它只能是单线程，否则就乱套了，会带来很复杂的同步问题。

5、浏览器渲染原理

浏览器渲染主要分为两个部分：

  1. 加载：加载渲染所必须的HTML代码
  2. 渲染：将HTML代码绘制成图像结果

5.1 加载

加载需要资源加载器，分为三类：

  1. 特定资源加载器：针对每种资源类型的特定加载器，仅加载某一种资源。
  2. 缓存资源加载器：与常规的缓存逻辑相同，特定加载器先通过缓存加载器来查找是否有缓存资源，如果有就用，没有就去发网络请求
  3. 通用资源加载器：网络加载，但只负责通过网络获取目标资源，不负责进一步解析。

上文提到缓存，缓存分为三类：

  1. 页面缓存(Page Cache)：浏览器的本地存储，主要由Cookie,WebStorage,IndexedDB,其中WebStorage又可以分为localStorage和sessionStorage。
  2. 内存缓存(Memory Cache)：从效率上讲它是最快的。但是从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。
  3. 磁盘缓存(Disk Cache)：就是存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，但是他的优势在于存储容量和存储时长。

加载过程：

  1. 解析URL，包括协议、path、hash以及请求类型
  2. 判断是否需要建立网络连接，比较头信息、检测缓存是否存在
  3. 发现需要建立HTT事务，开始建立HTTP连接
  4. 建立TCP连接（3次握手）
  5. 数据传输（四次挥手）
  6. 浏览器拿到数据(响应头、响应实体),调用解析器解析实体

优化项：

  1. 使用CDN(对象存储)，dns预取，多个cdn域名
  2. 合并请求，减少连接数，雪碧图
  3. 缓存，form cache（memory cache、disk cache），WebStorage（localStorage sessionStorage，HTTP头缓存优化
  4. tcp调优、HTTP2、keep-alive
  5. 资源大小，gzip，webp，图片压缩

5.2 渲染

HTML解释器解释过程：

  1. 词法分析：对输入的字节流进行逐字扫描，根据构词规则识别单词和符号，词法分析不涉及标签类型信息，标签类型信息是语法分析的工作
  2. 语法分析：语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语。
  3. 生成DOM树：经过语法分析器构建成节点，最后这些节点被组建成一颗 DOM 树。

在解释过程中资源的变换：

  1. 字节流：传输的都是字节流
  2. 字符流：字节流解码之后就是字符流
  3. 节点：词法分析字符流后生成节点
  4. DOM树：节点组成DOM树

Search

    Table of Contents