深入浏览器原理

最新推荐文章于 2022-09-20 21:17:17 发布

wendell.w

最新推荐文章于 2022-09-20 21:17:17 发布

阅读量258

点赞数 1

分类专栏：浏览器 js 文章标签： javascript js node.js html5 html

本文链接：https://blog.csdn.net/qq_39096319/article/details/105892303

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

浏览器

1 篇文章 0 订阅

订阅专栏

浏览器原理

网络流程
页面渲染过程
js执行过程
web安全理论

多进程现代浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IklMalIN-1588409578589)(/Users/wangdong/Library/Application Support/typora-user-images/image-20200429143032242.png)]

请求时进程间协作流程

提交文档: 渲染进程准备好之后，需要先向渲染进程提交页面数据;

浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

网络

ip协议（网络层）IP 是非常底层的协议，只负责把数据包传送到对方电脑，但是对方电脑并不知道把数据包交给哪个程序
tcp协议（传输层）_TCP(Transmission Control Protocol，传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议；
udp协议（传输层）IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序；_UDP 不能保证数据可靠性，但是传输速度却非常快\_
http协议（应用层）

TCP协议

对于数据包丢失的情况，TCP 提供重传机制;
TCP 引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。
和 UDP 头一样，TCP 头除了包含了目标端口和本机端口号外，还提供了用于排序的序列号，以便接收端通过序号来重排数据包。

http

缓存
请求流程
其他
- cookie 登录状态保持
- 同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成
- 状态码
  - 1**：信息响应
  - 2**：成功响应 (200)
  - 3**：重定向（301，302，304…）
  - 4**: 客户端响应(400 Bad Request, 404, 405 Method Not Allowed)
  - 5**: 服务端响应(500, 502, 504)

渲染

渲染流程图

html css

构建dom树
样式计算(Recalculate Style)
布局(layout)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7hjQWfc-1588409578601)(/Users/wangdong/Library/Application Support/typora-user-images/image-20200429151431107.png)]
分层 (浏览器查看三维视图)
图层绘制
合成显示
重排、重绘与合成
- 重排：更新元素的几何属性
- 重绘：更新元素的绘制属性
- 合成（transform）

js

javascript是按照顺序执行的；

javascript一门单线程的非阻塞的脚本语言。

执行顺序

javascript是按照**编译后的顺序执行的；编译生成执行上下文 (Execution context)和可执行代码**

先编译后执行 (变量提升)

在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined;在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。
块级作用域（词法环境）
变量提升（变量环境）
栈
1. 创建上下文
2. 执行
3. 创建上下文
4. 执行
5. …

TDZ(暂时性死区)

function test() {
    var a = 1;
    {
        console.log(a);
        let a = 3;
    }
}
test();

闭包

简单理解闭包就是返回一个函数是不准确的，应该从作用域链的角度去观察和理解


let bibaoTest = null;
function test() {
    let test = 1;
    console.log('test',test, bibaoTest);
}

function bibao() {
    const bibaoTest = 2;
    return test
}
bibao();

作用域链
- outer
  
  每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，这个外部引用称为outer;
```
function bar() {
    console.log(myName);
}
function foo() {
    var myName = " 2 ";
    bar();
}
var myName = " 1 ";
foo();
```
- 词法作用域
  
  词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。
this

作用域链和this是两套不同的系统，它们之间基本没太多联系

this 是和执行上下文绑定的，也就是说每个执行上下文中都有一个 this；
- 特殊情况：
  
  setTimeout，箭头函数，call，apply，bind
对象类型
- 深克隆
- 浅克隆
堆

对象类型有堆来存储，此时栈中存储的是这这个堆的首地址

闭包也是存储在堆中
ESP

记录当前执行状态的指针
GC

调用栈中的回收：

通过向下移动ESP来销毁，销毁的实际情况是虽然ESP下移，但是前一段执行上下文还在，只是被标记为无效，下一段执行上下文过来会直接覆盖掉

堆中的垃圾回收：

不同的浏览器中垃圾回收器的处理方法不同，以V8为例：

标记：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rdi3nI9n-1588409578605)(/Users/wangdong/Library/Application Support/typora-user-images/image-20200430154014099.png)]
- 在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象
- 副垃圾回收器，主要负责新生代的垃圾回收。
  1. 新加入的对象(除一些较大的对象会直接放到老生区)都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作
  2. 副垃圾回收器会把这些存活的对象复制到空闲区域中
  3. 完成复制后，对象区域与空闲区域进行角色翻转
  4. 经过两次垃圾回收依然还存活的对象，会被移动到老生区中
- 主垃圾回收器，主要负责老生代的垃圾回收。
  
  主垃圾回收器是采用**标记 - 清除(Mark-Sweep)**的算法进行垃圾回收的
- 整理
  
  回收后一般会存在整理过程，将非连续的内存片段整理在一起，防止出现没有足够的连续内存够下次使用
- 全停顿
  
  JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行；
  
  所以V8讲标记过程变为一个增量的过程，让垃圾回收标记和 JavaScript 应用逻辑交替进行；以此让用户无法感知卡顿；
  
  可通过performance观察内存泄漏情况；
```
// 点击按钮，就执行一次函数，申请一块内存
var arr = [];
startBtn.addEventListener("click", function() {
    var a = new Array(100000).fill(1);
    var b = new Array(20000).fill(1);
    arr.push(b);
});
```
  具体观察文章可参考：浏览器的内存泄漏场景、监控以及分析