面试那些题（1）

更新ing

一.Canvas和SVG的区别是什么？
1.Canvas主要是用笔刷来绘制2D图形的。
2.SVG 主要是用标签来绘制不规则矢量图的。
3.相同点:都是主要用来画2D图形的。
4.不同点：Canvas画的是位图，SVG画的是矢量图。
5.不同点：SVG节点过多时渲染慢，Canvas性能更好一点，但写起来更复杂。
6.不同点：SVG支持分层和事件，Canvas不支持，但是可以用库实现。

二.如何实现垂直居中？
1.flex
2.translate -50%
3.absolute margin auto

三.CSS 选择器优先级如何确定？
这里有CSS 2.1规格文档的权威算法:(但并不适用于CSS 3)

1.选择器越具体，其优先级越高
2.相同优先级，出现在后面的，覆盖前面的
3.属性后面加 !important 的优先级最高，但是要少用

四.如何清除浮动？
1‘ 给父元素加上 .clearfix

.clearfix:after{
   
     content: '';
     display: block; /* 或者table */
     clear: both;
 }
 .clearfix{
    zoom: 1; } /* IE兼容 */
1
2
3
4
5
6
7
8

2’ 给父元素加上 overflow:hidden

五.两种盒模型（box-sizing）的区别？
1’ 第一种盒模型是 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为:实际宽度 = width + padding + border
2’ 第二种盒模型是 border-box，即 width 指定的是左右边框外侧的距离，公式为:实际宽度 = width
3’ 相同点是都是用来指定宽度的，不同点是 border-box 更好用。

六.JS的new做了什么？
1.创建临时对象/新对象
2.绑定原型
3.指定 this = 临时对象
4.执行构造函数
5.返回临时对象

七.手写节流 throttle、防抖 debounce
节流

// 节流就是「技能冷却中」
const throttle = (fn, time) => {
   
  let 冷却中 = false
  return (...args) => {
   
    if(冷却中) return
    fn.call(undefined, ...args)
    冷却中 = true
    setTimeout(()=>{
   
      冷却中 = false
    }, time)
  }
}

// 简洁版，删掉冷却中变量，直接用 timer 代替，在冷却结束时调用 fn
const throttle = (f, time) => {
   
  let timer = null
  return (...args) => {
   
        if(timer) {
   return}
        f.call(undefined, ...args)
        timer = setTimeout(()=>{
   
          timer = null
        }, time)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

防抖

// 防抖就是「回城被打断」
const debounce = (fn, time) => {
   
  let 回城计时器 = null
  return (...args)=>{
   
    if(回城计时器 !== null) {
   
      clearTimeout(回城计时器) //打断回城
    }
    // 重新回城
    回城计时器 = setTimeout(()=>{
   
      fn.call(undefined, ...args) //回城后调用 fn
      回城计时器 = null
    }, time)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

八.手写发布订阅

const eventHub = {
   
  map: {
   
    // click: [f1 , f2]
  },
  on: (name, fn)=>{
   
    eventHub.map[name] = eventHub.map[name] || []
    eventHub.map[name].push(fn)
  },
  emit: (name, data)=>
1
2
3
4
5
6
7
8
9
10
11