前端面试题知识点

1. 布局方式：

flex布局（移动端常用）、grid布局、定位布局、文档流布局（PC端常用、默认）、浮动布局

display:flex
// 布局（记住只说一种你经常用的，不要扯其他的布局方式，只要说有这些就行）
flex-warp: 值为nowrap|wrap|wrap-reverse|initial|inherit; 超出父容器自身的文本排列式 	
flex-direction: 设置子元素排列方式（row、column）
Justify-content: 子容器横轴排列方式（flex-start, flex-end, center, space-betweem, space-around）
Align-items: 子元素纵轴的排列方式（flex-start, flex-end, center）
Align-content 子元素对齐方式
Justify-content用法相同主要常用值为: start,center,space-between,space-around

2. Rem自适应布局方式

利用JS动态计算网页根字体 
具体思路：
例如当前设计稿宽度为750，把网页分为750等分，那么1等份为(750/ 100 = 7.5)
公式为：
document.documentElement.style.fontSize = 
document.documentElement.clientWidth*(window.devicePixelRatio||1) / 7.5 + 'px';

这时候就是和设计稿1:1写法，设计稿宽度多少 再除以100就是多少rem 
例：设计稿某个元素宽高为：120px*120px  
这时候就直接写 width:1.2rem  height:1.2rem
window.devicePixelRatio 含义是当前设备终端的显示的物理像素分辨率与 CSS 像素分辨率的比率
document.documentElement.clientWidth 这个是获取dom元素区域终端宽度

3. vue基础知识

Vue的生命周期：beforeCreated(),created() beforeMounted() mounted()
过滤器：filter
计算属性 computed
监听 watch
组件注册 components
父子组件传值：props
父子组件调用 emit 和 on 方式配合
bus中央总线（就是挂在一个vue对象到vue原型连上去
Vue.prototype.$bus
使用方法this.$bus 一般使用的话会和变量区分开来加$ ）

4. 双向绑定的原理

5. Es6的有哪些，说些你知道的

Es6 有箭头函数（单个参数可以省略括号进行简写）、
常量const 变量 let 、
promise请求、
异步async 等待await、
数组去重 Set

6. JS的跨域是怎么引起的，你又怎么处理的

跨域是因为同源策略引起的，因为不再同一个域、不在同端口、不在同域名这时候如果发起请求的话就会造成跨域
处理方式：
1、后端配置允许跨域，设置CROS；
2、JSONP跨域（jsonp处理方式是利用script方式发送一个get方式进行回调，这个有弊端，如果后端处理出错了就没有返回了）
3、postManager处理跨域
4、nginx反向代理（vue有proxy进行配置处理）
5、配合使用iframe进行使用

7. 小程序里面的值传递方式

小程序里的值传递方式为 data-值标识
所有的传递方式都是以data形式去传递，函数体里面通过当前event.target.dataset 进行获取值
小程序里面的赋值所有的赋值，只要是赋值到data里面的值 都需要 this.setData({})
// setData是对象

8. Scss的预处理，层级写法，定义变量 函数计算 样式预定义（样式的继承）

9. JS的数组操作方法

Split（分割字符串为数组，参数为字符串类型） 例如 sss.split(‘,’)
splice（删除指定的元素） 例如 sss.splice(0, 1) 从第一个开始删除多少个
shift（删除第一个元素） 
unshift（在数组的头部删除一个元素，并返回被删除的元素）
Reverse (把数组进行颠倒)
Push (数组追加)
Concat(俩数组合并) 
sss=[111,222]  aaa=[‘asd’,’asdasd’]  sss.concat(aaaa)   
合并后[111，2222，‘asd’,’asdasd’ ]
Join （把数据整合为字符串）
Slice （数组截取）
// 例如 sss=[111,222].slice(2) == [222]
Pop (从末尾删除元素)
Sort （排序）
// 例如  	
var arr = [20,10,2,1,3];
arr.sort();// [1, 10, 2, 20, 3]
arr.sort(function(a,b){
  return a-b;    //升序
}); //[1, 2, 3, 10, 20]
arr.sort(function(a,b){
  return b-a;    //降序
}); //[20,10,3,2,1]
Map 遍历 
forEach 循环
Filter 过滤器
For循环
For...in  for...of 循环

CSS的圆角 border-radius 这个是简写
也可以单独设置一个角的圆角值 具体为border-top-left-radius
Css阴影： box-shadow 值为 (上下左右(PX单位) 阴影)
box-sizing：border-box（边框内） | content-box（边框外） | inherit（默认，每个浏览器不一致）
设定当前网页 padding margin 放入边框内还是边框外

10. vue双向绑定的理解

Vue的双向绑定是Object.defineProperty API 进行data对象监听和回调,通过GET SET方法进行对data对象里面的数据进行改变

11. 闭包，作用域（重点）为啥要用闭包，（考作用域的变量污染问题）

12. uni-app条件编译

语法为 
ifdef：if defined 正向条件，也就是说在 XXXXX 平台下生效。
ifndef：if not defined 反向条件，在 XXXX 平台不生效。即除了 XXXX 平台，其它平台都生效。
endif：条件结束

Platform平台取值为 APP-PLUS、APP-PLUS-NVUE、H5、MP-WEIXIN、MP-ALIPAY、MP-BAIDU、MP（所有为大写）

小程序API和uniapp API通用！！！！！ 只是前缀不同

小程序(uniapp) 上传都是 uni.chooseImage或者 wx.chooseImage 
选取或拍照(参数控制) 用 uni.uploadFile 或者 wx.uploadfile 参数一致

小程序和uniapp 百分90的参数是一致的，区别只是UNIAPP部分是需要兼容其他平台做了参数增加

13. 微信公众号支付流程

通过微信官方公布的一个链接，带入自己的APPID和回调地址（location.Href当前需要支付的页面）拼成想要的一个链接进行执行会跳转微信那边进行执行，
微信会回调整个地址并带code参数回来，把参数通过接口扔给后台，后台进行设置配置并返回一个config配置对象，
前端需要用这个config对象进行一个注入操作拿到支付权限，然后进行用户进行下单按钮通过请求后台通知后台下单并返回下单成功后的参数，再使用这个参数调微信的刚刚注入获取到的API进行支付，
支付成功后微信返回的值不是百分百支付成功，需要用当前下单返回的订单号进行后端请求，去判断当前这个订单是否支付成功，这样才能判断是否支付成功。
小程序支付
通过 requestPayment 采用 带入后台下单返回的对象进行调用
电商其实就是网页，只是逻辑稍微复杂点，核心是支付模块，uniapp里面的因为已经集成了各平台的支付逻辑，API也是requestPayment 只是参数是一个对象直接带进去

14. Http和Https的区别？

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

15. Html5的存储方式有

SessionStorage 会话存储、关闭浏览器就没有了
locaStorage 长期存储一直存在，除非手动删除
Cookie 和session区别 主要介绍session

16. JS的数据类型

数据类型分为引用类型（对象类型） 和基本类型
引用类型（对象类型）为 object 基本类型为: number string undefined null boolean
JS怎么判断当前数据类型
JS判断数据类型使用 typeOf进行判断
但只能判断基本类型无法判断对象类型
数组需要用Array.isArray 对象的判断用 instanceof 来判断

17. == 与 ===的区别

一个严格模式一个是非严格模式
严格模式下字符串1与number类型的1 无法通过验证
非严格模式下 两个会相等

18. call和apply的区别？

结果一样参数不一样 一个是值为单个值 一个是值为数组形式

19. Vue路由守卫有哪些，怎么设置，使用场景等

常用的两个路由守卫：router.beforeEach 和 router.afterEach
每个守卫方法接收三个参数
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function:
一定要调用该方法来 resolve 这个钩子。
在项目中，一般在beforeEach这个钩子函数中进行路由跳转的一些信息判断。
判断是否登录，是否拿到对应的路由权限等等。

20. CSS 0.5的直线

.half_px { 
	height: 1px;
	transform: scale(0.5);
}

21. 递归

自身函数调自身函数通过一个阈值 return 进行控制是否终止调用

22. 加载资源优化

1、静态资源的压缩合并
2、静态资源缓存
3、使用CDN让资源加载更快
4、使用SSR后端渲染，数据直接输出到HTML中

23. 渲染优化

1、CSS放前面，JS放后面
2、懒加载（图片懒加载、下拉加载更多）
3、减少DOM查询，对DOM查询做缓存
4、减少DOM操作，多个操作尽量合并在一起执行
5、事件节流
6、尽早执行操作（如DOMContentLoaded)

24. Http 相关问题

1xx：指示信息–表示请求已接收，继续处理
100 Continue
初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）
101 Switching Protocols
服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）

2xx：成功–表示请求已被成功接收、理解、接受
200 OK
一切正常，对GET和POST请求的应答文档跟在后面。
201 Created
服务器已经创建了文档，Location头给出了它的URL。
202 Accepted
已经接受请求，但处理尚未完成。
203 Non-Authoritative Information
文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝（HTTP1.1新）。
204 No Content
没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content
没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。
206 Partial Content
客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。

3xx：重定向–要完成请求必须进行更进一步的操作
300 Multiple Choices
客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301 Moved Permanently
客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found
类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
303 See Other
类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP1.1新）。
304 Not Modified
客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy
客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。
307 Temporary Redirect
和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP1.1新）

4xx：客户端错误–请求有语法错误或请求无法实现
400 Bad Request
请求出现语法错误。
401 Unauthorized
客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden
资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
404 NotFound
无法找到指定位置的资源。这也是一个常用的应答。
405 Method Not Allowed
请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新）
406 Not Acceptable
指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。
407 Proxy Authentication Required
类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）
408 Request Timeout
在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）
409 Conflict
通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）
410 Gone
所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP>1.1新）
411 Length Required
服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）
412 Precondition Failed
请求头中指定的一些前提条件失败（HTTP 1.1新）。
413 Request Entity Too Large
目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。
414 Request URI Too Long
URI太长（HTTP 1.1新）。
416 Requested Range Not Satisfiable
服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）

5xx：服务器端错误–服务器未能实现合法的请求 500 Internal Server Error服务器遇到了意料不到的情况，不能完成客户的请求。
501 Not Implemented
服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。
502 Bad Gateway
服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。
503 Service Unavailable
服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503服务器返回503时可以提供一个Retry-After头。
504 Gateway Timeout
由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）
505 HTTP Version Not Supported
服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）

一般常用的是 200 201 300 304 400 404 401 500 501 主要的记住！！！！

24. Nginx服务器配置相关：

1、静态转发
2、端口配置
3、跨域访问配置

25. Git、SVN版本管理