如何清除浮动，有哪几种方法，区别是什么

1、移动端你遇到过什么兼容问题?

1、如果在input设置边框颜色在ios系统里会出现兼容性问题，需要在外面加一个div设置div的边框代替input边框。

2、文字溢出，用overflow:auto做滚动条在ios上面会卡顿，需要用iscroll解决。

3、防止手机中网页放大和缩小。

4、禁用自动匹配手机号、地址、email。

5、用好rem和css3的媒体查询解决适配问题。

6、ios和android下触摸元素时出现半透明灰色遮罩。用 -webkit-tap-highlight-color:rgba(255,255,255,0)解决。

7、iphone及ipad下输入框默认内阴影。用-webkit-appearance:none;解决。

8、移动端点击穿透问题。尽量不用要touch事件，用click事件，然后防止冒泡就事件可以了

2、http和https的区别？

http是超文本传输协议。用于Web浏览器和网站服务器之间传递信息。

https是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。可以防止抓包的问题，一般做接口都是使用https。

3、如何提高网页性能？

1、用图片懒加载减少请求数。

2、用好伪元素降低标签的数量。

3、不要有冗余代码。

4、用好打包合并压缩工具，将css、js文件合并压缩，减少请求数。常见的工具：grunt、gulp、webpack。最强大的合并压缩工具：grunt。

4、移动端的适配怎么做？

最常用的就是rem和css3媒体查询。

5、什么是闭包？在开发项目时什么地方用闭包？

闭包就是父函数给子函数传值，解决作用域问题。比如做一个随机抽题功能、选项卡、幻灯片等。一般用setInterval的地方用的比较多。

6、说说对象的继承？

我一般都用call、apply、bind做继承，bind指向对象本身。

7、jquery的优点？

简单易用，尤其是对dom的操作很方便。

8、调试是怎么做的？

用chrome的开发者工具调试，console.log，alert等。

9、本地存储localStorage与sessionStorage的区别，都在什么地方使用？

localStorage关闭浏览器还是可以保存记录。sessionStorage关闭浏览器后数据消失。用在会员登录后保存状态，购物车等地方。

10、订单支付怎么实现？

1、登录会员。

2、进入商品页面。

3、将商品放入购物车。

4、提交订单。

5、对接支付宝或微信支付进行支付。

11、DOM执行事件流程?

1、捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；

2、目标阶段：到达目标事件位置（事发地），触发事件；

3、冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

12、scss和sass，less区别?

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。区别：1.编译环境不一样。Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested（嵌套缩进的css代码）, compact（展开的多行css代码）, compressed （简洁格式的css代码）和 expanded（压缩后的css代码）。

13、伪类和伪元素的区别?

伪类用于向某些选择器添加特殊的效果，比如：:hover，:foucs，：link，:active，:vistied，:first-child，:lang。伪元素用于将特殊的效果添加到某些选择器，比如:berfor，:after，:first-letter，:first-line。

14、多维数组如何实现扁平化处理?

1、常规就是循环和递归 。2、使用es的展开符。。。

15、jsonp的实现原理?

就是动态生成一个script标签。然后通过script的src加载地址，同时根据callback返回函数里面获取数据，这样就的需要后台接口返回的时候返回一个带变量的数据

16、什么样的网站适合作响应式？

功能不是很复杂的网站，设计排版简单的网站适合。比如公司官网，界面清晰的视频网站等。

17、说一下git遇到冲突如何解决？

1、pull一下，更新程序。

2、同步，查看冲突代码。

3、人工修改，保持本地最新版。

4、Add to Git Index，提交修改。

5、Commit提交。

6、push推送到服务器

18、前端工作流程？

1、拿到原型图和产品经理沟通业务需求。

2、拿到设计稿先规划一下思路然后切图布局。

3、写出js效果。

4、拿到后端的接口文档测试一下接口是否可用。

5、对接数据渲染到页面。

19、tap事件原理？

在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件,tap事件的原理其实是源于触摸touch事件,在移动触摸事件就是在同个点触发,及touchmove的距离距离touchstar的距离为0,并且点击的时间不超过某个设定的时间值,超过该时间值的话,就属于长按了

20、懒加载原理？

一般来讲，给图片src配置一个假的地址，同事给添加一个data-url属性指向真是url地址，当图片快要显示的时候将url地址替换成data-url的属性

21、移动端的fastclick怎么实际使用？

引入fastclick.js插件。然后Fastclick.attech（document.body）中

22、公司的测试是怎么向你提bug的？他是怎么记录的？

写一个文档图文并茂的形式给我。边测试边记录。

23、原生ajax的步骤?

5个步骤，

1、构建xmlHttpRequest对象。

2 、准备请求open。

3、send发送数据。

4 、等待数据 。

5 、成功接受数据

24、get和post区别是什么?

1、本质区别 一个用来提交数据，一个用来获取数据。

2、 传参方式区别 。

3、 安全性 。

4 、传参数数据大小

25、有几种方法可以改变this指向?

1、call apply bind 。

2、可以提出箭头函数

26、说一下你有几种让子盒子居中的方法?

1、flex

2、定位各50%，然后tranfrom:translate(-50%)

3、定位 然后上下左右都是0 margin auto

27、vue-router的原理？catch方法的实现原理?

用户通过vue的router.push和router.replace来修改地址栏。同时监控地址栏。获取到对应组件，去配置信息里面寻找对应的页面显示

28、git和svn的区别?

一个是集中式管理，一个分布式管理

29、vue计算属性和watch的区别?

计算属性是为了检测某个属性。而这个属性是由别的变量觉定的，核心在计算，watch是监控，主要是用来某个变量发生变化导致别的触发来使用，计算属性中的变量不需要在data里面初始化

30、vue的优势为什么使用vue?

vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

31、mvvm是什么?

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。就是model->view->view->model

32、vuex实现原理?

Store，负责管理整个数据访问、修改等； 提高API；getter.xxx，怎么可以每次拿到最新数据？，action和mutation负责提交数据。

33、vue Seo优化?

vue默认不支持seo优化因为是单页面应用，数据也是用ajax读取，无法友好的让搜索引擎抓取，所以无法获取排名，需要用服务端渲染Nuxt.js来解决，但是这样开发成本太大，建议如果考虑seo的话就不要使用前端框架，用传统的h5开发即可。

34、vue服务端渲染?

建议使用nuxt.js,因此可以在服务端可以提前渲染出来，解决了单页面一直存在的问题：SEO和初次加载耗时较多的问题。

35、es6和es5的区别?

说出ES6的特点：

1、let const。

2 、字符串模板 。

3 、promise 。

4 、class。

5、箭头函数。

6、解析结构。

7、数组和对象的新方法 ，比如 set assign。

36、webpack按需加载?

使用require.ensure做页面分割按需加载。

37、你常用的loader加载器有哪些?

一般在vue的webpack中配置，常见的'style-loader'css-loader less-loader babel-loader(解析ES6) json-loader vue-loader

38、怎么理解promise（语法糖）?

Promise 是异步编程的一种解决方案，new Promise(function(resolve,reject){

if(/异步操作成功/){

resolve(value);

}else{

reject(error);

}

})或者通过生成对象后通过then的方法

39、如何实现异步编程，有哪些方式?

现在比较常用的是promise。解释一下promise.原来比较多的是通过回调函数或者事件监听

40、解释一下什么是vue实例

类似创建一个vue对象。里面包含钩子函数，data,methods.computeds等

41、vue组件有多少个生命周期？

11个，建议不要说个数，说出8个常见的和后来加的

42、vue组件之间传递数据怎么实现，区别是什么？

1、分父子组件如何传值。

2、 使用vuex。

3、事件总线bus。

4、本地存储传值。

43、在开发中怎么与后台合作的？

1、通过接口文档拿到json数据。

2、用ajax将数据渲染到页面。

44、vue数据双向绑定的实现原理?

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

45、nodejs了解吗？

了解。一般我用来配合mongodb开发一些小的接口,和使用他的npm 命令，主要用nodejs做中间件。

46、数组排序有哪些方式？

js自带sort(function(a,b)return a-b)方法,或者手动写冒泡或者快速排序

47、用css如何实现左侧宽度固定，右侧宽度自适应?

1、flex布局。

2、margin配合float实现。

3、使用calc计算属性。

48、技术团队人员分配?

如果是小型项目：一个产品经理、一个设计师、一个前端工程师、一个后端工程师总共4个人。

49、如何开发响应式网站开发？

传统使用boostrap.boostrap也是基于媒体查询来实现响应式的，第二，注意使用百分比或者rem布局

50、js数据类型有哪些？

6种数据类型：string、number、boolean、object、undefined、array。ES6中新加symbol。

51、父盒子高度自适应，里面的文字行高如何自适应?

1、使用rem或者em来设置文字大小，em和rem是相对单位。

2、使用js获取父元素高度来设置子元素文字。

52、在工作中如何配合安卓和ios开发工程师?

基本上通过webview来实现安卓或者ios对js的交互

53、项目结构是如何搭建的？

现在基本上使用vue脚手架来搭建结构，手动搭建过程是npm init初始化结构，配置webpackjson和git仓库，还有安装依赖，创建static.view等对应文件夹并开始编写代码

54、常用的浏览器有那些？

谷歌。webkit 火狐gecko IE trident

55、渐进增强和优雅降级?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

56、常用的dom的操作方法?

创建节点，节点克隆，替换，删除，节点属性的操作

57、事件代理的原理?

基于事件冒泡

58、前端安全问题?

1、xss攻击。

2、防止sql注入。

3、文件上传漏洞 预防方法就是前端对所有用户输入的信息都需要验证，且后端也得需要验证。

4、防短信轰炸，用图文验证码解决。

5、会员登录是的cookie欺骗，用token解决。

59、jquery的优化方法?

1、选择器要用对，理论上ID选择器是最快的，学会使用缓存JQ对象

2、尽量减少dom操作。比如对某个元素插入数据的时候，先把数据都弄好一次性插入

3、 不要直接使用事件，通过绑定on的方法加事件

4 、学会使用链式写法

60、jquery添加插件?

两种开发模式，第一种是基于函数的函数，jQuery.extend。第二种是对象级别的插件开发$.fn.extend.

61、是否设计过通用的组件?

设计过，比如：toast，下拉加载，购物车等。

62、平时是如何学习的?

1、看技术文档。

2、去github上下载开源代码读代码。

3、网上找些视频来学习。

63、项目中负责了什么?

作为一个前端，首先是项目的页面和数据展示，有时候处理不同设备的兼容，再就是处理页面之间和数据之间的逻辑关系，提高用户体验

64、自己的职业规划?

我目前规划是基于当前目标，先努力扎实自己的基础，尤其前端这个行业日新月异，基于基础然后向架构方向发展

65、除了前端还会其他的吗？

因为上家公司主要后端语言是PHP，所以一些基本的PHP代码可以阅读，当然，现在我对nodejs也有一定的研究

66、给你一个5个页面的网站多长时间能做完?

这个的看页面的交互和数据情况，一般来说，基本静态页面完成起来是很快的，更多侧重数据交互和也没面功能测试，有时候可能在一些特效动画上耗费点时间

67、了解过模版引擎吗？

使用过templat.js和Dot.js。就是获取到数据快速完成数据渲染的过程，节省代码量。提高维护性，减少 拼接字符串，这样也优化的性能

68、项目上线是如何操作的？

正式服务器接口测试--合并分支-回归测试--检查线上服务器权限-数据是否清空- 上线包检查并发布-灰度测试-维护

69、vue中watch和computed的区别?

watch主要作用是监听路由变化。Computed主要是做计算方法。

70、开发项目的流程是什么？

1、和产品经理沟通确认需求。

2、拿到设计稿开始切图。

3、开始布局写页面和js效果。

4、和后台对接数据。

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

没有强制使用，但是也让使用，防止冗余代码的出现尤其对新手比较重要。

72、项目开发时是怎么进行项目自测？

边开发边测试，做一个功能测试一个，如果出现bug就用调试工具，如果调试工具提示的不详细，就用排除法来调试。

73、h5及c3新增的一些内容？

h5新增主要功能如下：

1、video视频。

2、audio音频。

3、websocket。

4、history api。

5、canvas。

6、geolocation地理位置。

7、拖拽事件。

8、localStorage。

9、sessionStorage

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

1、可以用bootstrap。

2、用css3的媒体查询。

3、使用rem

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

angular现在市场小，没有用它做过大型项目，我现在主要用vue、react来做开发。做过电商、在线教育等移动端web和app。棘手的Bug：做微信分享时与后台对接签名的问题，用vue做websocket时第一次访问和服务端通信，跳转其他页面后依然保持连接没有断开，会造成下次访问再次创建连接，发送消息是出现两次以上同样的信息，解决方案，在跳转页面时，需要在钩子方法beforeDestroy ()里面关闭websocket即可。

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

jquery体积比较大适合pc端，zepto体积适合移动端，zepto封装了h5的touch事件

77、ajax和fetch有什么区别？jsonp是解决跨域的，还了解过哪些并实际使用过哪些跨域的解决方法？

ajax是用XMLHttpRequest，fetch是用promise。配置服务器增加Access-Control-Allow-Origin:*。利用websocket也可解决。

78、你跟后端交互的时候需要注意那些问题？后端开发的接口字段是如何定出来的？后端开发的接口字段里面 你认为必须要有的是什么？

1、跨域问题。

2、请求类型比如：post、get。

3、是否有必填字段，字段类型；是根据业务需求、页面设计定制出来的；如果是用户登录接口，要有用户名和密码字段。如果是文章列表要有id,title,image等字段。

79、你了解过那些模块化规范？模块化开发有什么好处？他和组件化有什么区别？

CommonJS和requireJS；比如CommonJS规范：一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，用import导入，用module.exports导出，可以做到按需加载，避免冗余代码的产生。AMD，requireJS解决js文件过多浏览器停止页面渲染。可以做到按需加载；模块化是一种编程思想，可以做到按需加载。组件化是自己封装的公共组件方便多次使用。

80、gulp，grunt，webpack这些工具的区别？

gulp和webpack是单页面应用的构建工具，目前webpack被vue，react广泛使用。Grunt是专业的代码合并、压缩工具用于传统的h5页面开发使用。

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

主要用git，小项目用svn；git提交流程：

1、先拉取pull。

2、选择要提交的问题add。

3、提交文件commit。

4、推送到服务端主分支push。svn提交流程：1、先更新。2、再提交。

82、对node了解多少？你使用过什么？觉得nodejs对于前端来说最大的作用是什么？

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

83、说下图片上传是如何实现的？

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

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

1、安全性。

2、业务流程。

3、搭建好目录结构，功能模块化。

4、权限角色分配。

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

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

86、Vue组件通讯的实现方法有哪些？

1、父组件向子组件传值。

2、子组件向父组件传值。

3、用vuex传值。

87、vuex中action和mutation分别用来处理什么？

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

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

封装后方便重用和维护，如果是原生js用面向对象封装，用jquery封装成插件，用vue或是react封装成组件。

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

使用过less、sass。less简单,易上手;属于css的基础拓展；sass 复杂,功能强大,更加丰富的拓展;没有特别的优缺点，自己喜欢什么就选择什么，有的时候什么都不选择就用css就行了。

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

使用fastclick解决ios的300ms延迟问题

91、better-scroll做过那些需求？

1、下拉刷新。

2、上拉加载。

3、内容溢出出现滚动条滑动解决卡顿问题。

92、使用过百度地图吗？使用过echarts？

使用过，比如获取用户经度和纬度，对接百度地图显示用户在地图里显示的位置。Echarts我一般在后台做活跃度、用户访问量统计图。

93、react定义组件的方法有哪些？区别是什么？

1、无状态函数式组件。

2、es5原生方式React.createClass定义的组件。

3、es6形式的extends React.Component定义的组件。最大的区别就是现在都用es6前面两种慢慢的被淘汰不需要使用了。

94、说说redux和vuex的不同？

Vuex：有自动渲染的功能，所以不需要更新。Redux：一个子组件的状态必须通过父组件传递过来，父组件从仓库统一调控，当一个组件相关数据更新时，即使你的父组件不需要这个组件，它还是会自动更新。

95、redux需要注意的问题有哪些？

入口文件，路由文件要分配好，主仓库分配给各个组件，获取值需要用connect将redux与类关联起来。

96、redux和router开发的时候遇到过那些问题？怎么解决的？

redux的问题就是页面刷新后无法保存数据，需要用localStorage来配合解决。Router在子组件里会出现跳转的问题，使用withRouter来解决。

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

比如做会员登录时，会员的信息记录到redux中。在做购物车是也需要把数据记录在redux中。

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

通过变量来区分：export NODE_ENV="development"是开发环境。export NODE_ENV="production"是生产环境。

99、看过jquery源码吗？你说说jquery的底层实现原理。

看过；比如：("#name")就是原生js的document.getElementById("name")。(function(){})实现原理是监听DOMContentListener(兼容火狐和谷歌等浏览器)和onreadystatechange(兼容ie浏览器)实现的

100、你封装过插件吗？封装过哪些插件，说说封装插件的思路

封装过。比如：购物车，幻灯片，选型卡，下拉加载，toast，弹窗等插件。先用原生js写对象再用$.fn去调用。

101、封装过组件吗？说说你封装哪些组件。

封装过。比如：公共的头，alert，购物车等等。

102、说说代码重构的思路？

先看看那些代码可以封装，重用，继承。实现步骤如下：1、提取子函数。2、把大家都要用的方法放到父类中。3、下移函数到子类。4、封装固定的调用逻辑（有点模板模式的意思）

103、项目中遇到印象最深刻的问题，以及解决的思路是什么？

1、用react的开发的时候子组件用路由跳转时需要用withRouter解决。

2、如果在input设置边框颜色在ios系统里会出现兼容性问题，需要在外面加一个div设置div的边框代替input边框。

3、文字溢出，用overflow:auto做滚动条在ios上面会卡顿，需要用iscroll解决。

104、最有成就感的是哪个项目？

自己写

105、实现一个深拷贝函数？

function getType(obj){

//tostring会返回对应不同的标签的构造函数

var toString = Object.prototype.toString;

var map = {

'[object Boolean]'  : 'boolean',

'[object Number]'  : 'number',

'[object String]'  : 'string',

'[object Function]' : 'function',

'[object Array]'    : 'array',

'[object Date]'    : 'date',

'[object RegExp]'  : 'regExp',

'[object Undefined]': 'undefined',

'[object Null]'    : 'null',

'[object Object]'  : 'object'

};

if(obj instanceof Element) {

return 'element';

}

return map[toString.call(obj)];

}

//深拷贝

function deepClone(data){

var type = getType(data);

var obj;

if(type === 'array'){

obj = [];

} else if(type === 'object'){

obj = {};

} else {

//不再具有下一层次

return data;

}

if(type === 'array'){

for(var i = 0, len = data.length; i < len; i++){

obj.push(deepClone(data[i]));

}

} else if(type === 'object'){

for(var key in data){

obj[key] = deepClone(data[key]);

}

}

return obj;

}

106、Css结合html写一个常见的页面布局？

107、用Css画一个三⻆角和实现一个圆环？

//三角

无标题文档

.wrap{

width: 0px;

height: 0px;

border-width: 0px 50px 50px 0px;

border-color: red transparent;

border-style: solid;

}

//圆

无标题文档

.wrap{

width: 100px;

height: 100px;

background-color:red;

border-radius: 50%;

border-radius: 50%;

border-radius: 50%;

}

108、一个完整的react开发目录结构？

109、说说你对promise的理解?其优势是什么？

promise是es6的一种异步请求构造函数，接收一个参数，是函数，并传入两个参数resolve，reject(可以见到的理解成功后和失败后的回调函数)，在我们封装好函数的最后，会return出promise对象，promise对象的原型上有then、catch等方法，then方法中我们协议拿到我们在调用resolve时可以传递的参数并形成promise链，调用reject时，promise链就被破坏了，reject之后的promise都不会再执行，而是直接调用.catch方法；Promise的优势在于，可以在then方法中继续写promise对象并返回，然后继续调用then来进行回调操作。

作者：青青菜鸟

链接：https://www.jianshu.com/p/76be1ae3209a

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。