浏览器工作原理

·  阅读 637

一个标签页包含哪几种进程

一个标签页包含5种进程:

  • 浏览器主进程:主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。
  • 渲染进程:核心任务是将HTML、CSS、JavaScript转化为用户可以与之交互的网页,排版引擎Blink和JavaScript引擎V8都是运行在该进程中,chrome默认为每一个标签页开启一个渲染进程。
  • GPU进程:用于支持css的3d效果、图形、视频渲染
  • 网络进程:主要负责页面的网络资源加载。
  • 插件进程:负责浏览器插件运行

渲染进程

渲染进程包含一下线程:

  • GUI渲染线程:负责解析HTML、CSS。构建DOM树,布局和绘制
  • JS引擎线程:负责解析和执行js代码,与GUI渲染线程互斥,当js引擎执行时,GUI线程会被挂起,等到Js引擎空闲时再执行
  • 事件触发线程:负责处理事件轮询相关线程
  • 定时触发器线程:定时器相关线程
  • 异步http请求线程:负责处理浏览器ajax请求线程

渲染流程

  • 构建DOM树:将html字符串转换为浏览器可以识别的DOM树状结构
  • 将css解析成CSSOM:将css代码和内敛css代码解析成浏览器可以理解的结构styleSheets
  • 构造Rendering Tree:根据DOM树和CSSOM构建Rendering Tree,其中只包含可见元素,像head标签或是display:none的标签就不在渲染树种
  • 布局计算:根据刚刚计算出的渲染树(Rendering Tree)计算树中节点的坐标位置
  • 分层、合成、显示:将渲染树进行分层、合成,显示到屏幕上。

重排和重绘

概念

  • 重排:如果通过js和css改变了元素的集合位置,就会触发浏览器的重新布局,重新合成渲染树,并触发后续全部流程

  • 重绘:如果值修改了元素的颜色,而并没有改变元素的几何位置,则不会触发浏览器重新布局,会直接进入绘制阶段,跳过了布局计算过程,故而更新效率更高。

如何减少重排重绘:

  • 尽量避免style的使用,对于需要操作DOM元素节点,重新命名className,更改className名称。

  • 如果增加元素或者clone元素,可以先把元素通过documentFragment放入内存中,等操作完毕后,再appendChildDOM元素中。

  • 尽量少使用dispaly:none,可以使用visibility:hidden代替,dispaly:none会造成重排visibility:hidden会造成重绘

  • 不要使用Table布局,因为一个小小的操作,可能就会造成整个表格的重排重绘

  • 使用resize事件时,做防抖节流处理。

  • 对动画元素使用absolute / fixed属性。

  • 使用css的transform来实现动画效果,因为直接在非主线程上执行合成动画操作。

  • 批量修改元素时,可以先让元素脱离文档流,等修改完毕后,再放入文档流。

从输入URL到页面展示都经历了什么?

  • DNS解析
  • 建立TCP连接
  • 发送http请求
  • 服务器处理请求
  • 请求返回
  • 浏览器解析渲染界面,执行渲染流程

详细总结:

    1. 用户输入URL,浏览器会根据用户输入的信息判断是搜索还是网址,如果是搜索内容,就将搜索内容+默认搜索引擎合成新的URL;如果用户输入的内容符合URL规则,浏览器就会根据URL协议,在这段内容上加上协议合成合法的URL
    1. 用户输入完内容,按下回车键,浏览器导航栏显示loading状态,但是页面还是呈现前一个页面,这是因为新页面的响应数据还没有获得
    1. 浏览器进程浏览器构建请求行信息,会通过进程间通信(IPC)将URL请求发送给网络进程
    1. 网络进程获取到URL,先去本地缓存中查找是否有缓存文件,如果有,拦截请求,直接200返回;否则,进入网络请求过程
    1. 网络进程请求DNS返回域名对应的IP和端口号,如果之前DNS数据缓存服务缓存过当前域名信息,就会直接返回缓存信息;否则,发起请求获取根据域名解析出来的IP和端口号,如果没有端口号,http默认80,https默认443。如果是https请求,还需要建立TLS连接。
    1. Chrome 有个机制,同一个域名同时最多只能建立 6 个TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。如果当前请求数量少于6个,会直接建立TCP连接。
    1. TCP三次握手建立连接,http请求加上TCP头部——包括源端口号、目的程序端口号和用于校验数据完整性的序号,向下传输
    1. 网络层在数据包上加上IP头部——包括源IP地址和目的IP地址,继续向下传输到底层
    1. 底层通过物理网络传输给目的服务器主机
    1. 目的服务器主机网络层接收到数据包,解析出IP头部,识别出数据部分,将解开的数据包向上传输到传输层
    1. 目的服务器主机传输层获取到数据包,解析出TCP头部,识别端口,将解开的数据包向上传输到应用层
    1. 应用层HTTP解析请求头和请求体,如果需要重定向,HTTP直接返回HTTP响应数据的状态code301或者302,同时在请求头的Location字段中附上重定向地址,浏览器会根据code和Location进行重定向操作;如果不是重定向,首先服务器会根据 请求头中的If-None-Match 的值来判断请求的资源是否被更新,如果没有更新,就返回304状态码,相当于告诉浏览器之前的缓存还可以使用,就不返回新数据了;否则,返回新数据,200的状态码,并且如果想要浏览器缓存数据的话,就在相应头中加入字段:Cache-Control:Max-age=2000,响应数据又顺着应用层——传输层——网络层——传输层——应用层的顺序返回到网络进程
    1. 数据传输完成,TCP四次挥手断开连接。如果,浏览器或者服务器在HTTP头部加上如下信息:Connection:Keep-Alive,TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间,提示资源加载速度:
    1. 网络进程将获取到的数据包进行解析,根据响应头中的Content-type来判断响应数据的类型,如果是字节流类型,就将该请求交给下载管理器,该导航流程结束,不再进行;如果是text/html类型,就通知浏览器进程获取到文档准备渲染
    1. 浏览器进程获取到通知,根据当前页面B是否是从页面A打开的并且和页面A是否是同一个站点(根域名和协议一样就被认为是同一个站点),如果满足上述条件,就复用之前网页的进程,否则,新创建一个单独的渲染进程
    1. 浏览器会发出“提交文档”的消息给渲染进程,渲染进程收到消息后,会和网络进程建立传输数据的“管道”,文档数据传输完成后,渲染进程会返回“确认提交”的消息给浏览器进程
    1. 浏览器收到“确认提交”的消息后,会更新浏览器的页面状态,包括了安全状态、地址栏的 URL、前进后退的历史状态,并更新web页面,此时的web页面是空白页
    1. 渲染进程对文档进行页面解析和子资源加载,HTML 通过HTM 解析器转成DOM Tree(二叉树类似结构的东西),CSS按照CSS 规则和CSS解释器转成CSSOM TREE,两个tree结合,形成render tree(不包含HTML的具体元素和元素要画的具体位置),通过Layout可以计算出每个元素具体的宽高颜色位置,结合起来,开始绘制,最后显示在屏幕中新页面显示出来

web安全

XSS攻击

跨站脚本攻击(XSS):指黑客往 HTML 文件中或者 DOM 中注入恶意脚本,从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段

如何防御

  • 前端和服务器校验字符中是否含有敏感字符,比如script标签等

  • 使用httpOnly属性,使得无法通过js读取cookie信息,从而保护用户信息

CSRF攻击

跨站请求伪造(CSRF):指黑客引诱用户打开黑客的网站,在黑客的网站中,利用用户的登录状态发起的跨站请求。简单来讲,CSRF 攻击就是黑客利用了用户的登录状态,并通过第三方的站点来做一些坏事。

如何防御

  • 充分利用好 Cookie 的 SameSite 属性,禁止第三方cookie

  • 验证请求的来源站点

  • CSRF Token,每次请求都带上服务器生成的token,服务器验证当前token是否合法有效,从而避免第三方网站恶意请求接口。

垃圾回收原理

代际假说

  • 大部分对象在内存中存在的时间都比较短

  • 不死的对象,会活的更久

分代收集

  • 新生代:新生代中存放的是生存时间短的对象,容量通常为1~8m,由副垃圾回收器回收

  • 老生代:老生代中存放的是生存时间长的对象,容量通常很大,由主垃圾回收器回收

简化流程

  • 1、标记空间中活动的对象和非活动对象

  • 2、标记完成后,统一回收非活动对象

  • 3、整理内存碎片

详细流程

副垃圾回收器工作原理

  • 1、副垃圾回收器将新生代内存区域分为对象区域空闲区域,新加入的对象被分配到对象区域,当对象区域快要存满时,就会触发一次垃圾回收

  • 2、首先副垃圾回收器会对对象区域中的对象进行标记,区分活动对象和非活动对象

  • 3、标记完成之后,副垃圾回收器会把对象区域中标记为活动的对象复制到空闲区域,同时会把这些对象有序的排列起来,同时会清空对象区域,所以这个过程就做了内存整理。

  • 4、复制完成后,对象区域和空闲区域的角色互换,这就完成了垃圾回收操作。

主垃圾回收器工作原理

由于新生区的空间不大,所以很容易就会被垃圾充满,为了解决这个问题,经过两次垃圾回收后还存在的对象会被晋升到老生区

主垃圾回收器采用标记-清除算法。

  • 1、标记阶段:从根元素开始,递归遍历此根元素,在这个遍历的过程中,能到达的对象被标记为活动对象,不能到达的对象被标记为垃圾数据

  • 2、清除垃圾数据,但在这个过程中会产生内存碎片,所以产生了标记-整理算法,即标记过程结束后,不直接对垃圾数据进行清除,而是将活动对象都想一端移动,然后清理掉活动对象边界外的垃圾数据。

增量标记

执行一次垃圾回收操作会阻塞主线程执行,如果此次垃圾回收执行时间过长,便会导致明显的卡顿现象,基于此,可以将垃圾回收操作分成很多小任务,这些小任务的执行时间很短,可以穿插在其他js任务之间执行,从而不会造成卡顿现象,react的fiber也是同理实现的。

三色标记法

由于采用了增量标记的方式,任务被分解为很多小任务,如果还是采用以前的非黑即白的标记方法,在两个小任务之间,无法确定当前标记到了哪里,为了解决这个问题,v8采用了三色标记法:

  • 白色指未被标记的对象
  • 灰色指当前访问的对象自身
  • 黑色指自身和成员变量均被标记

这样,每次标记任务中,找到灰色对象继续标记即可,当整个对象中都没有灰色对象时,表示标记完成。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改