【面试】春招面试总结3

夜里梦见自己秃头

已于 2022-04-10 12:43:23 修改

阅读量903

点赞数

分类专栏：面经文章标签：经验分享

于 2022-04-05 22:42:54 首次发布

本文链接：https://blog.csdn.net/qq_45981245/article/details/123946943

版权

面经专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、解决跨域问题：

首先解释一下什么是跨域：跨域是由于浏览器同源策略所限制的一类场景。

同源：同源是指资源地址的 "协议 + 域名 + 端⼝" 三者都相同，即使两个不同域名指向了同⼀ IP 地址，也被判断为⾮同源。

同源策略：同源策略是浏览器的一种⽤于隔离潜在恶意⽂件的重要安全保护机制 !!! (服务器没有这个策略限制)

在浏览器中，⼤部分内容都受同源策略限制，除了以下三个资源获取类型的标签：

<img>
<link>
<script>

如何实现跨跨域获取数据：（主要三种方式）

JSONP
CORS
服务器代理(webpack代理, Nginx反向代理)
document.domain

JSONP：利用了<script> 标签引入资源的功能，不受同源策略的限制的特性，实现跨域效果。

在本地写一个回调(callback)函数,在URL中添加callback作为params，之后在服务器把数据以参数的形式传回，然后解析script标签上的自动触发callback函数获取相应data信息。

优点：

实现简单
兼容性好

缺点：

只支持 GET 请求（因为 <script> 标签只能发送 GET 请求）
存在被 XSS 攻击的可能，缺乏安全性保证
需要服务端配合改造

axios中不支持 JSONP, 如果在开发中, 需要发送 JSONP 请求, 可以用 jsonp 插件

CORS (主流)：跨域资源共享（Cross-origin resource sharing），利用一些额外的 HTTP 响应头来通知浏览器, 允许访问来自指定 origin 的非同源服务器上的资源。主要是浏览器和服务器进行跨域，服务器端配置access-control-allow-origin，浏览器端的origin和服务器的access-control-allow-origin字段进行对应。分为简单请求、非简单请求（询问服务器请求的域名是否在服务器可允许的列表中，以及一些头部信息，如果请求成功才发送xmlHttpRequset请求）

代理服务器

说明: 同源策略是浏览器的安全策略, 服务器与服务器之间, 没有跨域问题! 所以可以利用代理服务器转发请求!

1、开发环境的跨域问题 (使用webpack代理服务器解决)

配置 devServer 的 proxy 配置项

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        '/api': {
          target: 'www.baidu.com', // 我们要代理请求的地址
           // 路径重写
          pathRewrite: {
              // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
              '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
          }
      },
    }
  }
}

2、生产环境的跨域问题 (使用 nginx 服务器代理)

nginx：反向代理服务器，代理服务器帮助我们发送请求，不会触发跨域。

document.domain:告诉页面他们的主域名是相同的，两个次级域名跨域。

二、对BFC的理解：

BFC，是"block formatting context"的缩写，块级格式化上下文。用于盒模型中布局块级盒子独立渲染区域，将处于BFC区域内的和区域外的元素进行隔离。

触发BFC的条件（满足其一即可）：

HTML根元素
position 值为 absolute 或 fixed
float 值不为 none
overflow 值不为 visible
display 值为 inline-block、table-cell 或 table-caption

应用场景：

防止相邻块级元素margin重叠
清除浮动
实现自适应布局

三、对flex盒子属性的理解：

在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。

flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局。

flex-direction: 调整主轴方向

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-items用于调整侧轴的对齐方式

flex-start： 元素在侧轴的起始位置对齐。 
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

flex-wrap属性控制flex容器是单行或者多行,默认不换行

nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。

align-content用来设置多行的flex容器的排列方式

flex-start： 各行向侧轴的起始位置堆叠。 
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。 
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
stretch：拉伸，不设置高度的情况下。

子元素相关语法：

align-self：可以覆盖掉align-items上的性质

四、xss攻击：

xss攻击原理：

Cross Site Script，跨站脚本攻击。

恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中script代码会执行，因此会达到恶意攻击用户的目的。那么XSS攻击最主要有如下分类：反射型、存储型、及 DOM-based型。反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。

产生根源：输入漏洞
解决方法：

cookie防盗——会模拟正常请求，所以不可行
token代替cookie——破解协议
彻底预防措施：对输入源进行安全编码

五、浏览器垃圾回收：

内存周期：分为三个阶段，内存分配，内存使用，内存回收。

内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
内存使用：即读写内存，也就是使用变量、函数等
内存回收：使用完毕，由垃圾回收自动回收不再使用的内存

全局变量一般不会回收, 一般局部变量的的值, 不用了, 会被自动回收掉

// 为变量分配内存
let i = 11
let s = "ifcode"

// 为对象分配内存
let person = {
    age: 22,
    name: 'ifcode'
}

// 为函数分配内存
function sum(a, b) {
    return a + b;
}

垃圾回收：核心思想就是如何判断内存是否已经不再会被使用了，如果是，就视为垃圾释放掉

常用的两种处理垃圾回收的方法：

引用计数：

看一个对象是否有指向它的引用。如果没有任何变量指向它了，说明该对象已经不再需要了。

// 创建一个对象person, person指向一块内存空间, 该内存空间的引用数 +1
let person = {
    age: 22,
    name: 'ifcode'
}

let p = person   // 两个变量指向一块内存空间, 该内存空间的引用数为 2
person = 1       // 原来的person对象被赋值为1，对象内存空间的引用数-1,
                 // 但因为p指向原person对象，还剩一个对于对象空间的引用, 所以对象它不会被回收

p = null         // 原person对象已经没有引用，会被回收

缺点：循环引用。如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露（无法访问也无法释放）。

标记清除法：