2020-03-20被字节面试官“吊打”的一次体验

2020-03-21 本文已影响0人 haha2333

标题纯粹哗众取宠，内容才是干货

1. meta标签的作用

meta标签的功能真的很多多很多了。下面列举我自己感觉会比较常用的一些

① 最基本的功能：声明文档使用的字符串编码(utf-8中文编码)

<meta charset="utf-8">

②SEO优化

<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">

③viewport，比如在多倍屏开发下可以设置scale，解决1px问题。主要是影响移动端布局的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)

④强制页面以独立窗口显示。避免被人用iframe套用

<meta http-equiv="Window-target"content="_top">

⑤DNS预解析
⑥页面缓存相关

为什么要用meta标签设置呢？因为在一个请求中改变改变缓存方式，是不能影响其他请求的。（虽然前端肯定会封装好一个请求方法的）但使用meta的好处在客户端和服务端可以共同决定是否要缓存资源了（硬气啊！）

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

⑦set-cookie设置cookie

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

2. webpack打包的时候会给图片资源生成了一个hash字符串，为什么还要用Etag呢

（大概这个意思）
因为服务端的资源变化的时候，etag也会变化，这样才能比较缓存。
webpack打包图片生成的标识符。。。webpack只会打包静态图片，对比缓存比较的是网络图片资源呀。没关系的两个东西？？？emm？面试官是不是故意混淆概念考我？？？

3.webpack的作用，loader和plugin的区别？

①分析项目结构，处理好各个模块的依赖。tree shaking和压缩代码
②把sass，ts这些浏览器不能识别语言进行转化

loader用来编译非js文件的文件。执行顺序是从下到上，从左到右的。
plugin是在整个打包的过程中起作用，不会单独操作某一个文件
使用上：
loader通过npm安装之后，在module写{test}就可以了
plugin安装以后，需要通过require引入才能使用

4. node中间件作用？

主要用来处理一些数据格式的转换，比如处理请求等。
比如：浏览器向服务器发送一个请求后，服务器直接通过request.定位属性的方式得到通过request携带过去的数据
（有用户输入的数据和浏览器本身的数据信息）。这中间就一定有一个函数将这些数据分类做了处理，
已经处理好了，最后让request对象调用使用。

5.Buffer

该类用来创建一个专门放二进制数据的缓存区。（用于处理文件流或tcp流）
① buffer的编码方式：UTF-8 、 UCS2 、 Base64 、或十六进制编码的数据

② 创建budffer对象：
Buffer.from(array)通过数组创建一个buffer
Buffer.alloc(size, fill, encoding)新建一个额定长度的buffer

③ buffer转换为其他对象
buffer->JSON：buf.toJSON()或者JSON.stringfy(buf)
第二种方法是隐式调用了toJSON()

④ buffer合并：Buffer.concat([buf1,buf2])
合并的时候如果能够提供合并之后长度能更加快速合并。因为不过不提供的话，需要执行额外的循环用于计算总长度。

⑤ buffer拷贝
buf.copy(target,[startBuf,endBuf])
buf表示要拷贝的对象
target表示拷贝到哪里去，
startBuf是拷贝的起始字节，
endBuf是拷贝的结束字节

⑥buffer裁剪
buf.slice(start,end)
应用：后端分段返回大文件数据

⑦buffer是否支持这个编码格式
Buffer.isEncoding('utf-8')

⑧比较buffer
比较两个 Buffer 对象，返回一个数字，表示 buf 在 otherBuffer 之前，之后或相同。这是按位比较的。就像比较两个字符串大小一样。
返回0 表示=
返回1 表示>
返回-1 表示<

buf.compare(target,start,end) //此参数：目标和比较范围

⑨比较buffer是否具有相同的字串

buf1.equals(buf2)

buffer的方法太多太多了。指路->官网描述

6.syn攻击

tcp三次握手
第一次：客户端发起连接请求，SYN字段，进入SYN_SEND阶段，等待服务器确认
第二次：服务端收到了SYN包，发送ACK字段确认并且发送一个SYN包。
第三次客户端收到SYN和ACK包，向服务端发送ACK包。发送完毕之后，客户端进入SYN—END状态。

服务端维护着一个未连接队列，该队列为服务端收到客户端的SYN包，并且发送SYN+ACK包，等待响应的连接状态开设一个条目。
当收到客户端的确认包时，就会把这个条目从队列里删掉。

当服务端发送SYN+ACK的包在一定时间内没有收到客户端的确认，服务端就会再次重传SYN+ACK包。如果超过了重传的次数，就会把这次连接从半连接队列删除。

SYN攻击时DOS攻击（通过耗尽服务端资源，无法对正常连接进行响应）的一种，他利用Tcp协议的缺陷，通过短时间内伪造大量的不存在的ip地址，发送大量的半连接请求，由于ip不存在，服务端就会不断重发SYN+ACK确认包，直到超时。伪造请求长时间占用了半连接队列，使得其他请求不能正常和服务端连接

检测SYN攻击
一段时间内有大量随机的ip地址占据半连接队列（系统自带的netState）

SYN攻击的防范
防火墙设置转发超时参数（在客户端和服务端中间）
当一段时间内没有收到客户端的ACK确认，防火墙就会发送RST报文，要求服务器删除半连接队列里面的参数

SYN代理：代替服务端发送FYN+ACK字段，如果收到了客户端的响应，就防火墙向服务端发送ACK真正完成三次握手。（服务端半连接队列减少了）

7. 对浏览器窗口计算根字号，进行防抖节流。当页面来不及渲染效果怎么办？？

回来想了很久，这是想问我什么呢？？面试的时候停留在思考，计算之后，屏幕来不及渲染的情况?怎么办呢？
其实面试官是想问，计算之后，屏幕重新渲染，出现了卡屏了闪屏怎么办。那么答案呼之欲出了。那就是在requestAnimationFrame回调中执行计算！

    window.onresize = function debounce2(func, wait) {
      let timeout;
      return function () {
        if (!timeout) {
          timeout = setTimeout(() => {
            timeout = null
            clearTimeout(timeout)
            window.requestAnimationFrame(() => {
              func()
            })
          }, wait);
        }
      }
    }(func, 2000)
    function func() {
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 25 + 'px'
    }

8.z-index

中文名：层叠上下文
默认值：auto
通俗来说，在同一个层叠上下文上，遵循以下显示规律。

① 元素在同一个层级上下文上的比较，越往下显示会越靠前

背景和边框 —— 形成层叠上下文的元素的背景和边框。层叠上下文中的最低等级。

负z-index值 —— 层叠上下文内有着负z-index值的子元素。

块级盒 —— 文档流中非行内非定位子元素。

浮动盒 —— 非定位浮动元素。

行内盒 —— 文档流中行内级别非定位子元素。

z-index: 0 || z-index: auto —— 定位元素

正z-index值 —— 定位元素。层叠上下文中的最高等级。

② 那么不在同一个层级的上下文是怎么比较的呢？

首先看个栗子

<div class="a" style="z-index:2">
   <div class="b" style="z-index:10"></div>
</div>
<div class="c" style="z-index:3"></div>

结果：c盒子会遮盖b盒子。
原因：a，c是在同一个层级上下文里（html），并且c的z-index比a要高。b在a创建的层级上下文内。不管b的z-index有多高，c始终能覆盖b。

那么创建一个层级上下文条件有什么？

文档根元素<html>
postion值为fixed或者sticky
flex容器的子元素
opacity值小于1
mix-blend-mode属性不为normal时
以下属性不为none时：transform、filter、perspective、clip-path、mask/mask-image/mask-border
isolation的值为isolate
-webkit-overflow-scrolling值为touch时
will-change
contain的值为layout，paint或者包含他们一个的组合值。

9.算法部分（重新在leetcode做一遍！）

两数之和
动态规划二维数组找最短路径
千分数
端口合并