面汇

最新推荐文章于 2024-04-13 13:36:19 发布

渠元东

最新推荐文章于 2024-04-13 13:36:19 发布

阅读量4.2k

点赞数

分类专栏：知识积累文章标签：面试

本文链接：https://blog.csdn.net/qq_40755047/article/details/103153222

版权

知识积累专栏收录该内容

5 篇文章 0 订阅

订阅专栏

title: 面试题汇总

文章目录

自己整理的面试题

HTML+CSS面试题

001.Flex布局

Flex（Flexible Box）布局称为 “弹性布局”，可以为网页的布局提供最大的灵活性，取代了往常的浮动（float）布局，并且任何一个容器都可以设置 Flex 布局。
注：设置 Flex 布局后，子元素的 Float 布局将失效
Flex 布局教程

002.HTML5+CSS3新特性

语义化标签：header、nav、aside、footer、section

003.盒子模型

CSS 盒子模型

004.如何让一个div水平居中？

005.如何让一个div水平垂直居中？

006.如何清除浮动？

clear:both

007.css3实现三栏布局，左右固定，中间自适应？

圣杯布局/双飞翼布局

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .middle,
        .left,
        .right {
            position: relative;
            float: left;
            min-height: 130px;
        }
        .container {
            padding: 0 220px 0 200px;
            overflow: hidden;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='middle'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

008.CSS中 link 和@import 的区别是什么？

link属于HTML标签，而@import是CSS提供的页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
link方式的样式的权重高于@import的权重.

009.transition和animation的区别？

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，
而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

010.CSS优先级？

不同级别：总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
	1.属性后面加!import 会覆盖页面内任何位置定义的元素样式
	2.作为style属性写在元素内的样式
	3.id选择器
	4.类选择器
	5.标签选择器
	6.通配符选择器（*）
	7.浏览器自定义或继承
**同一级别：后写的会覆盖先写的**

011.使元素消失的方法?

visibility:hidden、display:none、z-index=-1、opacity：0
1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉

012.为什么css放在顶部而js写在后面？

1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了
2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验

但是随着JS技术的发展，JS也开始承担页面渲染的工作。比如我们的UI其实可以分被对待，把渲染页面的js放在前面，时间处理的js放在后面

013.理解BFC吗？

BFC 即 Block Formatting Contexts (块级格式化上下文)。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

理解CSS中的BFC

014.Less的使用

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性和嵌套写法，使 CSS 更易维护和扩展。

Vue面试题

001.vue中的MVVM模式

即Model-View-ViewModel。

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

002.v-show与v-if的区别

条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

003.指令keep-alive

在vue-router写着keep-alive，keep-alive的含义：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

004.路由嵌套

路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转。
router-view本身就是将组件渲染到该位置，

005.指令v-el的使用

有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。

注： HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

示例：

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>

006.vue中使用事件名

在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用v-on:click=“event”，可以简写为：@click=“event”

007.vue.js是什么

Vue.js（是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

008.route 和 router 的区别是什么？

route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。

router是“路由实例对象”，包括了路由的跳转方法(push、replace)，钩子函数等。

009.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

010.vue的优点是什么?

低耦合。视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

011.vuex面试相关

(1)vuex是什么?怎么使用?哪种功能场景使用它?

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

(2)vuex有哪几种属性?

有五种，分别是 State、 Getter、Mutation 、Action、 Module

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getter特性

A、getters 可以对State进行计算操作，它就是Store的计算属性

B、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

C、如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态;Action 可以包含任意异步操作。

(3)不用Vuex会带来什么问题?

可维护性会下降，想修改数据要维护三个地方;

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的;

增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

012.如何让CSS只在当前组件中起作用

将当前组件的<style>修改为<style scoped>

013.响应式系统简述:

任何一个 Vue Component 都有一个与之对应的 Watcher 实例
Vue 的 data 上的属性会被添加 getter 和 setter 属性
当 Vue Component render 函数被执行的时候, data 上会被触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新

014.谈谈你对虚拟DOM的理解？

首先,我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手,因此我们需要这一层抽象,在patch过程中尽可能地一次性将差异更新到DOM中,这样保证了DOM不会出现性能很差的情况.

其次,现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动DOM操作可以大大提高开发效率.

015.Vue 中 key 值的作用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟DOM。

016.vue 中怎么重置 data?

使用Object.assign()，vm. $d a t a 可以获取当前状态下的 d a t a ， v m .$ options.data可以获取到组件初始化状态下的data。
Object.assign(this.$data, this.$options.data())

017.组件中写 name 选项有什么作用？

项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
DOM 做递归组件时需要调用自身 name
vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

018.为什么需要 nextTick?

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

019.vue 首屏加载优化方案

把不常改变的库放到 index.html 中，通过 cdn 引入
vue 路由的懒加载
不生成 map 文件（找到 config/index.js，修改为 productionSourceMap: false）
vue 组件尽量不要全局引入
使用更轻量级的工具库
开启gzip压缩
首页单独做服务端渲染

020.Vue3.0 有没有过了解？

关于Vue 3.0，大致说了三个点，第一个是关于提出的新API setup()函数，第二个说了对于Typescript的支持，最后说了关于替换Object.defineProperty为 Proxy 的支持。

详细说了下关于Proxy代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用Proxy又带来了浏览器兼容问题。

021.说一下Vue的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

022.NextTick 是做什么的?

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

023.Vue 组件 data 为什么必须是函数?

因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了

024.计算属性computed 和事件 methods 有什么区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值
对于 method ，只要发生重新渲染，method 调用总会执行该函数

025.vue 等单页面应用的优缺点：

优点：

良好的交互体验
良好的前后端工作分离模式
减轻服务器压力

缺点：

SEO难度较高
前进、后退管理
初次加载耗时多

026.vue生命周期

vue的生命周期主要分为beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy,destroyed

创建前后、载入前后、更新前后、销毁前后
Vue 生命周期与钩子函数

027.Vue 导航守卫(路由的生命周期)

全局的

router.beforeEach
router.beforeResolve
router.afterEach

单个路由独享的

beforeEnter

组件级的

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

Vue 导航守卫(路由的生命周期)

028.常见的跨域解决方案

前端配置webpack.config.js
后端配置
jsonp（只能解决get）

步骤： 1).去创建一个script标签 2).script的src属性设置接口地址 3).接口参数，必须要带一个自定义函数名，要不然后台无法返回数据 4).通过定义函数名去接受返回的数据

常见的跨域解决方案

029.什么是webpack及其优点

打包：可以把多个JavaScript文件打包成一个文件，减少服务器压力和下载宽带
转换：把扩展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：肩负起了优化和提升性能的责任

030.Vue中项目如何优化？

data优化
SPA首屏加载优化
组件优化
巧妙利用指令v-if(show)，使用v-for要绑定key
使用Object.freeze
路由懒加载
动态导入组件
图片懒加载
第三方模块按需导入
骨架屏
PWA缓存
预渲染
服务端渲染SSR
缓存和压缩
HTTP优化

031.Vue递归组件的使用

递归组件

032.Vue的mode中hash与history的区别

hash模式重新加载的时候只加载#后面的
history模式则是整个地址重新加载，不过他可以保存历史记录，方便前进后退

vue-router 有 3 种路由模式：hash、history、abstract

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

033.vue中常用的命令

v-if v-show区别
v-for
v-model
v-bind
v-on

034.Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序？

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

035.在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；
ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

036.组件中 data 为什么是一个函数？

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响。

如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

037.Vue组件间通信有哪几种方式？

props
$emit
$attr
$listener
provide inject (隔代通信)
$parent $children
vuex

038.Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
Object.defineProperty 的优势如下:
兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

039.虚拟 DOM 的优缺点？

优点：

保证性能下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台：虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。
缺点：
无法进行极致优化：虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

040.虚拟 DOM 实现原理？

虚拟 DOM 的实现原理主要包括以下 3 部分：

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

041.vue插槽的使用？

默认插槽
具名插槽
作用域插槽

042.active-class是哪个组件的属性？

vue-router模块的router-link组件。

043.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id。

044.vue-loader是什么？使用它的用途有哪些？

vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等根据官网的定义，
vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件.

045.为什么避免 v-if 和 v-for 用在一起？

当Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中。通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

046.vue中Class 与 Style 如何动态绑定？

Vue Class与Style绑定

047.怎样理解 Vue 的单向数据流？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

048.直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

049.vue.js的核心是什么？

数据驱动（响应式）：data中的数据变了，视图才会变
组件化：拆组装，目的在于重用，方便，脏活累活一次干完，之后就轻松了

050.vue的常用修饰符？

事件修饰符：
.stop stopPropagation 阻止冒泡
.prevent preventDefault 阻止默认行为
.self 事件作用在自己身上才触发
.once 事件只触发一次
键盘修饰符
.enter 回车键
.esc 退出键
v-model 指令修饰符
.lazy 由监听oninput事件转为onchange事件
.number 尽量将文本框中的值转为数字，能转就转，不能转就不转
.trim 去掉字符串的首尾空格

051.VUE和REACT有什么区别？

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流；
vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

052.请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件；

053.单页面应用和多页面应用区别及优缺点？

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
前后端分离
页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：
初次加载时耗时多
页面复杂度提高很多
导航不可用，如果一定要导航需要自行实现前进、后退。

054.vue-router单页面应用的切换？

在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。

055.为什么不能用a标签？

至于为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，必须使用vue-router来进行管理。

056.Vue双向数据绑定实现原理？

057.vue两个核心点是什么？

数据驱动
组件系统

058.Vue不能检测数组或对象变动问题的解决方法有哪些？

使用Proxy

HTTP面试题

004.HTTP的请求与响应

请求：
- 请求行，GET/HTTP/1.1
- 请求头，非常多
- 请求正文，扔给服务器的数据
响应：
- 响应行，HTTP/1.1 200 OK
- 响应头，非常多
- 响应正文，服务器扔给客户端的数据

005.HTTP状态码

1xx
- 101（双向通信）
2xx
- 200（成功）
- 204（没有响应体）
- 206（断点续传）
3xx
- 301（永久重定向）
- 302（临时重定向）
- 304（缓存）
4xx
- 401（没有权限）
- 403（登陆了没有权限）
- 404（找不到对应的资源）
- 405（请求方法不存在，不支持）
5xx
- 502（负载均衡）

006.HTTP中的请求方法（8种）

HTTP协议简介

007.HTTP优化策略（博客）

压缩和缓存
HTTP前端性能优化(压缩与缓存)

008.HTTP中的头（重点）

请求头：
- accept-encoding 告诉服务器，我接收的数据支持压缩格式
- if-modified-since 对比缓存修改时间
- if-none-match 摘要缓存和Etag配对使用的
- user-agent 不同设备自动带上这个头判断什么样的设备，重定向到不同项目
响应头：
- Content-Type 告诉浏览器我给你的内容的类型
- Content-Encoding 告诉浏览器我给你的内容的压缩格式
- Cache-Control 强制缓存告诉浏览器，你多长时间之间，不要来访问我
- Expires 强缓告诉浏览器，你多长时间之间，不要来访问我
- Last-Modified 对比缓存和 if-modified-since 配对使用
- Etag 根据摘要做缓存和 if-none-match 配对使用
- Lotaion 重定向到某个地方

009.HTTP中的代理

010.http和https有什么不同？

https：是以安全为目标的HTTP通道，简单讲是HTTP的安全版本，通过SSL加密
http：超文本传输协议。是一个客服端和服务器端请求和应答的标准（tcp）,使浏览器更加高效，使网络传输减少

011.localStorage, sessionStorage, cookie, session有什么区别？

localStorage 不能跨域存取最大存5M 超过5M的数据就会丢失在发送请求时，不会带上localStorage
sessionStorage 当浏览器关闭时，里面的数据就丢失
cookie 服务器种植的，每次请求都会带上cookie，不安全，解决无状态问题，最多4K，浪费流量
session 基于cookie 保存在服务器（内存，入库）相对安全

前后端分离（前端调后端api接口）开发的：cookie，主流：session 或 JWT

012.从输入一个网址到浏览器显示页面的全过程？

1.DNS解析，找到IP地址
2.根据IP地址，找到对应的服务器
3.建立TCP连接(里面有个三次握手)
4.连接建立后，发出HTTP请求
5.服务器根据请求作出HTTP响应
6.浏览器得到响应内容，进行解析与渲染，并显示
7.断开连接(四次挥手)

从输入一个网址到浏览器显示页面的全过程详细分析

013.简单说一下三次握手与四次挥手，为什么一个三次，一个四次？

TCP 三次握手与四次挥手

014.说一下web缓存？

1.web缓存就是存在于客户端与服务器之间的一个副本、当你第一个发出请求后，缓存根据请求保存输出内容的副本
2.缓存的好处
（1）减少不必要的请求
（2）降低服务器的压力，减少服务器的消耗
（3）降低网络延迟，加快页面打开速度（直接读取浏览器的数据）

015.常见的web安全及防护原理？

sql注入原理：是将sql代码伪装到输入参数中，传递到服务器解析并执行的一种攻击手法。
XSS（跨站脚本攻击）：往web页面插入恶意的html标签或者js代码。
CSRF(跨站请求伪装）：通过伪装来自受信任用户的请求

JS面试题

JS中的方法（重中之重）

https://juejin.im/post/5d3bd7c9e51d45777a126290

JS中的继承

https://juejin.im/post/5d385644e51d4510a73281a1

001.Promise原理(**)？

答：看代码，参考：https://juejin.im/post/5b2f02cd5188252b937548ab

002.then可以链式调用，多个then时，如何走到下一个then的失败回调？

答：1.返回一个失败的promise。2.抛出一个错误(throw new Error())

003.then可以链式调用，多个then时，如何终止下一个then的调用？

答：返回一个处于pending(等待态)状态的promise

004.js的异步解决方案有哪些(**)？

答：

回调函数（嵌套，回调地狱，不优雅）
Promise
Generator+co （co可以解决promise嵌套问题，generator+promise(promise嵌套问题)）
async+await：是Generator的语法糖

005.把一个伪数组变成真实的数组？

答：

[…obj]，需要保证obj是可迭代的
Array.from不需要保证obj是否迭代，内部会使它可迭代

006.使用过ES6中哪些新语法(** 熟练使用ES6语法)？

答：

结构赋值 [] {}
展开运算符（…args）(考察深拷贝，浅拷贝)
Set：常用于数组去重
Map：里面存储唯一的值

深拷贝实现的一种方式：JSON.parse(JSON.strinfy(obj));

ES6 新增内容总结

007.实现深拷贝（重点）浅拷贝？

理解JS中的浅拷贝与深拷贝

function deepClone(source) {
    const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
    for (let keys in source) { // 遍历目标
        if (source.hasOwnProperty(keys)) {
            if (source[keys] && typeof source[keys] === 'object') { // 如果值是对象，就递归一下
                targetObj[keys] = source[keys].constructor === Array ? [] : {};
                targetObj[keys] = deepClone(source[keys]);
            } else { // 如果不是，就直接赋值
                targetObj[keys] = source[keys];
            }
        }
    }
    return targetObj;
}

var str1 = {
    arr: [1, 2, 3],
    obj: {
        key: 'value'
    },
    fn: function () {
        return 1;
    }
};
var str3 = deepClone(str1);

console.log(str3 === str1); // false
console.log(str3.obj === str1.obj); // false
console.log(str3.fn === str1.fn); // true

008.求数组的交集、并集、差集？

答：

//-----------------------------------------并集
// let arr1 = [1, 2, 3, 4]
// let arr2 = [3, 4, 5, 6]

//并集
// function union(arr1, arr2) {
//     // let s1 = new Set(arr1)
//     // let s2 = new Set(arr2)
//     // let s = new Set([...s1,...s2])
//     // return [...s]

//     let s = new Set([...arr1,...arr2])
//     return [...s]
// }

// console.log(union(arr1,arr2));  //[ 1, 2, 3, 4, 5, 6 ]

//-----------------------------------------交集
// let arr1 = [1, 2, 3, 4]
// let arr2 = [3, 4, 5, 6]

// //交集
// function intersection(arr1,arr2){
//     let s1 = new Set(arr1)
//     let s2 = new Set(arr2)
//     return [...s1].filter(item=>{
//         return s2.has(item)
//     })
// }

// console.log(intersection(arr1,arr2))    //[ 3, 4 ]

//-----------------------------------------差集
// let arr1 = [1, 2, 3, 4]
// let arr2 = [3, 4, 5, 6]

// function difference(arr1,arr2){
//     let s1 = new Set(arr1)
//     let s2 = new Set(arr2)
//     return [...s1].filter(item=>{
//         return !s2.has(item)
//     })
// }

// console.log(difference(arr1,arr2))      //[ 1, 2 ]

009.ES6中的模块化？

答： https://juejin.im/post/5d3eb1b6f265da03c23eacc2#heading-44

ES6 的模块化分为导出（export） @与导入（import）两个模块。

as 的用法

010.模块化的发展流程？

011.JS中的闭包

012.浏览器事件环 (宏、微任务)

JS(浏览器)事件环 (宏、微任务)

013.ES6新增了哪些内容，简单说一下

ES6 新增内容总结

014.对JS原型和原型链的理解？

JavaScript 原型与原型链

015.对JS作用域和作用域链的理解？

JavaScript 作用域与作用域链

016.JS中new究竟做了什么？

1.创建对象
2.绑定this
3.链接到原型
4.返回对象
JS中 new究竟做了什么？

017.JS中this到底指向谁？怎么改变this指向？

谁调用了包含this的方法，那么this就指向谁
JS中的 this 到底指向谁？

改变this，可以用call、apply、bind，他们之间的区别？
JS中改变this的指向 call、apply 和 bind 的区别

018.TS主要是干什么的？

简单地说，TS就是增加了重要的类型检测机制，添加了很多类型，可以用来写大型项目。
布尔值、数字、字符串、数组、元组、枚举、any、void、null、undefined、never、object、类型断言

项目相关

001.适配？

cube里面自带适配，不需要上面的适配，如果用别的UI库，需要使用REM+Flex适配方案

002.首页白屏怎么解决？

1，把首页做服务端渲染 SEO nuxt.js写项目　　
2，预渲染数据还没有回来前，先返回的一些死数据，多用在首页面的内部经常不变　　
3，骨架屏配置

003.封装axios？

004.管理状态(数据)

多个组件需要使用的状态，放到vuex仓库中
单个组件使用的状态，放到data中

005.来回切换tabbar时，不能重新请求数据

使用路由钩子

006.来回切换tabbar时，需要加上动画

使用vue中的动画

007.把数据缓存到内存中，避免再次去请求接口

使用vue中keep-alive组件

008.有的页面需要缓存，有的不需要怎么办？

可以在路由处加标识

009.在一个页面中滑倒中间位置，如果切换页面，再切换回去，应该还是处于中间位置怎么办？

当切换的时候，把位置保存起来，再切换回去的时候，让他还处于那个位置

010.对于一个app来说，有的页面需要登录后才能看到，有的则不需要怎么办？

在路由处配标识

011.怎么验证登录？

1.验证是否登录过，如果登录过，服务器会返回客户端一个token
2.客户端把token保存在localStorage中，后面客户再去请求服务器，会在请求拦截那里带上token
3.如果调用/validata接口时，如果你带着token去访问这个接口，就返回你已登录，如果你没有带上token，就给你返回未登录。

非技术性问题

请你做一下自我介绍？

回答提示：一般人回答这个问题过于平常，只说姓名、年龄、爱好、工作经验，这些在简历上都有。其实，企业最希望知道的是求职者能否胜任工作，包括：最强的技能、最深入研究的知识领域、性格中最积极的部分、做过的最成功的事，主要的成就等，这些回答关于学习或者生活都可以，但要突出积极的个性和做事的能力，说得合情合理企业才会相信。企业很重视一个人的礼貌，求职者要尊重考官，要在自我介绍结束后说一句“谢谢”。

你觉得你最大的优点是什么？

回答提示：沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。我在LAMP兄弟连经过五个月的高强度培训及项目实战，使我适合这份工作。要例举具体的优点，如：做事认真、抗压能力强、乐于助人、学习能力强等，然后要举实例证明这也是最重要的一点。

说说你最大的缺点？

回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么，如果求职者说自己有强迫症、爱忌妒人、非常懒、脾气大、工作效率低，那么肯定不会被企业录用。绝对不要自作聪明地回答“我最大的缺点是过于追求完美”，有的人以为这样回答会显得自己比较出色，但事实上，他已经岌岌可危了。企业喜欢求职者从自己的优点说起，中间加一些小缺点，最后再把问题转回到优点上，突出优点的部分。回答样本：我平时比较爱忘事，然后我通过写便条来提醒我自己什么时候该做什么事。

你对加班的看法？

回答提示：实际上好多公司问这个问题，并不证明一定要加班，只是想测试你是否愿意为公司奉献。
回答样本：如果是工作需要我会义不容辞加班，我现在单身，没有任何家庭负担，可以全身心的投入工作。但同时，我也会提高工作效率，减少不必要的加班。

如何安排自己的时间？会不会排斥加班？

回答提示：基本上，如果上班工作有效率，工作量合理的话，应该不太需要加班。可是我也知道有时候很难避免加班，加上现在工作都采用责任制，所以我会调配自己的时间，全力配合。
分析：虽然不会有人心甘情愿的加班，但依旧要表现出高配合度的诚意。

在五年的时间内，你的职业规划？

回答提示：一般公司高管或者副总喜欢问个人职业规划方面的问题。当然，说出其他一些你感兴趣的职位也是可以的，比如产品销售部经理，生产部经理等一些与你的专业有相关背景的工作。要知道，考官总是喜欢有进取心的应聘者，此时如果说“不知道”，或许就会使你丧失一个好机会。最普通的回答应该是“我准备在技术领域有所作为”或“我希望能按照公司的管理思路发展”。能把职业规划分成几部分去完成，比如1个月、三个月、半年、1年以至3年的具体发展目标和实施方案。

你的朋友是如何评价你的？

回答提示：面试官想从侧面了解一下你的性格及与人相处的问题。
回答样本一：我的朋友都说我是一个可以信赖的人。因为，我一旦答应别人的事情，就一定会做到。如果我做不到，我就不会轻易许诺。
回答样本二：我觉的我是一个比较随和的人，与不同的人都可以友好相处。在我与人相处时，我总是能站在别人的角度考虑问题。

你还有什么要问我的吗？

回答提示：企业的这个问题看上去可有可无，其实很关键，企业不喜欢说“没问题”的人，因为其很注重员工的个性和创新能力。企业不喜欢求职者问个人福利之类的问题，如果有人这样问：咱公司对新入公司的员工有没有什么培训项目，我可以参加吗？或者说咱公司的晋升机制是什么样的？公司希望我以后向什么方向发展？企业将很欢迎，因为体现出你对学习的热情和对公司的忠诚度以及你的上进心。

你对薪资的要求？

回答提示：如果你对薪酬的要求太低，那显然贬低自己的能力；如果你对薪酬的要求太高，那又会显得你分量过重，公司受用不起。一些雇主通常都事先对求聘的职位定下开支预算，因而他们第一次提出的价钱往往是他们所能给予的最高价钱，他们问你只不过想证实一下这笔钱是否足以引起你对该工作的兴趣。
回答样本一：我对工资没有硬性要求，我相信贵公司在处理我的问题上会友善合理。我注重的是找对工作机会，所以只要条件公平，我则不会计较太多。
回答样本二：我受过系统的软件编程的训练，不需要进行大量的培训，而且我本人也对编程特别感兴趣。因此，我希望公司能根据我的情况和市场标准的水平，给我合理的薪水。
回答样本三：如果你必须自己说出具体数目，请不要说一个宽泛的范围，那样你将只能得到最低限度的数字。最好给出一个具体的数字，这样表明你已经对当今的人才市场作了调查，而且自己具有这方面的价值。

为什么选择我们这家公司？

回答提示：曾经在报章杂志看过关于公司的报道，与自己所追求的理念有志一同。而贵公司在业界的成绩也是有目共睹的，而且对员工的教育训练、升迁等也都很有制度。并具体详谈你调查到的内容会让面试官觉得你很用心。
分析：去面试前先做功课，了解一下该公司的背景，让对方觉得你真的很有心想得到这份工作，而不只是探探路。

谈谈你对跳槽的看法？

回答提示：①我认为跳槽应该是进入到更好的企业和更大的平台，而不是在公司待几个月就认为公司同事关系不好，自己发展有瓶颈就跳槽，这样换工作是无意义的。②频繁的跳槽对单位和个人双方都不利，应该反对。

谈谈如何适应新的工作环境？

回答提示①办公室里每个人有各自的岗位与职责，不得擅离岗位。②根据领导指示和工作安排，制定工作计划，提前预备，并按计划完成。③多请示并及时汇报，遇到不明白的要虚心请教。④抓间隙时间，多学习，努力提高自己代码质量和代码规范性。

你来我们公司做前端可以吗？

回答提示：面试者在考验面试者是否对所述职位专一时，如果面试者过多表现在前端上的技能，那面试官就会用这个问题问你，如果你回答可以，那么面试官会认为你求职目标不明确，从而不会要你继续面试。

假设你在某单位工作，成绩比较突出，得到领导的肯定。但同时你发现同事们越来越孤立你，你怎么看这个问题？你准备怎么办？

回答提示：①成绩比较突出，得到领导的肯定是件好事情，以后更加努力。②检讨一下自己是不是对工作的热心度超过同事间交往的热心了，加强同事间的交往及共同的兴趣爱好。③工作中，切勿伤害别人的自尊心④不再领导前拨弄是非。

请说说你对我们公司了解多少？

回答提示：在去公司面试前上网查一下该公司主营业务（公司官网、百度-新闻、招聘网站）或者向公司内的学长咨询（向就业专员要电话）。如回答：贵公司有意改变策略，加强与国外大厂的OEM合作，自有品牌的部分则透过海外经销商。

请说出你选择这份工作的目的？

回答提示：这是想知道面试者对这份工作的热忱及理解度，并筛选因一时兴起而来应试的人，如果是无经验者，可以强调“就算职种不同，也希望有机会发挥之前的经验”。包括对面试官的了解和团队的了解都是面试之前应该了解的。

你能为我们公司带来什么呢？

回答提示：①假如你可以的话，试着告诉他们你可以减低他们的培养费用——“我已经接受过LAMP兄弟连五个月的高强度培训，立刻就可以上岗工作”。② 企业很想知道未来的员工能为企业做什么，求职者应再次重复自己的优势，然后说：“就我的能力，我可以做一个优秀的员工在组织中发挥能力，给组织带来高效率和更多的收益”。③给公司带来活力，“我更加积极、更加努力、更加有朝气。”

怎样看待学历和能力？

回答提示：学历不一定完全代表能力，虽然我的学历不够硬但是我会在技术上更努力更认真，并在短期内发挥自己的优势，把公司项目做的更好。

你的业余爱好是什么？

回答提示：找一些富于团体合作精神的，这里有一个真实的故事：有人被否决掉，因为他的爱好是深海潜水。主考官说：因为这是一项单人活动，我不敢肯定他能否适应团体工作。或者看技术论坛，会给工作带来新的思路，或者看关于数据库优化/数据原理的书籍。

作为被面试者请你给我打一下分？

回答提示：试着列出四个优点和一个非常非常非常小的缺点（可以抱怨一下设施，没有明确责任人的缺点是不会有人介意的）。

你怎么理解PHP这个职位？

回答提示：把岗位职责和任务及工作态度阐述一下，更多的说PHP发展和优势以及你学习PHP的原因。比如：PHP语言上的应用发展，PHP最大特点就是语法灵活，开发速度快，开发成本低，最适合开发业务流程，所以互联中使用PHP开发动态网站将成为主流。

喜欢这份工作的哪一点？

回答提示：每个人的价值观不同，自然评断的标准也会不同，但是，在回答面试官这个问题时可不能太直接就把自己心理的话说出来，尤其是薪资方面的问题，不过一些无伤大雅的回答是不错的考虑，如交通方便，工作性质及内容颇能符合自己的兴趣等等都是不错的答案，不过如果这时自己能仔细思考出这份工作的与众不同之处，相信在面试上会大大加分。

对工作的期望与目标何在？

回答提示：就是职业规划的另一种问法，也是公司在以后培养你的方向上的选择。可以提一些具体的想法和做法。让上级认为你之前考虑过这个事，而且重视自己的职业发展。

就你申请的这个职位，你认为你还欠缺什么？

回答提示：企业喜欢问求职者弱点，他们希望看到这样的求职者：继续重复自己的优势，然后说：“对于这个职位和我的能力来说，我相信自己是可以胜任的，只是缺乏经验，这个问题我想我可以进入公司以后以最短的时间来解决，我的学习能力很强，我相信可以很快融入公司的企业文化，进入工作状态。”企业喜欢能够巧妙地躲过难题的求职者。

你通常如何处理別人的批评？

回答提示：①沈默是金，不必说什么，否则情况更糟，不过我会接受建设性的批评。②我会等大家冷靜下来再讨论，反思自己是否有这方面问题并进行完善。

怎样对待自己的失敗？

回答提示：我认为失败不是坏事，一件事情没有成功肯定是我做的地方有不是，我觉得能积极面对失败并总结经验成功就指日可待。

什么会让你有成就感？

回答提示：为公司竭力效劳，尽我所能，完成一个项目，并且能提出自己的创新想法。

眼下你生活中最重要的是什么？

回答提示：对我来说，能在这个领域找到工作是最重要的，能在公司任职对我说最重要。

你为什么愿意到我们公司来工作？

回答提示：对于这个问题，你要格外小心，如果你已经对该单位作了研究，你可以回答一些详细的原因，像“公司本身的高技术开发环境很吸引我。”我希望能够进入一家与我共同成长的公司”，“你们公司一直都稳定发展，在近几年来在市场上很有竞争力”，“我认为公司能够给我提供一个与众不同的发展道路。”这都显示出你已经做了一些调查，也说明你对自己的未来有了较为具体的远景规划。

你和别人发生过争执吗？你是怎样解决的？

回答提示：这是面试中最险恶的问题，其实是考官布下的一个陷阱，千万不要说任何人的过错，应知成功解决矛盾是一个协作团体中成员所必备的能力。基本上没有和他人产生矛盾，首先有矛盾就是因为大家对同一个问题有不同的解决方案，把方案里的优秀点统一起来就是最佳解决方案。你是否能获得这份工作，将取决于这个问题的回答。考官希望看到你是成熟且乐于奉献的。他们通过这个问题了解你的成熟度和处世能力。在没有外界干涉的情况下，通过妥协的方式来解决才是正确答案。

你做过的哪件事最令自己感到骄傲？

回答提示：这是考官给你的一个机会，让你展示自己把握命运的能力。这会体现你潜在的领导能力以及你被提升的可能性。记住：你的前途取决于你的知识、你的社交能力和综合表现。

想过创业吗？

回答提示：这个问题可以显示你的冲劲，但如果你的回答是“有”的话，千万小心，下一个问题可能就是：那么为什么你不这样做呢？而且HR会觉得你在公司的稳定性弱，所以有或者没有不要马上说出来。

对这项工作，你有哪些可预见的困难？

回答提示：①不宜直接说出具体的困难，否则可能令对方怀疑应聘者不行。②可以尝试迂回战术，说出应聘者对困难所持有的态度——工作中出现一些困难是正常的，也是难免的，但是只要有坚忍不拔的毅力、良好的合作精神以及事前周密而充分的准备，任何困难都是可以克服。
分析：一般问这个问题，面试者的希望就比较大了，因为已经在谈工作细节，但常规思路中的回答，又被面试官“骗”了。当面试官询问这个问题的时候，有两个目的。一是看看应聘者是不是在行，说出的困难是不是在这个职位中一般都不可避免的问题。二是想看一下应聘者解决困难的手法对不对，及公司能否提供这样的资源。而不是想了解应聘者对困难的态度。

如果我录用你，你将怎样开展工作？

回答提示： ①如果应聘者对于应聘的职位缺乏足够的了解，最好不要直接说出自己开展工作的具体办法。②可以尝试采用迂回战术来回答，如“首先听取领导的指示和要求，然后就有关情况进行了解和熟悉，接下来制定一份近期的工作计划并报领导批准，最后根据计划开展工作。”
分析：这个问题的主要目的也是了解应聘者的工作能力和计划性、条理性，而且重点想要知道细节。如果向思路中所讲的迂回战术，面试官会认为回避问题，如果引导了几次仍然是回避的话，此人绝对不会录用了。

你希望与什么样的上级共事？

回答提示：①通过应聘者对上级的“希望”可以判断出应聘者对自我要求的意识，这既上一个陷阱，又是一次机会。②最好回避对上级具体的希望，多谈对自己的要求。③如“做为刚步入社会的新人，我应该多要求自己尽快熟悉环境、适应环境，而不应该对环境提出什么要求，只要能发挥我的专长就可以了。
分析：这个问题比较好的回答是，希望我的上级能够在工作中对我多指导，对我工作中的错误能够立即指出。总之，从上级指导这个方面谈，不会有大的纰漏。

与上级意见不一致时，你将怎么办？

回答提示：①一般可以这样回答“我会给上级以必要的解释和提醒，在这种情况下，我会服从上级的意见。”②如果面试你的是总经理，而你所应聘的职位另有一位经理，且这位经理当时不在场，可以这样回答：“对于非原则性问题，我会服从上级的意见，对于涉及公司利益的重大问题，我希望能向更高层领导反映。”
分析：这个问题的标准答案是思路①，如果用②的回答，必死无疑。你没有摸清楚改公司的内部情况，先想打小报告，这样的人没有人敢要。

您在前一家公司的离职原因是什么？

回答提示：避免把“离职原因”说得太详细、太具体。尽量说原单位给你带来的提升，体现出感恩的心态，而不能抱怨公司哪里不好。
相关例子：如“我离职是因为这家公司倒闭；我在公司工作了三年多，有较深的感情；从去年始，由于市场形势突变，公司的局面急转直下；到眼下这一步我觉得很遗憾，但还要面对显示，重新寻找能发挥我能力的舞台。”同一个面试问题并非只有一个答案，而同一个答案并不是在任何面试场合都有效，关键在应聘者掌握了规律后，对面试的具体情况进行把握，有意识地揣摩面试官提出问题的心理背景，然后投其所好。

你工作经验欠缺，如何能胜任这项工作？

回答提示：①如果招聘单位对应届毕业生的应聘者提出这个问题，说明招聘公司并不真正在乎“经验”，关键看应聘者怎样回答。②对这个问题的回答最好要体现出应聘者的诚恳、机智、果敢及敬业。③如“作为应届毕业生，在工作经验方面的确会有所欠缺，因此在读书期间我一直利用各种机会在这个行业里做兼职。我也发现，实际工作远比书本知识丰富、复杂。但我有较强的责任心、适应能力和学习能力，而且比较勤奋，所以在兼职中均能圆满完成各项工作，从中获取的经验也令我受益非浅。请公司放心，学校所学及兼职的工作经验使我一定能胜任这个职位。”
分析：这个问题思路中的答案尚可。突出自己的吃苦能力和适应性以及学习能力（不是学习成绩）为好。

如果你在这次面试中没有被录用，你怎么打算？

回答提示：现在的社会是一个竞争的社会，从这次面试中也可看出这一点，有竞争就必然有优劣，有成功必定就会有失败。往往成功的背后有许多的困难和挫折，如果这次失败了也仅仅是一次而已，只有经过经验经历的积累才能塑造出一个完全的成功者。我会从以下几个方面来正确看待这次失败：①要敢于面对，面对这次失败不气馁，接受已经失去了这次机会就不会回头这个现实，从心理意志和精神上体现出对这次失败的抵抗力。要有自信，相信自己经历了这次之后经过努力一定能行，能够超越自我。②善于反思，对于这次面试经验要认真总结，思考剖析，能够从自身的角度找差距。正确对待自己，实事求是地评价自己，辩证的看待自己的长短得失，做一个明白人。③主要是技术上哪里薄弱，把不足的技术抓紧时间攻克。

谈谈你做过的项目？

回答提示：举一个你最有把握的例子，把来龙去脉说清楚，而不要说了很多却没有重点。切忌夸大其词，把别人的功劳到说成自己的，很多主管为了确保要用的人是最适合的，会打电话向你的前一个主管征询对你的看法及意见，所以如果说谎，是很容易穿梆的。

谈谈你过去的工作中，最令你受挫的事情？

回答提示：如果是学生可以用竞赛里的名次来举例；如果是员工可以以工作中自己努力而又没有做成功的项目来举例。分析：该问题的目的是借此了解你对挫折的容忍度及调解方式。

你觉得原来的工作对你从事PHP开发有帮助吗？

回答提示：这是针对求职者提出的问题，建议此时可以配合面试工作的特点作为主要依据来回答，如业务工作需要与人沟通，便可举出之前工作与人沟通的例子，经历了哪些困难，学习到哪些经验，把握这些要点做陈述，就可以轻易过关了。

工作中你难以和同事、上司相处，你该怎么办？

回答提示：①我会服从领导的指挥，配合同事的工作。②我会从自身找原因，仔细分析是不是自己工作做得不好让领导不满意，同事看不惯。还要看看是不是为人处世方面做得不好，如果是这样的话我会努力改正。③如果我找不到原因，我会找机会跟他们沟通，请他们指出我的不足，有问题就及时改正。④作为优秀的员工，应该时刻以大局为重，即使在一段时间内，领导和同事对我不理解，我也会做好本职工作，虚心向他们学习，我相信，他们会看见我在努力，总有一天会对我微笑的。

如果通过这次面试我们单位录用了你，但工作一段时间却发现你根本不适合这个职位，你怎么办？

回答提示：工作一段时间后发现工作不适合你，有两种情况：①如果你确实热爱PHP程序员这个职业，那你就要不断学习，虚心向领导和同事学习业务知识和处事经验，了解这个职业的精神内涵和职业要求，力争减少差距；②你觉得这个职业可有可无，那还是趁早换个职业，去发现适合你的，你热爱的职业，那样你的发展前途也会大点，对单位和个人都有好处。而且我会推荐更适合PHP职位的人选。

在完成某项工作时，你认为领导要求的方式不是最好的，自己还有更好的方法，你应该怎么做？

回答提示：①原则上我会尊重和服从领导的工作安排，同时私底下找机会以请教的口吻，婉转地表达自己的想法，看看领导是否能改变想法。②如果领导没有采纳我的建议，我也同样会按领导的要求认真地去完成这项工作。③还有一种情况，假如领导要求的方式违背原则，我会坚决提出反对意见，如领导仍固执己见，我会毫不犹豫地再向上级领导反映。

如果你的工作出现失误，给本公司造成经济损失，你认为该怎么办？

回答提示：①我本意是为公司努力工作，如果造成经济损失，我认为首要的问题是想方设法去弥补或挽回经济损失。如果我无能力负责，希望公司帮助解决。②分清责任，各负其责，如果是我的责任，我甘愿受罚；如果是一个我负责的团队中别人的失误，也不能幸灾乐祸，作为一个团队，需要互相提携共同完成工作，安慰同事并且帮助同事查找原因总结经验。③总结经验教训，一个人的一生不可能不犯错误，重要的是能从自己的或者是别人的错误中吸取经验教训，并在今后的工作中避免发生同类的错误。检讨自己的工作方法、分析问题的深度和力度是否不够，以致出现了本可以避免的错误。

如果你做的一项工作受到上级领导的表扬，但你主管领导却说是他做的，你该怎样？

回答提示：我首先不会找那位上级领导说明这件事，我会主动找我的主管领导来沟通，因为沟通是解决人际关系的最好办法，但结果会有两种：①我的主管领导认识到自己的错误，我想我会视具体情况决定是否原谅他。②他更加变本加厉的来威胁我，那我会毫不犹豫地找我的上级领导反映此事，因为他这样做会造成负面影响，对今后的工作不利。

面试中注意的问题

1、基本注意事项
（1）要谦虚谨慎。面试和面谈的区别之一就是面试时对方往往是多数人，其中不乏专家、学者，求职者在回答一些比较有深度的问题时，切不可不懂装懂，不明白的地方就要虚心请教或坦白说不懂，这样才会给用人单位留下诚实的好印象。
（2）要机智应变。当求职者一人面对众多考官时，心理压力很大，面试的成败大多取决于求职者是否能机智果断，随机应变，能当场把自己的各种聪明才智发挥出来。首先，要注意分析面试类型，如果是主导式，你就应该把目标集中投向主考官，认真礼貌地回答问题；如果是答辩式，你则应把目光投向提问者，切不可只关注甲方而冷待乙方；如果是集体式面试，分配给每个求职者的时间很短，事先准备的材料可能用不上，这时最好的方法是根据考官的提问在脑海里重新组合材料，言简意赅地作答，切忌长篇大论。其次要避免尴尬场面，在回答问题时常遇到这些情况：未听清问题便回答，听清了问题自己一时不能作答，回答时出现错误或不知怎么回答的问题时，可能使你处于尴尬的境地。避免尴尬的技巧是：对未听清的问题可以请求对方重复一遍或解释一下；一时回答不出可以请求考官提下一个问题，等考虑成熟后再回答前一个问题；遇到偶然出现的错误也不必耿耿于怀而打乱后面问题的思路。
（3）要扬长避短。每个人都有自己的特长和不足，无论是在性格上还是在专业上都是这样。因此在面试时一定要注意扬我所长，避我所短。必要时可以婉转地说明自己的长处和不足，用其他方法加以弥补。例如有些考官会问你这样的问题：“你曾经犯过什么错误吗？”你这时候就可以选择这样回答：“以前我一直有一个粗心的毛病，有一次实习的时候，由于我的粗心把公司的一份材料弄丢了，害的老总狠狠地把我批评了一顿。后来我经常和公司里一个非常细心的女孩子合作，也从她那里学来了很多处理事情的好办法，一直到现在，我都没有因为粗心再犯什么错。”这样的回答，即可以说明你曾经犯过这样的错误，回答了招聘官提出的问题，也表明了那样的错误只是以前出现，现在已经改正了。
（4）显示潜能。面试的时间通常很短，求职者不可能把自己的全部才华都展示出来，因此要抓住一切时机，巧妙地显示潜能。例如，应聘会计职位时可以将正在参加计算机专业的业余学习情况“漫不经心”地讲出来，可使对方认为你不仅能熟练地掌握会计业务，而且具有发展会计业务的潜力；报考秘书工作时可以借主考官的提问，把自己的名字、地址、电话等简单资料写在准备好的纸上，顺手递上去，以显示自己写一手漂亮字体的能力等。显示潜能时要实事求是、简短、自然、巧妙，否则也会弄巧成拙。
2、面试时如何消除紧张感
由于面试成功与否关系到求职者的前途，所以大学生面试时往往容易产生紧张情绪，有的大学生可能还由于过度紧张导致面试失败。所以紧张感在面试中是常见的。紧张是应考者在考官面前精神过度集中的一种心理状态，初次参加面试的人都会有紧张感觉，慌慌张张、粗心大意、说东忘西、词不达意的情况是常见的。那么怎样才能在面试时克服、消除紧张呢？
（1）要保持”平常心”。在竞争面前，人人都会紧张，这是一个普遍的规律，面试时你紧张，别人也会紧张，这是客观存在的，要接受这一客观事实。这时你不妨坦率地承认自己紧张，也许会求得理解。同时要进行自我暗示，提醒自己镇静下来，常用的方法是或大声讲话，把面对的考官当熟人对待；或掌握讲话的节奏；或握紧双拳、闭目片刻，先听后讲；或调侃两三句等等，都有助于消除紧张。
（2）不要把成败看得太重。”胜败乃兵家常事”要这样提醒自己，如果这次不成，还有下一次机会；这个单位不聘用，还有下一个单位面试的机会等着自己；即使求职不成，也不是说你一无所获，你可以在分析这次面试过程中的失败，总结经验，得出宝贵的面试经验，以新的姿态迎接下一次的面试。在面试时不要老想着面试结果，要把注意力放在谈话和回答问题上，这样就会大大消除你的紧张感。
（3）不要把考官看得过于神秘。并非所有的考官都是经验丰富的专业人才，可能在陌生人面前也会紧张，认识到这一点就用不着对考官过于畏惧，精神也会自然放松下来。面试官来面试你其实他也很紧张，如果招不到合适的人，老板就会扣他工资，所以他的压力也很大。因此，如果面试时你很紧张，那么这场面试一定很快就结束了。
（4）要准备充分。实践证明，面试时准备得越充分，紧张程度就越小。考官提出的问题你都会，还紧张什么？”知识就是力量”，知识也会增加胆量。面试前除了进行道德、知识、技能、心理准备外，还要了解和熟悉求职的常识、技巧、基本礼节，必要时同学之间可模拟考场，事先多次演练，互相指出不足，相互帮助、相互模仿，到面试时紧张程度就会减少。
（5）要增强自信心。面试时应聘者往往要接受多方的提问，迎接多方的目光，这是造成紧张的客观原因之一。这时你不妨将目光盯住主考官的脑门，用余光注视周围，既可增强自信心又能消除紧张感；在面试过程中，考官们可能交头接耳，小声议论，这是很正常的，不要把它当成精神负担，而应作为提高面试能力的动力，你可以想象他们的议论是对你的关注，这样你就可以增加信心，提高面试的成功的率；面试中考官可能提示你回答问题时的不足甚至错误，这也没有必要紧张，因为每个人都难免出点差错，能及时纠正就纠正，是事实就坦率承认，不合事实还可婉言争辩，关键要看你对问题的理解程度和你敢于和主考官争辩真伪的自信的程度。
3、面试时应注意的礼仪
（1）服饰要得体。就服饰而言，应聘者在去求职面试前，必须精心选择自己的服饰。那就是服饰要与自己的身材、身份相符，表现出朴实、大方、明快、稳健的风格。在面试时，着装应该符合时代、季节、场所、收入的程度，并且要与自己应聘的职业相协调，能体现自己的个性和职业特点。一般说来，服饰要给人以整洁、大方得体的感觉，穿着应以保守、庄重一点为好，不要追求时髦，浓妆艳抹，尤其是女生，如果衣着过于华丽，描眉搽粉，项链、耳环、戒指都戴上，这样会给用人单位一种轻浮的印象，影响面试的成绩女生的装束以朴实、庄重为好，男生则以整洁、干练为好。要注意提前理好自己的发型，如在夏季，男生可穿着整洁的衬衫或T 恤衫。另外，装束打扮一定要与谋求的职业相称，应与自己的兴趣、爱好、个性、习惯相符合，一个平时着装随便的人，突然间让他衣冠楚楚，他会感到拘谨、不自在。

（2）遵守时间。守时是现代交际时效观的一种重要原则，是作为一个社会人要遵守的最起码的礼仪。面试中，最忌的首先就是不守时，因为等待会使人产生焦急烦躁的情绪，从而使面谈的气氛不够融洽。有专家统计，求职面试迟到者获得录用的概率只有相当于不迟到者的一半。可见，守时这一礼仪在面试中的重要性。因此，面试时，千万不能迟到，而且最好能够提前十分钟到达面试地点，以有充分的时间调整好自己紧张的情绪，也表示求职的诚意。

（3）表情要自然，动作要得体。进门时，不要紧张，表情越自然越好，在对方没有请你坐下时切勿急于坐下，请你坐下时，应说声”谢谢”，坐下后要保持良好的坐姿，不要又是挠头皮、抠鼻孔，又是挖耳朵，或起二郎腿乱抖。对于女生来讲，动作更应得当，任何轻浮的表情或动作都可能会让招聘人员读你不满。另外各种手势语也要恰当得体、自然。

（4）要讲究文明礼貌。进门时应主动打招呼：“您好，我是某某”，如果是对方主动约自己面谈，一定要感谢对方给自己这样一个机会；如果是自己约对方面谈，一定要表示歉意“对不起，打扰您了”等等。面谈时要真诚地注视对方，表示对他的话感兴趣，决不可东张西望，心不在焉，不要不停地看手表，否则，显得不尊重对方。另外，对对方的谈话的反应要适度，要有呼应。他说幽默话时，你的笑声会增添他的兴致；他说话严肃认真时，你屏住呼吸则强化了气氛，这种反应要自然坦率，不能故意做作或大惊小怪地做出表情。

（5）保持安静。在等候面试时，不要到处走动，更不能擅自到考场外面张望，求职者之间的交谈也应尽可能地降低音量，避免影响他人应试或思考。最好的办法就是抓紧时间熟悉可能被提问的问题，积极做好应试准备。

（6）“听”的学问。首先，要耐心。对对方提起的任何话题，你都应耐心倾听，不能表现出心不在焉或不耐烦的神色，要尽量让对方兴致勃勃地讲完，不要轻易打断或插话；其次，要细心。也就是要具备足够的敏感性，善于理解对方的“弦外之音”，即从对方的言谈话语之间找出他没能表达出来的潜在意思，同时要注意倾听对方说话的语调和说话的每一个细节；再次，要专心。专心的目的是要抓住对方谈话的要点和实质，因此，你应该保持饱满的精神状态，专心致志地注视对方，并有表示听懂或赞同的声音或动作；如果对方提出的问题本身很明确，但你却没有完全理解，那么你可以以婉转诚恳的语言提出不明确的部分，对方会进一步解释的。这样既能弄清问题的要点和实质，又能给对方以专心致志的好印象；最后，要注意强化。要认真琢磨对方讲话的重点或反复强调的问题，必要时，你可以进行复述或提问，如：“我同意您刚才所提的……”、“您是不是说……”重复对方强调的问题，会使对方产生”酒逢知己千杯少”的感觉，往往会促进情感的融风

（7）交谈的学问。“听”有学问，“说”同样有学问。参加面谈的求职者不可避免地会不同程度地产生紧张情绪或羞怯心理，因此你谈话之前应尽可能地清除紧张、克服羞怯，并坦率、谦虚地告诉对方“对不起，我有点紧张”等，对方会理解你，甚至会安慰你，帮助你放松。承认紧张对推荐自己没有什么消极影响，反而会显示你实在、坦率和求职的诚意，这是良好交谈的第一步。其次，采用呼应式的交谈，并巧妙地引导话题。求职面谈既不同于当众演讲，又不同于自言自语，而在于相互间的呼应。成功的对话是一个相互应答的过程，自己每一句话都应是对方上一句话的继续，并给对方提供发言的余地，还要注意巧妙地引导话题。如当所谈内容与求职无关，而对方却大谈特谈时，你可以说:“这件事很有意思，以后一定向您请教。现在我有个问题不明白……”，从而巧妙地转移了话题；“您认为某项工作应具备哪些素质？”以引起双方感兴趣的话题。再次，谈话要动之以情，处处表现情真意切，实实在在。不要海阔天空，华而不实，更不能虚情假意，说假话、空话。另外，人们在紧张的情况下，往往讲话的节奏加快，这不利于进行情感交流，因此，谈话时应掌握节奏，必要时可用机智、幽默、风趣的语言使双方都放慢谈话的节奏。
（8）尊重对方，善解人意。取得招聘者的好感必须真正尊重对方，善解人意。在求职时往往有这种情况：招聘者的资历或学历、职称、年龄等可能不如求职者，此时千万不能妄自尊大。如果一旦流露出不尊重对方的表情，处处显示出优于对方、待价而沽的情绪，引起了对方的反感，往往会将好事办砸。

（9）跟进面试情况。很多面试者面试后都会告知你回去等通知，很多时候是在考验面试者的积极主动性，所以面试结束后要询问面试官电话和称呼，以便后续跟进面试情况。
4、面试九忌
（1）忌握手无力，过于靠近面试官。中国人见面问候的方式是握手，面试时与主试者应恰如其分地轻轻一握，不要有气无力地被动握手，给对方一种精力不足，身体虚弱之感。落座后应与对方保持合适的距离，不能过分靠近对方，逼视对方。更不能以姓名称呼主试者，而应时时表现出你对他们的尊敬。
（2）忌坐立不安，举止失当。面试时决不能做小动作，如摇头晃脑、频频改变坐姿，更不能嚼口香糖、抽烟。主试者可能示意你抽烟，但最好谢绝他的好意。主试者的“宽宏大量”是暴露应聘者弱点的最佳武器之一，在整个面试过程中，注意不要让自己的小毛病浮出水面。
（3）忌言语离题。有的求职者讲话不分场合，不看对象，让主试者听得莫名其妙。例如说些俗不可耐的笑话，谈及家庭和经济方面的问题，讲些涉及个人生活的小道消息，或任意对面试室的家具和装修评头论足。主试者可没有时间猜测你想真正表达的是什么。
（4）忌说得太急。言谈中迫不及待想得到这个工作，急着回答自己没听清或没有理解透彻的问题，而不是有礼貌地请对方再说一遍或再说明；不加解释就自称掌握某种技术，何处培训、何时参加、何人教授一律避而不答，令人生疑。所谓“欲速则不达“。
（5）忌提问幼稚。在想考官提问时要考虑自己提的问题是否有价值或者主考官已经回答过或解释过。千万别提一些很幼稚的问题，如：“办公室有空调吗？”“你知道某某主任在哪里吗？”
（6）忌言语粗俗。粗俗的语言，毫不修饰语言习惯并不代表你男子汉的气概或不拘小节，反倒另人难堪、生厌。
（7）忌反应迟钝。聆听主考官讲话并非单纯用耳朵，还包括所有的器官；不仅用头脑，还得用心灵。如果对方说话时你双眼无神、反应迟钝，这组已让考官对你失去信心，不论你将来如何推销自己，一切都基本上是徒劳，败局已定。
（8）忌做鬼脸。顽童做鬼脸，人们往往觉得其天真可爱，而且在平时人们的表达中也经常用到。但是，在面试中，夸张的鬼脸会使主试者认为你过于造作、善于伪装、会演戏，另外，表达恶意的鬼脸更容易另对方觉得你是没有礼貌、无教养的。
（9）忌像个嫌疑犯一般。应但意识到面试是一种机会平等的面谈，不是公安机关审讯嫌疑犯。不要过多理会主试者的态度。一开始就与你谈笑风生的主试者几乎是没有的，多数人的表情是正儿八经的。但应聘者还是应该把自己解放出来，不要担当被审察的角色。这样才利于自己正常的发挥。自信别紧张，保持微笑。

怎么向面试官提问题？

团队成员有多少人？大家怎么分工？目前团队的核心工作是哪些？

如果我来到公司之后，每天的日常工作是什么？

如何评估员工在试用期间的表现？考核标准是什么？

贵公司与竞争对手不同在什么方面？

您为什么从众多简历里选中我来参加面试？

在这里工作您最享受什么？

最成功的团队成员与其他普通员工之间有什么不同？

杂东西

这个项目你遇到了哪个比较棘手的问题？至少两个

问题：验证

用什么客服？

七鱼—收费的

cube-ui怎么用？

cube-ui什么时候能使用？两年前可以使用吗？如果使用别的适配方案呢？不使用cube-ui的

跨域问题？

为什么产生跨域？同源策略是指"协议+域名+端口"三者相同
具体看我博客

MySQL与MongoDB区别？

MySQL为关系型数据库
MongoDB为非关系型数据库

mongoose使用步骤

安装，connect new Schema 创建model 实例化model

JWT是什么？

JSON web Token,简称JWT，本质是一个token，是一种紧凑的URL安全方法，用于在网络通信的双方之间传递。一般放在HTTP的headers 参数里面的authorization里面，值的前面加Bearer关键字和空格。使用 JWT.decode 解析

redux源码？

createStore combineReducers bindActionCreators applyMiddleware componse

结合react使用：react-redux redux-thunk

React生命周期

初始化阶段、挂载阶段、更新阶段、卸载阶段

初始化阶段：constructor
挂载阶段：componentWillMount render(必须定义) componentDidMount(通常在这里发起异步请求，获取数据，使用axios)
更新阶段：componentWillReceiveProps(props发生变化以及父组件重新渲染时都会触发该生命周期函数)
shouldComponentUpdate(用来判断是否重新渲染，通常在这里优化性能)
componentWillUpdate(组件即将更新时触发)
componentDidUpdate（在组件更新后调用）
卸载阶段：componentWillUnmount(在组件卸载钱调用)

v16.4

static getDerivedStateFromProps（每次更新都会调用）
getSnapshotBeforeUpdate（用来返回一个快照）

webpack

熟练掌握Webpack的常用配置,能够自己构建前端环境,并进行项目优化;

谈谈你对webpack的看法:

webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

webpack的基本功能和工作原理？

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

webpack构建过程：

从entry里配置的module开始递归解析entry依赖的所有module
每找到一个module，就会根据配置的loader去找对应的转换规则
对module进行转换后，再解析出当前module依赖的module
这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
最后webpack会把所有Chunk转换成文件输出
在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

webpack打包原理

将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

什么是entry,output?

entry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
output 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

什么是loader，plugins?

loader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。
plugins(插件)作用更大，可以打包优化，资源管理和注入环境变量

什么是bundle,chunk,module?

bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块

npm打包时需要注意哪些？如何利用webpack来更好的构建？

有哪些常见的Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去source-map-loader：加载额外的 Source Map 文件，以方便断点调试image-loader：加载并且压缩图片文件babel-loader：把 ES6 转换成 ES5css-loader：加载 CSS，支持模块化、压缩、文件导入等特性style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。eslint-loader：通过 ESLint 检查 JavaScript 代码

webpack默认遵循commonjs规范 module.exports
es6中的规范 export
使用webpack进行打包时有两种模式：
开发模式：
生产模式：要压缩如果没有插件就不会压缩
默认情况下webpack的配置文件叫webpack.config.js，可以通过–config指定webpack的配置文件名

流程：

尝试配置脚手架：可以

loader:

css需要两个loader来处理：css-loader style-loader
postcss-loader 有动画目的就是使用浏览器的兼容。
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
mini-css-extract-plugin 以前都是之间引入内部样式，把css专门打包成一个css文件，在index.html文件中引入css
optimize-css-assets-webpack-plugin css压缩
terser-webpack-plugin css压缩 js不能压缩了然后由来一个插件能压缩js
file-loader 是让webpack打包图片
url-loader可以让图片转化base64，也可以让webpack打包图片

webpack 默认情况下不支持js的高级语法。 babel转化 npm i @babel/core @babel/preset-env babel-loader --save-dev

plugins

html-webpack-plugin 根据模块生成一个html文件此时不会在dist文件夹下面新建index文件了我需要在public新建新建index文件根据这个模板文件在内存中生成 index.html 然后自动引入bundle.js
clean-webpack-plugin 去掉没有用到的模块

面试题：
2.1. loader是使webpack拥有加载和解析非js文件的能力
2.2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

自己整理的面试题

文章目录

自己整理的面试题

一. js中的面试点

01. 闭包

闭包是什么

闭包 =『函数』和『函数体内可访问的变量总和』

闭包的作用

闭包最⼤的作⽤就是隐藏变量，闭包的⼀⼤特性就是内部函数总是可以访问其所在的外部函数中声明的参数和变量，即
使在其外部函数被返回（寿命终结）了之后

02. JavaScript的作⽤域链理解

本质是JavaScript在执⾏过程中会创造可执⾏上下⽂，可执⾏上下⽂中的环境中含有外部环境的引⽤，我们可以通过这个引⽤获取外部环境的变量、声明等，这些引⽤串联起来⼀直指向全局的环境，因此形成了作⽤域链。

03. 对原型链的理解

从原型对象是什么，原型链如何形成的进行回答

原型对象

绝大部分函数都有一个prototype属性，这个属性是原型对象用来创建新对象实例，而所有被创建的对象都会共享原型对象，因此这些对象便可以访问原型对象的属性。

原型链
每个对象都有 __proto__属性，此属性指向该对象的构造函数的原型。对象可以通过__proto__ 与上游的构造函数的原型对象连接起来，⽽上游的原型对象也有⼀个 __proto__，这样就形成了原型链。

04. this指向的总结

this出现在全局中，this是window
this出现在一个普通的函数中（不是方法），this是window
this出现在一个对象的方法，this可以是这个对象，也可以是window
call和apply可以改变this指向，指向()第一个参数
一个函数没有明确指出谁调了，this是window

05. call、apply、bind三者的区别

三者都是改变当前this的指向，但具体的使用方式，都存在着一定的区别，具体请参考下面call、apply、bind应用的介绍的文档：

call、apply、bind应用的介绍

06. new 实现的原理

创建一个空对象
绑定this值
链接到原型
返回新对象

07. 为什么局部变量不能在外部进行访问

从执行上下文的角度进行分析。执行上下文作用：给全局代码或局部代码提供数据。

当执行全局代码时，产生一个全局执行上下文。全局上下文只能访问全局上下文里面的数据；当执行函数代码时，产生一个局部执行上下文。此时局部执行上下文包含：自身的执行上下文与全局执行上下文，所以，内部可以访问外部数据；外部不能访问内部数据。

08.

二. vue相关知识点

01. 防抖节流？

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

02. 封装axios

Axios 请求拦截器 and 响应拦截器

拦截的流程

主要截取，请求或响应在被 then 或者 catch 处理之前，做些什么。
我们可以把每一次请求想象成一条管道里的流过的水，当一个请求发出的时候，会先流过 interceptors 的 request 部分，接着 request 会发出，当接受到响应时，会先流过 interceptors 的 response 部分，最后 response。

封装的要点

封装请求拦截，封装响应拦截，封装防止多次请求，封装取消请求等

03. 如何解决首页白屏问题？

1，把首页做服务端渲染，使用nuxt.js写项目
2，预渲染数据还没有回来前，先返回的一些死数据，多用在首页面的内部经常不变
3，配置骨架屏，或者加载动画

04. mongoDB与mySql的区别？

MySQL为关系型数据库，而MongoDB为非关系型数据库，起来都比较简单，没有关系型数据库那么复杂。Mongo的写操作会比关系型数据库快很多

05. 如何在前端配置代理，解决跨域问题？

跨域出现的原因，（协议，域名，端口，+ ajax请求），
代理就是在本地开启一台服务器，请求与代理服务器同源，然后服务器去请求

06. keep-alive缓存组件

给需要缓存的页面添加标识，进行缓存
可以把数据缓存到内存中，避免再次去请求接口。

07. 按需加载与预先加载

预先加载适合于相册类项目，按需加载适合于图片较多的图片展示类项目。

08. 如何解决异步组件之间切换出现的闪动问题

使用vue的高阶组件，组件里面套一个组件

09. VUE有点

组件化开发（复用性）–提高效率
低耦合
虚拟dom
视图,数据,结构分离
单页面路由
丰富的Api方法
双向的数据绑定
单向数据流

三. react相关知识点

1. React中的key的作用

Key是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

react中有两种组件类组件(有状态组件) 与函数组件(无状态组件)

类组件需要继承React.Component这个属性

2. jsx语法注意事项

jsx中必须有一个根标签
jsx严格区分大小写，所有标签都要关闭，属性必须有引号包含

3. react的核心思想

虚拟dom
数据驱动dom，不需要操作dom

4. react-router-dom

history的编程式路由：不会自动跳转过去，需要强制刷新

5. redux

applyMiddleware:
bindActionCreators:
combineReducers:
compose:
createStore:

四分支的操作

1. git冲突了怎么办

情景一：在当前的分支上，直接修改冲突代码----->add------>commit。
情景二：在本地当前分支上，修改冲突代码------>add------->commit-------->push

2. 分支的大量使用

查看分支：git branch

创建分支：git branch <name>

切换分支：git checkout <name>或者git switch <name>

创建+切换分支：git checkout -b <name>或者git switch -c <name>

合并某分支到当前分支：git merge <name>

删除分支：git branch -d <name>

人事部、销售部、产品部、设计部、技术部、测试部、财务部、运营推广部

共40人：

UI:4人

技术部：

android:3人
ios:3人

H5:5人

Java:7人

测试部：

渠元东

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
面汇

title: 面试题汇总文章目录title: 面试题汇总HTML+CSS面试题001.Flex布局002.HTML5+CSS3新特性003.盒子模型004.如何让一个div水平居中？005.如何让一个div水平垂直居中？006.如何清除浮动？007.css3实现三栏布局，左右固定，中间自适应？008.CSS中 link 和@import 的区别是什么？009.transition和animat...
复制链接

扫一扫