字节三面 面试总结记录_斜45度打印二维矩阵

1. 实习的项目相关

2. async 使用 及一些概念

基本的使用方法：

1. async函数返回一个promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回
2. 等到异步操作完成，再接着执行函数体内后面的语句

例子：指定多少毫秒后输出一个值

function timer(ms) {
    return new Promise(resolve=> {
        setTimeout(resolve,ms)
    })
}

async function asyncPrint(value, ms) {
    await timer(ms)
    console.log(value)
}

async('hello wold',50)
1
2
3
4
5
6
7
8
9
10
11
12

await

1. 正常情况下 await命令后面时一个Promise对象，返回该对象的结果
2. 如果不是promise对象，就直接返回对应的值

async function async1() {

   console.log('async1 start');   1

   await async2();

   console.log('async1 end'); 

}

async function async2() {

   console.log('async2');    1

}

console.log('script start');  1

setTimeout(function() {

     console.log('setTimeout');  1

}, 0);  

async1();

new Promise(function(resolve) {

    console.log('promise1');  1

    resolve();

 }).then(function() {

    console.log('promise2');  1

});

console.log('script end');  1
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

事件循环：
首先执行同步代码，进入执行栈
执行过程中遇到异步就就放入消息队列中
消息队列有微任务和宏任务

• 首先执行同步代码 script start async1 start async2 promise1 script end async1 end promise2 setTimeout’

3. 输入url到页面展示的过程

网络请求：

1. 构建请求
   请求方法 地址 版本
2. 查找强缓存
   如果命中 直接使用 否则进行下一步
3. DNS解析
   我们输入的是域名，但是数据包是以ip地址传给对方的。

因此我们需要得到域名对应的ip地址

这个过程需要依赖一个服务系统，将域名和ip一一对应

DNS(域名系统)

得到具体的ip过程就叫DNS解析

如果一个域名已经解析过来，那么解析后的结果会被缓存下来

下次处理就可以直接走缓存 不需要经过DNS解析

4. 建立tcp链接
   chrome在同一个域名下要求同时最多只能由6个tcp链接，超过的话需要等待。

如果不需要等待，就会进入tcp连接阶段

• tcp 是一种面向连接，可靠的，基于字节流的传输层通信协议

• tcp三次握手

5. 发送http请求

• 请求行 请求方法 请求url 请求版本
• 请求头 Cache-Control、If-Modified-Since、If-None-Match
• 请求体 请求体只有在POST方法下存在，常见的场景是表单提交。

网络响应

1. http响应

• 响应行
  HTTP/1.1 200 OK
  HTTP协议版本、状态码和状态描述
• 响应头
  服务器生成数据的时间、返回的数据类型以及对即将写入的Cookie信息。

Connection: Keep-Alive，表示建立了持久连接，这样TCP连接会一直保持，之后请求统一站点的资源会复用这个连接。

浏览器的解析部分

1. 构建DOM树
   词法分析和语法分析

2. 样式计算
   link标签引用
   style标签中的样式
   元素的内嵌style属性

• 格式化样式表
• 标准化样式属性
  em->px,red->#ff0000,bold->700
• 计算每个节点的具体样式

3. 生成布局树

• 遍历生成的DOM树节点，并把他们添加到布局树中
• 计算布局树节点的坐标位置

这棵布局树值包含可见元素，对于 head标签和设置了display: none的元素，将不会被放入其中。

浏览器的渲染

• 建立图层树
• 生成绘制列表
• 生成图块并栅格化
• 显示器显示内容

4. 斜45度打印二维矩阵

差不多是这个

onDecrypt([
    ["今","天","上","一","新","影"],
    ["晚","我","起","上","《","》"],
    ["们","去","映","流","好","听"],
    ["看","的","浪","不","小","非"],
    ["电","地","好","李","常","得"],
    ["球","？","说","值","看","！"]
  ])

将上面代码，按一定顺序打印成完整一句话，运行结果：

‘今天晚上我们一起去看新上映的电影《流浪地球》好不好？听小李说非常值得看！’
1
2
3
4
5
6
7
8
9
10
11
12

function onDecrypt(arr) {
    let str = '';
    let len = arr.length;
    let r = 0, c = 0;

    for (let i = 0; i < len; i++) {
        for (r = 0, c = i; r <= i && c >= 0; r++, c--) {
            str += arr[r][c]
        }
    }

    for (let i = 1; i < len; i++) {
        for (r = i, c = len - 1; r <= len - 1&& c >= i; r++, c--) {
            str += arr[r][c]
        }
    }
    return str
}

console.log(onDecrypt(arr))

// 今天晚上我们一起去看新上映的电影《流浪地球》好不好？听小李说非常值得看！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22