avatar-decorate
获赞
1890
粉丝
707
关注
7
看过 TA
1.2W
武汉理工大学
2025
前端工程师
IP属地:印度尼西亚
四面八方offer来!!!
私信
关注
牛客315920200号:拼多多面试官水平是真的高
0 点赞 评论 收藏
分享
        我仔细思考了一下灵犀互娱四面为啥挂,想到了一个非常有可能的原因。        四面是技术面,说是技术面但实际上问的全是开放性问题,比如你最近了解哪些国际进展(不限于技术),比如你对AI 的看法等等。按理说这些问题时很好回答的,但是我犯了一个致命的问题,我一直在谈老东家。        问到国际进展的时候,我说我了解到了字节国际电商的业务进展和今年的形式,然后面试官问你觉得国际电商业务转好的原因是什么,我又一直在谈周受资的牛逼和能力之强大。聊到AI的看法时,我也提到实习的时候字节这边也有很多AI结合创新的点子,等等。我提了太多太多的字节,在四面的时候,这是很致命的,给面试官一种你其实根本不想去他们那边,只关注字节的感觉。        这是我踩到最大的雷区。        以下还有几个我认为的雷区:        1.提前准备没做好        在实习的时候面钉钉,当时提前10分钟我才发现没有给我发邮件,想找hr或者面试官的邮箱和联系方式也找不到,最后只能等面试官打电话问我怎么没通过他的钉钉好友,我才知道要下载钉钉。那个时候以及迟到两分钟了,然后现场下钉钉,手机电脑扫码之类的,最后迟到十分钟才进去。虽然疯狂道歉,回答的也还行,但是泡了9天挂了。        2.突发状况影响面试体验        这个点就是,面试官可以有突发状况,但你不能有(扶额苦笑)。秋招面美团到店二面,首先是面试面着面着突然掉线,然后花了一点时间才上来;其次是会议室约的时间不够,写算法写到一半,后面的人来了,只好跟面试官说换个位置。最重要的,以上情况加上手撕没撕出来。。。挂了是我活该。       大家还遇到过什么奇葩原因挂你的,可以评论分享一下,避免再次踩雷!
0 点赞 评论 收藏
分享
       本系列到第七期了,这一期和下一期都来看一下灵犀互娱二面遇到的一些问题。二面过程中的技术问题不多,但是个个都深入原理,而且由于灵犀互娱这边是游戏公司,所以涉及到很多渲染优化的知识点,因此能够学习到很多原理。       涉及到原理的部分我的理解比较有限,大家看的时候辩证的看哈。        今天我们就看一个问题吧。Q:浏览器渲染原理是怎么样的,gpu进程和渲染进程之间如何协调配合,如何通信?       在问这个问题之前,面试官问了一个大家都被问过的问题:url输入到渲染全流程。没错,整个渲染全流程大家基本都知道,但是想要回答后面的问题就需要更加细致的了解中间的一些概念(先来背一遍进程和线程的概念)。       (面试过程肯定不用说下面这么多,但是我觉得借此机会了解整个过程还是很重要的,知道全过程才能用自己的语言描述出来,并且也不怕面试官详细到某个点)       首先来回顾一下浏览器的多进程架构。浏览器的四个主要进程是主进程、第三方插件进程、GPU进程和渲染进程,其中主进程只有一个,负责浏览器界面显示与用户交互,负责各个页面的管理,创建和销毁其他进程等等;第三方插件进程有多个,每种类型的插件对应一个进程,仅当使用该插件时才创建;GPU进程最多一个,与其他进程隔离处理 GPU 任务,用于加速绘制;渲染进程(也就是我们常说的浏览器内核Webkit等)有多个,默认每个 Tab 页面都会产生一个渲染进程,互不影响,他的内部是多线程的,渲染页面、脚本执行之类的就靠他。       其中渲染进程有五个主要线程:1.GUI 渲染线程:负责渲染浏览器界面,解析 HTML,CSS,构建 DOM 树和 RenderObject 树,布局和绘制等。需要注意的是GUI 渲染线程与 JS 引擎线程是互斥的。2.JS 引擎线程:JS 引擎线程负责解析 Javascript 脚本,运行代码。JS 引擎一直等待着任务队列中任务的到来,然后加以处理,一个 Tab 页(renderer 进程)中无论什么时候都只有一个 JS 线程(单线程)在运行 JS 程序。3.事件触发线程:他不受JS引擎线程控制,主要用于控制事件(例如鼠标,键盘等事件),当该事件被触发时候,事件触发线程就会把该事件的处理函数添加进任务队列中,等待JS引擎线程空闲后执行。4.定时器触发线程:也就是setTimeout,setInterval所在的线程。浏览器的定时器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响计时的准确,因此通过单独的线程来计时并触发定时器,计时完毕后,满足定时器的触发条件,则将定时器的处理函数添加进任务队列中,等待JS引擎线程空闲后执行。5.异步HTTP请求线程:当HttpRequest连接后,浏览器会新开的一个线程,当监控到readyState状态变更时,如果设置了该状态的回调函数,则将该状态的处理函数推进任务队列中,等待JS引擎线程空闲后执行。具体这些线程之间的关系从帖子中找了个图(图1)       然后我们看下渲染原理。浏览器接收到返回的html之后就会开始渲染流程,输入的 HTML 经过一些子阶段,最后输出像素。看看图2,有整个渲染过程。       这个过程涉及到渲染进程中的主线程,合成线程和光栅线程池。       主线程:1.浏览器接收到HTML后,主线程开始解析HTML并转为DOM结构,在这个过程中,如果遇到script标签会挂起渲染线程,让js线程进行解析,因此script标签会阻碍DOM的解析。2.DOM解析完成后会进行CSS解析,计算样式,在计算过程中需要遵守 CSS 的继承和层叠(层叠的规则不记得的回去抄书)两个规则,这个阶段会构建CSSOM树。3.有了DOM树和CSSOM树就要创造渲染树了,因为有了DOM和component style(每个元素对应的样式)之后还不足以绘制页面,需要知道每个元素的位置和几何属性,这个阶段叫做布局(Layout)。4.有了渲染树之后,由于CSS中有复杂的效果,以及各元素之间有z-index等层级关系,因此下一步是分层。对于这些场景为了页面展示的正确性,渲染引擎还会为特定的节点生成专用的图层,并生成一棵对应的图层树。5.有了渲染树,图层树之后,主线程会遍历这些树并确定一个绘制顺序,创建绘制记录。       合成线程:分块,光栅化,合成。上面主线程的步骤走完之后,会将信息提交给合成线程,合成线程中会走光栅化(栅格化)这个步骤。什么叫光栅?大家可以搜一下,就跟栅栏一样,很多很多狭小的缝隙,那么光栅化的过程其实就是把整个页面分割成很多很多小的块去处理。为什么要进行这个处理,就是因为页面很长的时候,用户只能看到视口内容,有些图层可能超过视口很多,一次性渲染整个图层未免有些浪费,因此合成线程会对图层进行分块处理。栅格化之后,每一块会送给光栅线程池中的一个线程。合成线程的最后一个过程就是合成,会创建合成帧通过 IPC 通信(进程通信)提交给浏览器进程。浏览器进程接收到指令后会将内容绘制在内存中并展示在屏幕上。       光栅线程:上面提到光栅线程要去处理每个块,这个阶段会和GPU进程进行通信协调,会光栅化每一个图块并存在GPU内存中。       至此,浏览器渲染的完整原理就完全结束了(里面还有很多细节,这里帖一个参考帖:https://segmentfault.com/a/1190000041840526#item-2-8)。到这里也基本可以回答“gpu进程和渲染进程之间如何协调配合”这个问题了,配合的阶段就在光栅化这一步骤。       最后就是主进程,GPU进程和渲染进程三者如何通信。浏览器进程收到用户请求,首先需要获取页面内容(譬如通过网络下载资源),随后将该任务通过 RendererHost 接口传递给渲染进程,渲染进程的 Renderer 接口收到消息,简单解释后,交给渲染线程,然后开始渲染。渲染线程接收请求,加载网页并渲染网页,这其中可能需要浏览器进程获取资源和需要 GPU 进程来帮助渲染,当然可能会有 JS 线程操作 DOM(这样可能会造成回流并重绘)。最后渲染进程将结果传递给浏览器主进程。浏览器进程接到结果并将结果绘制出来。       上面都提到了整个流程,那么从这个流程的角度去理解一下重绘和重排。当我们通过 js 或者 css 属性更新了元素的几何属性会触发重排,此时浏览器会触发图3中布局及以后的所有步骤;当我们通过 js 或者 css 更新元素的绘制属性而不改变几何外观的时候,浏览器会触发图3中绘制及以后的所有步骤。因此重绘的开销相比重排会小很多。       为什么我们为了避免重排和重绘而去采用 css3 的 transform 等属性呢?因为此时整个主线程的流程会被全部跳过,执行后续的流程,而后续的流程交给了在执行线程、光栅线程和 GPU 进程上执行没有占据主线程的资源,因此效率是最高的。           这个问题到这基本就完整结束了,一个小小的问题,其实考察对于浏览器内核的渲染原理,在被问到之前我自己从来静不下心去看这个只是点,因为实在是低频。但是实习过程中又总是听到其他同时讨论渲染进程的优化问题,直到自己被问到不会了才沉的下气去看这些问题。还是要逼自己多看点东西。       如果大家觉得有用,欢迎大家点赞收藏关注送花!!!该系列往期链接:第一期:https://www.nowcoder.com/feed/main/detail/a79cb52ce00c4f6d874683e65b8eb718?sourceSSR=users第二期:https://www.nowcoder.com/feed/main/detail/04aee48cc23f4b09a04d0dba327f0c5d?sourceSSR=users第三期:https://www.nowcoder.com/feed/main/detail/0195906f12dd4fc0826251e9ceee19ab?sourceSSR=users第四期:https://www.nowcoder.com/feed/main/detail/2c0a525fa04240778e6c43d7d355a7ca?sourceSSR=users第五期:https://www.nowcoder.com/discuss/673869939018588160?sourceSSR=users第六期:https://www.nowcoder.com/feed/main/detail/ebead4b4e5da48439388aab5d4be290d?sourceSSR=users
0 点赞 评论 收藏
分享
        这一期把京东二面剩下的问题复盘一下,主要是针对构建项目中的各文件的作用。考察的点很细很细,工程化根本不需要问多复杂的原理,问这些答不上来就能知道你水平如何了,我答得特别烂,但是学习了很多东西。1.package.json文件中的script部分是干嘛的,scrpit中有个dev指令,后面配置了vite,这个vite哪里来的,如何运行起来的?        这个问题想回答好首先要知道package.json文件是干嘛的,里面的scrpit应该大部分同学都知道,但是vite从哪里来可能是大部分人没想过的问题。        关于package.json:在每个前端项目中,都有 package.json 文件,它是项目的配置文件,常见的配置有配置项目启动、打包命令,声明依赖包等。当我们克隆一个新的项目到本地时,需要执行 npm install(yarn install)命令来安装项目所需的依赖文件。当执行该命令时,就会根据 package.json 文件中的配置信息来自动下载所需的模块,也就是配置项目所需的运行和开发环境。package.json 中最重要的两个字段就是 name 和 version,它们都是必须的,如果没有,就无法正常执行 npm install 命令。npm 规定 package.json 文件是由名称和版本号作为唯一标识符的。        scrpits部分就是配置了我们常用的开发、打包等指令的,如我们常见的npm run dev和npm run build为什么能够运行或打包项目就是在这里进行了配置        那么vite是如何被找到的?我当时的第一反应是下面配置的devDependencies中有vite,这当然有关系,但是这只是配置了vite作为开发过程中的依赖,而真正能够让他被使用的包则是在node_modules中。我的理解是,当我们安装或者新建一个项目时,开发所用的devDependencies将vite作为我们开发时的依赖,通过这个配置让我们的程序关联上node——modules中的vite工具,再通过scripts中的指令调用。2.devdependencies和dependencies的区别,如果这两块的东西都写到devdependencies或dependencies里面有什么区别?        通过名字大部分同学都知道devDependencies配置的是开发环境所用的依赖,dependencies配置的是生产环境中的依赖。        他俩的详细作用如下:        dependencies 字段中声明的是项目的生产环境中所必须的依赖包。devDependencies 中声明的是开发阶段需要的依赖包,如 Webpack、Eslint、Babel 等,用于辅助开发。它们不同于 dependencies,因为它们只需安装在开发设备上,而无需在生产环境中运行代码。当打包上线时并不需要这些包,所以可以把这些依赖添加到 devDependencies 中,这些依赖依然会在本地指定 npm install 时被安装和管理,但是不会被安装到生产环境中。        那么如果这两块的东西都写到devdependencies或dependencies里面会影响什么?如果你的项目会被发为npm包被使用,那么devdependencies,dependencies必须分开写;如果并不发布,那么声明在dependencies 和 devDependencies 中的依赖没有大的区别。        如果安装一个npm包,那么这个包的dependencies意思是在运行时还需要依赖什么其他的包才能满足你的运行要求。安装的时候会安装这个包的dependencies,并且是向上递归的(可以看图2网友的解释)。3.编译完的dist和node_modules有啥关系吗,部署的是dist,node_modules会部署吗?        在构建项目的过程中(将源代码转换为 dist 中的可分发文件时),构建工具可能会读取 node_modules 中的包。例如,在使用 Webpack 构建一个包含 React 应用的项目时,Webpack 会从 node_modules 中找到 react 和 react - dom 等相关包,然后根据项目的配置将这些包中的必要代码与项目的源代码一起进行处理,最终生成的优化后的文件存放到 dist 中。        在开发过程中,开发者会在 node_modules 中安装各种开发依赖和生产依赖。当项目准备部署时,构建过程会将这些依赖的相关部分(根据代码的引用情况)正确地整合到 dist 中的文件里,从而确保项目在生产环境中能够正常运行,生产环境中不需要直接访问 node_modules 文件夹。        项目最终在 dist 中的可分发文件可能依赖于 node_modules 中的包所提供的功能。比如一个基于 Vue.js 构建的项目,node_modules 中的 vue 包提供了 Vue 框架的核心功能,构建工具会将这些功能整合到 dist 中的 JavaScript 文件里,使得浏览器在加载 dist 中的文件时能够正常运行 Vue 应用。4.pnpm-lock是什么        pnpm-lock.yaml 是 pnpm 包管理器生成的锁定文件。它类似于 npm 的 package-lock.json 或 yarn 的 yarn.lock 文件,用于记录项目的依赖关系和确保在不同环境中安装相同的包版本。        当你使用 pnpm 安装依赖时,它会自动生成 pnpm-lock.yaml 文件。这个文件包含了项目的依赖关系树,以及每个包的版本信息和依赖项的精确版本范围。这样,当你在不同的环境中重新安装依赖时,pnpm 会根据 pnpm-lock.yaml 文件来确保安装相同的包版本,以保持项目的一致性。该系列往期链接:第一期:https://www.nowcoder.com/feed/main/detail/a79cb52ce00c4f6d874683e65b8eb718?sourceSSR=users第二期:https://www.nowcoder.com/feed/main/detail/04aee48cc23f4b09a04d0dba327f0c5d?sourceSSR=users第三期:https://www.nowcoder.com/feed/main/detail/0195906f12dd4fc0826251e9ceee19ab?sourceSSR=users第四期:https://www.nowcoder.com/feed/main/detail/2c0a525fa04240778e6c43d7d355a7ca?sourceSSR=users第五期:https://www.nowcoder.com/discuss/673869939018588160?sourceSSR=users京东二面面经:https://www.nowcoder.com/feed/main/detail/18cb2c4275544c79af169aa92d2c3fd1?sourceSSR=users
0 点赞 评论 收藏
分享
        今天分享一下美团和蔚来面试中遇到的一些问题。1.(蔚来二面)在forEach和map里面对遍历的值进行改变会影响原数组吗        认真背八股的同学肯定都记得,forEach不会返回新的数组,只是遍历每一项并做计算,map会返回新的数组,所以理所当然的想map不会改变原数组,forEach...会怎么样??想到这里就错了,这也是我当时的思路。        事实上这个问题跟上面那个八股完全没关系。试想一个函数,传递了参数进来并改变这个参数,会不会对原来数据进行改变呢?这个题是在靠这个,需要分类回答。        数组中数据为基本数据类型时,forEach和map都不会改变原数组;数据为引用数据类型时,map和forEach都会改变原数组。在使用 forEach 和 map 方法时,对引用类型元素的修改会直接反映在原始数组中。这是因为引用类型的元素实际上存储的是引用(内存地址),而非值本身。因此,通过引用可以访问和修改原始数组中的元素。而number,string,Boolean,null,undefined这些基本类型在栈内存中直接存储变量与值。2.(美团到家一面)为啥会出现箭头函数        这一个问题可以去b站渡一老师的小视频里看看。        肯定很多人跟我一样第一时间想到的是箭头函数和普通函数的区别,那为啥有这些区别,为啥要单独搞个箭头函数出来?难道只是为了简单吗。其实原因只有一个:消除函数的二义性。        在出现箭头函数之前,函数可以直接被调用,也可以被new当作构造函数使用,这就是函数的二义性。而这种二义性的存在是会给开发带来负担的,因为创建者并不知道未来函数的调用者是如何使用这个函数的,所以后来先在命名上做了规范:小写开头的函数是直接使用的,大写开头的是构造函数。但这种规范也不是强约束,毕竟既可以Number(),又可以new Number(),所以为了消除这种二义性,创造了箭头函数和class,箭头函数只能() => {},当作普通函数调用,而class只能被new,这就刚好对应二义性的两种用法,解决这种复杂情况了。————————10.10补充————————        感谢牛u的提示,这边还有一个点补充。        箭头函数的出现解决了this的复杂指向问题。        举例如图3所示,当调用show方法打印this.x的时候打印的是undefined。这是因为当代码执行到了setTimexout( )的时候,此时的this已经变成了window对象(setTimeout( )是window对象的方法),因此会在window上查找x,找不到,就输出undefined。        而如果是箭头函数,箭头函数的this是定义时就确定的,因此箭头函数的this指向的是obj,输出的就是obj.x。这样就解决了普通函数在当作回调函数传递的时候this变化带来的麻烦,否则就要用全局变量或者闭包之类的方法。3.(美团到家一面)obj对象中有一个方法,用obj.a()和(obj.a)()去调用分别输出什么(a方法中输出this.name,obj和全局都有一个name属性)?        这个题其实是当时考的一个输出题(图1)。下来尝试了一下,答案是没区别,都输出obj对象中的name。        这个题我一开始以为(obj.a)()这种调用就跟let b = obj.a,然后调用b()这种形式一样,但不是这样的,这个点可以记一下。        然后还要注意的一个点是,如果这个方法是箭头函数的形式(图2),那么this指向就不一样了,指向的是window。所以会在window上面去找name。那么这个时候输出什么?        是不是很多人脱口而出,“输出hong!”        恭喜各位掉到新坑了,这个时候输出是空(什么都没有:“”)        因为let和const定义的变量是不会挂到window对象身上的,如果改成var就能输出hong了,大家可以自行尝试一下、        (上面这个点个人认为还是很细的,一定要小心)                这几个是自己踩过的坑,第三点应该很多同学都会想错。        欢迎各位评论区交流~
菠萝包lime:佬说的太棒了,箭头函数这块我也看的渡一的视频,当时被问到还是挺爽的,直接从二义性回答。
0 点赞 评论 收藏
分享

创作者周榜

更多
关注他的用户也关注了:
牛客网
牛客企业服务