前端⾯试题
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、拿到后端的接⼝⽂档测试⼀下接⼝是否可⽤。
为什么onclick事件不生效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区别是什么?
什么是基于web开发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和place来修改地址栏。同时监控地址栏。获取到对应组件，去配置信息⾥⾯寻对应的页⾯显⽰
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；，怎么可以每次拿到最新数据？，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、箭头函数。
js的append()方法6、解析结构。
7、数组和对象的新⽅法 ，⽐如 set assign。
36、webpack按需加载?
web前端基础面试题
使⽤sure做页⾯分割按需加载。
spring gateway作用
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,methodsputeds等
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计算属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。