前端知识点（工程化、算法、设计模式、HTTP、Nodejs、TypeScript）

前端工程化

• Webpack编译

• Webpack的loader和plugin

• webpack打包优化

• vite编译原理

• vite打包原理

• vite插件配置

• vite打包配置

• eslint的使用

• babel

• postcss

• amd，cmd，commonJs，和ES Module

1. amd 和 cmd是之前requirejs和seaJs使用的
2. commonJs是Node代码使用的
3. ES Module普遍是前端代码在使用

• 服务器端渲染SSR

1. 概念： 服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。
2. 优缺点 优点：首屏渲染快、利于SEO、可以生成缓存片段，生成静态化文件、节能 缺点：用户体验较差、不容易维护，通常前端改了部分html或者css，后端也需要修改。

• CDN缓存机制、原理

类似于京东物流，就近发货

• 微前端要解决什么问题

数据算法

• 冒泡排序，快速排序，选择排序

• 二分法查找算法

• 深拷贝算法

• 防抖和节流算法

• 数组去重

1. 利用对象key的唯一性去重
2. Array.from(new Set(arr))

• 数组转Tree, or Tree转数组

• 长列表优化

1. 上拉加载
2. 分步加载

• 图片懒加载

1. 利用scrollTop来判断图片在视图中的位置
2. 检测到元素滚动到视图内后，操作dom，把图片的data-src的值，赋值给src属性

设计模式

• 原型模式

• 单例模式

• 装饰器模式

• 工厂模式

• 观察者模式

• 访问者模式

HTTP

• 同源策略，跨域的解决方案

• 协商缓存和强制缓存

• HTTP的请求头

1. Accept
2. Accept-Encoding
3. Accept-Language
4. Connection
5. Host (发送请求时，该报头域是必须)
6. Referer
7. Cache-Control
8. Cookie
9. Range（用于断点续传）
10. Content-Type
11. origin

• HTTP的状态码

200：服务器响应成功，也就是服务器找到了客户端请求的内容，并且将内容返回给客户端。
302：临时跳转。例如：URL地址A可以向URL地址B上跳转，但这并不是永久性的，在经过一段时间后，URL地址A还可能向URL地址C上跳转。
301：和302相似，不同的是301往往代表的是永久性的重定向，值得注意的是，这种重定向跳转，从严格意义来讲不是服务器跳转，而是客户端跳转的。这个“跳”的动作是服务器是通过回传301来下达给客户端的，让客户端完成跳转。
304：服务器通过返回304可以告诉客户端请求资源成功，但是这个资源不是由服务器提供返回给客户端的，而是客户端本地浏览器缓存中就有的这个资源，因为可以从缓存中获取这个资源，从而节省传输的开销。
403：没有权限去访问服务器的资源，或者请求的IP地址被封掉了。
404：服务器上没有该资源，或者说服务器找不到客户端请求的资源，是最常见的请求错误码。
500：程序错误，也就是说请求的网页程序本身报错了。在服务器端的网页程序出错。由于现在的浏览器都会对500做一定的处理，所以在一般情况下会返回一个定制的错误页面。

• ajax的get和post有什么区别

• 解决跨域的几种方式

1. jsonp跨域
2. iframe的postMessage
3. nginx反向代理
4. crs后端添加域名白名单

Nodejs

• Node BFF的实现及使用场景

• Node.js中的常见模块有哪些

全局模块： process(直接使用，不需引入) 系统模块：path，fs, url, http(需要require引入)

TypeScript

• 使用ts的好处是什么

1. TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。所以ts的功能比js只多不少.  
2. Typescript 是纯面向对象的编程语言，包含类和接口的概念.  
3. TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。  
4. 作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解。  
5. ts中有很多很方便的特性, 比如可选链.

• type和interface的区别

1. 都可以描述一个对象或函数
2. 都可以继承，interface用extend继承，type用 & 继承
3. type 可以声明基本类型别名，联合类型，元组等类型，interface不行

• 什么是泛型, 泛型的具体使用?

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性。 可以把泛型理解为代表类型的参数

interface Test<T = any> {
    userId: T;
}
type TestA = Test<string>;
type TestB = Test<number>;
const a: TestA = {
    userId: '111',
};
const b: TestB = {
    userId: 2222,
};