前端需要知道的知识点，附有链接

本文主要是介绍前端需要知道的知识点，附有链接，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

关系型数据库和非关系型数据库的区别有哪些？

区别：关系型数据天然就是表格式的，因此存储在数据表的行和列中；数据表可以彼此关联协作存储，也很容易提取数据。而非关系型数据不适合存储在数据表的行和列中，而是大块组合在一起；非关系型数据通常存储在数据集中，就像文档、键值对或者图结构。

关系型数据库最典型的数据结构是表，由二维表及其之间的联系所组成的一个数据组织

优点：
1、易于维护：都是使用表结构，格式一致；
2、使用方便：SQL语言通用，可用于复杂查询；
3、复杂操作：支持SQL，可用于一个表以及多个表之间非常复杂的查询。
缺点：
1、读写性能比较差，尤其是海量数据的高效率读写；
2、固定的表结构，灵活度稍欠；
3、高并发读写需求，传统关系型数据库来说，硬盘I/O是一个很大的瓶颈。

非关系型数据库严格上不是一种数据库，应该是一种数据结构化存储方法的集合，可以是文档或者键值对等。

优点：

1、格式灵活：存储数据的格式可以是key,value形式、文档形式、图片形式等等，文档形式、图片形式等等，使用灵活，应用场景广泛，而关系型数据库则只支持基础类型。
2、速度快：nosql可以使用硬盘或者随机存储器作为载体，而关系型数据库只能使用硬盘；
3、高扩展性；
4、成本低：nosql数据库部署简单，基本都是开源软件。

缺点：

1、不提供sql支持，学习和使用成本较高；
2、无事务处理；
3、数据结构相对复杂，复杂查询方面稍欠。

shadow-root

https://www.cnblogs.com/yf2196717/p/14732459.html

微前端系列 - js隔离、样式隔离、元素隔离问题

https://juejin.cn/post/7134178779349385247

webComponent,shadowDom,js沙箱隔离,iframe简介

https://blog.csdn.net/zhangsuren1/article/details/135462566

总之，shadow-root是Chrome浏览器中的一种新的DOM节点，它可以被用来创建一个独立的DOM树，这个独立的DOM树可以被用来构建一个独立的组件，而不会影响到其他的DOM节点。它可以被用来控制组件的样式、行为、交互和数据，从而使组件可以更加灵活和可扩展。
总结：iframe隔离是独立的文档环境，shadowDom是封装在shadowRoot内部，scoped是加了一层变量作用域，而qiankun则是通过shadowDom配合像那种proxy去代理window对象来达到让沙盒内部代码优先原则，同时在子组件里配置的bootStrap,mount,unmount钩子函数，来恢复快照的方式去实现样式隔离的，状态快照会在bootStrap阶段去保存，一份是原来的一份是内部改变之后的，当再次进入沙盒或者退出沙盒都可以减少性能消耗了，非常的方便。

微前端wujie、qiankun、micro-app、EMP 方案比较

无界微前端采用 webcomponent + iframe 的来加载子应用，具有成本低、速度快、原生隔离、功能强大等一系列优点，在满足用户核心诉求的同时让使用微前端的体验就像使用普通组件一样简单，极大的降低了使用门槛。
micro-app 是基于 webcomponent + qiankun sandbox 的微前端方案。
qiankun 方案是基于 single-spa 的微前端方案。
https://blog.csdn.net/weixin_43832782/article/details/128929191

react跟vue的diff算法有什么区别

https://www.php.cn/faq/491018.html

react跟vue的区别（纯是作者想的哈）

本人使用下来觉的，在使用层面其实以及大差不差了，要说原理上，底层还是有点小小的区别的（我这里就不多描述了，react原理理解不透彻）。
vue2, html script data method style （视图，逻辑，数据，方法，样式，声明周期等）都是分开的，逻辑不集中；但其实如果组件逻辑重了的话都会拆组件的，每个组件不会超过300行代码。其实写代码规范一下的话都好说
vue3，增加了hook的写法，就是数据和逻辑声明周期都可以一起写了（直接声明直接用，而不是像vue2中在return内的data内写），集中了一下。现在就是 html 逻辑样式，三大块（但是哈 html内要是直接想使用script内的数据，还是还是要return出来才可以使用）
vue3.2 setup 增加了语法糖，已经不需要写return。使用下来的感觉就是 script声明的变量在html可以直接用；像不像是在一个作用域中，没有那种割裂的感觉了，是不是感觉除了有html和script标签的（有标签看起来还节俭一些）其他的都像在一起写的感觉。目前就是两大块（逻辑，样式）

react 用的jsx的语法，一种都是（逻辑，样式）两大块，其中html内的循环啊，判断啊都是通过js来直接写的map，if等，vue是通过指令来写的（这方面比较好）；样式其实也可在script内写，但是没必要，因为style 样式有点多哈，还多了一些多余的代码，完全没有style好用

vite和vuecli区别

Vite和Vue CLI的主要区别在于它们的实现原理、开发环境启动速度、构建速度、依赖关系分析、插件系统和配置灵活性。以下是详细介绍：12

实现原理。Vite是一个基于ESModule的构建工具，利用原生ESModule的特性，将每个文件作为一个模块，通过浏览器去解析和执行，无需提前打包。Vue CLI是一个基于Webpack的工具，使用Webpack对代码进行打包，并提供静态资源服务。
开发环境启动速度。Vite利用浏览器的原生ESModule支持，实现快速的冷启动和热模块替换(HMR)，开发环境启动速度较快。Vue CLI在开发环境下基于对源码文件进行打包，启动速度相对较慢。
构建速度。Vite的构建速度通常较快，因为它避免了传统的打包过程。Vue CLI的构建速度较慢，因为它需要使用Webpack对代码进行打包。
依赖关系分析。Vite可以更细粒度地分析依赖关系，实现按需加载，减小构建体积。Vue CLI通过Webpack的解析器分析依赖关系。
插件系统。Vite使用了Rollup作为其构建引擎，与Vue CLI使用的Webpack不同，导致在插件系统上有所差异。Vue CLI的插件系统更加丰富和成熟。
配置灵活性。Vite的配置相对简单，适用于快速原型开发和小型项目。Vue CLI支持通过配置文件进行灵活的定制，适用于中大型的Vue.js应用程序。