字节一二三面代码题,求hr面

1.
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.
手写一个组件,这个组件包含两个状态,保存取消按钮和上面icon按钮之间可以互相切换。
4.
手写防抖函数

笔者刚刚三面完,别的题没印象了。
现在分享下代码题,希望求hr面,求offer,快哭了。


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)
});
用鼠标点击一下屏幕,输出结果是什么;为什么?事件循环是什么,微任务是什么,他们的执行顺序是什么样?哪些你知道的方法是微任务?
-------------
6. 再补充一道题:浏览器渲染。 排版格式不太方便,直接从word粘贴了过来。

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命令,绘制在屏幕上。



-------------
hr和笔者联系过了,希望顺利意向书。




#字节跳动##面经##校招##前端工程师#
全部评论
楼主你好,请问你是实习、校招还是社招?岗位是什么?开发的话,是Java方向还是C++方向?或者其他语言方向~
点赞 回复 分享
发布于 2020-07-27 15:06
楼主,请问你那个组件当时是用什么写的
点赞 回复 分享
发布于 2021-01-31 11:52

相关推荐

想去夏威夷的小哥哥在度假:5和6才是重点
点赞 评论 收藏
分享
2 10 评论
分享
牛客网
牛客企业服务