快手一面面经

Tzyito
606 阅读5分钟

一面面试题目（1小时20分）：

Html

  1. html的标签有哪些？区别是什么？
  2. p标签和div标签不给任何css属性，里面的文本会怎样？
  3. img标签有哪些属性？如果图片加载失败会怎么样？
  4. css样式引入有哪些方式？（link和@import）
  5. link可以引入哪些资源？它和@import的区别是什么？
  6. head标签里面有哪些常见标签？如何设置html文件的编码方式？

CSS

  1. css的选择器有哪些？权重？

  2. 下面的两道题应该是什么颜色？为什么？

    <style>
    div{
      color: red;
    }
    div .one{
      color:yellow;
    }
    #two{
      color: black;
    }
</style>
<div class="one" id='two'>123</div>

    Q：会显示黑色，因为id优先级最高

    <style>
    .two{
      color: black;
    }
    .one{
      color:yellow;
    }
</style>
<div class="one two">123</div>

    Q：会显示黄色，因为同一个优先级下，同一属性会被覆盖，越在下面则优先级越高。

    参考css样式优先级orMDN css

  3. 如何设置一段文字的间距？

    唔~应该是line-height吧。然后面试官没有表示对不对，后来查了一下字间距应该是letter-spacing

    而line-height应该是行间距，然后还有一个首行缩进text-index

  4. css有哪些单位？

    px，%，em，rem，vw（视口的百分比单位），vh，vmax（vw和vw中较大的），vmin

    补充了一下移动端的：rpx，dp

  5. rem和em的区别？

  6. 你了解BFC吗？（从产生条件->其特点->有什么用的顺序说。这种题回答的越详细越好，因为越简单的问题越不能回答的简单）

  7. 有什么办法使一个元素不显示？

    display：none visibility：hidden opacity：0

    然后说一下他们之间的区别

JS

  1. 你先说一下有哪些基础数据类型？

  2. 判断一个变量是否是数组有哪些方法？

    instanceof Array.isArray Object.prototype.toString.call()

  3. instanceof的原理是什么？

    instanceof源码是有两个参数，左值L和右值R。判断L.___proto__的原型链是否等于R.prototype，如果相等返回true，否则返回false

  4. Js有哪些异步任务？

    这里当时没有懂到面试官想问什么，就答了Promise，XMLHttpRequest，fetch啥的~，~，后来在面试官的引导下，其实这里就是相当于问Even Loop了

  5. 既然你知道Even Loop，那么宏任务有哪些？微任务有哪些？

  6. 那我们来做一道题，下面应该输出什么？为什么？

    console.log(1);

process.nextTick(()=> console.log(2))

setTimeout(()=> console.log(3))

new Promise(resolve =>{
  console.log(4);
  resolve();
  console.log(5);
}).then(()=>console.log(6))

setImmediate(()=>console.log(7))

Promise.resolve().then(()=>{
  console.log(8);
  process.nextTick(()=> console.log(9))
})

    输入：1 4 5 2 6 8 9 3 7 （7 3也有可能）

    1.首先执行同步任务 log(1) ，然后进入到Promise中执行 log(4) resolve() log(5) 因为还没有处理完同步任务所以先打印 >> 1 4 5

    2.执行微任务，process.nextTick比Promise.then()优先级高，先执行log(2)在执行log(6)，打印>> 2 6

    3.进入到下一个Promise.then()中执行log(8) ，随后执行log(9)，打印>> 8 9

    4.最后执行宏任务，因为setTimeout和setImmediate在node事件循环中存在随机性，所以谁先执行都可能。参考文章

  7. 你说一下箭头函数和普通函数的区别吧？

  8. 既然说到了this，那么来做一道题吧

    这道题整得我很懵逼，题就不贴了。为什么？面试官套着闭包换了很多种变形方式，然后到后面我已经判断的昏了！！然后他最后说，好吧，其实这在开发中也用的不是很多.....跳过吧，我主要考察的是你的思考方式，正不正确也不是特别重要！（面试官真好~）

  9. 大学学过c++或者java吧？说一下他们与js的区别吧。

    oh~唔 我想想。 js跟他们的区别就是不会强值类型转换，是一种弱类型的语言。java有私有变量的概念，然后我就不知道说啥了...

  10. 说一下js的作用域链吧，是通过什么来连接起来的？

    说的[[scope]]，然后解释了一下作用域链的概念。感觉应该从执行上下文方面作答。

浏览器

  1. 有用过什么常用的状态码？

  2. 如何怎么设置请求资源的数据类型？

    Content-Type用于说明请求或返回的消息主体是用何种方式编码

    常见的有：application/x-www-form-urlencoded（form表单），multipart/form-data（文件上传），application/json（序列号后的JSON字符串）

  3. post请求的文件上传的http格式是怎么样的？ ==不知道....

  4. 说说浏览器的缓存吧？

    浏览器的缓存分为强缓存和协商缓存。

    强缓存：分为Expires和Cache-constrol:max-age字段

    协商缓存：分为ETag和Last-modified字段

    具体的说明，网上挺多的，就不贴了

  5. 还有一些问题忘记了。

项目

  1. 我们最开始讨论项目的跨域问题，前端请求node服务器的API。

面试官听我说有一个独立项目，然后我后端用node写的，然后他就一直说不需要跨域啊，然后我就很奇怪，为啥不需要跨域啊....明明端口号不一样，就需要跨域啊....后面就跳过讨论这个问题了

其他

  1. 你是如何学习前端的？
  2. 如何解决所遇到的问题？

面试体验还是挺好的，挺注重知识的基础和迁移性，考虑问题的方式和理解问题的方向，还是收获挺大。虽然没有考技术栈相关的问题，可能面试官更注重基础。

avatar
文章
阅读
粉丝