Web开发

注册

 

发新话题 回复该主题

浏览器基本原理与实践36点总结,让我 [复制链接]

1#

前言

浏览器是每一名前端开发日常工作打交道最多(之一)的,或者说前端工作的内容大部分都是基于浏览器环境来的,因为最终成果需要在浏览器运行和验证。

浏览器工作原理

但对大部分前端开发来说,浏览器就是一个最熟悉的陌生人,经常用,却没几个人说得清其运行原理。不过浏览器确实也很复杂,想想到现在我们“国产替代”都失败了。比如几个简单的问题:

比如js是怎样运行的呢?

精美样式页面是怎样渲染到电脑屏幕的呢?

在开放的互联网它又是怎样保证我们个人信息安全的呢?

带着打破砂锅问到底的态度,web前端号根据李兵老师的《浏览器基本原理与实践》读后感整理了研读本书后的36点总结,希望有益于大家。

1.Chrome架构:仅仅打开了1个页面,为什么有4个进程

线程和进程区别:多线程可以并行处理任务,线程不能单独存在,它是由进程来启动和管理的。一个进程是一个程序的运行实例。

线程和进程的关系:1、进程中任意一线程执行出错,都会导致整个进程的崩溃。2、线程之间共享进程中的数据。3、当一个进程关闭后,操作系统会回收进程所占用的内存。4、进程之间的内容相互隔离。

单进程浏览器:1、不稳定。单进程中的插件、渲染线程崩溃导致整个浏览器崩溃。2、不流畅。脚本(死循环)或插件会使浏览器卡顿。3、不安全。插件和脚本可以获取到操作系统任意资源。

多进程浏览器:1、解决不稳定。进程相互隔离,一个页面或者插件崩溃时,影响仅仅时当前插件或者页面,不会影响到其他页面。2、解决不流畅。脚本阻塞当前页面渲染进程,不会影响到其他页面。3、解决不安全。采用多进程架构使用沙箱。沙箱看成时操作系统给进程上来一把锁,沙箱的程序可以运行,但是不能在硬盘上写入任何数据,也不能在敏感位置读取任何数据。

多进程架构:分为浏览器进程、渲染进程、GPU进程、网络进程、插件进程。

缺点:1、资源占用高。2、体系架构复杂。

面向服务架构:把原来的各种模块重构成独立的服务,每个服务都可以在独立的进程中运行,访问服务必须使用定义好的接口,通过IPC通讯,使得系统更内聚、松耦合、易维护和拓展。

2.TCP协议:如何保证页面文件能被完整送达浏览器

IP头是IP数据包开头的信息,包含IP版本、源IP地址、目标IP地址、生存时间等信息;

UDP头中除了目的端口,还有源端口号等信息;

IP负责把数据包送达目的主机;

UDP负责把数据包送达具体应用;

对于错误的数据包,UDP不提供重发机制,只是丢弃当前的包,不能保证数据的可靠性,但是传输速度非常块;

TCP头除了包含了目标端口和本机端口号外,还提供了用于排序的序列号,保证了数据完整地传输,它的连接可分为三个阶段:建立连接、传输数据和断开连接;

3.HTTP请求流程:为什么很多站点第二次打开速度会很快

浏览器中的HTTP请求从发起到结束一共经历如下八个阶段:构建请求、查找缓存、准备IP和端口、等待TCP队列、建立TCP连接、发起HTTP请求、服务器处理请求、服务器返回请求和断开连接;

构建请求。浏览器构建请求行,构建好后,准备发起网络请求;

查找缓存。在真正发起请求前浏览器会查询缓存中是否有请求资源副本,有则拦截请求,返回资源副本,否则进入网络请求;

准备IP地址和端口。HTTP网络请求需要和服务器建立TCP连接,而建立TCP连接需要准备IP地址和端口号,浏览器需要请求DNS返回域名对应的IP,同时会缓存域名解析结果,供下次查询使用;

等待TCP队列。Chrome机制,同一个域名同时最多只能建立6个TCP连接;

建立TCP连接。TCP通过“三次握手”建立连接,传输数据,“四次挥手”断开连接;

发送HTTP请求。建立TCP连接后,浏览器就可以和服务器进行HTTP数据传输了,首先会向服务器发送请求行,然后以请求头形式发送一些其他信息,如果是POST请求还会发送请求体;

服务器处理请求。首先服务器会返回响应行,随后,服务器向浏览器发送响应头和响应体。通常服务器返回数据,就要关闭TCP连接,如果请求头或者响应头有Connection:keep-aliveTCP保持打开状态;

4.导航流程:从输入URL到页面展示这中间发生了什么

用户输入URL并回车

浏览器进程检查URL,组装协议,构成完整URL

浏览器进程通过进程通信(IPC)把URL请求发送给网络进程

网络进程接收到URL请求后检查本地缓存是否缓存了该请求资源,如果有则将该资源返回给浏览器进程

如果没有,网络进程向web服务器发起

分享 转发
TOP
发新话题 回复该主题