懂猿外

2022-11-02 23:28 河南理工大学万方科技学院计算机类发布于江苏

关注

2022字节跳动面试题及简解

css权重？
盒模型，flex盒
手写代码题：css居中
js如何实现绑定的？
浏览器的缓存机制？
session和cookie的区别？
promise了解吗？
接上题，async await和promise的区别？
宏任务微任务了解吗？promise是什么任务，settimeout呢？
常见的http状态码，分组说一下，然后用过哪些状态码？
http、https有什么区别？

1. css权重

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性。

如果两组选择器都定位到同一元素，且对同一属性设置不同的样式。则需要分别计算两组选择器的权重来确定优先级。一个选择器的优先级可以说是由四个部分计算得分，比较时按位比较。

千位：如果声明在 style 的属性则该位得一分。
百位：选择器中包含ID选择器则该位得一分。
十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
个位：选择器中包含标签选择器、伪元素选择器则该位得一分。

比如 #header p.content.active 得分为 0121。.header p.active::before 的权重是 0022。前者权重大于后者。

2. 盒模型，flex盒

W3C的标准盒子模型：content-box

content-box内容盒模型：宽度=内容的宽度，如果后期添加了border或padding就会使盒子向外扩张

IE盒子模型：border-box边框盒模型

border-box边框盒模型：设置的宽度就等于=内容宽度+padding+border；添加的padding和border就在原先设置的width里，border和padding越大就会向内部content扩张，导致content变小

flex弹性盒模型

使用flex布局的容器，它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。它的使用场景主要是屏幕自适应布局和取代浮动布局。
弹性盒子是css3的一种新布局模式，由容器（父元素）和项目（子元素）组成。

弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白区间。

设置弹性盒子：display:flex或inline-flex; 区别：flex独占一行；inline-flex占据自己应该占据的位置，有点像inline-block，不支持margin:auto。

3. 手写代码题：css居中

水平垂直居中有很多方法。这里我就简要说四种

使用flex布局设置居中。容器设置 display: flex; align-items: center; justify-content: center;
使用flex 时也能通过给子项设置margin: auto实现居中。给容器设置 display: flex; 子项设置 margin: auto;
使用绝对定位的方式实现水平垂直居中。容器设置position: relative。孩子设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
还有一种不常用的方法实现垂直居中。给容器加给伪元素，设置line-height等于容器的高度。给孩子设置display: inline-block;

更多更详细的可以看这一篇文章：我已经说了5种css居中实现的方式了，面试官竟然说还不够？

4. js如何实现绑定的？

可以使用applay,call,bind方法实现this的绑定

apply()的第一个参数是null，在非严格模式下，第一个参数为null或者undefined时会自动替换为指向全局对象，apply()的第二个参数为数组或类数组。

该方法在函数被借用时，会立即执行

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

call()是apply的语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

var person = {
  name: 'person',
  getName: function() {
    return this.name;
  }
}
var boy = {
   name: 'oldCode'
}
// bind()返回一个新函数，供以后调
var getName = person.getName.bind(boy);

// 现在调用
console.log(getName());    // 输出oldCode

5. 览器的缓存机制

浏览器的缓存主要分为两类：强缓存和协商缓存

强缓存

浏览器在发起http请求时首先检查的就是强缓存，该缓存机制中是不需要发送请求的，主要是通过携带字段确认实现

如果在检查中强缓存失效了，则会发起请求，进入到协商缓存。

协商缓存

在强缓存失效后，浏览器会在请求头中携带缓存tag向服务器发起请求，服务器根据该tag值去判断是否使用缓存，其中tag字段分为Last-Modified和Etag

缓存位置

浏览器的缓存位置共有四种，按照优先级来说分别为：

Service Woker
Memory Cache
Disk Cache
Push Cache
Service Worker

它是使Js运行在主线程之外，虽然自己脱离了浏览器，无法访问dom元素，但是它可以实现离线缓存，消息推送等，其中离线缓存就是指Service Woker Cache，同时它也是PWA实现的重要机制。

Memory Cache
它是指内存缓存，它的效率是最快的，但是它的生命周期很短，当渲染进程结束后，它也就不复存在了。

Disk Cache
它是指硬盘缓存，它的存取效率会慢一些，但是它的存储容量和存储时长相对比较有优势。

6. session和cookie的区别？

在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。

session

session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源，但现在服务器已经发展至今，一些session信息还是绰绰有余的。

区别

cookie数据存放在客户的浏览器上，session数据放在服务器上
cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,如果主要考虑到安全应当使用session
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，如果主要考虑到减轻服务器性能方面，应当使用COOKIE
单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。
将登陆信息等重要信息存放为SESSION;其他信息如果需要保留，可以放在COOKIE中

7. promise了解吗？

Promise 是异步编程的一种解决方案：表示一个异步操作的最终状态以及返回的值；

从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

promise的用法：

一个Promise必须提供一个 then 方法以访问其当前值、终值和据因。

promise.then(onFulfilled, onRejected)回调函数只能执行一次，且返回 promise 对象

Promise的每个操作返回的都是Promise对象，可支持链式调用。

通过 then 方法执行回调函数，Promise的回调函数是放在事件循环中的微队列。

function fn(){
     return new Promise((resolve, reject)=>{
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(success, fail).then(success2, fail2)

Promise.all 用法

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

promise1和promise2都成功才会调用success1

Promise.all([promise1, promise2]).then(success1, fail1)

Promise.race 用法

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

promise1和promise2只要有一个成功就会调用succ ess1

promise1和promise2只要有一个失败就会调用fail1；

总之，谁第一个成功或失败，就认为是race的成功或失败。

 Promise.race([promise1, promise2]).then(success1, fail1)

promise的缺点：不能取消

8. async await和promise的区别？

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

async 和await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

使用async函数可以让代码简洁很多，不需要像Promise一样需要些then，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码。

两者的区别

Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
async await与Promise一样，是非阻塞的。
async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
async 和await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。