面试总结，整体流程以及技术问题

在去面试的时候好好看一下自己的简历，针对自己简历上的所写技能、工作经历好好复习，总结。

对自己以及工作经历描述（自我介绍）

自我介绍面试前好好准备一下，在面试时流利、有条理的表述出来，应该会是加分项。

背景：

1.面试官在你自我介绍的时候，才有时间看你的简历。人太多没时间看，看了也记不住。（所以不要有面试官不看我简历的想法什么的，态度谦虚诚恳一点，耐心一点）
2.你在自我介绍中，他在想问你什么问题。（这里千万不要给自己挖坑，你说的一些会的技术很有可能会展开来提问你）
3.了解你语言 表达能力，自信气场，仪表形态。

讲什么东西：

1.姓名，年龄，专业，特长，经历（有价值的）
2.在一分钟自我介绍，人士想了解什么。
讲出跟他招聘有关联性的东西。岗位是什么，一分钟就要匹配什么。
必须做岗位和企业的一样的
3.将创意的东西。70%的时间来突显这一块。
我最擅长的是什么?
我最深入研究的领域知识是什么？
我性格中最匹配这个岗位的是什么？
我做过最成功的是什么？
我最主要的成就是什么？

话术（依照自己的实际情况）

你好，我叫xxx，我的上一家公司是做XXX。，所以我们公司做的项目都是和XXX相关的。
刚进公司的那时候，什么交互啊，项目需求，测试，代码编写，优化，我都有是积极的参与，因为是新人，所以好好把握住每个学习的机会，我的本职工作，前端这块，我都是认真负责完成。那时候虽然很忙，压力很大，但真的是学到了不少东西，后期项目都不断的在完善，我也不断的在参与。
在上一家公司中，我的收获不单单是技术方面，主要还有业务能力，自学能力和同事的沟通能力，这都是我学到的，而且我认为很重要的。
技术方面我一直从事于web方面的工作，掌握的前端技术有ajax，js，div+css，html css，同时我也了解java语言和数据库表结构这块，跟后台人员能更有效的沟通。
我的性格方面不算外向，也不算内向，跟朋友，同事相处，比较外向，在工作中，代码开发时，我是比较内向的，我喜欢全心全意的投入工作中。我也喜欢交朋友，偶尔跟朋友聚聚，聊聊。对于工作我总是抱着认真负责，有责任心，吃苦耐劳的态度工作。
谢谢，以上是我的自我介绍。

做的最近一个项目

为什么要介绍最近的一个项目？个人思考：第一，面试官看你这个项目经验是否是真实的，是否是真实参与其中的；第二，还有就是看看你的能力，对一个项目的上心程度，遇到问题怎么解决？团队合作能力等等；第三，面试官会从你的项目经验中所提到的他说感兴趣的点进行提问。因此，在面对介绍项目经验一定要流利，自信，进行很好的“介绍”和“引导”。

好了，如下是正文内容。

结合面试官爱听的话，给出如下的例子

关键点	说辞
能考虑到代码的扩展性，有参与框架设计的意识	我的项目XX项目，用到技术，框架是Vue或者是React，（这个是铺垫），开发的时候，我会先和后端沟通一起看原型，弄清楚逻辑，并讨论一些地方的合理性，沟通需要哪些接口，多少接口，需要传什么参数，请求方法，写前端页面的时候，我会用到了组件化思想，这样做的理由是，更好的理清逻辑，化复杂为简单，便于后面的人的维护。
有调优意识，能通过自测发现问题点，然后解决	在开发阶段，会考虑一个体验性，页面的美观，配色问题，给出自己的想法。
动手能力很强，肯干活，会的东西比较多，团队合作精神比较好	在项目里，我不仅要做开发的工作，而且需要自己测试，发现问题，及时定位问题。或者，一旦发现我们开始考虑的逻辑有问题，我会及时和相关人员沟通；如果是技术方面的，我会自己查资料；如果是测试方面的，我会及时和测试的人沟通。
责任心比较强，能适应大压力的环境	被问“你如果在项目里遇到问题怎么办？”回答：遇到问题我先查资料，如果实在没法解决，不会拖，会及时问相关的人，即使加班，也会在规定的时间内解决。
有主见，能不断探索新的知识	在项目里，我会在保证进度的前提下和项目经理说我的想法，提出我的解决方案。在开发过程中，我会先思考一下，用一种比较好的方式，比如效率最高的方法实现。另外你要找机会说出：平时我会不断看一些新技术（比如大数据Hadoop），会不断深入了解一些框架和技术的实现底层。

然后，总结：

1. 面试前一定要准备。针对自己项目中的技术学习的越深越好。在回答的时候，忌一问一答，主动说出你的闪光点。比如：在这个项目里用到了什么技术？你除了说一些基本的技术，比如JS，html和css，还有框架方面的常规技术时，还得说，用到了组件的思想，这样能减少对代码的重复性，或者说用到了一些热门UI框架ant-design等。也就是说，得找一切机会说出你拿得出手的而且当前也非常热门的技术。
2. 切忌低级错误。比如：面试时说出的工作经验和简历上的不一致；前后矛盾，后面的回答无法证明你的项目描述；
3. 上述给出是的方法，不是教条。大家可以按本文给出的方向结合自己的项目背景做准备，而不是死记硬背本文给出的一些说辞。

详细请看，如何在面试中介绍自己的项目经验

JS

防抖和节流

下面展示一些 内联代码片。

    // 防抖和节流都是利用闭包来保存变量
    /**
     * 函数防抖---只有任务时间间隔超出指定时间间隔才会执行，主要控制时间，一般用于输入框的实时搜索
     * @param func 目标函数
     * @param wait 延迟执行毫秒数
    */
    function debounce(func, wait){
        let timer = null;
        return function(){
            let context = this,
                args = arguments;  // 浏览器传递给函数的隐式参数，类数组对象arguments(函数的上下文对象this, 封装实参的对象arguments)
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                func.apply(context,args)
            },wait)
        }
    }
    /* 防抖的业务函数 */
    var inputDom = document.getElementById('inputDom');
    inputDom.addEventListener("keyup", debounce(searchHandle,1000));
    function searchHandle(e) {
        console.log(e);
    }
    /**
     * 函数节流---规定函数在指定时间间隔内只执行一次，主要控制次数，一般用于scroll事件
     * @param func 函数
     * @param wait 延迟执行毫秒数
     * @param type 1 表时间戳版，2 表定时器版
     */
    function throttle(func,wait,type){
        if(type === 1){
            var previous = 0;
        }else if(type === 2){
            var timeout = null;
        }
        return function(){
            let context = this,
                args = arguments;
            if(type === 1){
                let nowDate = new Date().getTime();
                if(nowDate - previous > wait){
                    func.apply(context,args);
                    previous = nowDate;
                }
            }else if(type === 2){
                if(!timeout){
                    timeout = setTimeout(() => {
                        func.apply(context,args);
                        timeout = null;
                    },wait)
                }
            }
        }
    }
    /* 节流的业务函数 */
    function handle(e) {
        console.log(e);
    }
    window.addEventListener('scroll', throttle(handle, 1000,1)); 

什么是闭包

一、闭包

`闭包为了解决一个函数可以访问另外一个函数内部的变量`

闭包的三个特性：
1、函数嵌套函数
2、函数内部可以引用函数外部的参数和变量
3、参数和变量不会被垃圾回收机制回收

好处：
1、保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突
2、在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
3、匿名自执行函数可以减少内存消耗

坏处：
1、被引用的私有变量不能被消耗，增大了内存消耗，造成内存泄漏，解决方法可以在使用完变量
   后手动为它赋值为null
2、由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，
   然后直接访问局部变量，来减轻对执行速度的影响

下面的代码

function f1() {
    var n = 999;
    function f2() {
    console.log(n);
    }
    return f2;
}
var result = f1();
result();//999

函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。

这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，就可以在f1外部读取它的内部变量了。

二、闭包的使用场景

1. setTimeout

原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。

function f1(a) {
    function f2() {
        console.log(a);
    }
    return f2;
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1

2. 回调

定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-20">20</a>
    <a href="#" id="size-30">30</a>

    <script type="text/javascript">
        function changeSize(size){
            return function(){
                document.body.style.fontSize = size + 'px';
            };
        }

        var size12 = changeSize(12);
        var size14 = changeSize(20);
        var size16 = changeSize(30);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-20').onclick = size14;
        document.getElementById('size-30').onclick = size16;

    </script>
</body>
</html>

3. 函数防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。

代码如上，防抖和节流

JS原型，原型链相关知识点

ES6的新特性

Vue和React

Vue和React使用场景，相似与区别

相同点
	1、都支持服务端渲染
	2、都有Virtual DOM虚拟DOM，组件化开发，都有props的概念，允许父组件往子组件传递值，都实现了webComponent规范
	3、都是数据驱动视图
	4、都有支持native的方案，React的React  native，Vue的weex
	5、构建工具【React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。
		React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。
		两个工具都能让你得到一个根据最佳实践设置的项目模板。
		都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）】

不同点
	1、设计思想
		react：1.1  函数式思想 ， all in js ,jsx的语法 ，js操控css
    		   1.2  单向数据流
    		   1.3  setState重新渲染
    		   1.4  每当应用的状态被改变时，全部子组件都会重新渲染。
		当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，
		如果为true继续渲染、false不渲染，但Vue将此视为默认的优化

     	vue： 2.1  响应式思想，也就是基于数据可变的。把html,js,css组合到一起，			
     	           也可以通过标签引擎组合到一个页面上
              2.2  双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的时候用到）
              2.3 Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树
2、性能
	 react ------- 大型项目
    	优化需要手动去做，状态可控
    vue  -------- 中小型项目
    	状态改变需要watch监听，数据量太大的话会卡顿

3、扩展性
	react：
		3.1.1  类式写法api少，更容易结合ts
        3.1.2  可以通过高阶组件来扩展  
    vue：
    	3.2.1  声明式写法，结合ts比较复杂
        3.2.2  需要通过mixin方式来扩展
        

Vue和React生命周期；每个周期用来干什么（最好是能举例）

Vue的生命周期钩子函数
	1.beforeCreate  数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	2.created  数据观测 (data observer)，property 和方法的运算，watch/event 事件回调后，挂载阶段还没开始
	3.beforeMount 在实例挂载开始之前被调用
	4.mounted  实例挂载之后，如果希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
	5.beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前
	6.updated  数据更新后，虚拟DOM打补丁之后
	7.beforeDestroy  实例销毁之前
	8.destroyed 实例销毁之后调用
	9.activated  被keep-alive缓存的组件激活时调用【不常用】
	10.deactivated  被keep-alive缓存的组件被禁用时调用【不常用】
React的生命周期钩子函数
	React生命周期可以分为三个过程  挂载，更新，卸载
   【即将过时的生命周期，避免使用componentWillMount，componentWillReceiveProps，componentWillUpdate】
	1.挂载
		A.constructor  组件挂载之前，会调用它的构造函数
		B.componetWillMount  组件挂载前调用
		C.render 是一个纯函数，返回DOM
		D.componentDidMount  组件挂载后调用
	2.更新
		A.componentWillReceiveProps 父组件props要更新执行
		B.shouldComponentUpdate  判断 React 组件的输出是否受当前 state 或 props 更改的影响
		【props修改和state主动更新都会调用】
		C.render 更新重新渲染
		D.componentDidUpdate  组件更新后执行
	3.卸载
		A.componentWillUnmount   组件卸载及销毁之前直接调用
			

Vuex和ReactX

两者都是状态管理工具
Vuex的核心概念
	state   存储状态，单一状态树 【mapState】
	getters   从store中的state中派生出一些状态 【mapGetters】
	mutations  更改Vuex的store中的状态的唯一方法是提交mutation  【mapMutations】
	actions  类似于mutations，但是它提交的是mutation不是直接变更状态，可以包含任何异步操作  
	modules   将store分为模块
	相关操作  调用mutation使用commit   调用actions 使用dispatch

React的核心概念
	state  存储状态
	reducer   相当于vuex的mutation,用来修改state
	action  调用使用dispatch和vuex的action类似
	维持应用的 state
	提供 getState() 方法获取 state
	提供 dispatch(action) 方法更新 state
	通过 subscribe(listener) 注册监听器
	通过 subscribe(listener) 返回的函数注销监听器
	
React-Redux 是Redux的React绑定库
	相关Api  Provider,connect,mapStateToProps,mapDispatchToProps
	Redux-Thunk 是处理 Redux 异步逻辑推荐使用的中间件。
	Redux Thunk 中间件可以让你的 Action 创建函数返回一个函数而不是普通对象。
	启用 Redux-Thunk 需要使用 applyMiddleware()。	

Vue路由的两种方式【hash，history】

详细介绍

1、hash这种方式不存在兼容性，history因为是调用history.pushState(),所以存在浏览器兼容性问题。
2、hash模式的工作原理是hashchange事件，可以在window监听hash的变化。
   我们在url后面随便添加一个#xx触发这个事件。
   window.onhashchange = function(event){
	  console.log(event);
   }
3、history模式的工作原理是调用了window.history

Vue搭建全家桶

CSS

css盒模型的理解

垂直居中的方法

有哪几种定位？分别谈谈

旋转动画实现

优化

减少页面加载时间的方法

提高性能的方法

其他（个人思考）

前端开发具备哪些能力与素质

你的优势