1230面试题——OSI七层模型、类型判断、异步任务

357 阅读3分钟

计网

  • OSI七层协议分别是什么

    • 应用层(Application) 提供网络与用户应用软件之间的接口服务

    • 表示层(Presentation) 提供格式化的表示和转换数据服务,如加密和压缩

    • 会话层(Session) 提供包括访问验证和会话管理在内的建立和维护应用之间通信的机制

    • 传输层(Transimission) 提供建立、维护和取消传输连接功能,负责可靠地传输数据(PC)

    • 网络层(Network) 处理网络间路由,确保数据及时传送(路由器)

    • 数据链路层(DataLink) 负责无错传输数据,确认帧、发错重传等(交换机)

    • 物理层(Physics) 提供机械、电气、功能和过程特性(网卡、网线、双绞线、同轴电缆、中继器)

  • TCP/IP四层协议分别是什么

    • 物理层, 为数据端设备提供传送数据的通路。可以双向通信,为数据传输提供可靠的环境。

    • 数据链路层,位于物理层和互联网层之间,用来向网络层提供数据,数据到这一层包装加上了mac头,称为数据帧(Frame)。

    • 网络层,位于传输层和网络接口层之间,数据到达网络层,会加IP头,这层的数据叫数据包(Packet)。

    • 传输层,位于应用层和网络接口层之间。传输层的协议分为TCP(Transimision Control Protocal)和UDP(User Datagram Protocal)。

  • POST和GET区别

    • GET

      • 请求参数拼接在地址栏
      • 有大小限制,不同浏览器大小不同(IE 2M左右,FireFox 20M左右,Chrome 8M左右))
      • 相对不安全
      • 多用于向服务端请求数据
      • 发送的数据格式有限制(只接受ASCII码)
      • 会被浏览器主动缓存
    • POST

      • 请求参数写在请求体内的
      • 理论上有大小限制(服务器可以对它进行限制)
      • 相对安全
      • 多用于向服务端提交一些数据
      • 理论上对数据格式没有限制(要和请求头里面content-type一致)
      • 不会被浏览器自主缓存

JS

  • 判断变量类型的方式有几种
    • typeof
      • 对于基本类型,除 null 以外,均可以返回正确的结果。
      • 对于引用类型,除 function 以外,一律返回 object 类型。
      • 对于 null ,返回 object 类型。
      • 对于 function 返回 function 类型。
    • instanceof
      • 通过判断前者是否是后者的实例,即前者的原型链上是否存在后者的prototype,返回布尔值
      • 所有的引用类型 instanceof Object 都是true
      • 所有值类型 instanceof 任意 都是false
    • Object.prototype.toString.call
      • 返回格式化字符串,可以区分变量类型
      • 返回结果最精确
  • 异步任务有哪些
    • 微任务
      • promise.then中的回调函数
      • MutationObserver
      • process.nextTick(node)
    • 宏任务
      • xhr
      • setTimeout
      • setInterval
      • setImmediate(node)
      • requestAnimationFrame(浏览器)
      • I/O
      • UI rendering(浏览器)

HTML/CSS

  • 实现一个箭头
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            padding: 0;
            margin: 0;
            background-color: black;
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .arrow {
            width: 20px;
            height:80px;
            background-color: white;
            position: relative;
        }
        .arrow::after {
            content: "";
            border: 15px solid transparent;
            border-top: 40px solid white;
            position: absolute;
            top: 80px;
            left: -5px;
        }
    </style>
</head>
<body>
    <div class="arrow">
    </div>
</body>
</html>