前端面试问题集

一、常用的浏览器内核有哪些？

浏览器	内核
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	从Safari推出之时起，它的渲染引擎就是Webkit，一提到 webkit，首先想到的便是 chrome，可以说，chrome 将 Webkit内核 深入人心，殊不知，Webkit 的鼻祖其实是 Safari。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

二、行内元素与块元素有什么区别
（1）块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。
（2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
（3）行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。
块级元素
每个块级元素通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

< div > 、 < p > 、 < h1…6 > 、 < ol > 、 < ul > 、 < table > 、< form >

行内元素
行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性。

< a > 、 < em > 、 < strong > 、 < span > 、 < i > 、< label >、 < br >

显示模式的转换
块转行内：display-inline；
行内转块：display：block；
块\行内元素转换为行内块：display：inline-block

三、同步与异步的区别
同步：一般指的是在代码运行的过程中，从上到下逐步运行代码，每一部分代码运行完成之后，下面的代码才能开始运行

异步：指的是当我们需要一些代码在执行的时候不会影响其他代码的执行，也就是在执行代码的同时，可以进行其他的代码的执行，不用等待代码执行完成之后才执行之后的代码，就像我们人一样，可以一边看电视剧一边吃东西一样，互不干扰，这种方式就是异步。
常见的异步一般常见的包括：

setTimeout：定时延时运行函数，只执行一次
setInterval：定时延时函数，但是这个函数本身可以一直执行，不会停止，除非把它清除。
ajax：前端常用的和后台进行异步交互数据的请求方式，其实它本身也包括同步和异步，同步的就是由代码从上到下顺序执行，而异步的ajax是我们发送请求到服务器之后，只需要在监听服务器的响应即可，不用等到请求结束在执行其他的代码，这就是异步ajax。

四、get请求与post请求的区别

• GET请求用于获取数据
• POST请求用于提交数据

（1）使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来；
（2）Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节.
（3）Get请求请求需注意缓存问题,Post请求不需担心这个问题；
（4）Post请求必须设置Content-Type值为application/x-form-www-urlencoded；
（5）发送请求时,Get请求的参数都在url里,后台获取的时候可以通过Request.QueryString【key】;Post
请求的参数都在Form里,后台获取的时候可以通过Request.Form【key】;
（6）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

五、Vue 中 v-if 和 v-show 有什么区别？
v-if 在进行切换时，会直接对标签进行创建或销毁，不显示的标签不会加载在 DOM 树中。
v-show 在进行切换时，会对标签的 display 属性进行切换，通过 display 不显示来隐藏元素。
一般来说，v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。

六、$ nextTick 是什么?
Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

七、 v-for 中 key 的作用是什么？
key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

八、简述 rpx、px、em、rem、%、vh、vw的区别

rpx 相当于把屏幕宽度分为750份，1份就是1rpx
px 绝对单位，页面按精确像素展示
em 相对单位，相对于它的父节点字体进行计算
rem 相对单位，相对根节点html的字体大小来计算
% 一般来说就是相对于父元素
vh 视窗高度，1vh等于视窗高度的1%
vw 视窗宽度，1vw等于视窗宽度的1%

九、jq、vue、uni-app、小程序的页面传参方式区别

1、 jq传参
通过url拼接参数进行传参。
2、 vue传参
一、 vue可以通过标签router-link跳转传参，通过path+路径，query+参数
二、 也可以通过事件里的this.$router.push（{}）跳转传参
3、 小程序传参
通过跳转路径后面拼接参数来进行跳转传参

十、vue , 微信小程序 , uni-app属性的绑定

vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。

十一、uniapp优缺点

优点:
a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
c. 拓展能力强
d. 使用HBuilderX开发,支持vue语法
e. 突破了系统对H5条用原生能力的限制
缺点:
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差
e. 文件命名受限

十二、Web语义化的好处

有利于搜索
容易兼容不同设备 结构清晰，
利于团队的开发、维护

十三、常见的Http状态码

1开头：（被接受，需要继续处理。）这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。
2开头 （请求成功）这一类型的状态码，代表请求已成功被服务器接收、理解、并接受 3开头
（请求被重定向）这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的
location 域中指明。 4开头：（请求错误）这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。除非响应的是一个
HEAD
请求，否则服务器就应该返回一个解释当前错误状况的实体，以及这是临时的还是永久性的状况。这些状态码适用于任何请求方法。浏览器应当向用户显示任何包含在此类错误响应中的实体内容。
5开头：（服务器错误）这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。除非这是一个HEAD
请求，否则服务器应当包含一个解释当前错误状态以及这个状况是临时的还是永久的解释信息实体。浏览器应当向用户展示任何在当前响应中被包含的实体。

十四、JavaScript基本数据类型
1.字符串(String):
使用单引号或者双引号定义的; new String()声明字符串对象.
单引号和双引号都支持转义字符,但不能解析变量
字符串不能跨行定义

获取长度:str.length()
切割字符:str:split()
截取字符:str.slice(开始,结束)
拼接字符:str.content()
反转字符:str.split().reverse().join()
改成小写:str.toLowerCase()
改成大写:str.toUpperCase()
去除空白字符或无效字符:str.trim()
获取要查询的字符串首次出现的位置:str.indexOf(‘字符’)

2.数值型(Number):
类型:

整数型:int 浮点型(小数):float 非数值:NaN

转换:

parseInt() 把字符串转换成整数型
parseFloat() 保留小数位

3.布尔类型(boolean):

判断true或false
隐试转换:true会转换成1,false会转换成0
0; NaN; null; undefined都会转换成false

复合数据类型:
1.对象(Object):
①. 创建对象(六种方式):

• new Object()
• { }定义
• 构造函数形式定义
• 工厂模式
• 原型
• 混合模式

②. 遍历:

for(let val in obj){ }

2.数组(Array):

排序:arr.sort()
末尾弹出一个:arr.pop()
末尾添加一个:arr.push()
弹出第一个:arr.shift()
前面添加一个:arr.unshift()
反转数组:arr.reverse()
拼接数组成字符串:arr.join()
截取数组:arr.slice(开始,结束)
获取长度:arr.length()

3.函数(function):

定义: function 函数名(形参) {}
调用: 函数名(实参)
自执行:(function 函数名(){})(实参…)

(三)其他数据类型:

1.空值(null)
2.未定义(undefined)

十五、window location里面有哪些参数？
1、hostname:返回web主机的域名
2、pathname:返回当前页面的路径和文件
3、port:返回iweb主机得端口
4、protocol:返回所使用得web协议（http或https）
5、href:返回当前页面的url
6、pathname:返回url的路径名
7、search:返回的是我们url问号后面的参数，这个对我们获取页面参数有很大帮助，一般配合正则使用