背景
最近起了一个新项目,叫每周N题,N<=5。前端面试题虽然五花八门,但是我们也确实可以从中学到知识。所以我觉得应该有个地方收录一下,每周做几题,既可以考验自己知识的广度又可以挖掘深度,挺好的。
github地址:https://github.com/LuckyWinty/fe-weekly-questions,点击即可到达题库哦~
参与步骤:
本周题目汇总
思路:利用栈,先进后出的特性
参考答案(答案不严谨,请到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 } }
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);}
回流:
当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。
重绘:
当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性(比如修改了颜色或背景色)时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式(跳过了上图所示的回流环节)。这个过程叫做重绘。由此我们可以看出,重绘不一定导致回流,回流一定会导致重绘。
will-change
#divId { will-change: transform;}
优点
注意:
部分浏览器缓存了一个 flush 队列,把我们触发的回流与重绘任务都塞进去,待到队列里的任务多起来、或者达到了一定的时间间隔,或者“不得已”的时候,再将这些任务一口气出队。但是当我们访问一些即使属性时,浏览器会为了获得此时此刻的、最准确的属性值,而提前将 flush 队列的任务出队。
特性 | TCP | UDP |
---|---|---|
是否连接 | 面向连接 | 面向非连接 |
传输可靠性 | 可靠 | 不可靠 |
应用场合 | 传输大量数据 | 传输少量数据 |
速度 | 慢 | 快 |
实现一个LazyMan,可以按照以下方式调用:LazyMan('Hank')输出:Hi! This is Hank!LazyMan('Hank').sleep(10).eat('dinner')输出Hi! This is Hank!//等待10秒..Wake up after 10Eat 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 5Hi 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,点击即可到达题库哦~