<small id='ZkjbCHfqs2'></small> <noframes id='tfYpbWG5S'>

  • <tfoot id='xhjdyY26Zf'></tfoot>

      <legend id='RNz2KFP5'><style id='jOVhr0FsnL'><dir id='rVPKdSuqa'><q id='uLjgZvN'></q></dir></style></legend>
      <i id='4bGBfhqU'><tr id='nPF57sK'><dt id='dW87M'><q id='XLSq3j'><span id='wN0MW'><b id='HbJT46'><form id='DPb8Lg'><ins id='dpDVn'></ins><ul id='uodSXqiK0F'></ul><sub id='vxqaHU'></sub></form><legend id='YlwogMXIPa'></legend><bdo id='ANJWp'><pre id='jO2KzywG'><center id='eQm1'></center></pre></bdo></b><th id='zgLj4RBJs'></th></span></q></dt></tr></i><div id='y9pYxZL'><tfoot id='D420rOXc'></tfoot><dl id='L89VobAj'><fieldset id='tJ4p'></fieldset></dl></div>

          <bdo id='1Npw9BJr'></bdo><ul id='3205Btafmj'></ul>

          1. <li id='kTMPs1Nhp'></li>
            登陆

            百度、有赞、阿里 前端面试总结

            admin 2019-11-06 275人围观 ,发现0个评论

            前语

            人家都说,前端需求每年守时出来面面试,衡量一下自己其时的技能水平以及价值,自己17年7月份,结业到现在都没出来试过,也没很想换作业,就出来试试,看看自己水平咋样。

            以下为我现场面试时分的一些答复,部分因人而异的问题我就不答复了,答复的都为参考答案,也有部分过错的当地或许欠好的当地,有更好的答案的能够在谈论区谈论。

            百度 WEB前端工程师 接连五面 全程3约个小时

            一面

            先完结笔试题:

            1、完结一个函数,判别输入是不是回文字符串。

            function run(input) {
            if (typeof input !== 'string') return false;
            return input.split('').reverse().join('') === input;
            }

            2、两种以上办法完结已知或许不知道宽度的笔直水平居中。

            // 1
            .wraper {
            position: relative;
            .box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin: -50px 0 0 -50px;
            }
            }
            // 2
            .wraper {
            position: relative;
            .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }
            }
            // 3
            .wraper {
            .box {
            display: flex;
            justify-content:center;
            align-items: center;
            height: 100px;
            }
            }
            // 4
            .wraper {
            display: table;
            .box {
            display: table-cell;
            vertical-align: middle;
            }
            }

            3、完结效果,点击容器内的图标,图标边框变成border 1px solid red,点击空白处重置。

            const box = document.getElementById('box');
            function isIcon(target) {
            return target.className.includes('icon');
            }
            box.onClick = function(e) {
            e.stopPropagation();
            const 百度、有赞、阿里 前端面试总结target = e.target;
            if (isIcon(target)) {
            target.style.border = '1px solid red';
            }
            }
            const doc = document;
            doc.onclick = function(e) {
            const children = box.children;
            for(let i; i < children.length; i++) {
            if (isIcon(children[i])) {
            children[i].style.border = 'none';
            }
            }
            }

            4、请简略完结双向数据绑定mvvm。


            const data = {};
            const input = document.getElementById('input');
            Object.defineProperty(data, 'text', {
            set(value) {
            input.value = value;
            this.value = value;
            }
            });
            input.onChange = function(e) {
            data.text = e.target.value;
            }
            5、完结Storage,使得该目标为单例,并对localStorage进行封装设置值setItem(key,value)和getItem(key)
            var instance = null;
            class Storage {
            static getInstance() {
            if (!instance) {
            instance = new Storage();
            }
            00001.
            return instance;
            }
            setItem = (key, value) => localStorage.setItem(key, value),
            getItem = key => localStorage.getItem(key)
            }

            Q1 你的技能栈首要是react,那你说说你用react有什么坑点?

            1、JSX做表达式判别时分,需求强转为boolean类型,如:

            render() {
            const b = 0;
            return

            {
            !!b &&
            这是一段文本

            }

            }

            假定不运用 !!b 进行强转数据类型,会在页面里边输出 0。

            2、尽量不要在 componentWillReviceProps 里运用 setState,假定一定要运用,那么需求判别完毕条件,否则会呈现无限重烘托,导致页面溃散。

            3、给组件增加ref时分,尽量不要运用匿名函数,由于当组件更新的时分,匿名函数会被作为新的prop处理,让ref特色接受到新函数的时分,react内部会先清空ref,也便是会以null为回调参数先履行一次ref这个props,然后在以该组件的实例履行一次ref,所以用匿名函数做ref的时分,有的时分去ref赋值后的特色会取到null。概况见

            4、遍历子节点的时分,不要用 index 作为组件的 key 进行传入。

            Q2 我现在有一个button,要用react在上面绑定点击工作,要怎样做?

            class Demo {
            render() {
            return
            }
            }

            Q3 接上一个问题,你觉得你这样设置点击工作会有什么问题吗?

            由于onClick运用的是匿名函数,一切每次重烘托的时分,会把该onClick作为一个新的prop来处理,会将内部缓存的onClick工作进行从头赋值,所以相对直接运用函数来说,或许有一点的功用下降(个人认为)。

            修正:

            class Demo {
            onClick = (e) => {
            alert('我点击了按钮')
            }
            render() {
            return
            }
            }

            当然你在内部声明的不是箭头函数,然后你或许需求在设置onClick的时分运用bind绑定上下文,这样的效果和从前的运用匿名函数差不多,由于bind会回来新的函数,也会被react认为是一个新的prop。

            Q4 你说说event loop吧

            首要,js是单线程的,首要的使命是处理用户的交互,而用户的交互无非便是呼应DOM的增修改,运用工作队列的办法,一次工作循环只处理一个工作呼应,使得脚本履行相对接连,所以有了工作队列,用来贮存待履行的工作,那么工作队列的工作从哪里被push进来的呢。那便是别的一个线程叫工作触发线程做的工作了,他的效果首要是在守时触发器线程、异步HTTP恳求线程满意特定条件下的回调函数push到工作队列中,等候js引擎闲暇的时分去履行,当然js引擎履行进程中有优先级之分,首要js引擎在一次工作循环中,会先履行js线程的主使命,然后会去查找是否有微使命microtask(promise),假定有那就优先履行微使命,假定没有,在去查找宏使命macrotask(setTimeout、setInterval)进行履行。

            Q5 说说工作流吧

            Q6 我现在有一个进展条,进展条中心有一串文字,当我的进展条掩盖了文字之后,文字要与进展条反色,怎样完结?

            。。。其时我给的是js的计划,在进展条宽度改变的时分,核算盖过每一个文字的50%,假定超越,设置文字相反色彩。

            当然css也有对应的计划,也便是 mix-blend-mode,我并没有触摸过。

            对应html也有对应计划,也就设置两个相同方位可是色彩相反的dom结构在堆叠在一起,顶层掩盖底层,最顶层的进展条取overflow为hidden,其宽度就为进展。

            二面

            Q1 你为什么要离开上一家公司?

            Q2 你觉得抱负的前端方位是什么?

            Q3 那你意识到问题所在,你又尝试过处理问题吗?

            三面

            Q1 说一下你上一家公司的一个全体开发流程吧

            Q2 react 的虚拟dom是怎样完结的

            首要说说为什么要运用Virturl DOM,由于操作实在DOM的消耗的功用价值太高,所以react内部运用js完结了一套dom结构,在每次操作在和实在dom之前,运用完结好的diff算法,对虚拟dom进行比较,递归找出有改变的dom节点,然后对其进行更新操作。为了完结虚拟DOM,咱们需求把每一种节点类型笼统成目标,每一种节点类型有自己的特色,也便是prop,每次进行diff的时分,react会先比较该节点类型,假定节点类型不相同,那么react会直接删去该节点,然后直接创立新的节点刺进到其间,假定节点类型相同,那么会比较prop是否有更新,假定有prop不相同,那么react会断定该节点有更新,那么重烘托该节点,然后在对其子节点进行比较,一层一层往下,直到没有子节点。

            Q3 react 的烘托进程中,兄弟节点之间是怎样处理的?也便是key值不相同的时分。

            一般咱们输出节点的时分都是map一个数组然后回来一个ReactNode,为了便利react内部进行优化,咱们有必要给每一个reactNode增加key,这个key prop在规划值处不是给开发者用的,而是给react用的,大约的效果便是给每一个reactNode增加一个身份标识,便利react进行辨认,在重烘托进程中,假定key相同,若组件特色有所改变,则react只更新组件对应的特色;没有改变则不更新,假定key不相同,则react先毁掉该组件,然后从头创立该组件。

            Q4 我现在有一个数组[1,2,3,4],请完结算法,得到这个数组的全摆放的数组,如[2,1,3,4],[2,1,4,3]。。。。你这个算法的时刻杂乱度是多少

            Q5 我现在有一个背包,容量为m,然后有n个货品,分量别离为w1,w2,w3...wn,每个货品的价值是v1,v2,v3...vn,w和v没有任何关系,恳求背包能装下的最大价值。

            四面

            Q1 请说一下你的上一家公司的研制发布流程。

            Q2 你说一下webpack的一些plugin,怎样运用webpack对项目进行优化。

            正好最近在做webpack构建优化和功用优化的事儿,其时吹了大约15~20分钟吧,插件请见刘晓莉webpack插件概括总结。

            构建优化:

            1. 削减编译体积 ContextReplacementPugin、IgnorePlugin、babel-plugin-import、babel-plugin-transform-runtime

            2. 并行编译 happypack、thread-loader、uglifyjsWebpackPlugin敞开并行

            3. 缓存 cache-loader、hard-source-webpack-plugin、uglifyjsWebpackPlugin敞开缓存、babel-loader敞开缓存

            4. 预编译 dllWebpackPlugin && DllReferencePlugin、auto-dll-webapck-plugin

            功用优化:

            1.削减编译体积 Tree-shaking、Scope Hositing

            2.hash缓存 webpack-md5-plugin

            3.拆包 splitChunksPlugin、import()、require.ensure

            Q3百度、有赞、阿里 前端面试总结 es6 class 的new实例和es5的new实例有什么区别

            这个我觉得是相同的(其时由于很少看babel编译之后的成果),面试官说不相同。。。后来我看了一下babel的编译成果,发现仅仅类的办法声明的进程不相同罢了,最终new的成果是相同的。。。具体答案现在我也不知道。。。

            Q4 看你简历上写了canvas,你说一下为什么canvas的图片为什么过有跨域问题

            Q5 我现在有一个canvas,上面随机布着一些黑块,请完结办法,核算canvas上有多少个黑块

            Q6 请手写完结一个promise

            五面

            Q1 你说一下你的技能有什么特色

            -

            Q2 说一下你觉得你最满意的一个项目?你这个项目有什么缺陷,坏处吗?

            -

            Q3 现在有那么一个团队,假定让你来做技能架构,你会怎样做?

            Q4 说一下你上一家公司的首要业务流程,你参加到其间了吗?

            -

            杭州有赞

            一面 WEB前端工程师 电话面 全程43分钟

            Q1 毛遂自荐

            -

            Q2 说说从输入URL到看到页面发作的全进程,越具体越好

            1. 首要浏览器主进程接收,开了一个下载线程。

            2. 然后进行HTTP恳求(DNS查询、IP寻址等等),中心会有三次捂手,等候呼应,开端下载呼应报文。

            3. 将下载完的内容转交给Renderer进程办理。

            4. Renderer进程开端解析css rule tree和dom tree,这两个进程是并行的,所以一般我会把link标签放在页面顶部。

            5. 解析制作进程中,当浏览器遇到link标签或许script、img等标签,浏览器会去下载这些内容,遇到时分缓存的运用缓存,不适用缓存的从头下载资源。

            6. css rule tree和dom tree生成完了之后,开端组成render tree,这个时分浏览器会进行layout,开端核算每一个节点的方位,然后进行制作。

            7. 制作完毕后,封闭TCP衔接,进程有四次挥手。

            Q3 你刚刚说了三次握手,四次挥手,那你描绘一下?

            自己对核算机网络的这些概念一向不是很熟悉,所以这个问题答复不会,这儿mark下文章,感兴趣的同学检查地址

            Q4 刚刚Q2中说的CSS和JS的方位会影响页面功率,为什么?

            Q5 现在有一个函数A和函数B,请你完结B承继A

            Q6 刚刚你在Q5中说的几种承继的办法,别离说说他们的优缺陷

            Q7 说说CSS中几种笔直水平居中的办法

            Q8 Q7中说的flex布局,笔直水平居中有必要知道宽度吗?

            Q9 描绘一下this

            Q10 说一下浏览器的缓存机制

            Q11 ETag是这个字符串是怎样生成的?

            Q12 现在要你完结一个Dialog组件,说说你规划的思路?它应该有什么功用?

            Q13 你觉得你做过的你觉得最值得夸耀的项目?

            蚂蚁金服-体会技能部 资深数据可视化研制工程师


            一面 电话面 全程1小时24分钟

            Q1 描绘一下你最近做的可视化的项目

            -

            Q2 刚刚说的java调用js离线生成数据陈述?java调用js的promise异步回来成果怎样完结的?

            运用java的js引擎Nashorn,Nashorn不支持工作队列,是要引入polyfill,然后java调用js办法取得java的promise目标,然后在调用该目标的then办法,回调函数为java中的某各类的某个办法,然后while一个表明是否已履行回调的变量,假定未履行,则让java主线程sleep,假定现已履行,则跳出循环,表明是否已履行回调的变量在传入promise的回调函数中设置更改。概况代码见地址

            Q3 说说svg和canvas各自的优缺陷?

            共同点:都是有用的图形东西,关于数据较小的情况下,都很又高的功用,它们都运用 JavaScript 和 HTML;它们都恪守万维网联合会 (W3C) 规范。

            svg长处:

            • 矢量图,不依赖于像素,无限扩大后不会失真。
            • 以dom的办法表明,工作绑定由浏览器直接分发到节点上。

            svg缺陷:

            • dom办法,涉及到动画时分需求更新dom,功用较低。

            canvas长处:

            • 定制型更强,能够制作制作自己想要的东西。
            • 非dom结构办法,用JavaScript进行制作,涉及到动画功用较高。

            canvas缺陷:

            • 工作分发由canvas处理,制作的内容的工作需求自己做处理。
            • 依赖于像素,无法高效保真,画布较大时分功用较低。

            Q4 你刚刚说的canvas烘托较大画布的时分功用会较低?为什么?

            Q6 假定我现在有5000个圆,彻底制作出来,点击某一个圆,该圆高亮,别的4999个圆设为半透明,别离说说用svg和canvas怎样完结?

            Q7 刚刚说的canvas的点击工作,怎样样完结?假定不是圆,这些图形是正方形、长方形、规矩图形、不规矩图形呢

            Q8 那假定我的图形或许有变形、扩大、偏移、旋转的需求呢?你的这个isPointInSide怎样处理?

            Q9 那个这个canvas的点击工作,点击的时分怎样样快速的从这5000个圆中找到你点击的那个圆(不彻底遍历5000个节点)?

            Q10 那你用过@antv/g6,里边有一个tree,说说你大学时分触摸到的tre百度、有赞、阿里 前端面试总结e的数据结构是怎样完结的?

            Q11 还记住二叉树吗?描绘二叉树的几种遍历办法?

            Q12 说说你记住的一切的排序,他们的原理是什么?

            Q13 说一下你觉得你做过的最杂乱的项目?中心遇到的困难,以及你是怎样处理的?-

            面试官:我这边问题差不多问完了,你还有什么问题?

            我:很惊奇今日全都是问可视化相关的,没怎样问js,css,html。

            面试官:那咱们持续吧

            我:。。。

            Q14 那给我介绍一下react吧(面试官是做可视化开发的,底子不明白react)

            Q15 假定我一个组件有一个状况count为1,然后我在componentDidMount()里边履行履行了两次this.setState({count: this.state.count++}),然后又履行了两次setTimeout(() => { this.setState({count: this.state.count++}) }, 0),最终count为多少?为什么?

            Q16 说一下你觉得你做过的最值得你说的吧

            -

            最终

            这几轮面试的面试官都十分和蔼好沟通,百度的五轮面试不知道过了没有,只记住五面的面试官说,你稍等一下,我去问一下其他人对你还有什么其他要求,然后过了一瞬间HR就喊我先回去了,叫我等HR面的音讯,假定没经过,也不会在联络我了,现已过了四天了,希望后边有音讯吧。然后有赞、蚂蚁金服的两个一面都过了,由于每次面完试面试官问我还有什么问题吗?我都会问询一下本次面试面试官对我的谈论是啥。

            文档已收拾为PDF文档,想要获取能够 转发+重视 私信关键字【前端面试】

            想要获取能够 转发+重视


            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP