devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

北森云计算2023校招提前批面经_北森ai面试题库

作者：秋刀鱼在做梦 | 2024-07-20 02:21:05

赞

踩

北森ai面试题库

一面在6.30
bfc,作用域,作用域,什么情况有局部变量,水平垂直居中,flex居中,promis使用,all,race,301,302,304,
cache-troal与express时间,es6特性,es6块级作用域,事件代理委托,e.earget
闭包,优缺点,代理,垃圾回收
原型,原型链作用,object的原型. es6中继承
作用域链

元素居中

水平居中

行内元素

直接设置元素居中

text-align:center

  • 1
块元素
定宽

使块元素左右自动对齐

margin:0 auto

  • 1
不定宽

1.将元素设置为行内元素 ，直接按照行内元素设置

        .container{
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            text-align: center;
        }
        .inner{
            display: inline-block;
            border: 1px solid black;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2.将元素设置为绝对定位,通过left移动父元素的50%,在通过translateX自身的50%

        .container{
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
   			position: relative;
        }
        .inner{
            border: 1px solid black;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
flex方式

对于顶宽或不定宽的元素都适用

设置父元素为flex弹性盒，设置内容分布为center

        .container{
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
           display: flex;
           justify-content: center;
        }
        .inner{
            border: 1px solid black;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

垂直居中

行内元素

给父元素设置line-high，与父元素同高时会自动垂直居中

       .container {
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            position: relative;
            line-height: 300px;
        }
        .inner {
            border: 1px solid black;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
块元素
定高

根据父元素高度和元素高度，直接margin-top：（FatherHeight - SonHeight）/2

不定高

1.设置父元素相对定位，子元素绝对定位，top距离50%，然后上移自身尺寸50%

       .container {
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .inner {
            border: 1px solid black;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
flex方式

对于顶高或不定高的元素都适用

设置父元素为flex弹性盒，设置内容，在侧轴上元素为分布为center

        .container{
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
           display: flex;
           align-items: center;
        }
        .inner{
            border: 1px solid black;
            height: 100px;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

水平垂直居中

定宽高

1.父元素相对定位，子元素绝对定位，子元素top，right，left，bottom设置为0，margin：auto

        .container {
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .inner {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
不定宽高

1.使用position+transform

        .container {
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .inner {
            position: absolute;
            border: 1px solid black;
            top: 50%; 
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

2.使用flex

将父元素作为弹性盒，设置水平和垂直元素居中

        .container {
            border: 1px solid #d5ebe1;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            border: 1px solid black;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

BFC

Block Fromat Content 块级格式区域,一种有特殊样式规则的区域

创建

  • 使用float 使其浮动的元素
  • 根标签
  • 绝对定位的元素 (包含 position: fixed 或position: sticky
  • 使用以下属性的元素 display: inline-block
  • 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
  • 表格标题或使用 display: table-caption 的元素
  • 块级元素的 overflow 属性不为 visible
  • 元素属性为 display: flow-root 或 display: flow-root list-item
  • 元素属性为 contain: layout, content, 或 strict
  • flex items
  • 网格布局元素
  • multicol containers
  • 元素属性 column-span 设置为 all

特点

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算。

应用

1.清除2个元素的margin重叠

给其中一个元素包一个div,通过创建一个BFC的方式,使元素不再互相影响

2.2栏自适应

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此 。

        .pubu{
            width: 150px;
            height: 150px;
            border: 1px solid #108b96;
        }
        .left{
            width: 50px;
            border: 1px solid #c3d94e;
            float: left;
            background-color: #775039;
        }
        .right{
            height: 100px;
            border: solid 1px #ee7959;
            background-color: #a67eb7;
            /* overflow与左侧栏区分 */
            overflow: hidden;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3.清除高度塌陷

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。

此时给父元素设置为BFC时，由于浮动元素也加入BFC计算的特性，此时父元素就可以被撑开

        .f{
            border: solid 1px #ada250;
            overflow: hidden;
        }
        .f div{
            height: 50px;
            width: 50px;
            float: left;
            background-color: #cc7eb1;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

事件委托

事件委托是利用事件冒泡处理一类事件。把一类相同的点击事件委托到他们的父节点上，在冒泡阶段触发父元素身上的事件来处理。根据触发事件参数event.target确定具体触发事件的对象节点。

click，mousedown，mouseup，keydown，keyup适合使用事件委托。

        <div class="container">
            <div class="left">left
                <div class="right">right</div>
			</div>
        </div>

  • 1
  • 2
  • 3
  • 4
  • 5

当点击right时，left和container也同时被点击到了。对于这三个点击事件的触发顺序(传播)，有2种事件流方式：事件冒泡和事件捕获

事件冒泡

由具体的事件传播到不具体的事件

事件捕获

由最不具体的事件最先受到事件，最具体的事件最后收到事件

DOM事件流

Dom2 Event规定了事件流分为三个阶段：事件捕获->到达目标(处理事件)->事件冒泡

最迟要在事件冒泡阶段响应事件

1.捕获比冒泡先执行。

2.鼠标的拖放事件，一般用捕获传递。因为这样不会使内部的元素触发处理事件，而且当鼠标down的时候且鼠标移动到document画布上时候，移动目标元素的移动事件依然可以有效。

3.IE9之前IE只支持冒泡。

作用域

在es6之前没有块级作用域,只有全局作用域和函数作用域

es6新增了块级作用域，包含在**{}**中即可形成一个作用域。

let和const声明的变量只可在所在的{}中使用，从而形成了块级作用域。

作用域是基于函数。和函数可访问到的变量有关。在函数定义时就确定好。这个函数作用于哪些变量

上下文是基于对象。指的是this的。是当前可执行代码的对象引用，一般谁调用函数，this即上下文对象就指向谁。

执行上下文：全局上下文，函数上下文

作用域链

**上下文中的代码在执行时会创建变量对象的作用域链。**基本的作用就是确定使用变量是具体到哪一上下文查找。

当上下文执行变量函数代码时，就把这个变量对象的作为作用域链的首部。执行中的变量对象始终是作用域链首部。

当在变量对象中又遇到包含上下文，则包含上下文中新的变量对象作为作用域链的最新前端。当一个变量对象结束时，作用域链将其删除。

作用域链与上下文栈结构类似。

作用域链查找对象由前（当前变量对象）至后（最终到全局变量对象）。全局变量对象始终在作用域最后。

内部（前）上下文可以通过作用域链访问到外部（后）上下文的变量。

作用链增强

某些代码会在执行时给作用域链前端添加一个临时的上下文

  1. try-catch中的catch

    catch在作用域链前端创建一个新的变量对象:包含错误处理对象的声明，即处理错误的代码

  2. with语句

    with会在作用域链前端添加一个指定对象

            function buildUrl(){
            let qs = "?debug=true";
            with(location){
                let url = href +qs;
            }
            return url;
        }
        let result = buildUrl();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    此时作用域链：window–>buildUrl–>location。所以使用的href是location里的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgPwg5SL-1657449260030)(F:\新建文件夹\学习\前端\前端\JS\withNewContent.png)]

局部变量

var：声明的变量会自动添加到最近的上下文。如果没声明直接使用就会添加在全局上下文。

let：声明的变量作用域仅限声明的块级作用域{}。if块，while块{}…

闭包

闭包是指引用了其他函数作用域变量的函数

闭包有一个自己的作用域

闭包返回匿名函数之后，上下文就已经结束(this不在指向闭包函数)，但是活动对象仍存在(被匿名函数引用)。匿名函数被销毁才会被销毁，释放。

        function f1(){
            let innerId = 999;
            return ()=>{
                console.log(new Date(),innerId);
            }
        }
        let getid = f1();
        getid();
//使用完毕,释放内存
	getid = null;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

作用域

在es6之前没有块级作用域,只有全局作用域和函数作用域

es6新增了块级作用域，包含在**{}**中即可形成一个作用域。

let和const声明的变量只可在所在的{}中使用，从而形成了块级作用域。

作用域是基于函数。和函数可访问到的变量有关。在函数定义时就确定好。这个函数作用于哪些变量

上下文是基于对象。指的是this的。是当前可执行代码的对象引用，一般谁调用函数，this即上下文对象就指向谁。

执行上下文：全局上下文，函数上下文

作用域链

**上下文中的代码在执行时会创建变量对象的作用域链。**基本的作用就是确定使用变量是具体到哪一上下文查找。

当上下文执行变量函数代码时，就把这个变量对象的作为作用域链的首部。执行中的变量对象始终是作用域链首部。

当在变量对象中又遇到包含上下文，则包含上下文中新的变量对象作为作用域链的最新前端。当一个变量对象结束时，作用域链将其删除。

作用域链与上下文栈结构类似。

作用域链查找对象由前（当前变量对象）至后（最终到全局变量对象）。全局变量对象始终在作用域最后。

内部（前）上下文可以通过作用域链访问到外部（后）上下文的变量。

作用链增强

某些代码会在执行时给作用域链前端添加一个临时的上下文

  1. try-catch中的catch

    catch在作用域链前端创建一个新的变量对象:包含错误处理对象的声明，即处理错误的代码

  2. with语句

    with会在作用域链前端添加一个指定对象

            function buildUrl(){
            let qs = "?debug=true";
            with(location){
                let url = href +qs;
            }
            return url;
        }
        let result = buildUrl();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    此时作用域链：window–>buildUrl–>location。所以使用的href是location里的
    在这里插入图片描述

局部变量

var：声明的变量会自动添加到最近的上下文。如果没声明直接使用就会添加在全局上下文。

let：声明的变量作用域仅限声明的块级作用域{}。if块，while块{}…

闭包

闭包是指引用了其他函数作用域变量的函数

闭包有一个自己的作用域

闭包返回匿名函数之后，上下文就已经结束(this不在指向闭包函数)，但是活动对象仍存在(被匿名函数引用)。匿名函数被销毁才会被销毁，释放。

        function f1(){
            let innerId = 999;
            return ()=>{
                console.log(new Date(),innerId);
            }
        }
        let getid = f1();
        getid();
//使用完毕,释放内存
	getid = null;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

Promise

Promise一种对象，可以以同步的写法处理异步逻辑。在执行器中传入异步处理程序。等处理程序有结果后根据结果将Promise转为resolve或reject处理结果。

Promise合成

Promise提供了方法，可以将多个Promise实例合成一个。合成的大Promise实例结果由内部多个Promise决定

类似Observe的zip

Promise.all

Promise.all接受一个可迭代的对象(迭代对象中的元素会调用Promise.resolve转化为Promise类型),会等传入的所有Promise成为resolve之后才resolve大的Promise。若传入中有一个Promise.reject，则大的Promise会reject

大的Promise的data是所有传入的期约解决值的数组。

let testPromise = new Promise((resolve, reject) => {
    let time = new Date();
    resolve(time);
})
let allPromise = Promise.all([testPromise,Promise.resolve(),Promise.resolve(1)]).then(data=>{
    console.log(data) //[ 2022-07-13T14:16:13.193Z, undefined, 1]
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Promise.race

Promise.race返回一个包装期约,是一组传入期约中最先解决或拒绝的镜像。其他的传入期约会被照常执行。若是传入的Promise变为reject没有处理，racePromsie会静默拒绝，不让错误报出来。

let racePromsie = Promise.race(
    [new Promise((resolve, reject)=>setTimeout(resolve,0,1)),
    Promise.reject(1)
    ]
).catch(err=>{
    console.log((err)) //1
})
let racePromsie = Promise.race(
    [new Promise((resolve, reject)=>setTimeout(resolve,0,1)),
    Promise.reject(1)
    ]
).catch(err=>{
    console.log((err)) //1
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

原型

原型链是ECMA-262定义的ES 的继承方式。基本思想就是通过原型链继承多个引用的属性和方法

原型链

原型链是通过联系实例和原型的构想

如果一个A对象有constructor属性，constructor指向一个函数，那么这个函数的原型就是对象A。函数可以通过prototype获取到原型。函数 new出来的实例可以通过内部指针：

__proto__

  • 1

指向原型,通过实例.constructor获取到构造函数。通过把原型、构造函数、实例串联起来的操作叫做原型链。

原型链继承

将构造函数的prototype指向另一个构造函数的实例，从而继承实例的属性和方法。

let fatherConstructor = function (){
    this.xing = 'F';
    this.name = 'father';
    this.sayHello =()=>{
        console.log('我是',this.name,'hello');
    }
}
let sonConstructor =function (){
    this. = 'son';
    this.sayHello =()=>{
        console.log('我是',this.name,'hello');
    }
}
sonConstructor.prototype = new fatherConstructor();
let son = new sonConstructor();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

缺点：

1.继承后的构造函数new出来的实例们，继承的属性和方法之间是互相可见可修改的，容易复杂属性造成互相之间影响。

2.子类型实例化时无法传参

常见状态码

下面是常见的 HTTP 状态码：

  • 200 - 请求成功
    0- 301 - 资源（网页等）被永久转移到其它URL
  • 302 - 资源临时重定向
  • 304 - 不返回数据，使用缓存
  • 404 - 请求的资源（网页等）不存在
  • 500 - 内部服务器错误

浏览器缓存

浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘Disk加载文档。
在这里插入图片描述

强制缓存

不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;

实现:

Expires：

response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。

设置的时间是相对时间，为该资源访问的时间。

Cache-Control：

当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。(优先级高于Expiress)。

值为 -no-cache时：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改 。此时为协商缓存用法。

设置的时间max-age是绝对时间，会记录下该次请求的时间。

协商缓存

向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

实现:

**Last-Modify/If-Modify-Since：**浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

**Etag：**web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。

**If-None-Match：**当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；

ETag和Last-Modified的作用和用法，他们的区别：

1.Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；

2.在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值；

3.在优先级上，服务器校验优先考虑Etag。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/854684
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号