一面：70min，直接干碎了我

准备这次面试之前，几乎全在看虚拟dom还有react方面的内容，html和css真的一点都没看，真菜

HTML

  • 什么是行盒和块盒
    • 说了行盒是没有宽高，行盒之间不会换行排列，而是直接排列在一起
    • 说了块和是可以独立设置宽高，并且展示是换行的一种盒模型
  • 常见的行盒和块盒
    • 行盒说了：span，p，strong等
    • 块盒就说了div，不过面试官也不打算继续深问下去
  • img是行盒还是块盒
    • 干沉默了

img属于行内元素，但是可以设置宽高

  • a标签的属性
    • 只说了herf属性
  • Edge点开a标签，就会打开新页面；而chrome点开a标签则为刷新跳转，是什么属性控制的？
    • 干沉默了，后面问面试官才知道，是有target属性来控制的

CSS

  • 如何变成行盒或者块盒

    • 说了用display: inline-block | inline | block

  • 行盒，除了不能设置宽高外，还不能设置什么？

    • 干沉默了，css真的太菜了
    • 设置margin和padding是无效的

  • 说一下flex布局的几个属性

    • 说了六个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

  • 请写一个骰子五点布局

    • 我是傻逼，我沉默了，写错了
    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div class="container">
        <div class="dot"></div>
        <div></div>
        <div class="dot"></div>
        <div></div>
        <div class="dot"></div>
        <div></div>
        <div class="dot"></div>
        <div></div>
        <div class="dot"></div>
      </div>
    </body>
    <style>
      .container {
        width: 300px;
        height: 300px;
        display: flex;
        /* background-color: aliceblue; */
      }
      div {
        width: 100px;
        height: 100px;
        /* background-color:beige; */
        /* border: 1px solid #000; */
        flex-wrap: wrap-reverse;
      }
      div.dot {
        width: 100px;
        height: 100px;
        background-color: aqua;
        /* border: 1px solid #000; */
        flex-wrap: wrap-reverse;
        border-radius: 50%;
      }
    </style>
    </html>

JS

  • 写一个数组去重：不准用set，用了includes来去重
1
2
3
4
5
6
7
8
// input: arr
// output: res
let res = [arr[0]]
for (let item of arr) {
    if (!res.includes(item)) {
        res.push(item)
    }
}
  • 如果我只想写一行，我该如何去重？
    • 后面她说用filter，结果还是写成了includes的方法来去重了
1
2
3
let res = arr.filter((item, index, arrID) => {
    
})
  • 找出链表的中间节点
    • 用快慢指针法【当时口误，说成了双指针】只写思路，一些边界条件就不在这里细讨论了
1
2
3
4
5
6
7
8
// input head
// output point
let point = head;
let doublePoint = head;
while (doublePoint.next && doublePoint.next.next) {
    point = point.next;
    doublePoint = doublePoint.next.next
}
  • 找出第k个最大的数
    • 当时我说用排序来写，她说不行，就实在是不会了

应该用快速查找【可是本质还是排序算法啊？】

  • 我看她好像还想考我对象数组的去重，那就是得自己去写一个判断是否两个对象堆内存的数值是否相同的函数来判断，但是因为这个时候时间太晚了，就没有问我

计算机基础

  • 浏览器缓存：说一下localStorage，sessionStorage和cookie的区别
    • 讲到了localStorage，sessionStorage必须得要在同源页面上才能拿到存储的数据，否则获取不到。
    • 讲到了sessionStorage被页面关闭了之后，就会立刻被销毁，但是忘记说出可以设置时间自己销毁。
    • cookie支支吾吾的，太紧张就忘记了，只说了是通过请求头发送给后端，也断片了

cookie是客户端的一种早期解决HTTP无状态问题的一种解决方案，它是服务器发送到web浏览器上面的一小块数据，大小限制通常在4kb

cookie是一个在服务器和客户端之间来回传输文本的机制，当服务器接收到客户端发出的HTTP请求的时候，服务器会发送带有响应的Set-Cookie标头，然后将cookie和HTTP请求头一起发送

  • 如果我一个ip绑定了两个域名，协议相同，那么这两个之间的localStorage可以被相互访问吗？
    • 不能，因为同源指的是协议域名端口相同，而不是ip地址相同。一个ip是可以用于部署多个前端页面供人访问的
  • cookie如果请求头为不能被修改，请问是前端不能被修改还是前后端都不能被修改？
    • 直接不知道，真的又被干沉默了
    其实是前端不能修改，为了防止XSS攻击，后端还是可以修改的
  • 强缓存和协商缓存
    • 讲到了强缓存是客户端发给服务器的时候，命中了缓存，然后就直接向客户端发送了强缓存的缓存数据，并返回了200状态码
    • 强缓存和协商缓存这块个人觉得讲的特别不好，说着说着自己脑袋就断片了，已经不知道自己讲什么了

看过全忘了可还行：

强缓存：利用http的Expires和Cache-Control两个字段来控制的，一般用Cache-Control来控制，因为Expires有一些时间延迟的缺点

协商缓存：Cache-Control的值为no-Cache的时候，就会进入协商缓存，在协商缓存的机制下，客户端需要向服务器询问缓存信息，进而判断是否重新下载完全响应，还是直接使用本地缓存

协商缓存的表示在响应头中返回给浏览器，Last-Modified和Etag

一般协商缓存是根据Last-Modified来判断的，就是根据文件的最后修改时间，如果文件修改了，那么就不能协商缓存，但是有可能文件不修改也会导致Last-Modified改变，因此使用Etag来精准的判断是否真正改变了文件，进而判断是否需要缓存，不过这需要服务器去额外维护开销

面试官：你有什么问我的吗？

  • 对本人的评价：还行，技术广度很广，但是深度可能对于一些CSS的还有浏览器方面的知识不是很充分【究极套话，凉了】
  • 用的什么框架比较多？
    • 用react多
    • 用什么框架不重要，本质都是一样的
    • 就算只会vue不会react也不会影响