比比天猫、淘宝好进嘛?感觉都很难😂
点赞 1

相关推荐

       本系列到第七期了,这一期和下一期都来看一下灵犀互娱二面遇到的一些问题。二面过程中的技术问题不多,但是个个都深入原理,而且由于灵犀互娱这边是游戏公司,所以涉及到很多渲染优化的知识点,因此能够学习到很多原理。       涉及到原理的部分我的理解比较有限,大家看的时候辩证的看哈。        今天我们就看一个问题吧。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#阿里##灵犀互娱##前端##24届软开秋招面试经验大赏##我的求职思考#
点赞 评论 收藏
分享
10-10 15:51
已编辑
门头沟学院 机械设计/制造
各位秋招伙伴,国庆期间是否和我一样焦虑,今天是国庆节后第一个工作日,各公司都恢复上班工作(当然不排除个别国庆期间还在面试的公司,点名童心制物)。那么,节后第一天,我们要怎么做呢!怎样快速找回秋招状态,可以从以下几点入手。😊梳理个人前期面经一个经典的理论“每个人每次犯错的知识点,可能都是相同的”。所以我们对自己的面筋及时复盘,查缺补漏是很重要的,所以请各位秋招伙伴一定要重视起来!我自己也尝试过比较多的方法,这里分两种情况给大家推荐。1.允许外放:那当然可以用手机直接录音,现在手机录音软件都自带转文字功能,同时还有时间轴功能,已经很方便了。2.需要使用耳机:这种情况应该更符合大家的实际情况些。我使用的“讯飞听见”这款软件,他可以同时记录面试官和你的声音,语音转文字,全文摘要,章节速览等功能,个人觉得是几种录音软件中比较好用的,大家可以尝试一下。😀梳理个人秋招流程中的公司1.节前完成面试,但结果未知:联络hr微信,礼貌私信询问面试结果。注意语气与态度,这里可以将hr当做自己统一战线的伙伴,共同完成前期面试流程的推进;话术示例:哥/姐姐,早上/上午好,我的X面是什么时候进行的,已经过去多久了,请问我的面试结果如何呢?2.节前完成一二面,但仍有面试尚未安排:推荐联络hr,礼貌询问何时会安排下一场面试。话术示例:哥/姐姐,早上/上午好,请问我的终面大概什么时候会安排呢?我们学校预计最近就要开三方了,您方便的话,可不可以早些安排我的面试呀?话术核心:问题询问+个人情况说明(说明个人情况的紧急)+礼貌请求,三部分构成。这里补充一下,怎么寻找hr的微信:从过往邮件中查找,向各种交流群群友询问,搜索该公司官方qq群等几种方式。😁梳理个人流程结束的公司前期的大量海投,手上可能会有一些并不心怡的公司offer,如果想要拒绝的,可以参考以下话术:1.话术示例(简略版):哥/姐姐,您好,非常感谢您和公司对我的认可,经过我的慎重考虑,这个offer不是很适合我,很抱歉对您的工作带来不便,希望您能早日找到合适的候选人。2.话术示例(复杂版):尊敬的hr:您好!      非常感谢贵公司对我能力的认可,并为我提供这宝贵的工作机会。在收到贵公司的录用意向后,经过向您的请教,以及自己对于个人的职业规划、工作地点以及薪资等多方面的因素,最终我决定暂时放弃这个职位。      感谢这次与贵公司的交流机会,并对您,以及XX部门的X主管,X主管在面试过程中给予我的帮助和指导表示衷心的感谢。      希望未来有机会能够再次与贵公司合作,祝愿贵公司在未来的发展中取得更加辉煌的成就。感谢您的理解与支持!最后的最后🥰希望大家多多点赞、送花、收藏,大家的支持是我创作的动力!#我发现了面试通关密码##我的求职思考##面试##24届秋招同行攻略分享##你的秋招进行到哪一步了#
点赞 评论 收藏
分享
牛客网
牛客企业服务