字节三面面试总结记录

最新推荐文章于 2024-04-14 19:33:32 发布

原创最新推荐文章于 2024-04-14 19:33:32 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面试 #前端

面试专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了JavaScript中的async/await用法，解释了事件循环和微任务、宏任务的概念。此外，还阐述了从URL到页面展示的整个过程，包括DNS解析、TCP连接建立、HTTP请求与响应的细节。最后，展示了如何实现45度角打印二维矩阵，将矩阵转换为连贯的字符串。

1. 实习的项目相关

2. async 使用及一些概念

基本的使用方法：

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

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

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)

await

正常情况下 await命令后面时一个Promise对象，返回该对象的结果
如果不是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

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

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

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

网络请求：

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

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

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

DNS(域名系统)

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

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

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

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

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

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

发送http请求

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

网络响应

http响应

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

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

浏览器的解析部分

构建DOM树
词法分析和语法分析
样式计算
link标签引用
style标签中的样式
元素的内嵌style属性

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

生成布局树

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

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

浏览器的渲染

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

4. 斜45度打印二维矩阵

差不多是这个

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

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

‘今天晚上我们一起去看新上映的电影《流浪地球》好不好？听小李说非常值得看！’

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))

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