前端面试官常问的问题有哪些？

前端面试官常问的问题有哪些？

1、重绘和重排的关系： 重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。 2、重绘的概念： 重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。

浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。 但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。 3、触发重排的情况： 页面渲染初始化时；浏览器窗口改变尺寸；元素尺寸改变时；元素位置改变时；元素内容改变时；添加或删除可见的DOM元素时。 4、redux的缺点： （1）一个组件所需要的数据，必须_父组件传过来，而不能像flux中直接从store取。

（2）当一个组件相关数据更新_，即使父组件不需要用到这个组件，父组件还是会重新render,可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。 5、对MVC和MVVM的理解： （1）mvc：View传送指令到Controller Controller完成业务逻辑后，要求Model改变状态Model将新的数据发送到View，用户得到反馈所有通信都是单向的。Angular它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。

组成部分Model、View、ViewModel （2）View：UI界面ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；Model：数据访问层。

你遇到的前端面试题都有什么？

大家好，我是王我。 随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。

为什么？因为长得帅的都上班比较晚。

当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。 HTML篇 1.doctype是什么？有哪些类型？ 2.input有哪些新类型？简要说明其8用法。 3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？ 4.bootstrap响应式的原理是什么？ 5.多移动终端页面适配是如何实现的？ CSS篇 1.如何实现两列布局，左边自适应，右边固定宽度？ 2.用CSS画一个三角形 3.CSS实现字体大写 4.display有哪些常用的属性值？分别是什么意思？ 5.position为absolute，relative，fixed的定点位置 6.用三种方法清除浮动 7.请介绍一下margin塌陷问题 js篇 1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现) 2.js创建对象，至少使用三种方法 3.简述一下事件穿透以及解决办法 4.用三种方式判断变量类型是否是数组 5.如何实现对象的拷贝？ 6.什么是闭包？闭包的优缺点。 7.简述一下ajax请求的过程。

8.简述一下new一个人构造函数的人过程。 9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。 10.js原始数据类型有哪些？ 11.学一个函数，判断一个变量是否是字符串 12.typeof有哪些结果？ 13.剪头函数和普通函数有什么区别？ 14.请用三种方法实现数组去重 15.href和src有什么区别？ jquery篇 1.attr()和prop()有什么区别？ 2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？ 3.touch和click有什么区别？ 4.window.onload和jquery的ready有什么区别？ vue篇 1.简述一下vue的生命周期及其特点 2.vue双向绑定的原理是什么？ 3.vue的特点有哪些？和jquery有什么区别？ 4.父子组件之间传递数据的方法 5.子组件如何共享数据？ 6.一般有什么工具进行数据交互？ 7.webpack的原理是什么？ 8.简述一下$nextTick的用法 浏览器篇 1.COOKIE、sessionStorage、localStorage的区别是什么？ 2.有用过浏览器缓存吗？简述一下基本的缓存机制 网络篇 1.http和https之间的区别 2.从服务器的安全考虑，是使用get请求还是post请求？ 3.URL请求的过程有哪些？ 项目经验篇 1.项目中遇到的最大挑战以及解决办法 2.常见的网页优化有哪些？ 作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。

这些面试题也是我在很多面试中感觉经常被问到的题目。 希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。 大家好，我是王我，中国最帅的前端程序员。

前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。 第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。 第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。

然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。 第三次没问问题，直接就是一套题开做，我在那做了一个多小时。

题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。 第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。

这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。以前听网上说要带上自己的项目去面试感觉没起多大效果。 最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。

主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答 1. COOKIE session 的用途和区别，以及有效期 1、COOKIE数据存放在客户的浏览器上，session数据放在服务器上。 2、COOKIE不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。 3、session会在一定时间内保存在服务器上。

当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE。 4、单个COOKIE保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个COOKIE。 2. vue的数据绑定原理，mvvm与mvc的区别 MVVM： m:model数据模型层 v:view视图层 vm:ViewModel vue中采用的是mvvm模式，这是从mvc衍生过来的 MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题 图片说明一下： 说到MVVM就要说一下双向绑定和数据劫持的原理， MVC： m:model数据模型层 v:view视图层 c:controller控制器 原理： c层需要控制model层的数据在view层进行显示 MVC两种方式，图片说明： 总结： mvvm与mvc最大的区别： MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。

不懂得可以复制链接查看： https://www.pianshen.com/article/3716256399/ 3. storage 的区别 sessionStorage localStorage localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性 sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的 4.v-model双向数据原理 有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性 传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性 但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值 所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可 【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】 5.keepAlive用过吗？什么作用？ 缓存路由组件 使用的是vue的一个组件，参考vue的官方文档 使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁 -----【保障组件的数据不会被切换路由而销毁数据】 Home是对应的组件对象的名字，不是路由的名字 6.多维数组拍平 数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组 一红六种方法吧…… 了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html 7.跨域的原因 解决方案 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 这样就可以说同源策略----协议---端口---域名 原生的src和href可以解决跨域 代理可以解决 请求头也可以携带浏览器提示的也可以解决 一般都是后端解决跨域问题 【别的需要了解看下方链接】 https://blog.csdn.net/qq_41604383/article/details/100770100 8.uniApp兼容问题 § 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。

以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。 § 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。 § 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。

§ 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。 § 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。

在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。 在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会。

vue常见面试题

1.什么是vue的生命周期？ Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2.vue生命周期的作用是什么？ 它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段？ 它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后 4.第一次页面加载会触发那几个钩子？ 第一次页面加载时会触发beforeCreate,created,beforeMount,mounted 5.DOM渲染在哪个周期中就已经完成？ DOM渲染在mounted中就已经完成了 6.生命周期钩子的一些使用方法： 1.beforecreate:可以在加个loading事件，在加载实例是触发 2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 3.mounted:挂载元素，获取到dom节点 4.updated:如果对数据统一处理，在这里写上相应函数 5.beforeDestroy:可以一个确认停止事件的确认框 6.nextTick:更新数据后立即操作dom 7.v-show与v-if的区别 v-show是css切换，v-if是完整的销毁和重新创建使用频繁切换时用v-show,运行时较少改变时用v-if V-if=’false’v-if是条件渲染，当false的时候不会渲染 使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成 v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏 v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。 8.开发中常用的指令有哪些? v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定v-html：更新元素的innerHTML v-show与v-if：条件渲染，注意二者区别 v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数 v-for：基于源数据多次渲染元素或模板 v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法 v-bind:title=”msg”简写：title="msg" 9.绑定class的数组用法 1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}” 2.数组方法v-bind:class="[class1,class2]" 3.行内v-bind:px'}”10.路由跳转方式1.router-link标签会渲染为标签，咋填template中的跳转都是这种；2.另一种是编辑是导航，也就是通过js跳转比如router.push('/home') 12. computed和watch有什么区别 computedcomputed是计算属性，也就是计算值，它更多用于计算值的场景 computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景 watch watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作 无缓存性，页面重新渲染时值不变化也会执行 小结 当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13. vue组件的scoped属性的作用 在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的； 解决办法： ①：使用混合型的css样式：（混合使用全局跟本地的样式） /* 全局样式 */ /* 本地样式 */ ②：深度作用选择器（>>>）如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符： .a >>> .b { /* ... */ } 14. vue是渐进式的框架的理解：( 主张最少,没有多做职责之外的事 ) Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。

可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念在我看来，渐进式代表的含义是：主张最少。视图模板引擎 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。 渐进式的含义，我的理解是：没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。16.vue常用修饰符修饰符分为：一般修饰符，事件修身符，按键、系统①一般修饰符： .lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步 .number .trim1.如果要自动过滤用户输入的首尾空白字符② 事件修饰符 ...