高频面试题

animation 和 transition 的定义动画的区别？

animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态

transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始

区别：

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，可设置 循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了

canvas和svg有什么区别？

Canvas和SVG是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片。

什么是 Canvas

Canvas 是H5新出来的标签，利用JavaScript在网页绘制图像
在标签中给上宽高： 不用加单位
如果在css中给宽高 会对图像造成拉伸 （默认宽高300px*150px）
通过获取绘制工具getContext(“2d”) 来在画布中绘制图形。

什么是SVG？

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老
SVG 用来定义用于网格的基于矢量的图形。

Canvas 和 SVG 区别？

• 绘制的图片格式不同

   Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，
   可以说是位图，SVG 可以在H5中直接绘制，但绘制的是矢量图。由于位图依赖分辨率，矢量图不依赖分辨率，
   所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
  

• Canvas不支持事件处理器，SVG支持事件处理器

   Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素
  

  
  在控制台中可以看到canvas标签里面是没有单独的长方形存在的

• Canvas就像动画，每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示。

  而SVG绘图时，每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作。

微信小程序的支付流程？

主要就是以下几个方面

线下支付
公众号支付
小程序支付
pc网站支付
手机app支付
企业内部使用微信资金流动

支付流程的理解

• 第一步——进入小程序，下单

   这一步是用户通过客户端中的按钮实现的，当用户点击支付按钮后，就会向后台发送一个“请求下单的支付”的请求。
  

• 第二部——请求下单的支付

   这一步是后台接“收到请求下单的支付”向微信服务器发送小程序登录的api请求，微信小程序后台收到请求之后。返回
   给后台一个openid
  

• 第三步——生成 商户订单

   在后台生成商户订单后，这个商户订单包括了支付类型，金额，识别用户，和商户信息，
   后台又将订单作为参数，调用微信后台的调用支付统一下单api方法，微信服务器处理后返回给后台预付单的信息。
  

第四步——将组合数据进行签名

后台接收到了返回的预付单的信息对这些信息进行再次加密返回给前端，前端这时候监听到了后端返回的数据后，利用这些数据调用wx.pay（）
的方法，然后再用用户页面弹出确认支付的弹框。

第五步——用户确认支付

接下来的一些操作就都是由用户来操作的包括微信支付密码、指纹验证，确认支付之后执行鉴权调起支付服务。

第六步——鉴权调起支付

没有与后台进行交互，直接在微信后台进行鉴权，微信后台直接返回给前端支付结果，前端收到返回数据后对支付结果进行展示。

第七步——推送支付结果

微信后台在给前端返回支付的结果后，会向后台也返回一个支付结果，后台通过这个支付结果来更新订单的状态

.history模式和hash的区别？

.history模式
history模式利用了HTML5 History lnteface中新增的pushState和replaceState(方法，MDN相关介绍(需要特定浏览器支持)。这两方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求当使用histoy模式时，url就像正常的url 例htp:/abc.com/userid相比hash模式更加好看，特别注意，history模式需要后台配置支持，如后台没有正确配置，访问时会返回404.
通过history api，我们丢弃了丑陋的#，但是有一个缺点，当刷新时，如果服务器中相应的资源，会分分钟刷出一个404来(刷新需要请求服务器)。所以history模式不怕前进，不怕后退，就怕刷新。
hash模式和history模式相比较
pushstate() 设置新的ur可以是和当前url同源的任意url;hash只可修改#后面的部分，只能设置当前url同文档的ur.
pushstate()设置的新ur可与当前ur一致，这样也会把记录添加到栈中; hash必须设置与当前ur不同的ur的，才会触发动作将记录济加到栈中。
pushstate() 通过stateObiect参数可以添加任意类型的数据到记录中; hash只可添加短字符串
pushstate() 可额外设置title属性供后续使用。不过，hash模式也有比history模式优势的地方
hash 模式下，仅hash符号之前的u会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误.
history 模式下，前端的ur必须和实际向后端发起请求的ur一致，如htp://abc.com/userid,后端如果没有对user/id的路由处理，将返
回404错误。