面试必备良药之前端Q本周N题汇总

点击上方蓝色字体，关注我啦～～

背景

最近起了一个新项目，叫每周N题，N<=5。前端面试题虽然五花八门，但是我们也确实可以从中学到知识。所以我觉得应该有个地方收录一下，每周做几题，既可以考验自己知识的广度又可以挖掘深度，挺好的。大家有兴趣的话，可以关注一下，给个 star，一起来答题，一起来学习～

github地址：https://github.com/LuckyWinty/fe-weekly-questions，点击阅读原文即可到达题库哦～

参与步骤：

1. 打开地址，点 star
2. watch 项目，及时收到题目的更新及答案消息
3. 有自己会的题目 ，点comment，留下答案，大家交流学习

本周题目汇总

1. 如何判断左右小括号是否全部匹配。如 ( ( ))()((((()))))

思路：利用栈，先进后出的特性

参考答案(答案不严谨，请到GitHub参考)：

const judgeBracketsMatch = (s)=> {
        const result = [];
        for(let i = 0;i < s.length;i++){
            if(s[i] === '('){
                result.push(s[i])
            }
            if(s[i] === ')'){
                result.pop()
            }
        }
        if(result.length){
            return false
        }else{
            return true
        }
    }

2. 下面代码中的 a 在什么情况下会打印1？

var a = ?
if(a == 1 && a == 2 && a == 3){
console.log(1)
}

思路：重写 valueOf 方法 参考答案：

var a = {
 value: 0,
 valueOf(){
  return ++this.value
 }
}

if (a == 1 && a == 2 && a == 3) {
 console.log(1);
}

3. 如何理解回流和重绘

回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。

常见的会导致回流的元素：

• 常见的几何属性有 width、height、padding、margin、left、top、border 等等。
• 最容易被忽略的操作：获取一些需要通过即时计算得到的属性,当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，浏览器为了获取这些值，也会进行回流。
• 当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”。

避免方式：

1. 避免逐条改变样式，使用类名去合并样式
2. 将 DOM “离线”,使用DocumentFragment
3. 提升为合成层,如使用will-change

#divId {
  will-change: transform;
}

优点

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint

注意：

部分浏览器缓存了一个 flush 队列，把我们触发的回流与重绘任务都塞进去，待到队列里的任务多起来、或者达到了一定的时间间隔，或者“不得已”的时候，再将这些任务一口气出队。但是当我们访问一些即使属性时，浏览器会为了获得此时此刻的、最准确的属性值，而提前将 flush 队列的任务出队。

4. UDP和TCP有什么区别？

• TCP协议在传送数据段的时候要给段标号；UDP协议不
• TCP协议可靠；UDP协议不可靠
• TCP协议是面向连接；UDP协议采用无连接
• TCP协议负载较高，采用虚电路；UDP采用无连接
• TCP协议的发送方要确认接收方是否收到数据段（3次握手协议）
• TCP协议采用窗口技术和流控制

特性	TCP	UDP
是否连接	面向连接	面向非连接
传输可靠性	可靠	不可靠
应用场合	传输大量数据	传输少量数据
速度	慢	快

5. 实现一个LazyMan，可以按照以下方式调用

实现一个LazyMan，可以按照以下方式调用:
LazyMan('Hank')输出:
Hi! This is Hank!
LazyMan('Hank').sleep(10).eat('dinner')输出
Hi! This is Hank!
//等待10秒..
Wake up after 10
Eat dinner~
LazyMan('Hank').sleep(10).eat('dinner').eat('supper')输出
Hi This is Hank!
Eat dinner~
Eat supper~
LazyMan('Hank').sleepFirst(5).eat('supper')输出
//等待5秒
Wake up after 5
Hi This is Hank!
Eat supper~
以此类推。

思路：参考Generator实现，可以控制执行和停止 参考答案：

function LazyMan(name) {
    if(!(this instanceof LazyMan)){
        return new LazyMan(name)
    }
  const cb = (next)=>{
      console.log(`Hi This is ${name}!`)
      next()
  }
  this.cbs = [cb];
  setTimeout(()=>{
    this.next()
  },0)
}
LazyMan.prototype.eat = function (food){
    const cb = (next)=>{
        console.log(`Eat ${food}~`)
        next()
    } 
    this.cbs.push(cb);
    return this
}
LazyMan.prototype.sleepFirst = function (time){
    const cb = (next)=>{
        setTimeout(()=>{
            next()
        },time*1000) 
    } 
    this.cbs.unshift(cb);
    return this
}
LazyMan.prototype.sleep = function(time){
    const cb = (next)=>{
        setTimeout(()=>{
            next()
        },time*1000) 
    } 
    this.cbs.push(cb);
    return this
}
LazyMan.prototype.next = function(){
    if(this.cbs.length <= 0)return
    const first = this.cbs.shift()
    first(this.next.bind(this))
}

小结

本周题目，还是比较考验深度的，建议大家都动手做一下。更多题目查看这里：

github地址：https://github.com/LuckyWinty/fe-weekly-questions，点击阅读原文即可到达题库哦～

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...

• 欢迎关注「前端Q」,认真学前端，做个有专业的技术人...

在看点这里