面试高频问题

1.开发项目的流程是什么？

2.公司有没有强制使用eslint等代码检测工具？

ESLint是一款专门用于Javascript/ESscript代码一致性的“插件”。

   它的根本目的是统一项目的代码风格规范，养成规范的写代码习惯，减少不必要的错误和隐患。
在团队协作中，使用Eslint规范成员的代码风格也有利于保持代码的一致性和可维护性

> 全局安装：
npm install -g eslint
> 项目安装：
npm install eslint --save-dev


配置
新建一个文件.eslintrc.js，并且根据规则文档进行编辑

配置文件说明：
常用到的属性有：

extends：用于载入一个配置文件
globals：在此处规定全局变量且设置重写权限
plugins：引入插件
rules：在此处编写个性化编码规则
parserOptions：常用于设置支持ES6
改变一个规则设置，必须将规则 ID 设置为下列值之一：
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

执行检查并且修改
eslint test.js --fix

3.平时怎么学习前端知识？

 作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。

以下知识点是作为一个前端工程师必须了解和熟悉的：

    DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

    DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

    事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

    XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。

    严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

    盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。

    块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

    浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

    HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

    JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

4.项目开发时是怎么进行项目自测？

一、前期准备 　　
1）测试组与开发组协调，包括项目测试流程约定，测试组与开发组的协作活动安排等；
在项目前期，规划好测试组与开发组的协调工作，可以让测试人员与项目开发人员彼此了解在测试活动中的职责。
为了规避项目部分风险，项目的测试组与开发组需要明确在项目的哪些重要活动需要提前沟通，例如需求的评审，汇总发现某周期测内仍遗留大量缺陷；
对测试部门制定的相应测试流程中需要开发人员参与的部分，是否根据项目实际情况进行调整。
　  
2）项目需求及相关资源了解；
测试组组长（或测试经理）需要对项目的客户需求和项目本身要求进行了解，明确测试范围、测试指标、测试要点，测试所需软硬件环境等，为制定测试计划打好基础。 二、制定测试计划
主要包括测试软硬件资源，人力资源，测试指标，粗略进度，采集的度量数据，风险，约定等。
网络上有很多这方面的模板资料，建议定义好测试过程中要收集的度量数据，一般包括缺陷本身的属性，例如严重程度，功能类别，发现阶段，工作量，对应用例等；
各周期内（例如以周为单位）缺陷的收敛情况（发现数量，解决数量，遗留数量），阶段分布情况，缺陷存活情况等。 　　
三、编制测试用例 　　
1）了解项目需求（客户需求与项目需求）； 一方面为编制测试用例打好基础，另一方面可以找出需求中存在的问题。 
2）明确公共用例； 　　找出测试需求中，在编写用例时会出现重复的需求，编写公共用例，这样回减少后期用例编写工作量，也方便后期用例的维护。 　　
3）明确手动测试用例与自动化测试用例范围； 　　可以避免重复劳动，有些业务流程可以用自动化的用例来代替手动工作。 　　
4）确定用例编写进度； 　　
5）正式编写； 　　
6）用例验证； 　　
7）明确测试用例执行顺序。 　　
四、实施测试 　
1）确定实施进度； 　　
2）搭建测试环境； 　　
3）执行测试用例，记录用例执行结果，报告缺陷； 　　
4）记录度量数据； 　　
5）维护测试用例。 　　
五、测试总结 　　
1）测试停止评估（参照测试用例执行情况，缺陷收敛情况，与测试指标偏差情况等）； 　　
2）测试总结报告； 　　
3）提交汇总度量数据，测试部门存档。

5.h5及c3新增的一些内容？

video                表示一段视频并提供播放的用户界面

audio                表示音频

canvas                表示位图区域

source                为video和audio提供数据源

track                为video和audio指定字母

svg                        定义矢量图

code                代码段

figure                和文档有关的图例

figcaption                图例的说明

main        

time                        日期和时间值

mark                高亮的引用文字

datalist                提供给其他控件的预定义选项

keygen                秘钥对生成器控件

output                计算值

progress                进度条

menu                菜单

embed                嵌入的外部资源

menuitem        用户可点击的菜单项

menu                菜单

template        

section        

nav        

aside        

article        

footer        

header        （记住部分就可以）

6.移动端如果做多终端的适配？（各主流手机 ，pad，电脑）

1、可以用bootstrap。
2、用css3的媒体查询。
3、使用rem。

7.使用angular vue react框架做过那些类型的项目？项目有多大？遇到过那些棘手的bug？

angular现在市场小，没有用它做过大型项目 
，我现在主要用vue、react来做开发。做过电商、在线教育等移动端web和app。 

棘手的Bug：做微信分享时与后台对接签名的问题，用vue做websocket时第一次访问和服务端通信，
跳转其他页面后依然保持连接没有断开，会造成下次访问再次创建连接，发送消息是出现两次以上同样的信息，
解决方案，在跳转页面时，需要在钩子方法beforeDestroy ()里面关闭websocket即可。

8.jquery和zepto有什么区别？

他俩对于现在的mv*框架及react这种专注视图层的框架有什么区别？

①Zepto不支持旧版本的IE浏览器

②添加id时jQuery不会生效而Zepto会生效

③Zepto中没有为原型定义extend方法而jQuery有 

④Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小 

⑤事件触发的区别：使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行 

⑥事件委托的区别：zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件

9.ajax和fetch有什么区别？

jsonp是解决跨域的，还了解过那些并实际使用过那些跨域的解决方法？

fetch和ajax 的主要区别

1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500

2、在默认情况下 fetch不会接受或者发送cookies

跨域:跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

跨域的解决方案:

1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享（CORS）

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

10.你跟后端交互的时候需要注意那些问题？

后端开发的接口字段是如何定出来的？

后端开发的接口字段里面 你认为必须要有的是什么？

与后台交互常见问题
1、图片的宽度固定。不然出现各种问题。当用户上传大的图片时易出现问题。

2、PC端需要兼容手机端的页面，如果
标签的字体大小不受设置的控制，在手机端往往会偏大很多，需要设置P标签的高度为百分比高度，外面的
容器的高度伸缩，所以也可以达到伸缩的效果。

3、在P标签中，该断行的时候就断行。不然出现文字跑到屏幕外面去了。
①断行代码，自动换行：

word-wrap: break-word;   //在长单词或 URL 地址内部进行换行。   另外一个值是：normal：只在允许的断字点换行（浏览器保持默认处理）。
word-break: break-all;  //允许在单词内换行。  另外两个值是   keep-all：只能在半角空格或连字符处换行     normal：使用浏览器默认的换行规则。
②另外一种情况是不断行，显示...在后面，可以后天解决这个问题，前端css的解决方案是：

overflow: hidden;
white-space: nowrap;    //white-space属性指定元素内的空白怎样处理。   nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
text-overflow: ellipsis;   //text-overflow属性指定当文本溢出包含它的元素，应该发生什么。   ellipsis:显示省略符号来代表被修剪的文本。
4、input输入框的正确写法应该是给一个和字体大小差不多高度，然后其他的写padding。不然在360浏览器下出现问题。对于placeholder的正确写法应该是针对IE10以下的浏览器做判断，如果低于IE10，则用label的写法，如果高于IE10且等于IE10,则用placeholder属性，遍历每一个input或者是textarea；把label的值赋给placeholder，因为在高级浏览器下面，记住密码的情况下出现label和记住的密码叠在了一起。

5、在写输入框前面有像下面的图片这样的图标的时候,需要注意：
如果是用背景来做的话，出现的问题是当记住密码或者是双击input时出现问题，导致图片被一层黄绿色的东西盖住了。正确的做法是：使用标签来写这个图标，并且z-index定位在上层，才不会被盖住。

6、first-child的使用：在IE7以上都支持，但是last-child不支持。所以在写很多导航的之后应该使用margin-left,margin-top,border-left,border-top,padding-left-padding-top，以避免增加不必要的class。

7、min-height的使用，在登录首页或者内容不够高的时候非常有用。

8、上传文件或者上传图片的写法

> 后端开发的接口字段是如何定出来的
原则一：一个页面尽量只有一个拉取接口
主要考虑的是尽量减少请求链接数，请求链接数越多，由于网络原因，出现异常的可能性越大。

原则二：打破规则一，当请求需要缓存并且有需要及时更新的情况
为了更好的打开速度，对于不经常变化的数据，往往需要做数据缓存以及请求缓存。但有些信息，比如预约时间，又需要做到及时，则应该分多个请求。

原则三：如果返回数据中某个字段的数据没有，返回该字段比不返回该字段要好。

>  后端开发的接口字段里面 你认为必须要有的是什么
首先接口分为四部分：方法、uri、请求参数、返回参数
1、方法:新增(post) 修改(put) 删除(delete) 获取(get)
2、uri：以/a开头，如果需要登录才能调用的接口(如新增、修改；前台的用户个人信息，资金信息等)后面需要加/u，即：/a/u；中间一般放表名或者能表达这个接口的单词；get方法，如果是后台通过搜索查询列表，那么以/search结尾，如果是前台的查询列表，以/list结尾；url参数就不说了。
3、请求参数和返回参数，都分为5列：字段、说明、类型、备注、是否必填
字段是类的属性；说明是中文释义；类型是属性类型，只有String、Number、Object、Array四种类型；备注是一些解释，或者可以写一下例子，比如负责json结构的情况，最好写上例子，好让前端能更好理解；是否必填是字段的是否必填。
4、返回参数结构有几种情况：1、如果只返回接口调用成功还是失败（如新增、删除、修改等），则只有一个结构体：code和message两个参数；2、如果要返回某些参数，则有两个结构体：1是code/mesage/data，2是data里写返回的参数,data是object类型；3、如果要返回列表，那么有三个结构体，1是code/mesage/data,data是object，里面放置page/size/total/totalPage/list 5个参数，其中list是Arrary类型，list里放object，object里是具体的参数。

11.你了解过那些模块化规范？

模块化开发有什么好处？

他和组件化有什么区别？

模块化规范:  CMD AMD CommonJS

好处:高耦合、低内聚、可重用

模块化解决了分而治之的问题

组件化解决了代码复用的问题

12.gulp，grunt，webpack这些工具的区别？

他们的工作方式也有较大区别：

　　Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

　　Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

相同点：都可用于项目打包，文件压缩，文件监测等功能。

不同点：

    两种工具的侧重点不同，webpack主要侧重于模块的打包，适合于单页面的项目，开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。gulp侧重于前端开发的工作流程，通过配置一系列的task，如less预编译等，然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

13.你们公司代码是怎么管理的？ git svn及提交流程

从使用者角度分析：
1.svn下载源代码慢。在git中一个几个G的版本库，一般一二十分钟就能下载完毕，但是在svn中要一个小时左右；

2.svn随时都得要与服务器交互，无论是查看log，还是查看以往的版本你必须跟服务器相连，并且速度奇慢务必，而git做这些几乎是瞬间的事；

3.各个分支之间的补丁迁移麻烦，在git上只要两三个命令就可以完事的(其实一个命令，因为需要查找与分支切换)，但是在svn上你必须要下载每个分支的代码，然后比较修改，再上传；

4.git查看历史版本速度快，并且不需要联网。svn必须跟服务器相连才能取得版本，并且取版本非常慢；

14.对node了解多少？

你使用过什么？

觉得nodejs对于前端来说最大的作用是什么？

会用express可以对mysql、mongodb进行增、删、改、查；node可以做为中间件使用，
对一些nosql操作比较好比如mongodb。
如果用react做服务端渲染可以使用node的express来做中间件使用。

15.说下图片上传是如何实现的？

拿到服务端的图片上传接口。方法一：可以用jquery的jquery.form.js上传。方法二：可以用axios上传。方法三：可以用ajax配合h5的FormData来上传图片。然后服务端会返回图片名，将图片名提交到数据库

16.数据代理解决了什么问题？

原理是什么？

1、使用proxy可以解决defineProperty不能监听数组的问题，避免重写数组方法；
2、不需要再遍历key。
3、Proxy handle的拦截处理器除了get、set外还支持多种拦截方式，具体请查阅官方文档（https://developer.mozilla.org...）
4、嵌套查询。实际上proxy get()也是不支持嵌套查询的。

原理：
代理服务器有很多种，大体分为三类：HTTP、FTP、SOCKS，其中又分为透明代理和不透明代理，透明代理一般是网关，为硬件

过程：
(1)客户端先和代理服务器通讯，建立TCP连接，目的IP是代理服务器的IP

(2)客户端发出GET命令，GET命令中包含URL或IP地址、明文

(3)代理服务器将其中的URL转换为IP地址，可能会有DNS，将源数据包中的数据拷贝下来，去掉URL，重新组包再发出去

(4)代理服务器和真实服务器通讯，源IP是代理服务器的IP
以上就是代理的实

17.后台管理系统开发的过程中你认为需要注意的地方有哪些？

1、安全性。
2、业务流程。
3、搭建好目录结构，功能模块化。
4、权限角色分配。

18.ie火狐谷歌浏览器的兼容问题是如何解决的？

如果用float布局做好清除浮动，在公共样式里设置margin:0px;padding:0px;。如果子元素有float那么父元素用overflow:hidden清除浮动。

19.组件通讯的实现方法有哪些？

1、父组件向子组件传值。
2、子组件向父组件传值。
3、用vuex传值。

20.global event bus和vuex的应用场景是什么？

利弊有什么？

21.vuex中action和mutation分别用来处理什么？

需要遵守什么机制？

action处理异步数据最终提交到数据库，mutation用来同步数据做业务的处理。

22.什么情况下使用getter

23.vuex拆分modules的好处有什么？

还有什么对于代码维护性的方法？

24.封装针对自己公司需求的数据请求方法有什么好处？

怎么封装？

25.使用过那些css预处理？说下他的优缺点

26.移动端项目如何解决300ms延迟问题？

27.better-scroll做过那些需求？

28.使用过百度地图吗？

使用过echarts？

29.react定义组件的方法有哪些？

区别是什么？

30.说说redux和vuex的不同？

31.redux需要注意的问题有哪些？

32.redux和router开发的时候遇到过那些问题？

怎么解决的？

33.react+redux开发项目的时候 数据请求这块如何分配？

34.大型的前端构建项目，本地打包和编译的时候如何区别开发和生产环境

递归（快速排序）
自己对react的理解，
虚拟dom实现的原理以及怎么实现，
跨域，
XSS跨站脚本攻击
CSRF跨站请求伪造
还有怎么创建一个类，
get和post的区别，
自己的优缺点，
v-if和v-show的区别 箭头函数和普通函数的区别，
就大概是react的生命周期函数。
js类型检测
css的flex布局
闭包
继承
原型链。
虚拟dom。
页面性能优化。
react里面的坑。