1. 你遇到的前端面试题都有什么
大家好，我是王我。
随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人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的使用是一致的
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】
缓存路由组件
使用的是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 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。
§ 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。
§ 云打包的引擎版本说明
HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。
HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。
中间的紧急更新版本没有独立打包机。
举个例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。
那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）
除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML书写规范
H5新增标签
HTML渲染过程
二、CSS
css盒子模型概念
css弹性布局概念
三、JavaScript
事件模型
DOM2级事件模型
闭包
原型链
四、移动Web开发
常见的布局方案
移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端前端手势事件
移动端页面渲染优化
GPU渲染
GPU核心渲染过程
五、调试
常用的调试工具
Chrome控制台调试js使用
移动端测试
六、HTTP网络知识
常见的HTTP状态码
不同请求类型的区别
WEB缓存方案
——————————
牛客网（www.nowcoder.com）
- 专业IT笔试面试备考平台
- 最全C++JAVA前端等互联网技术求职题库
- 全面提升IT编程能力
- 程序员交友圣地
分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！
放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。
建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离网络，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！
一、HTML常见题目01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
二、CSS类的题目01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有那些？
05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
三、Java类的题目
01、介绍Java的基本数据类型。
02、说说写Java的基本规范？
03、Java原型，原型链？有什么特点？
04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？
05、Java如何实现继承？
06、Java创建对象的几种方式？
07、Java作用链域？
08、谈谈This对象的理解。
09、eval是做什么的？
10、什么是window对象？什么是document对象？
OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。
如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你……
你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！
如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！
扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。
1.前端框架类问题，问你会不会用vue react啊
2.语言类，问你一些JavaScript语言的问题
3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道
2. web后端开发面试应该注意些什么
web后端开发面试应该注意些什么?有哪些题目是值得我们注意的？下面就让小编告诉你:
面试这几家公司所遇到的面试/笔试题，目前还能记住的如下。虽然可能绝大部分都是基础，但希望大家不要只是看看就过去了，最好还是假装你被问到这个问题，你来把答案说出来或写出来：（不按公司分了）
python语法以及其他基础部分
可变与不可变类型；
浅拷贝与深拷贝的实现方式、区别；deep如果你来设计，如何实现；
__new__() 与 __init__()的区别；
你知道几种设计模式；
编码和解码你了解过么；
列表推导list comprehension和生成器的优劣；
什么是装饰器；如果想在函数之后进行装饰，应该怎么做；
手写个使用装饰器实现的单例模式；
使用装饰器的单例和使用其他方法的单例，在后续使用中，有何区别；
手写：正则邮箱地址；
介绍下垃圾回收：引用计数/分代回收/孤立引用环；
多进程与多线程的区别；CPU密集型适合用什么；
进程通信的方式有几种；
介绍下协程，为何比线程还快；
range和xrange的区别（他妹的我学的py3…）；
由于我有C/C++背景，因此要求用C来手写：将IP地址字符串（比如“172.0.0.1”）转为32位二进制数的函数。
算法排序部分
手写快排；堆排；几种常用排序的算法复杂度是多少；快排平均复杂度多少，最坏情况如何优化；
手写：已知一个长度n的无序列表，元素均是数字，要求把所有间隔为d的组合找出来，你写的解法算法复杂度多少；
手写：一个列表A=[A1，A2，…,An]，要求把列表中所有的组合情况打印出来；
手写：用一行Python写出1+2+3+…+10**8 ；
手写python：用递归的方式判断字符串是否为回文；
单向链表长度未知，如何判断其中是否有环；
单向链表如何使用快速排序算法进行排序；
手写：一个长度n的无序数字符素列表，如何求中位数，如何尽快的估算中位数，你的算法复杂度是多少；
如何遍历一个内部未知的文件夹（两种树的优先遍历方式）
网络基础部分
TCP/IP分别在模型的哪一层；
socket长连接是什么意思；
select和epoll你了解么，区别在哪；
TCP UDP区别；三次握手四次挥手讲一下；
TIME_WAIT过多是因为什么；
http一次连接的全过程：你来说下从用户发起request——到用户接收到response；
http连接方式。get和post的区别，你还了解其他的方式么；
restful你知道么；
状态码你知道多少，比如200/403/404/504等等；
数据库部分
Mysql锁有几种；死锁是怎么产生的；
为何，以及如何分区、分表；
MySQL的char varchar text的区别；
了解join么，有几种，有何区别，A LEFT JOIN B，查询的结果中，B没有的那部分是如何显示的（NULL）；
索引类型有几种，BTree索引和hash索引的区别（我没答上来这俩在磁盘结构上的区别）；
手写：如何对查询命令进行优化；
NoSQL了解么，和关系数据库的区别；Redis有几种常用存储类型；
Linux部分
讲一下你常用的Linux/Git命令和作用；
查看当前进程是用什么命令，除了文件相关的操作外，你平时还有什么操作命令；
（因为我本人Linux本身就很水，只会基本的操作，所以这部分面试官也基本没怎么问。。反正问了就大眼瞪小眼呗）
django项目部分
都是让简单的介绍下你在公司的项目，不管是不是后端相关的，主要是要体现出你干了什么；
你在项目中遇到最难的部分是什么，你是怎么解决的；
你看过django的admin源码么；看过flask的源码么；你如何理解开源；
MVC / MTV；
缓存怎么用；
中间件是干嘛的；
CSRF是什么，django是如何避免的；XSS呢；
如果你来设计login，简单的说一下思路；
session和cookie的联系与区别；session为什么说是安全的；
uWSGI和Nginx的作用；
上面就是小编为大家整理的关于web后端开发 面试的文章，希望对大家有帮助。在实际的操作过程中大家可以根据实际情况进行灵活的调整。
3. 接口测试面试题，等你来看
1.你们公司的接口测试流程是？
接口测试我们是在xx项目做的，主要有xx接口，xx接口等
1.首先是从开发那里拿到API接口文档，了解接口业务、包括接口地址、接口方式、入参、出参、token鉴权，返回格式等信息。
2.然后使用postman或jmeter工具执行接口测试，一般使用Jmeter的步骤是这样的：
3.最后调试并执行用力，最后编写接口测试报告。
4.其实我们做接口的时候也碰到过很多的问题，都是自己独立解决的，比如返回值乱码（修改jmeter的配置文件为UTF-8编码方式），比如需要登陆后才能取得token鉴权编码并且这个鉴权码在下面的请求中需要用到（使用正则表达式提取器提取token的值等等。
2.简述cookie、session及token的区别
1.cookie数据存放在客户的浏览器上，session数据放在服务器上。而token是接口数据的鉴权码，一般情况下登录后才可以获取到token，然后在每次请求接口时需要带上token参数。
2.cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应到使用seesion，seesion会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面应当使用cookie。
3.可以将登录信息等重要信息存放为session；其他信息需要保存，可以放在coolie。
3.对于加密接口，如何进行测试？
在调用接口的时候，要搞清楚接口的加密方式是什么。
如果是对称加密，要先从开发哪里获取对称密钥，基于对称密钥可以加密请求数据，以及解密响应报文。
如果是非对称加密，先从开发获取服务器公钥和私钥，也要知道当前用户的公钥和私钥信息。以便完成接口的数据加密和解密。
4.接口测试执行中比对数据库吗？
肯定，因为接口返回值的数据来源于数据库，接口对数据的操作还要进行深层次的数据库检查！
5.如何分析一个bug是前端还是后端
这种情况很容易判断，先抓包看请求报文，对着接口文档，看请求报文有没有问题，有问题就是前端发的数据不对；
请求报文没问题，那就看返回报文，返回的数据不对那就是后端开发的问题。
6.谈谈你对HTTP协议的了解？
超文本传输协议，端口为80，特点（无记忆功能、快速）是由请求和响应两部分组成请求由请求头、请求行、请求正文组成；响应是由响应头、响应行、响应正文组成，之前我们公司的接口是采用https协议的。
httpshttp+ssl协议端口443面向安全的超文本传输协议。
7.get和post请求有什么区别？
get和post请求都是客户端向服务器提交的一种请求方式；
get是明文传输参数、倾向于请求服务器资源。比如打开网站；
post传输数据不可见，安全性高，倾向于向服务器提交数据，比如注册等。
8.依赖于第三方数据的接口如何进行测试
可以使用SoapUI等工具直接调用第三方数据接口的webservice,通过返回值来查看第三方数据的接口是否调用正常。
也可以利用一些工具来模拟第三方的数据返回，最大限度地降低对第三方数据接口的依赖。
9.接口测试中要注意的测试点有哪些？
接口中返回了图片地址，要手工去进行图片的测试（大小、内容）；
接口完成查询功能的时候，数据返回的排序显示；
10.接口执行测试返回结果比对哪部分？
之前必须要对比的就是返回状态码，其次再去对比返回其它关键内容。
11.做接口测试工作的意义是什么？
这个是开发性题目，面试官主要考察对测试的理解。
根据测试的金字塔模型来说接口测试是测试左移的最方便，最简单的测试，当然最厉害的测试是做白盒测试，这个是在接口测试之前，相对于单元测试。
12.用过抓包工具吗？如何使用？
之前在项目中用过fiddler抓包工具进行HTTP协议请求的抓取。
打开fiddler之后，默认浏览器配置了127.0.0.18888端口的代理，在fiddler设置好过滤策略后，打开需要进行抓包的网站进行操作，就可以进行抓包。
13.接口测试中需要哪些注意点？
14.postman中设置环境变量有什么用？
在之前项目中，接口测试测试的环境有开发环境，测试环境等，为了测试的时候方便，就在postman设置环境变量，到时所有接口都引用该环境变量，这样就不用为了切换环境导致每次都去修改被测系统接口的主机地址；点击右上角环境变量管理按钮-新建环境变量，在脚本中使用{undefined{变量名}}去调用。
15.关联是什么？如何postman设置关联？
关联就是把上一个接口返回值的部分截取出来，作为下一个接口的参数，能让接口串联运行。
在postman中设置关联的步骤如下：
先通过正则表达式提取的方式或json取值的方式把下一个接口需要的信息从上一个接口截取出来；
使用设置全局变量的代码把取出来的值保存到全局变量；
在下一个接口中，使用{undefined{全局变量}}代替要替换的静态值。
4. web前端面试题@二（Keeplive、V-show和v-if的区别、同源策略及跨域）
在vue中，我们使用component内置组件或者vue-router切换视图的时候，由于vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如：搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等。
Keep-alive是一个vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁，当我们再次访问这个组件的时候，会先从keep-alive中存储的组件中寻找，如果有缓存的话，直接渲染之前缓存的，如果没有的话，再加载对应的组件。
作为抽象组件，keep-alive是不会直接渲染在DOM中的。
Keep-alive提供了三种可选属性
Include-字符串或数组或正则表达式。只有名称匹配的组件被缓存。
Exclude -字符串或数组或正则表达式。名称匹配的组件不会被缓存。
Max -数字类型。表示最多可以缓存多少组件实例。
Keep-alive提供了两个生命钩子，分别是activated与 deactivated。
因为Keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。
V-show有较高的渲染成本，
V-if有较高的切换成本。
V-if是真正的条件渲染，确保切换过程中条件内的事件监听器和子组件适当的被销毁和重建。
V-show的元素始终被渲染并保存在dom中，操作的只是display属性控制演示影藏。
源（origin）—— 就是协议、域名和端口号。若地址里面的协议、域名和端口号均相同则属于同源。
同源策略——同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
不受同源策略限制的
1.页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2.跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。
跨域——只要协议、域名、端口号有一个不同就是跨域。
跨域的原因？（只做了解）
跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等。
1、 Jsonp——
利用script标签可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。jsonp是一种常用的跨域手段，和反向代理，服务端做跨域处理相比，jsonp更显得方便轻巧 jsonp的缺点只能发送get请求。因为script只能发送get请求需要后台配合。此种请求方式应该前后端配合，将返回结果包装成callback(result)的形式。
2、 Cors——
服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。CORS 是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），他允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服 AJAX 只能同源使用的限制
缺点是：目前所有最新浏览器都支持该功能，但是万恶的IE不能低于10
Access-Control-Allow-Origin 这个字段是必须的,表示接受那些域名的请求(*为所有)、Access-Control-Allow-Credentials 该字段可选, 表示是否可以发送cookie、Access-Control-Expose-Headers 该字段可选,XHMHttpRequest对象的方法只能够拿到六种字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,如果想拿到其他的需要使用该字段指定。
3、反向代理（Reverse Proxy）{前端独立就能解决的跨域方案}——
指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
5. Web 前端面试
博客园整理了一下，有好的面试题欢迎大家发在评论区哟
1. 闭包
2. 数组去重
3. 原型和原型链
4. call,apply,bind三者的区别？
5. 请介绍常见的 HTTP 状态码(至少五个)
6. 深浅拷贝
7. 实现(5).add(3).minus(2)输出6
8. null和undefined区别
9. MVC和MVVC?
10. Vue生命周期
11. Vue数据双向绑定原理
12. Vue组件传参
13. 说说各浏览器存在的兼容问题
14. router和route
15. active-class属于Vue哪一个moles,有什么作用
16. v-if和v-show
17. computed和watch有什么区别
18.Vue 组件中 data 为什么必须是函数
19. vue中子组件调用父组件的方法
20. vue中 keep-alive 组件的作用
21. vue中如何编写可复用的组件？
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎么自定义指令
25. Vue 中怎么自定义过滤器
26. NextTick 是做什么的
27. Vue 组件 data 为什么必须是函数
28. 计算属性computed 和事件 methods 有什么区别
29. scoped（死够扑的）
30. vue如何获取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什么?使用和用途？
34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透
闭包指有权访问另一个函数中变量的函数，
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
B站视频： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126
https://www.jianshu.com/p/9c3547450a52
https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC
都是用来改变this指向的
call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的
一般情况下this指向其调用者（）
fun.call(thisArg,arg1,ary2,...)
主要作用可以实现继承
调用函数，改变this指向
继承
fun.apply(thisArg,[argsArray])
作用：调用函数，改变函数内部this指向
参数必须是数组
apply主要应用于借助数学对象等
bind()方法不会调用函数，但可以改变函数内部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函数运行时指定的this值
arg1，arg2:传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝
call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call
时间测试
状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值:
1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
MVC 是后端中的概念
MVVC中 是前端概念
最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心
这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。
active-class 属于vue-router的样式方法
当routerlink标签被点击时将会应用这个样式
使用有两种方法
routerLink标签内使用
在使用时会有一个Bug
首页的active会一直被应用
解决办法
为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：
在router-link中写入exact
在路由js文件,配置active-class
还可以不用exact这种方法去解决，例如
首页
路由中加入重定向
computed
computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算
computed适用于计算比较消耗性能的计算场景
watch
watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行
小结
当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。
去这里看一下blog.csdn.net
vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面
具体参考 官方API
参考 官方文档-自定义指令
过滤器也同样接受全局注册和局部注册
具体可参考官方文档 深入响应式原理
我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的
不同点：
让css只在当前组件中起作用
6. Python后端开发工程师面试
第一步：自我介绍
第二步：公司介绍
第三步：技术基础
第四步：项目介绍
第五步：待遇
自我介绍，简单直接，姓名，籍贯，大学，工作经历
示例如下：
你好，面试官，我叫XX，来自XX，本科毕业于XX，主修XX专业，有X年工作经验，在上一家公司担任python后端开发工程师的职位。
公司名称是XX、公司主要做外包软件、都有软件定制/商城定制、前端2个后端2个运维1个
主要是根据你简历中填写的技术，根据我的简历中所写的，总结几点如下：
字典的查询流程：
不可变对象可哈希， str ， fronzenset ， tuple ，自己实现的类，要重载 __hash__ 方法。
dict内存花销大，但是查询速度快，自定义的对象或者python内部的对象都是dict包装的。
dict的存储顺序和元素添加顺序有关，添加顺序可能改变已有数据的顺序。
集合：是一个可以存放任意数据类型的可变无序的映射集合。
set和dict类似，set的核心也是散列表，但是表元只包含值的引用。 由于散列表的特性，set的元素不能重复，且无序。 内部由哈希实现，查找的时间复杂度为O(1)，所以性能很高，实现了魔法函数 __contains__ 可以使用in来查找。 set的去重是通过两个函数 __hash__ 和 __eq__ 实现的。
（1）浅拷贝
定义：浅拷贝只是对另外一个变量的内存地址的拷贝，这两个变量指向同一个内存地址的变量值。
浅拷贝的特点：
（2）深拷贝：
定义：一个变量对另外一个变量的值拷贝。
深拷贝的特点：
Python GC主要使用引用计数（reference counting）来跟踪和回收垃圾。在引用计数的基础上，通过“标记-清除”（mark and sweep）解决容器对象可能产生的循环引用问题，通过“分代回收”（generation collectio n）以空间换时间的方法提高垃圾回收效率。
GIL全称 Global Interpreter Lock ，中文解释为全局解释器锁。它并不是Python的特性，而是在实现python的主流Cpython解释器时所引入的一个概念，GIL本质上就是一把互斥锁，将并发运行变成串行，以此来控制同一时间内共享数据只能被一个任务所修改，从而保证数据的安全性。
GIL保护的是解释器级别的数据，但是用户自己的数据需要自己加锁处理。
既然有了GIL的存在，一个进程中同一时刻只有一个线程能够被执行，无法利用cpu的多核机制，导致多线程用于I/O密集型，多进程用于计算密集型，如金融分析等。
死锁：两个或两个以上的进程或者线程在执行过程中，因为争夺资源而造成的互相等待现象，若无外力的作用，都将一直处于阻塞状态，这些互相等待的进程或者线程就被称为死锁。
解决方法，使用递归锁（RLock）
这个RLock内部有一个Lock和一个counter变量，counter记录着acquire的次数，从而使得资源可以被多次require。直到一个线程所有的acquire都被release，其他的线程才能获得资源。上面的例子如果使用RLock代替Lock，则不会发生死锁
可以直接认为是linux，毕竟搞后端的多数是和linux打交道。
那么如何避免粘包问题呢? 归根结底就是一句话, 明确两个包之间的边界.
UDP不存在粘包问题，是由于UDP发送的时候，没有经过Negal算法优化，不会将多个小包合并一次发送出去。另外，在UDP协议的接收端，采用了链式结构来记录每一个到达的UDP包，这样接收端应用程序一次recv只能从socket接收缓冲区中读出一个数据包。也就是说，发送端send了几次，接收端必须recv几次（无论recv时指定了多大的缓冲区）。
存储可能包含rdbms，nosql以及缓存等，我以mysql,redis举例**
7. 如何面试app后端开发工程师 知乎
面试题1、Python是如何进行内存管理的？Python的内存管理主要有三种机制：引用计数机制、垃圾回收机制和内存池机制。a.引用计数当给一个对象分配一个新名称或者将一个对象放入一个容器（列表、元组或字典）时，该对象的引用计数都会增加。当使用del对对象显示销毁或者引用超出作用于或者被重新赋值时，该对象的引用计数就会减少。可以使用sys.getrefcount()函数来获取对象的当前引用计数。多数情况下，引用计数要比我们猜测的大的多。对于不可变数据（数字和字符串），解释器会在程序的不同部分共享内存，以便节约内存。b.垃圾回收当一个对象的引用计数归零时，它将被垃圾收集机制处理掉。当两个对象a和b相互引用时，del语句可以减少a和b的引用计数，并销毁用于引用底层对象的名称。然而由于每个对象都包含一个对其他对象的应用，因此引用计数不会归零，对象也不会销毁。（从而导致内存泄露）。为解决这一问题，解释器会定期执行一个循环检测器，搜索不可访问对象的循环并删除它们。c.内存池机制Python提供了对内存的垃圾收集机制，但是它将不用的内存放到内存池而不是返回给操作系统。1）Pymalloc机制。为了加速Python的执行效率，Python引入了一个内存池机制，用于管理对小块内存的申请和释放。2）Python中所有小于256个字节的对象都使用pymalloc实现的分配器，而大的对象则使用系统的malloc。3）对于Python对象，如整数，浮点数和List，都有其独立的私有内存池，对象间不共享他们的内存池。也就是说如果你分配又释放了大量的整数，用于缓存这些整数的内存就不能再分配给浮点数。【Python环境】12道Python面试题总结2、什么是lambda函数？它有什么好处？lambda表达式，通常是在需要一个函数，但是又不想费神去命名一个函数的场合下使用，也就是指匿名函数lambda函数：首要用途是指点短小的回调函数lambda[arguments]：expression>>>a=lambdax，y：x+y>>>a(3，11)3、Python里面如何实现tuple和list的转换？直接使用tuple和list函数就行了，type()可以判断对象的类型。4、请写出一段Python代码实现删除一个list里面的重复元素。这个地方用set可以实现。
8. 如何面试后端程序员
计算机网络常见面试点总结
计算机网络常见问题回顾
2.1 TCP、UDP 协议的区别
2.2 在浏览器中输入url地址 ->> 显示主页的过程
2.3 各种协议与HTTP协议之间的关系
2.4 HTTP长连接、短连接
2.5 TCP 三次握手和四次挥手
三 Linux
3.1-简单介绍一下-linux-文件系统？
3.2 一些常见的 Linux 命令了解吗？
四 MySQL
4.1 说说自己对于 MySQL 常见的两种存储引擎：MyISAM与InnoDB的理解
4.2 数据库索引了解吗？
4.3 对于大表的常见优化手段说一下
五 Redis
5.1 redis 简介
5.2 为什么要用 redis /为什么要用缓存
5.3 为什么要用 redis 而不用 map/guava 做缓存?
5.4 redis 和 memcached 的区别
5.5 redis 常见数据结构以及使用场景分析
5.6 redis 设置过期时间
5.7 redis 内存淘汰机制
5.8 redis 持久化机制（怎么保证 redis 挂掉之后再重启数据可以进行恢复）
5.9 缓存雪崩和缓存穿透问题解决方案
5.10 如何解决 Redis 的并发竞争 Key 问题
5.11 如何保证缓存与数据库双写时的数据一致性？
六 Java
6.1 Java 基础知识
6.2 Java 集合框架
6.3 Java多线程
6.4 Java虚拟机
6.5 设计模式
七 数据结构
八 算法
8.1 举个栗子（手写快排）
九 Spring
9.1 Spring Bean 的作用域
9.2 Spring 事务中的隔离级别
9.3 Spring 事务中的事务传播行为
9.4 AOP
9.5 IOC
不需要写代码就能衡量候选人的方法可能有一万种。我常用的三个主要方法可以覆盖许多不同的技能。在面试过程中，我们会谈论候选人的经验，要求他们做一些代码审查，并与别人合作设计一个系统。
下面我会详细解释这个过程。
我试图通过这些方法找到真正能够胜任技术工作的候选人，并且他们必须能在单纯的编程技能之外给团队带来价值。通常在一次面试中我能在大约一个小时内覆盖所有三个部分。我有信心这些信息能让我找到好的候选人。
1、深入挖掘他们的经验
许多团队已经这样做了。他们会在面试一开始花几分钟，询问候选人之前的工作，他们对工作的态度，等等。大多时候这就像随意谈话一样。
但这是不对的。
记住这是面试。你需要尽可能地理解他们构建系统时使用的技术。
为了做好这一点，你需要在面试开始之前仔细阅读他们的简历。这不是开玩笑，在面试开始之前至少花上10分钟仔细阅读（不是略读）简历，如果花30分钟时间则最好。要从简历中尽可能多了解些他们之前的项目，Google一下看看能否找到他们项目的公开信息。面试时挖掘背景信息所花的时间越少，就越能获得好的效果。
在面试中，要求候选人谈谈他最近最感兴趣的项目。要练习主动的倾听，要学会参与。假装你是他团队中的一员，或者假装你们是在做架构审查。你要努力了解他们构建的东西以及构建的方法。这样做的好处和坏处是什么？要让候选人知道，不知道答案无所谓，但重要的是能勾起你的好奇心。
下面是我认为能获得好的答案的问题：
你在项目中的职责是什么？这个问题本身并不是决定性的。即使在项目中承担的职责很小，他们也可能很适合你们的团队。你的候选人也许正是因为没能获得重要的职责而在寻找新的机会。因此，知道他们过去的职责会很有帮助。
你从他人那里获得了什么帮助？无法感受他人的帮助是个极其危险的信号。即使是个人项目，也一定需要别人的帮忙。你肯定不想要一个以自我为中心的同事。
给我介绍下那个功能的工作原理。解释下数据的来源和去向、存储方式以及这一切能带给最终用户的好处。这个问题的答案足以吸引你的好奇心。
这个项目中最糟糕的技术债务是什么？好的工程师必须理解他们做出决定时需要付出的代价。问完这个问题，可以继续询问他们怎样改正这些问题，或者尚未改正的理由。
有没有出过生产环境下的bug或服务中断？测试下他们是否理解bug的原因，以及团队解决bug的方法。他们是否提前预期到了bug？下次怎样才能避免同样的问题发生？
他们怎样与代码的“作者”交流？交流是否有用？是否高效？是否友善？
他们会着重哪些问题？是否能明确表达出他们的疑问？他们是否会立即指出哪些无关紧要的问题？
他们是否善于阅读自己不熟悉的代码？
过于糟糕的拉取请求的描述或提交信息；
能用但无法自洽的代码；
过于复杂的代码（需要重构的代码）；
混乱的变量或方法名；
过度设计的代码（即实际上永远不会用到的功能）。
这一部分面试能让你直接了解候选人的经验。做好这一部分还能让你了解他们如何感谢别人或责备别人。你将会了解到他们如何在两难的工程问题上做出抉择，他们会与你分享最近的教训，他们与别人沟通技术的能力应该也很明显。
如果他们选择了不太适合的项目，可以考虑谈论其他项目。所谓不太适合的意思是项目不够复杂或他们记不清的情况。
注意，这一步要避免询问类似于“告诉我你解决过的最难的bug”之类的问题。要求别人回忆系统的某一部分的具体原理会带来大量的虚假负面判断。人们不可能拥有他们修复的bug相关的一切知识，这种问题会给面试过程带来很大压力。
2、让他们审查你们的代码
这项活动一半是代码审查一半是角色扮演。你可以借此筛选出那些能够提升团队整体代码质量并促进办公室氛围的人。
下面是代码审查过程中需要关注的一些方面：
这个方法需要提前准备很多东西。你需要找到或编写一段代码供候选人审查。你还需要为你希望候选人找出的问题创建一个优先级列表。不要让面试管当场出题，一定要事先准备好。
在选择需要审查的代码时，不要选择产品代码。你的候选人没有你所拥有的背景知识，这样做实际上是将候选人与你的同事比较，而不是与其他候选人比较。
努力降低代码示例中的复杂度。面试的时候，候选人没有太多时间阅读代码，而且很可能他们并没有想到会做代码审查。热身就要花很长时间。
在代码中加入一两个真实的bug，但不要强调找bug。一般来说，代码审查并不是个好的找bug方法，特别是审查者从来没有见过代码的情况下。能自证的bug（如给需要数组的函数传递字符串）最好。在你的优先级列表中，bug的优先级应该是最低的，bug应该是给极其优秀的人的加分项。
最后，代码应该做一些实际的事情。如果你的公司很出名，那可以选择你的产品简化版本。但如果你需要花大量时间为候选人提供背景信息的话还是算了。
最好的选择要么是虚构的代码（也许可以选择本文竭力避免的代码面试中用到的代码），要么是开源代码中的一个拉取请求。
一旦决定了要审查的代码，你应该期待候选人找出下面这些东西：
如果代码中没有足够的问题，就多加一些。
这里有个潜在的问题，我还没有确定的答案。这个问题是：你是否应该提前将代码发给候选人？
如果你这样做，就又给那些有空闲时间的人以巨大的优势。如果不这样做，就要面临增加面试压力的风险。
我倾向于后者。好的面试官可以减轻压力，方法之一就是让面试者提前知道他们将做代码审查，你也可以在审查开始之前介绍你的期望。
9. hr如何面试web前端工程师，该问哪些技术问题
hr如何面试web前端工程师，该问哪些技术问题
一、基本知识
我们生活在网际网路时代，你想知道的任何事情几乎都能在15分钟内找到相关资讯。可是，能找到资讯并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜寻解决方案，怎么可能保证按期完成工作呢？听听，还有谁在说“我 不知道，但我可以上网搜到。”请这些同学把手举起来，让大家认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况应该知道的。
[list][*]
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
[*]
DOM操作——怎样新增、移除、移动、复制、建立和查询节点。
[*]
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
[*]
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
[*]
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
[*]
盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
[*]
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
[*]
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
[*]
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
[*]
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
[/list]
重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。
二、少量提问
我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插着问一些小问题。比如说：
这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他资讯，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩充套件要考察的知识范围，最简单像JOSN与XML的区 别、安全问题、容量问题，等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的程式码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把 关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。
三、解决问题
做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都 明白。可是，只要一跟这些人谈到怎么查询方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。
其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。
对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。
考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样 做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我 评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的资讯。
HR一般不会面试太深的问题，主要是了解一下你之前的工作经历，更多的是你自己描述，中间可能会问一些初级的问题，比如，你为什么从上一家单位离职等类似问题。
一道web前端工程师面试题，求解答。
这样的布局用绝对定位实现最合适，ABC的外层用相对定位，里边各列用绝对定位就可以。至于CBA且B宽度自适应，还是用绝对定位，但只定位C,A分部到两侧，中间的列margin设成左右列的宽度就可以。
web前端工程师如何才能硬气的跳槽？
web前端开发工程师想要硬气的跳槽，起码应该达到以下几点：
1.掌握扎实的技术基础，
需要掌握技术包括：HTML、CSS、JavaScript;
HTML是Web程式设计的基础，HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页档案本身是一种文字档案，通过在文字档案中新增标记符，可以告诉浏览器如何显示其中的内容。
维护大型的CSS程式码库并非易事，特别是那些随意散漫未经组织的CSS程式码极易变成一团乱麻，所以，应该掌握CSS命名规范，来帮助开发者编写优质的程式码。
2.深入理解前端工程化和元件开发;
需要熟悉web前端框架—— React、Vue.js等，
React为我们提供了直接易用的，以状态为核心的前端应用开发方式，前端工程师应该会分析React内部工作原理，讨论React中简单元件、类元件等渲染流程。
Vue.js单元测试是应用开发中不可或缺的部分，日常开发中会用到的Vue.js单元测试的例子，所以应该掌握。
3.熟练掌握Web开发相关知识
至少熟悉一门后端语言，例如Node.js、Java、Go等;
Node.js内部原理视非常重要的，应该明白Node.js的主程序是如何启动的、如何载入内建模组、os包如何实现等等。
4.对技术有热情，有一定前端架构能力或者技术深度;具备团队合作意识强，能够多团队协作开发;具备企业级大型前端应用开发经验更佳。
如何识别一个人是web前端工程师
前端工程师需要懂得设计类程式码和js，有需要了解一些后台语言，例如PHP等。
如何实现成为web前端工程师的梦想
1.入门阶段：能够解决一些问题的水平。有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript程式设计能力)，能够完成一些简单的Web前端研发需求。
2.进阶阶段：将JavaScript、HTML、CSS之类的编码帮助手册里的每个方法/属性都通读几遍!只有将基础打好，以后的路才能走的顺畅。
3.入室：最强程式码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发程式设计中的程式码主力。程式设计师应该能够肯定的回答：对于这个需求而言，我的程式码就是最优秀的程式码。
4.注重细节，注意那些当前需求里没有明文给出的细节：程式码效能的差异、执行平台(浏览器)的差异、需求的隐性扩充套件、程式码的向后相容等等。
如何了解web前端工程师和UI设计师
web前端工程师是不参与任何的设计，直接将网站美工制作的网站效果图使用ps按照效果图进行切片并使用、css、js等程式码进行网页的制作，最终编写出符合w3c标准的相容各个主流浏览器的静态页面，同时还需要按照后台开发人员的要求留下一些后台资料的接口。所以说网站前端工程师更多的是程式设计而不是设计。
UI设计师一般是学美术或者设计出身，精通photoshop、AI、AE等平面设计工具，其在网站开发过程的中的职责就是按照客户或者公司的需求设计出符合客户需求和接口或者颜色符合大众视觉的网站效果，如根据不同行业的需求设计颜色、设计接口风格等，其工作的最后成果就是网站的效果图。
web前端工程师进阶学习路线如何走
less和sass什么时候学都行，1,2天就能学会。这个不着急，没有什么承上启下的作用，可以单独拿出来学。
bootstrap就是一个框架，把最主要的栅格系统看看就好。其他的大概了解能干啥就行，很多公司，是不让用bootstrap的，而是用原始码自己写。这个用一天的时间没啥问题。
node.js和angular比较重要，如果学会，算是上了一个台阶了。所以重点说说这个。
angular属于mvvm框架，一开始觉得angular挺复杂的，所以想学一个简单的，轻量级的，所以决定先学vue。但是在了解的过程中发现，很多的专业名词，没听过，或者理解不透。所以又开始从头学习node.js。在学习node.js的过程中又开始迷茫，发现了很多JS不懂的地方。
所以，又开始深入研究js的dom，函式，ajax，阵列等。总之用了很长的时间，浪费了很长时间。
最后总结一下啊。其实，没必要钻那么多牛角尖。
先做着vue的例子，不懂的地方，直接略过，很多时候，不理解的不懂的东西，用着用着，突然就能明白。照猫画虎先把VUE的例子跟着做一遍之后，同时梳理一下涉及到的JS知识点。能自己用vue做出几个小成品的时候，开始结合js研究node.js。之后再去涉及angular。
angular差不多有个大概了解的时候，反过头接着学vue，你会发现，又会发现很多新东西。
web前端这个东西特别有意思，当你达到一个高度，返回来再看以前的技术，会发现，哎呀，竟然又能发现新大陆。
厦门web前端工程师培训哪家好
培训学校很多，没有具体的衡量标准的。但是可以从几方面去选择：
1 有很多优秀导师的
2 培养出很多优秀学员的
3 只做培训的，没有做其他的
4 做的比较久的。
北京WEB前端工程师培训哪个好
建议找全程面授课程的地方学习，课程体系很重要，现在企业在用人方面讲究全栈的前端工程师人才，所在在课程选择上要慎重，学习内容要基于HTML5，要包含pc端+移动端+后端。这要才能学的系统，就业上才会有所保障。
10. Web前端企业面试题
答：
一、display和visibility的相同与不同点
1、相同点：display和visibility都有讲元素隐藏的意思
2、不同点：display是元素隐藏，隐藏的元素不占文档流
而visibility隐藏的元素仍然占文档流
二、display和visibility的属性值
1、display
2、visibility
答：
在开发过程中经常需要循环遍历数组或者对象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他们的异同点
for循环
其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组
for循环中可以使用return、break等来中断循环
结果：
forEach
对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。
输出结果：
for…in
循环遍历的值都是数据结构的键值
总结一句: for in也可以循环数组但是特别适合遍历对象
结果：
for…of
它是ES6中新增加的语法，用来循环获取一对键值对中的值
循环一个数组
循环一个普通对象（报错）
答：
px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的 。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。
所以相对于同一机型来说是一个绝对的长度单位。
em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸 。
以其父级元素为基准来变化长度。所以其算法不是一个固定的值。
rem：是CSS3新增的一个相对单位（root em，根em） 。
那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。
在移动设备上，我们常常设置
此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。
因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。
那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。
基础篇
1.shift
// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined
2.unshift
// 将参数添加到原数组开头，并返回数组的长度
//注：此方法在ie6.0下
// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠
// 一般需要用返回值时可用splice代替
3.pop
// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined
4.push
// 将参数添加到原数组末尾，并返回数组的长度
5.concat
// 返回一个新数组，是将参数添加到原数组中构成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
进阶篇
1.forEach
是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。
2.map
map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此
forEach和map对比
相同点
1）都是循环遍历数组中的每一项；
2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；
3）this都是指向调用方法的数组；
4) 只能遍历数组；
不相同点
1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。
2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。
3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。
3.filter
它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。
理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据
4.find()
返回通过测试的数组的第一个元素的值,
理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined
在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
语法
array.find(function(value, index, arr),thisValue)
value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值
返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。
扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧
5.every
理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)
6.some
理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false
7.rece
它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback
他可以传四个参数:
1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)
2,currentValue:数组中当前被处理的元素
3,index:不啰嗦,自己顾名思义去吧
4,array:返回调用rece的数组
彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法
substring() 和 substr()
相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
不同点： 第二个参数
substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾'）。
1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。
首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。
所以，一般creadted钩子函数主要是用来初始化数据。
2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例
下面是结果
nihao
取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
总结：
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发，比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化
6、Vue中组件之间的传参方式有哪些方式？
Vue 组件传参的八种方式总结
Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的
一、props 传参
子组件定义 props 有三种方式:
// 第一种数组方式
// 第二种对象方式
// 第三种对象嵌套对象方式
第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用
父组件传参的俩种方式
第一种静态属性传参
注意：
1、在不定义 props 类型的情况下 props 接受到的均为 String。
2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true
第二种动态属性传参
注意：
1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值
2、会保留传入值的类型
3、如果是表达式则获取到的是表达式的计算结果
二、attrs 和listeners
$attrs
$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：
组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。
属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）
$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)
三、$emit 通知
这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值
答案有俩种，一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值
四、v-model
这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思
五、插槽
六、$refs, $root, $parent, $children
$root 获取根组件
$parent 获取父组件
$children 获取子组件(所有的子组件，不保证顺序)
$refs 组件获取组件实例，元素获取元素
七、project / inject
注意：注入的值是非响应的
八、Vuex
这个相当于单独维护的一组数据，就不过多的说了。
watch，computed和methods的关系
1.watch和computed都是以Vue的依赖追踪机制为基础的 ，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数
watch和computed各自处理的数据关系场景不同
1. watch 擅长处理的场景： 一个数据影响多个数据
2. computed 擅长处理的场景： 一个数据受多个数据影响
watch用法 监听下记haiZeiTuan_Name的值，会改变其他所有的值
结果：this.suoLong会变为 '橡胶海贼团索隆',以此类推
computed用法 监听下记firstName，secName，thirdName的值，会改变luFei_Name的值
methods和computed的区别例子
注意两次点击computed返回的时间是相同的！！
1.两次点击methods返回的时间是不同的
2.注意两次点击computed返回的时间是相同的
【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据 （不是放在data等对象下的实例数据） ，所以computed只提供了缓存的值，而没有重新计算
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。
参考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
2、async await
async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档
两者的区别
1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
2、async await与Promise一样，是非阻塞的。
3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。