字节一二三面代码题,求hr面
function test () { console.count('Promise Resolve'); ret = Promise.resolve().then(test); return ret; } console.log(1); test(); console.log(2); 上面这段代码: 执行结果是什么,为什么? 微任务一次执行几条、宏任务一次执行几条?2.
有个数列,其中有一个数字出现超过了一半,如何快到找到它? [1,2,1,3,1,2,1] 结果: 1 分析: 数组长度是:7 只有 1 出现了 4 次3.
5. 补充一下,上次漏了一道题
document.body.addEventListener('click', () => { Promise.resolve().then(()=>console.log(1)); console.log(2) }); document.body.addEventListener('click', () => { Promise.resolve().then(()=>console.log(3)); console.log(4) }); 用鼠标点击一下屏幕,输出结果是什么;为什么?事件循环是什么,微任务是什么,他们的执行顺序是什么样?哪些你知道的方法是微任务?
7,准备渲染进程
7.1 浏览器进程获取到通知,根据当前页面B是否是从页面A打开的并且和页面A是否是同一个站点(根域名和协议一样就被认为是同一个站点)。
如果相同,则复用原来的进程。
如果不同,新创建一个新的渲染进程
8. 传输数据、更新状态
8.1 渲染进程准备好后,浏览器进程向渲染进程发起“提交文档”的消息,渲染进程接收到消息后,和网络进程建立传输数据的“管道”
8.2 渲染进程接收完数据后,向浏览器发送“确认提交”
8.3 浏览器进程接收到“确认提交”的消息后,更新浏览器界面状态:包括安全状态、地址栏的 URL、前进后退的历史状态,并更新web页面,此时的web页面是空白页。
9. 渲染进程渲染页面
9.1 构建 DOM 树
9.1.1 输入:HTML 文档 -> 处理:HTML 解析器解析 -> 输出:DOM 树状结构
9.1.2 具体:接收到Bytes字节流->(转换)HTML字符串->(解析)Token->(构建)Node->(合并)DOM 树(保存在内存中,JS可以查询修改)
9.2 样式计算(构建CSSOM树),渲染引擎
输入:CSS 样式来源(Link外部引入、style标签、元素style属性)
处理:属性值标准化,每个节点具体样式(继承、层叠)
输出:CSSOM 树(转换为styleSheets结构中的数据,具备查询修改功能)
9.3 页面布局(构建布局树),额外地构建只包含可见元素的布局树(渲染树)。(重绘不需要重新布局,和分层)
9.3.1 作用是:计算出 DOM 树中可见元素的几何位置
9.3.2 具体:先将DOM树和CSSOM树合并为渲染树 (只包含可见节点),然后进行布局计算,计算布局树节点的坐标位置。
9.4 分层
9.4.1 特定节点生成专用图层,生成一棵图层树(层叠上下文、Clip,类似 PhotoShop 里的图层);
9.4.2 拥有层叠上下文属性(明确定位属性、透明属性、CSS 滤镜、z-index 等)的元素会创建单独图层;需要剪裁的地方也会创建图层。
9.4.3 没有图层的 DOM 节点属于父节点图层;
9.5 图层绘制
9.5.1 输入:图层树;
9.5.2 渲染引擎对图层树中每个图层进行绘制;
9.5.3 拆分成绘制指令,生成绘制列表,提交到合成线程;
9.5.4 输出:绘制列表。
9.6 分块(将图层划分为图块)
合成线程会将较大、较长的图层(一屏显示不完,大部分不在视口内)划分为图块(tile, 256*256, 512*512)。
9.7 栅格化(栅格化,是指将图块转换为位图)
9.7.1 在栅格化线程池中,将视口附近的图块优先生成位图(栅格化执行该操作);
9.7.2 快速栅格化:GPU 加速,生成位图(GPU 进程)。
9.8 合成和显示(若不布局和绘制,会直接合成)
9.8.1 绘制图块命令——DrawQuad,提交给浏览器进程;
9.8.2 浏览器进程的 viz 组件,接收合成线程发过来的 DrawQuad 命令,根,DrawQuad命令,绘制在屏幕上。
-------------