小鹅通一面：被问碎了...

浅聊一下

大三学生，今天面了一下小鹅通，大概四十多分钟...问的有点细，汗流浃背

小鹅通

自我介绍

首先进行了一个简单的自我介绍，介绍了一下我是谁、来自哪里、做过什么，实习经历、有什么成绩、为什么能胜任...面了好几家，状态还蛮好的，但是面小鹅通的时候有一点语无伦次(面试官挺好的)...

学习途径

问了我如何学习的...

项目

懒加载

看了一下我的项目，说：在展示图片的时候你使用了lazyload指令实现的一个懒加载，那你能不能不用组件库来实现，介绍一下思路...

在前面的文章中已经写过了懒加载(懒加载是如何实现的 - 掘金 (juejin.cn))，简单说了一下，在image标签内有两个属性，src和data-original，把图片地址放在data-original属性内，然后获取屏幕的宽高，当图片出现在可视范围内，就将data-original内的值赋值给src，然后忘记说要之后要移除data-original属性了...

图片太大如何解决

第二个问题顺势问了我如果图片太大应该如何解决...我回答的是使用webp后缀的图片，接着追问如何将图片后缀改成webp，直接修改吗？我回答的是有些网站可以在线转换...继续追问：将图片后缀修改为webp会模糊吗？兼容性呢？为什么转换为webp图片大小会变小？问到这里我属实是汗流浃背了...

webp

WebP 是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8。 WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。

WebP图片这么好，其兼容性如何呢？Google Chrome、Safari、Firefox、Edge、Opera 浏览器以及许多其他工具和软件库本身就支持 WebP。开发者还添加了对各种图片编辑工具的支持。

解决方法

使用图片压缩

• 原理

图像压缩的本质是：减少表示 数字图像时需要的数据量

图像数据之所以能被压缩，就是因为数据中存在着冗余，主要表现为：

• 图像中相邻像素间的相关性引起的空间冗余
• 图像序列中不同帧之间存在相关性引起的时间冗余
• 不同彩色平 面或频谱带的相关性引起的频谱冗余

数据压缩的目的就是通过去除这些数据冗余 来减少表示数据所需的比特数

有损压缩的原理：

1. 数据丢失：有损压缩会通过舍弃一些图像数据来实现压缩，因此在解压缩时无法完全还原原始图像，会有一定程度的质量损失。
2. 人类感知：有损压缩算法利用了人眼对某些细节变化不敏感的特性，删除了人类难以察觉的信息，从而实现更高的压缩率。
3. 适用场景：有损压缩适用于对图像质量要求不是特别高的情况，比如网络传输、存储空间有限等场景。

无损压缩的原理：

1. 数据保留：无损压缩通过压缩算法将图像数据重新编码，但在解压缩时能够完全还原原始图像，不会丢失任何信息。
2. 重复数据检测：无损压缩算法通过检测图像中的重复数据、模式等信息，采用更有效的方式来表示这些重复信息，减小文件大小。
3. 适用场景：无损压缩适用于对图像质量要求非常高的情况，比如医学图像、专业摄影作品等需要保留所有细节的场景。

总的来说，有损压缩牺牲了一定的图像质量来获得更高的压缩率，而无损压缩则保留了所有图像信息但通常无法实现与有损压缩相同的压缩率。选择使用哪种压缩方式取决于应用场景和对图像质量的要求。

除了图片的一些性能优化，还有哪些性能优化

我回答的可以使用keep-alive对组件进行缓存，在组件切换时被keepalive缓存的组件不会销毁... (该学会用KeepAlive了宝！ - 掘金 (juejin.cn))

防抖节流

在之前的文章中写过(防抖和节流-'帕金森'网友的良方 - 掘金 (juejin.cn))

减少回流重绘

在之前的文章中写过(从输入4399.com到页面渲染之间的回流和重绘（附字节面试题） - 掘金 (juejin.cn))

商品列表一直向下拉，你怎么处理

自己写过的项目没有这么多数据，所以没有考虑过这个问题...

分页

虚拟列表

限制非登录用户的一些操作你是如何实现

答使用路由前置守卫，判断sessionStorage里是否存在userinfo，然后扯了一下全局前置守卫beforeEach，说完这个正想扯其他的路由守卫(Vue-router导航守卫，看这一篇就够了 - 掘金 (juejin.cn))，被打断没说出来...接着问身份会不会过期，有没有token，怎么知道用户身份过期并且跳转到登录...

你的axios是如何封装的？

平时是看着文档来写，问到的时候有点忘记了...

import axios from 'axios'
import { showFailToast } from 'vant';
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/json'
// 请求拦截

// 响应拦截
axios.interceptors.response.use(res => {
    if (res.status != 200) { // 程序错误
        showFailToast('服务端异常')
    } else {
        if (res.data.code != '8000') {
            showFailToast(res.data.msg)
            return Promise.reject(res)
        }
        return res.data
    }
})
export default axios

除了axios，原生js用什么来做？

回答的fetch，再追问还有呢？xhr，再追问xhr和fetch返回的内容有什么区别？

XHR（XMLHttpRequest）返回的内容：

• 当使用 XHR 发起网络请求时，可以获取到以下内容：

  • 服务器响应的数据：可以是文本、JSON、XML 等形式的数据。
  • 响应状态码：表示请求的状态，如 200 表示请求成功，404 表示未找到等。
  • 响应头信息：包括服务器返回的 HTTP 头部信息，如 Content-Type、Content-Length 等。

Fetch 返回的内容：

• 使用 Fetch API 发起网络请求时，可以获取到一个 Promise 对象，通过该 Promise 对象可以获取到以下内容：

  • Response 对象：表示服务器响应，其中包含了响应的数据、状态码、头部信息等。
  • 通过 Response 对象的方法，可以将响应的数据解析为文本、JSON、Blob 等不同的格式。

总的来说，无论是 XHR 还是 Fetch，都可以获取到服务器响应的数据、状态码和头部信息，但 Fetch 返回的是一个 Promise 对象，而 XHR 是直接获取相应的对象。在实际开发中，Fetch API 更加现代化和灵活，提供了更好的异步操作支持，逐渐取代了传统的 XHR 技术。

你使用了哪种路由模式

回答使用的history模式

问：history是如何实现组件切换的？hash模式是如何实现的？hash还有什么用途？

跨域（容我另起一篇总结一下）

同源策略

get请求会触发跨域问题吗？

一个页面里的图片地址和页面的url不同源，图片有做跨域处理吗？

如何解决跨域问题？

常见的状态码有什么含义？

• 1xx（信息性状态码） ：表示请求已被接受，继续处理。

  • 100 Continue：服务器已收到请求的起始部分，客户端应该继续请求。

• 2xx（成功状态码） ：表示请求已被成功接收、理解、接受。

  • 200 OK：请求成功。

• 3xx（重定向状态码） ：表示需要进行进一步的操作以完成请求。

  • 301 Moved Permanently：请求的资源已被永久移动到新位置。

• 4xx（客户端错误状态码） ：表示客户端发送的请求有错误。

  • 400 Bad Request：服务器无法理解该请求。

• 5xx（服务器错误状态码） ：表示服务器在处理请求时发生了错误。

  • 500 Internal Server Error：服务器遇到不可预测的错误。

反问

问了一下前端实习生主要的工作内容...

结尾

痛定思痛，加快消化准备下一次冲锋...