比较深度的面试题

### 前端架构方面问题
 a. 分层架构
 b. 模块化开发
 c. 组件化开发
 d. 性能优化
 i. 减少资源加载
 1) 优化图片
		 a) 对于图片资源，可以采用压缩、优化图片大小和格式等方式来减少资源体积。
		 b) 合理使用图片懒加载技术，避免一次性加载大量图片导致页面加载缓慢。
 2) 懒加载/base64/雪碧图
 3) 压缩代码/gzip/合理利用缓存机制，将经常访问的资源缓存起来，减少重复的请求和下载
		 a) 浏览器缓存cache
		 b) CDN缓存
 4) 异步加载
		 a) 对于非关键资源，可以采用异步加载的方式，避免阻塞主线程。例如，可以将JavaScript文件放在底部或使用异步加载技术，以避免阻塞页面渲染。
 5) 优化CSS渲染
		 避免使用过度复杂的选择器和嵌套结构，以减少浏览器的渲染时间。
		 避免使用过度大的背景图片或复杂的动画效果，这些都会增加渲染时间。
 6) 使用Web Workers
		 a) 对于需要大量计算的JavaScript任务，可以使用Web Workers将任务放在后台线程中执行，避免阻塞主线程，提高页面响应速度。	
 ii. 代码优化-提高页面渲染速度
 1) 优化JavaScript代码，避免不必要的计算和操作。
 2) 使用事件代理、懒加载等技术来减少DOM操作和事件绑定。
 3) 避免在页面渲染过程中执行复杂的计算和操作。
 iii. 监控和日志
 1) 建立监控和日志系统，实时监控网站性能和用户行为。通过分析日志数据，找出性能瓶颈和问题所在，及时进行优化和调整。
 e. 前端安全
 i. 通过转义用户输入和输出，可以防止XSS攻击。
 ii. 使用经过良好维护和广泛使用的安全API和库，可以减少安全漏洞的风险。
 iii. 在前端应用程序中，限制对文件、数据库和其他资源的访问权限，以减少潜在的安全风险。只授予必要的权限，并定期审查和更新权限设置。
 iv. 保持前端框架、库和工具的更新，及时修补已知的安全漏洞。定期检查第三方依赖项的安全性，并遵循最佳实践来更新它们。
 v. 定期进行安全审计和代码审查，以发现潜在的安全漏洞和问题。使用静态代码分析工具、动态分析工具和其他安全审计工具来帮助识别和修复问题。
 vi. 通过定义允许加载的资源来源，可以限制浏览器加载哪些资源，从而保护应用程序免受恶意攻击。
 f. 清晰的代码文档说明
 g. 定期检查和重构，汇总通用方法
### webpack如何优化
 a. 代码分离分包chunks
 b. prefetch 预获取
 i. Prefetch的实现方式是通过添加rel="prefetch"属性来实现
 c. preload 预加载
 i. PreloadWebpackPlugin参数include/fileWhitelist/priority(优先级)
 d. Tree Shaking移除 JavaScript 上下文中的死代码

### vite的性能优化
 a. 服务热更新更快
	 i. 在 Vite 中，HMR 是在原生 ESM 上执行的。
 当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身）
 使得无论应用大小如何，HMR 始终能保持快速更新。
 b. 对于Ts的友好支持
 
### SPA与SSR的理解
 a. 单页面应用（SPA）
	 i. 整个web项目只有一个页面，使用路由机制进行组件之间的切换；
	 ii. 优点：客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离；
	 iii. 缺点：首屏加载慢、对SEO不友好，不利于百度，360等搜索引擎收录快照
 b. 服务端渲染（SSR）
	 i. 将组件或页面通过服务器端生成HTML字符串，再发送到浏览器端渲染；
	 ii. 优点：对于SEO友好、首屏加载速度快；
	 iii. 缺点：页面重复加载次数高、开发效率低、数据传输量大、服务器压力大；
 c. SPA和SSR的适用场景
	 i. SPA：对项目性能要求高、页面加载速度快、要求客户端渲染、对SEO要求低；
	 ii. SSR：对项目SEO要求高、首次打开响应速度快；
 d. SPA与SSR比较
	 i. 数据请求
 1) 由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。
 2) 服务端在内网进行请求，数据响应速度快。
 3) 客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。
	 ii. HTML渲染
 1) 服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；
 2) 而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。
 3) 阶段一：浏览器请求url --> 服务器路由分析、执行渲染 --> 服务器返回index.html(实时渲染的内容，字符串) --> 浏览器渲染
 4) 阶段二：浏览器请求bundle.js --> 服务器返回bundle.js --> 浏览器路由分析、生成虚拟DOM --> 比较DOM变化、绑定事件 --> 二次渲染
	 iii. 传输数据
 1) 客户端渲染：传递JSON对象，由浏览器渲染视图
### qiankun方面的问题
 a. 为什么拆分qiankun,优缺点
 技术兼容性好、子应用可以基于不同的技术框架
 拆分后体积变小，代码内聚性更强，每个子应用只是一个业务模块
 能够独立开发、编译、部署
 耦合性低，可独自开发，互不干扰
 可维护和扩展性好，可专门升级某一个功能
 b. 如何拆分qiankun，注意事项
 registerMicroApps 注册子应用
 c. 对于拆分后的主体基座应用与子应用如何通讯，子应用间如何通讯
 主应用
 提供了一种基于 props 的通信机制。你可以在主应用中通过 props 传递数据给子应用，然后在子应用中通过 props.onGlobalStateChange 和 props.setGlobalState 来监听和修改全局状态。
 子应用直接通过
 d. 对于qiankun拆分后，有什么观点
 1. 例如 以配置化的参数设置子应用的读取，可以解决子应用独立运行时的便携性
 2. 通过私服npm可以挂载通用的系统请求以及通用组件
### 如何优化vue项目

### uniapp的相关使用


### 后台管理系统的大数据量如何渲染


### tab标签页缓存问题
#### vue项目keep-alive 点击tab标签(tagsView)缓存页面
 includs 包含属性
#### vue+qiankun -- 多tab标签页切换缓存
 结合localstore监听includs的参数变化

面试疑难问题汇总

# 1. cookie，sessionStorage，localStorage的区别

| 标题 | 大小限制 | 共享限制 | 读取限制 |
| --- | --- | --- | -- |
| cookie | 4KB | 可设置白名单 | http(存在安全性问题)和客户端 |
| sessionStorage | 5M以内 | 当前客户端访问 | 客户端（当前标签页） |
| localStorage | 5M以内 | 当前客户端访问 | 客户端（跨窗口源网页，持久化保存） |

# 2. position 的属性值相关

| 属性值 | 类型 | 描述 |
| --- | ------ | ------------ | 
| static | 默认值 | 元素按照正常的文档流进行定位，不受 top、right、bottom、left 等属性影响。 |
| relative | 相对定位 | 元素相对于其正常位置进行偏移，但仍保留在文档流中。 |
| absolute | 绝对定位 | 元素相对于最近的定位祖先（非 static）进行定位，如果没有定位祖先，则相对于初始包含块（通常是浏览器窗口）。 |
| fixed | 固定定位 | 元素相对于浏览器窗口进行定位，即使页面滚动也不会移动。 |
| sticky | 粘性定位 | 元素在相对定位和固定定位之间切换，依赖于用户的滚动位置。在元素的滚动范围内表现为相对定位，超出范围后表现为固定定位。 |

# 3. 盒子模型&标准盒模型和怪异盒模型

> 盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个的box， box由内容、内边距、边框和外边距4个部分组成。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

| 类型 | 简称 | 样式设置 box-sizing | 描述 |
| --- | --- | -- | -- |
| 标准盒模型 | W3C标准盒模型 | content-box | 标准盒模型的 width 或 height 决定 content 的宽或高。 |
| 怪异盒模型 | IE盒子模型 | border-box | 怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。 |

# 4. JS的类型&作用域

## Js的类型

> 基本类型包含：Sting类型，Number类型，Boolean类型，null，undefind 
> 引用类型：Object类型，Arrya类型， Symbol类型（ES6）

一个变量声明了，但没有赋值，那么默认值就为undefined

一个函数，没有写return，那么默认return就是undefind

## JS的作用域

> 作用域是指在代码中定义变量的区域，这个区域定义了变量的可见性和生命周期。JavaScript有两种主要的作用域类型：全局作用域和函数作用域。 
> ES6+ 块级作用域 
> 作用域链 => 当你在一个函数内部尝试访问一个变量时，JavaScript会首先在当前的作用域查找。如果没有找到，它会去外层的作用域查找，直到找到为止。这就是作用域链。

### js的闭包与递归

#### 闭包
当一个函数能够记住并访问所在的词法作用域，即使该函数在词法作用域外部执行，这就产生了闭包。

> 常见问题
> 1. 内存泄漏：如果闭包中引用了外部函数的变量，且闭包没有被及时释放，可能导致内存泄漏。 
> 2. 不易理解和调试：闭包使得函数的作用域扩大，内部函数可以访问外部函数的变量，这会增加代码的复杂性，使得代码更难理解和调试。

> 优点
> 1. 封装性：闭包可以将变量和函数封装起来，防止外部访问和修改，提高了代码的可维护性和可重用性。 
> 2. 保存状态：闭包可以保存函数的状态，即使函数已经执行完毕，状态仍然保持，这在特定情况下非常有用，例如事件处理程序。

> 缺点
> 1. 内存占用：闭包会占用更多的内存，因为它会保存外部函数的变量和内部函数的引用。特别是如果闭包没有被及时释放，会导致内存泄漏。 
> 2. 性能问题：由于闭包会引用外部函数的变量，导致变量无法被垃圾回收，这可能会影响性能，尤其是在循环中使用闭包。

#### 递归
函数直接或间接调用自己。通过某个条件判断跳出结构，有了跳出才有结果。

> 通常用于查询树状结构数据如 菜单树匹配子节点/商户门店结构树匹配权限等 

# 5. 普通函数与箭头函数的区别

| 类型 | 场景问题 | 优点 |
| --- | -- | -- |
| 普通函数 | 无 | 适用性强 |
| 箭头函数 | This的指向问题 | 语法简洁性比较高、不适用于构造函数、无arguments对象 |

# 6. Js与Ts的区别

| 类型 | 类型系统 | 继承 | 特殊 |
| --- | --- | --- | -- |
| js | 弱类型 | 基于原型 | 编译后代码可读性高 |
| ts | 强类型 | 基于类 | 静态类型检查，可选类型注解，类型推断，支持装饰器，编译时类型检查，泛型 |

# 7. Vue2与Vue3的区别

| 类型 | 构建 | 架构模式 | 性能优化 | API设计 |
| --- | --- | --- | -- | -- |
| vue2 | wabepack | 大型单体系统架构模式 | | 选项式API |
| vue3 | vite或wabepack | 使用组合式API+TypeScript的方式进行架构设计和实现 | 通过优化虚拟DOM算法、响应式系统和编译器 | 组合式API+Composition API(以函数的形式组织组件逻辑) |
## 底层
> Vue2底层是通过es5的Object.defineProperty，使用Object.defineProperty()进行数据劫持，结合订阅发布的方式实现，有一定的局限性。 
> 缺点：对数组更新的时候无法实现响应式，它内部有一个this.$set去实现
> 如果响应式定义的数据层级比较深（对象里面有对象，对象里面还有对象）它内部是 通过递归的形式去实现的 

> Vue3底层是通过es6的Porxy， 使用Proxy代理，使用ref或者reactive将数据转化为响应式数据，能够更好地支持动态添加属性和删除属性。 
> 它解决了Vue2底层实现的缺点，对数组、层级比较深的对象处理都很优秀 
> 缺点：浏览器兼容不是很好
## 生命周期
```
Vue2------------------------------Vue3
初始化阶段：
beforeCreate ------------------ setup() 
created -------------------------- setup()
beforeMount -------------------- onBeforeMount
mounted -------------------------- onMounted 

更新阶段：
beforeUpdate ------------------ onBeforeUpdate 
updated ------------------------- onUpdated 

销毁阶段：
beforeDestroy ---------------- onBeforeUnmount 
destroyed ---------------------- onUnmounted 
————————————————
```
## 根节点
Vue2 只支持一个根节点 ，在模板中如果使用多个根节点时会报错

Vue3 支持多个根节点
## 模板指令
在vue2中，v-for 优先级高于 v-if;

在vue3 中，v-if 优先级高于v-for;
## 语法API不同
Vue2：选项式API，面向对象编程

Vue3：选项式API/组合式API，面向函数编程；没有this，处处皆函数

# 8. vuex与pinia的区别

| 类型 | 描述 | 体积和复杂性 |
| --- | --- | --- |
| Vuex | Vuex采用了集中式的架构，将所有状态存储在一个全局状态树中，通过mutations和actions来修改和处理状态。 | 拥有庞大的生态系统，适合大型和复杂的项目 |
| Pinia | Pinia采用了去中心化的架构，将状态分布在多个模块中，每个模块拥有自己的状态、mutations和actions。 | 相对较小且更简单 |

# 9. Vue的路由相关

## Vue路由提供了多个导航守卫，用来控制路由导航的行为

beforeEach：在路由导航之前被调用，可以用来检查用户是否有权限访问该路由。

afterEach：在路由导航之后被调用，可以用来执行一些清理操作，如重置页面滚动位置。

beforeResolve：在路由导航之前被调用，但是在路由组件被解析之后被调用，可以用来确保异步路由组件被解析。

onError：在路由导航期间发生错误时被调用，可以用来处理错误并显示错误页面。

## 路由懒加载和路由预加载

路由懒加载是在需要时动态加载路由组件，而路由预加载是在应用程序启动时预加载一些路由组件。路由懒加载可以提高应用程序的性能，因为它可以减少应用程序启动时需要加载的代码量，而路由预加载可以提高路由导航的性能，因为它可以减少路由导航时需要加载的代码量。

# 10. vite和wabepack的区别

1. 开发模式不同

Webpack在开发模式下依然会对所有模块进行打包操作，虽然提供了热更新，但大型项目中依然可能会出现启动和编译缓慢的问题；而Vite则采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升了开发环境的响应速度。

2. 打包效率不同

Webpack在打包时，会把所有的模块打包成一个bundle，这会导致初次加载速度较慢；而Vite则利用了浏览器对ES Module的原生支持，只打包和缓存实际改动的模块，从而极大提高了打包效率。

# 11. Vue的组件通讯

父子组件通信：props / $emit

子父组件通信：$emit / v-on

兄弟组件通信：Vuex

跨级组件通信：Vuex / provide / inject

# 12. React和Vue的区别

1. 监听数据变化的实现原理不同

Vue通过getter/setter方法以及一些函数的劫持能精确知道数据的变化。

React默认是通过比较引用方式diff算法进行的，若不优化，会导致大量不必要的VDom的重新渲染。

2. 数据流不同

Vue实现双向绑定：props可以双响绑定，组件与Dom之间可以通过v-moudel绑定。

React不支持双向绑定：提倡单向数据流，称之为onChange/setState模式。

# 13. ES6的新特性

# 14. 原型和原型链

在js中，每一个对象（函数也是对象）都有一个特殊的属性叫做原型（prorotype），它指向另一个对象，这个对象（Test.prototype）被称为原型对象， 原型对象是用来共享属性和方法的

查找对象实例的方法和属性时，先在自身找，找不到则沿着__proto__向上查找，我们把__proto__形成的链条关系称原型链（实现了js继承）

# 15. js的深拷贝与浅拷贝的区别

浅拷贝（Shallow Copy）：创建一个新的对象，这个对象有着原始对象属性的一份简单拷贝。如果属性是基本类型，则拷贝的就是基本类型的值；如果属性是引用类型，则拷贝的就是内存地址，所以新旧对象还是会引用同一个对象。

深拷贝（Deep Copy）：创建一个新的对象，如果属性是基本类型，同样拷贝基本类型的值；如果属性是引用类型，则会在新对象中创建一个新的引用类型的实例。新旧对象之间不会共享任何引用。

# 16. js的Map与Object的区别

Object：Object是最常用的一种引用类型数据，可用于存储键值对的集合，在ECMAScript 1st中添加

Map：Map是键值对的集合，采用Hash结构存储，在ES6中新增

## Object适用场景
1. 仅做数据存储，并且属性仅为字符串或者Symbol
2. 需要进行序列化转换为json传输
3. 当作一个对象的实例，需要保留自己的属性和方法
 
## Map适用场景
1. 会频繁更新或删除键值对
2. 存储大量的数据，尤其是key类型未知的情况下
3. 需要频繁的进行迭代处理

# 17. 如何解决跨域问题

### 如何解决跨域问题

JSONP（只支持GET请求）

CORS（服务器需要设置相应的响应头）

代理服务器（在服务器端设置代理，将请求发送到目标服务器）

在服务器端设置HTML5 Access-Control-Allow-Origin头信息

# 18. TCP和UDP的理解
### 浏览器输入URL后发生了什么

1. DNS域名解析；
2. 建立TCP连接；
3. 发送HTTP请求；
4. 服务器处理请求；
5. 返回响应结果；
6. 关闭TCP连接；
7. 浏览器解析HTML；
8. 浏览器布局渲染；
### TCP 三次握手&四次挥手
# 19. 浏览器的事件循环

JavaScript的事件循环是一个处理异步操作和用户界面交互的机制。它是浏览器中的一个重要概念，确保了浏览器可以同时处理用户交互、网络操作、定时事件等。

事件循环通常涉及以下几个阶段：
1. 执行全部同步代码。
2. 执行微任务（microtasks），如Promise的回调。
3. 检查是否有需要执行的宏任务（macrotasks），如用户输入事件、setTimeout等，如果有则执行。
4. 返回第一步继续执行剩余的同步代码。

重复步骤3和4，直到所有的任务都处理完毕。

# 20. 节流防抖的概念和应用场景

节流（Throttling）和防抖（Debouncing）是两种常用的优化函数执行频率的技术，它们的目的都是为了减少不必要的资源消耗或者提高性能。

### 节流（Throttling）：控制一定时间内函数的执行次数。

1. 应用场景：
比如用户滚动页面的事件，我们可以限制其执行的频率，避免频繁的计算或者网络请求。
2. 实现方式
可以用定时器实现，当事件触发时，设置一个定时器，如果在设定的时间内再次触发事件，则清除上一次的定时器，并重新设置。

### 防抖（Debouncing）：当持续触发事件时，一定时间内只执行最后一次。

1. 应用场景
比如用户输入搜索关键字，我们可以在用户完成输入后再进行搜索请求，而不是用户每输入一个字就进行一次搜索。
2. 实现方式
可以用定时器实现，当事件触发时，设置一个定时器，如果在设定的时间内再次触发事件，则清除上一次的定时器，并重新设置。当最后一次触发事件后，超过设定的时间没有再次触发事件，则执行回调函数。

# 21. 快速排序算法

![image.png](/static/img/c2f49ed34f64ac9498c3ff6841f404e6.image.webp)

# 22. 对于堆和栈直接的理解

如果想要堆溢出，比较简单，可以循环创建对象或大的对象； 如果想要栈溢出，可以递归调用方法，这样随着栈深度的增加，JVM
（虚拟机）维持着一条长长的方法调用轨迹，直到内存不够分配，产生栈溢出。

2024年刷波前端面试题记录(一)

> 浏览器内的书签汇总,惊喜不断....



# 前端基础书签

[菜鸟教程](https://www.runoob.com/html/html-tutorial.html) 
[w3cschool教程](https://www.w3cschool.cn/html/) 
[Web前端HTML5&CSS3](https://www.yuque.com/u21195183/hfcamg) 
> 语雀-尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版学习笔记 

[Canvas: Draw on the web](https://www.yuque.com/airing/canvas) 
> 语雀-HTML5 Canvas 教程 

[渐变色网站-uigradients.com](https://uigradients.com/#JShine) 
> 高效选择更加恰当的渐变色 

[字体](https://www.dafont.com/search.php?q=PingFangSC-Medium%2C+PingFang+SC) 
[阿里巴巴普惠体](https://www.alibabafonts.com/#/home) 
[代码高亮插件](https://prismjs.com/)

# 进阶

[vue](https://staging-cn.vuejs.org/) 
[React](https://react.docschina.org/) 
[Angular](https://www.angular.cn/) 
[Fes.js](https://webank.gitee.io/fes.js/) 
[sveltejs](https://www.sveltejs.cn/) 
[Three.js中文网](http://www.webgl3d.cn/) 
[Orillusion次时代 WebGPU 引擎](https://www.orillusion.com/) 
[animista](https://animista.net/play/basic/slide/slide-left) 
[NGINX 配置](https://nginx.p2hp.com/config/?global.app.lang=zhCN) 
[Astro](https://docs.astro.build/zh-cn/getting-started/) 

## 插件库
[FeHelper ( 浏览器插件 )](https://www.baidufe.com/fehelper/index/index.html) 
> 本插件支持Chrome、Firefox、MS-Edge浏览器，内部工具集持续增加，目前包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具，甚至在目前新版本的FeHelper中，还集成了FH开发者工具


## UI库

[Ant Design of Vue](https://www.antdv.com/docs/vue/introduce-cn/) 
[Element-UI 组件库](https://element.eleme.cn/#/zh-CN/component/installation) 
[Element Plus](https://element-plus.gitee.io/zh-CN/) 
[iView-UI 组件库](https://www.iviewui.com/docs/guide/i18n) 
[layui-UI 组件库-----停止维护](http://www.layui.com/) 
[vue-beauty2](https://fe-driver.github.io/vue-beauty/#/components/start) 
[mint-UI 组件库](http://mint-ui.github.io/docs/#/zh-cn2) 
[Vant 移动端Vue组件库](https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/) 
[FrozenUI](https://frozenui.github.io/) 
> FrozenUI 是一套基于移动端的UI库轻量、精美、遵从手机 QQ 设计规范 

[LuLu UI](https://l-ui.com/) 
> Edge主题使用原生JavaScript编写，使用了JavaScript和CSS前沿的新语法和新特性，React和Vue项目均适用。 

[mpvue-UI 组件库](http://mpvue.com/) 
> mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 

[AT UI](https://at-ui.github.io/at-ui/#/zh) 
> AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品 

[cube-ui移动端UI](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction) 
> Cubeui,滴滴出行基于Vue.js的移动端组件库,该技术拥有质量可靠、体验极致、标准规范和强扩展性这四大特点,并拥有独特的后编译技术方案帮助大幅优化性能。 

[graceUI 官网 - 微信小程序 UI 框架 | uni-app UI框架](http://grace.hcoder.net/) 
[Muse-UI 移动端Vue组件库](https://muse-ui.org/#/zh-CN/installation) 
[Shineout UI](https://shine.wiki/1.2.x/en#/components/GetStart) 
[Naive UI - Vue 3 组件库](https://www.naiveui.com/zh-CN/os-theme) 
> Vue 3 组件库比较完整，主题可调，使用 TypeScript 

[Quasar Framework](https://quasar-framework.org/) 
> Vue 3 组件库 

[Headless UI](https://headlessui.dev/) 

[Tailwind CSS 是一个功能类优先的 CSS 框架](https://www.tailwindcss.cn/) 
> Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

## 图表库

[ECharts](http://echarts.baidu.com/) 
[Highcharts](http://www.hcharts.cn/) 
[vCharts](https://v-charts.js.org/#/) 
[F2 - AntV](https://antv.alipay.com/zh-cn/f2/3.x/tutorial/index.html) 
[heatmap](https://www.patrick-wied.at/static/heatmapjs/) 
> Dynamic Heatmaps for the Web 

[Draft](https://draftjs.org/docs/api-reference-character-metadata) 
[Leaflet](https://leafletjs.com/examples.html) 
[maptalks](https://maptalks.org/) 
> An open-source javascript library for integrated 2D/3D maps 


[中国地图 | JShare](https://jshare.com.cn/highmaps/FSSm7A) 

[mars2d](http://leaflet.marsgis.cn/examples.html#baselayer) 

[中国各省市县级 JSON 文件](https://blog.csdn.net/lzhlzz/article/details/41347929) 

[GEOJSON标准格式学习](https://www.jianshu.com/p/852d7ad081b3)

## Lodash 
[Lodash 中文文档](https://www.lodashjs.com/) 

## NextJs
[Next](http://nextjs.frontendx.cn/) 

[Next中文文档](https://www.cnblogs.com/mybilibili/p/11722302.html) 

## NuxtJs
[Nuxt.js](https://zh.nuxtjs.org/) 

## Vite
[Vite中文网](https://vitejs.cn/guide/why.html) 

## Node
[Egg](https://eggjs.org/zh-cn/intro/) 

## css-doodle
[css-doodle](https://css-doodle.com/) 

## 混合开发
[UniApp](https://uniapp.dcloud.io/quickstart) 
[Taro UI | O2Team](https://taro-ui.aotu.io/#/) 
[Flutter中文网](https://flutterchina.club/) 
[hippyjs](https://hippyjs.org/?from=thosefree.com#/guide/integration) 

## 离线存储
[localForage 中文文档](https://localforage.docschina.org/) 
[vuex持久化 vuex-persistedstate](https://www.jianshu.com/p/c22861ec5f21)

## 滚动相关
[Vuescroll.js](https://vuescrolljs.yvescoding.org/) 
[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller) 
[iScroll5 API 中文版](http://caibaojian.com/iscroll-5/config.html) 
> iScroll的版本 
> 针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。 
> 目前我们有以下版本： 
- iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
- iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
- iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
- iscroll-zoom.js，在标准滚动功能上增加缩放功能。
- iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。


# 微前端
[qiankun](https://qiankun.umijs.org/zh/guide) 
[微前端框架调研](https://www.cnblogs.com/givingwu/p/15899672.html) 
[webpackjs](https://www.webpackjs.com/plugins/) 
[qiankun + vue3 实现子应用 vuex 数据共享](https://juejin.cn/post/6971672840122990623) 
[qiankun 微前端实践总结](https://juejin.cn/post/6856569463950639117#heading-1) 
[微前端模块共享分析](https://juejin.cn/post/6984682096291741704) 
[基于 qiankun 的微前端最佳实践](https://www.jianshu.com/p/ec7d2d0a6e56) 
[如何快速开启前端团队的微前端架构](https://zhuanlan.zhihu.com/p/124068996) 
[无界极致的微前端框架](https://wujicode.cn/xy/app/prod/official/index) 

# 低代码
[react-flow](https://github.com/wbkd/react-flow) 
> 高度可定制的库，用于构建基于节点的交互式UI，编辑器，流程图和图表

[基于 Low-Code Engine 快速打造高生产力的低代码研发平台](https://lowcode-engine.cn/) 
[页面可视化搭建工具技术要点](http://www.alloyteam.com/2019/07/h5-build-tool-pipeline/#prettyPhoto) 
[sparrow-js](https://zhuanlan.zhihu.com/p/268675617) 
[luban-h5](https://www.cnblogs.com/yehuisir/p/13533234.html) 
[f-render表单设计器](https://dream2023.gitee.io/f-render/) 
[组件自定义交互实现](https://zhuanlan.zhihu.com/p/285272849) 
[Dooring可视化之从零实现动态表单设计器](https://zhuanlan.zhihu.com/p/221983171) 
[H5页面制作平台](http://h5.dooring.cn/)

# 游戏框架
[Babylon](https://www.babylonjs.com/) 
[Cocos](https://docs.cocos.com/creator/manual/zh/) 
[LayaAir 2.0](https://www.layabox.com/) 
[Aotu.io](https://aotu.io/notes/2017/12/27/h5-game-engine-recommend/) 
[Pixi.js中文网](https://pixijs.huashengweilai.com/guide/start/1.introduction.html) 
[Hilo](http://hiloteam.github.io/index.html) 
[Unity中文手册](https://docs.unity.cn/cn/current/Manual/index.html) 
> 使用 Unity Editor 可创建 2D 和 3D 游戏、应用程序和体验。

# web埋点监控
[Webfunny前端监控系统](https://www.webfunny.cn/des.html#quickstart-clone) 
[7 天打造前端性能监控系统 - FEX](http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/)

# 爬虫
[js爬虫框架](https://www.spiderflow.org/) 

# 设计网站

[Lugia](http://lugia.tech/#/) 
[Pexels 素材图片](https://www.pexels.com/zh-cn/search/%E5%A4%A9%E7%A9%BA/) 
[FECS Plugins](http://fecs.baidu.com/plugins) 

# 安卓/iOS
[Android 开发者](https://developer.android.google.cn/docs) 
[iOS与JS交互的4种方法](https://blog.csdn.net/dolacmeng/article/details/79623708) 
[IOS应用测试及发布（Hbuilder版）](http://www.jianshu.com/p/b61a39b199ff) 
[Android 读取、接收、发送 手机短信](https://blog.csdn.net/lyshark_lyshark/article/details/125848613) 

## 解锁安卓
[解锁小米手机](https://www.miui.com/unlock/index.html) 
[小米手机获取完整ROOT权限教程](https://web.vip.miui.com/page/info/mio/mio/detail?app_version=dev.20051&postId=2368725) 

# 实用网站
[七牛云](https://sso.qiniu.com/) 
> 资源OSS处理 


[WindTerm](https://kingtoolbox.github.io/) 
[getpostman](https://web.postman.co/) 
[think-api](https://docs.topthink.com/think-api/1888715) 
[chrome扩展开发中文教程](http://chrome.cenchy.com/) 
[写给中高级前端关于性能优化的9大策略和6大指标](https://juejin.cn/post/6981673766178783262) 
[前端API层架构](https://juejin.im/post/5de7169451882512454b18d8) 
[你不知道的 Chrome 调试技巧](https://juejin.cn/book/6844733783166418958/section/6844733783187390477) 
[https证书制作/申请](https://www.jianshu.com/p/1163d1ae8029) 
[lilishop商城](https://gitee.com/beijing_hongye_huicheng/lilishop) 
[SQL 开发入门教程](https://www.yuque.com/fcant/sql/op54ut) 
[LNMP一键安装包 配置 Linux+Nginx+Mysql+PHP](https://blog.csdn.net/u014472643/article/details/79150781) 
[Linux上安装Redis+PHP安装Redis扩展](https://www.jianshu.com/p/d1e5a6777166) 
[Maven安装与配置](https://www.cnblogs.com/eagle6688/p/7838224.html) 
[前端: 如何快速将应用封装成js-sdk](https://zhuanlan.zhihu.com/p/324556175) 
[Vue 3.0 企业级项目实战 ](https://juejin.cn/book/6933939264455442444) 
[文件上传8种场景](https://juejin.cn/post/6980142557066067982) 
[热图推荐](https://www.meiye.art/canvas) 
> 大量免费大厂素材，合集较多，不建议放过

[Lunisolar.js 使用Typescript编写的专业农历库](https://lunisolar.js.org/guide/about.html) 
[阿里巴巴镜像站](https://developer.aliyun.com/mirror/) 


# 拓展
[生活百科计算类集合站](https://www.jisuan.mobi/index.php?catid=49) 
[清华大学开源软件镜像站](https://mirrors.tuna.tsinghua.edu.cn/help/centos/) 
[pageSpy前端监控](https://github.com/HuolalaTech/page-spy-web) 
[HarmonyOS](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/run_simulator-0000001053303709-V2) 
[C语音中文网](https://c.biancheng.net/tkinter/button-widget.html) 
[]()

前端程序员的书签集合-开发库相关

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。将libuv作为跨平台抽象层，libuv是用c/c++写成的高性能事件驱动的程序库。nodejs的原理类似c/c++系统编程中的epoll



# Node.js的运行机制

![image.png](/static/img/295212e18a48656ff96e3edf4307a8f9.image.webp)

（1）V8引擎解析JavaScript脚本。

（2）解析后的代码，调用Node API。

（3）libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个Event Loop（事件循环），以异步的方式将任务的执行结果返回给V8引擎。

（4）V8引擎再将结果返回给用户。

* node.js的主进程和Event Loop是分开的，主进程执行完同步代码就不执行了，剩下的就交给事件循环去做了。

# 事件循环（Event Loop）
nodejs 执行之后会初始化一个事件循环，执行代码程序（这些程序可能会造成异步调用、定时器或者process.nextTick()），然后开始执行事件循环。

![image.png](/static/img/97cd3f0150cf8d1aec5656e231b27119.image.webp)

上边的每一个模块都是事件循环的一个阶段，每个阶段都有一个要执行的回调的FIFO队列。虽然每个阶段都不同，一般来说，当事件执行到一个阶段，先执行这个阶段特有的操作，然后操作这个阶段的队列，当队列执行完或者达到了回调上限，事件循环就会执行下一个阶段。

小结：poll队列为空的时候，事件循环有可能执行check阶段执行setImmediate的回调，也有可能回到timer阶段执行setTimeout的回调，这取决于setImmediate和setTimeout的回调哪个到得早。

# Node.js的单线程模型如何处理高并发请求

Node.js采用单线程模型，但通过事件循环和异步I/O操作，可以处理大量的并发请求。Node.js的事件循环是单线程的，但是通过内部的libuv库进行异步I/O操作，它可以同时处理数以万计的并发连接。

# Node.js 中的模块

## 模块分类

1. 具名的核心模块（已经封装好的内置模块，http、fs、os 等）
2. 自定义模块
3. 第三方模块（npm下载下来的，express、art-template 等）

## 模块导入

* 使用require方法导入模块

 注意：requier函数有两个作用：

 执行导入的模块中的代码

 返回导入模块中的接口对象 module.exports

* 导入自定义模块时，require 参数是模块的路径。例如：const getDir = require(‘./getDir’)

 路径中后缀名 .js 可以省略

 相对路径"./xxx"，不能省略 “./”，表示当前路径下的 xxx 文件

 绝对路径"/xxx"，表示当前磁盘根目录下的 xxx 文件，其中"/" 表示当前磁盘根目录

* 导入具名的核心模块，require 参数直接写模块名即可。例如：const http = require(‘http’)

* 导入第三方包时，require 参数就是下载第三方包时的包名。例如：const express = require(‘express’)

* require 优先从缓存中加载模块，从缓存中加载时不会执行模块中的代码

## 模块的初始化
一个模块中的JS代码仅在模块第一次被使用时执行一次，并且在使用的过程中进行初始化，之后缓存起来便于后续继续使用。

## 模块加载机制
内置模块的加载优先级最高，例如 require(‘http’) 始终会返回内置的 fs 模块，即使在 node_modules 目录下有相同的包名叫 fs。

内置模块或者第三方模块，直接require 模块名即可。对于自定义模块，必须指定以 ./ 或 …/ 开头的路径标识符。

同时，在使用 require 导入自定义模块时，可以省略文件的扩展名。此时，Node.js 会按以下顺序分别尝试加载文件：

* 按照确切的文件名进行加载
* 补全 .js 扩展名进行加载
* 补全 .json 扩展名进行加载
* 补全 .node 扩展名进行加载
* 如果以上都没有加载成功，则终端报错

# Koa框架

> 洋葱模型中间件机制

1. 异步编程风格

Koa框架使用异步编程风格，通过使用Promise或async/await等机制来处理异步操作。相比传统的回调方式，异步编程使得代码更加清晰、易于维护，并且能够避免回调地狱的问题。

2. 简洁、灵活的中间件机制

Koa的核心思想是中间件，它允许开发者通过编写各种中间件来处理请求和响应。每个中间件可以单独执行特定的任务，也可以将控制权传递给下一个中间件。这种中间件的处理流程类似于洋葱模型，非常灵活。

3. 生成器函数的利用

Koa使用ES6中的生成器函数（Generator Function）来实现中间件的处理流程。生成器函数可以通过yield关键字暂停和恢复执行，这样就可以方便地实现中间件的串联和控制流程。生成器函数的特性使得编写和理解中间件变得更加简单和直观。

4. 上下文对象的封装

在Koa中，每个请求都会创建一个上下文对象（Context），它封装了请求和响应的相关信息，并提供了一些方便的方法来操作和获取请求和响应的内容。上下文对象还可以在中间件之间传递数据和状态，使得开发者能够更好地组织和管理代码。

# Egg框架

* 基于Koa的封装、‌整合了数据库、‌路由等中间件
* 通过插件机制扩展功能

2024年刷波前端面试题记录(二)

1. 变量声明 let/const
2. 箭头函数
3. 模板字符串 

```
`后续添加${}`
```
4. 解构赋值

 * 数组的解构
 * 对象的解构

5. 扩展运算符
 * 展开数组或对象 (1, ...[2, 3, 4], 5) 或 { ...obj1 }
 * 数组拷贝 [...]
 * 合并数组或对象
 * 函数参数传递 
 * 与解构赋值结合
 * 字符串转字符数组
 * 数组去重（结合 Set）
```js
 // 函数参数传递 
 function sum(x, y, z) {
 return x + y + z;
 }
 const numbers = [1, 2, 3];
 console.log(sum(...numbers)); // 输出：6
 
 // 字符串转数组
 const title = "china";
 const charts = [...title];
 console.log(charts); // 输出：['c', 'h', 'i', 'n', 'a']
 
 // 数组去重（结合 Set）
 const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
 const newNumbers = [...new Set(arrayNumbers)];
 console.log(newNumbers); // 输出：[1, 5, 9, 3, 7, 10, 4, 2]
```
6. 剩余参数
> ES6 中的剩余参数语法允许将不定数量的参数表示为一个数组。 
> 其语法形式为：在函数的最后一个命名参数前加上三个点（...），后面跟着参数名，例如：function(a, b,...theArgs){ // 函数体 } ，在这个例子中，theArgs 将收集该函数的第三个参数及以后的所有剩余参数。
7. 类 ES6 引入了类（class）的概念，使面向对象编程在 JavaScript 中更加清晰和直观。
8. 模块化
> ES6 引入了模块化的概念，这使得 JavaScript 代码的组织和管理更加清晰和高效。 
> 一个模块就是一个独立的 JavaScript 文件。模块内的变量、函数、类等默认是私有的，只有通过 export 关键字导出的部分才能被其他模块使用。
9. promise
> 这个函数又接收两个参数 resolve 和 reject，分别对映成功回调和失败回调 
> Promise 内部有 3 种状态 pending（进行时），fulfilled（已成功），rejected（已失败）。且这三种状态是不可逆的 
> 为了更好的控制下一步执行，又诞生了三个实例方法 then(支持链式调用)、catch、finally(无论成功还是失败都需要执行一些操作)。 
> 为了满足更多的业务需要，又诞生了 6 个原型方法 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.reject()、Promise.resolve()。且都会返回一个确定状态的 Promsie 对象。 
> > Promise.all() 通过数组的形式传入异步操作，所有的异步执行都成功，才执行成功，如果有一个失败了，就执行失败 
> > Promise.allSettled() 所有执行都有结果了就执行，无论成功还是失败 
> > Promise.any() 任意异步成功了就执行 
> > Promise.race() 任意异步成功或失败就执行。 
10. map/set
> 在 ES6 中，Map 和 Set 是两种新的数据结构，它们为数据的存储和操作提供了更强大和灵活的方式。
 * Map：Map 是键值对的集合，其中键可以是任何类型的值（包括对象），而不仅仅是字符串。
 * Set：Set 是一种不允许重复值的数据结构。
11. symbol
> 在 ES6 中，Symbol 是一种新的基本数据类型，它的主要目的是创建独一无二的值，通常用于对象的属性名，以避免属性名冲突。

12. 迭代器和生成器
> 在 ES6 中，迭代器（Iterator）和生成器（Generator）为处理数据的遍历和生成提供了更强大和灵活的方式。

* 迭代器（Iterator）

> 迭代器是一个具有 next() 方法的对象，每次调用 next() 方法都会返回一个对象，该对象包含两个属性：value （当前迭代的值）和 done （一个布尔值，表示迭代是否完成）。
```js
// 创建一个简单的迭代器
function createIterator(arr) {
 let index = 0;
 return {
 next() {
 if (index < arr.length) {
 return { value: arr[index++], done: false };
 } else {
 return { value: undefined, done: true };
 }
 },
 };
}
```
* 生成器（Generator）
> 生成器是通过 function\* 定义的函数，可以通过 yield 表达式暂停和恢复执行，并且可以逐步生成一系列的值。
```js
function* generateNumbers() {
 yield 1;
 yield 2;
 yield 3;
}
let generator = generateNumbers();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
```