点击上方蓝色字体,关注我啦~~
背景
最近起了一个新项目,叫每周N题,N<=5。前端面试题虽然五花八门,但是我们也确实可以从中学到知识。所以我觉得应该有个地方收录一下,每周做几题,既可以考验自己知识的广度又可以挖掘深度,挺好的。大家有兴趣的话,可以关注一下,给个 star,一起来答题,一起来学习~
github地址:https://github.com/LuckyWinty/fe-weekly-questions,点击阅读原文即可到达题库哦~
参与步骤:
打开地址,点 star
watch 项目,及时收到题目的更新及答案消息
有自己会的题目 ,点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 时,也会触发回流。原理是一样的,都为求一个“即时性”和“准确性”。
避免方式:
避免逐条改变样式,使用类名去合并样式
将 DOM “离线”,使用DocumentFragment
提升为合成层,如使用
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」,认真学前端,做个有专业的技术人...
在看点这里