❝经济学家曼昆说:「一个东西的成本是为了得到它而放弃的东西」。 ❞
大家好,我是「柒八九」。
今天,我们继续「前端面试」的知识点。我们来谈谈关于「浏览器」的相关知识点和具体的算法。
该系列的文章,大部分都是前面文章的知识点汇总,如果想具体了解相关内容,请移步相关系列,进行探讨。
如果,想了解该系列的文章,可以参考我们已经发布的文章。如下是往期文章。
好了,天不早了,干点正事哇。
❝「进程」:某个应用程序的执行程序。 「线程」:常驻在「进程内部」并负责该进程部分功能的执行程序。 ❞
Chrome
的默认策略是,每个标签对应一个Render Process
。❝如果「从一个页面打开了另一个新页面」,而新页面和当前页面属于「同一站点」的话,那么新页面会「复用」父页面的渲染进程。官方把这个默认策略叫
process-per-site-instance
❞
「同一站点」:根域名(wl.com
)加上协议(例如,https://
或者http://
),还包含了该根域名下的「所有」子域名和不同的端口
http://A.wl.com
http://wl.com
http://B.wl.com:789789
这三个域名就是同一站点。
用于服务「所有」标签页和浏览器主进程的进程。
frame
)被提交(commit
)到GPU进程时tiles
)和其他数据(DrawQuad
命令)GPU
组件中的「后缓冲区」Hz
(赫兹),如常见的 60 Hz
。1000 / 60 ≈ 16ms
。fps
屏幕刷新频率是固定的,比如每16.6ms从buffer
取数据显示完一帧,理想情况下帧率和刷新频率保持一致,即「每绘制完成一帧,显示器显示一帧」。但是CPU/GPU
写数据是不可控的,所以会出现buffer
里有些数据根本没显示出来就被重写了,即buffer
里的数据可能是来自不同的帧的, 当屏幕刷新时,此时它并不知道buffer
的状态,因此从buffer
抓取的帧并不是完整的一帧画面,即出现画面撕裂。
那咋解决画面撕裂呢?答案是使用 「双缓存」。
「双缓存,让绘制和显示器拥有各自的buffer」:GPU
始终将完成的一帧图像数据写入到 Back Buffer
,而显示器使用 Frame/Front Buffer
,当屏幕刷新时,Frame Buffer
并不会发生变化,当Back buffer
准备就绪后,它们才进行交换。
双缓存,CPU/GPU写数据到Back Buffer,显示器从Frame Buffer取数据
问题又来了:什么时候进行两个buffer的交换呢?
当扫描完一个屏幕后,设备需要「重新回到第一行」以进入下一次的循环,此时有一段时间空隙,称为VerticalBlanking Interval(VBI)
。那,这个时间点就是我们进行缓冲区交换的最佳时间。因为此时屏幕没有在刷新,也就避免了交换过程中出现 screen tearing
的状况。
VSync
(垂直同步)是VerticalSynchronization
的简写,它利用VBI
时期出现的vertical sync pulse
(垂直同步脉冲)来保证双缓冲在最佳时间点才进行交换。另外,交换是指各自的内存地址,可以认为该操作是瞬间完成。
touchmove/scroll/click
)应该先被调用,并且每帧都应该触发,但是这不是必须的requestAnimationFrame
)body
元素的属性,就会发生整个DOM树的重新计算。Render Tree
Layout Tree
。Layout Objects
归属到同一个渲染层Paint Layer中。Paint Layer
最初是用来实现层叠上下文Stacking Contextwill-change
或者一些使用了硬件加速的绘制方式(canvas
)。requestIdleCallback
。Cookie
主要用于用户信息的存储,Cookie的内容可以自动在请求的时候被传递给服务器。Set-Cookie
HTTP 「头部包」含会话信息。HTTP-only
的 cookie
。HTTP-only
可以在浏览器设置,也可以在服务器设置,但「只能在服务器上读取」Web Storage
cookie
之外」的「存储会话数据」的途径Web Storage
的第 2 版定义了「两个对象」:LocalStorage
的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止。SessionStorage
的其他属性同LocalStorage
,只不过它的生命周期同标签页的生命周期,当标签页被关闭时,SessionStorage
也会被清除。。IndexDB
:是浏览器中存储「结构化数据」的一个方案IndexedDB
是类似于 MySQL
或 Web SQL Database
的「数据库」WebSQL
: 用于存储较大量数据的缓存机制。IndexDB
所替代」Application Cache
:允许浏览器通过manifest
配置文件在本地「有选择」的存储JS/CSS/图片等静态资源的文件级缓存机制ServerWorkers
所替代」ServerWorkers
初次渲染时会经过以下几步
在CSS属性改变时,重渲染会分为「回流」、「重绘」和「直接合成」三种情况,分别对应从“布局定位”/“图层绘制”/“合成显示”开始,再走一遍上面的流程。
元素的CSS具体发生什么改变,则决定属于上面哪种情况:
transform
、opacity
修改,只需要将多个图层再次合并,而后生成位图,最终展示到屏幕上;拥有z-index
属性的定位元素会生成一个层叠上下文,一个生成层叠上下文的元素就生成了一个渲染层。
形成渲染层的条件也就是形成层叠上下文的条件,有这几种情况:
z-index
值为数值的定位元素的传统层叠上下文flex
布局元素(父元素display:flex|inline-flex
),同时z-index
值「不是auto」 - 「flex布局」opactity
值不是1 - 透明度opactitytransform
值不是none
- 转换transformmix-blend-mode
值不是normal
- 混合模式mix-blend-modefilter
值不是none
- 滤镜filterisolation
值是isolate
- 隔离isolationwill-change
属性值为上面②~⑥的任意一个(如will-change:opacity
)-webkit-overflow-scrolling
设为touch
「只有一些特殊的渲染层才会被提升为合成层」,通常来说有这些情况:
transform:3D变换
:translate3d
,translateZ
;will-change
:opacity
| transform
| filter
opacity
| transform
| fliter
应用了过渡和动画(transition/animation)video
、canvas
、iframe
上面这些条件属于生成渲染层的“加强版”,也就是说形成合成层的条件要更苛刻。
给HTML元素加上某些CSS属性,比如3D变换,将其「提升成一个合成层」,独立渲染。
之所以叫硬件加速,就是因为合成层会交给GPU(显卡)去处理,在硬件层面上开外挂,比在主线程(CPU)上效率更高。
「分享是一种态度」。
「全文完,既然看到这里了,如果觉得不错,随手点个赞和“在看”吧。」