\n1\n```\n\n#### 1.1.4 条件渲染和列表渲染\n\n* v-if条件渲染一组数\n* 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。\n\n#### 1.1.5 事件处理器\n\n* 通过v-on给元素注册事件\n* 使用 v-on 有几个好处： \n\n * 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。\n * 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。\n * 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。\n\n#### 1.1.6 表单控件\n\n* v-model在表单控件元素上创建双向数据绑定\n* 它会根据控件类型自动选取正确的方法来更新元素。\n\n#### 1.1.7 计算属性\n\n* 在Vue中引入了计算属性来处理模板中放入太多的逻辑会让模板过重且难以维护的问题，这样不但解决了上面的问题，而且也同时让模板和业务逻辑更好的分离。\n* 简单来说，假如data里面有属性a=1，然后你需要一个变量跟着a变化，例如b=a+1，那么就需要用到计算属性，Vue实例的computed属性中，设置b为其属性，其表现为一个函数，返回值是b的值。\n\n\n#### 注：关于vue的数据双向绑定和单向数据流\n\n* **Vue 的依赖追踪是【原理上不支持双向绑定，v-model 只是通过监听 DOM 事件实现的语法糖】**\n\n* vue的依赖追踪是通过 Object.defineProperty 把data对象的属性全部转为 getter/setter来实现的；当改变数据的某个属性值时，会触发set函数,获取该属性值的时候会触发get函数，通过这个特性来实现改变数据时改变视图；也就是说只有当数据改变时才会触发视图的改变，反过来在操作视图时，只能通过DOM事件来改变数据，再由此来改变视图，以此来实现双向绑定\n* 双向绑定是在同一个组件内，将数据和视图绑定起来，和父子组件之间的通信并无什么关联；\n* 组件之间的通信采用单向数据流是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告\n\n### 1.2 react没有数据双向绑定\n\n* react是单向数据流\n* react中通过将state（Model层）与View层数据进行双向绑定达数据的实时更新变化，具体来说就是在View层直接写JS代码Model层中的数据拿过来渲染，一旦像**表单操作、触发事件、ajax请求**等触发数据变化，则进行双同步\n\n#### 1.2.1事件处理\n\n* React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:\n\n * React事件绑定属性的命名采用驼峰式写法，而不是小写。\n * 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)\n * 在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。\n\n * 当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。一般需要显式的绑定this，例如\n\n\n `this.handleClick = this.handleClick.bind(this);`\n * 你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。\n\n#### 1.2.2 条件渲染\n\n* React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。\n* 你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。之所以能这样做，是因为在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。\n* 条件渲染的另一种方法是使用 JavaScript 的条件运算符 condition ? true : false。\n\n#### 1.2.3 列表渲染\n\n* 你可以通过使用{}在JSX内构建一个元素集合，使用Javascript中的map()方法循遍历数组\n* Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key。\n\n#### 1.2.4 表单操作\n\n* HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。\n* 当用户提交表单时，HTML的默认行为会使这个表单会跳转到一个新页面。在React中亦是如此。但大多数情况下，我们都会构造一个处理提交表单并可访问用户输入表单数据的函数。实现这一点的标准方法是使用一种称为“受控组件”的技术。其值由React控制的输入表单元素称为“受控组件”。`this.setState({value: event.target.value});`\n* 当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。\n\n#### 1.2.5 状态提升\n\n* 在React中，状态分享是通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升。`this.props.xxx`\n* 在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持自上而下的数据流，而不是尝试在不同组件中同步状态。\n\n## 2.组件化以及组件数据流\n\n### 2.1 react中的组件及数据流\n\n* React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。\n* react中实现组件有两种实现方式，一种是createClass方法，另一种是通过ES2015的思想类继承React.Component来实现\n* 在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。\n* React推崇的是**函数式编程**和**单向数据流**：给定原始界面（或数据），施加一个变化，就能推导出另外一个状态（界面或者数据的更新）\n* 组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。 \n**1. Props的只读性**\n* 无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。\n* 所有的React组件必须像纯函数那样使用它们的props。\n\n**props与State的区别** \n. props是property的缩写，可以理解为HTML标签的attribute。不可以使用this.props直接修改props，因为props是只读的，props是用于整个组件树中传递数据和配置。在当前组件访问props，使用this.props。 \n. props是一个组件的设置参数，可以在父控件中选择性设置。父组件对子控件的props进行赋值，并且props的值不可改变。一个子控件自身不能改变自己的 props。 \n. state:当一个组件 mounts的时候，state如果设置有默认值的会被使用，并且state可能时刻的被改变。一个子控件自身可以管理自己的state，但是需要注意的是，无法管理其子控件的state。所以可以认为，state是子控件自身私有的。 \n. 每个组件都有属于自己的state，state和props的区别在于前者(state)只存在于组件内部，只能从当前组件调用this.setState修改state值（不可以直接修改this.state！）。 \n. props是一个父组件传递给子组件的数据流，可以一直的被传递到子孙组件中。然而 state代表的是子组件自身的内部状态。从语义上讲，改变组件的状态，可能会导致dom结构的改变或者重新渲染。而props是父组件传递的参数，所以可以被用于初始化渲染和改变组件自身的状态，虽然大多数时候组件的状态是又外部事件触发改变的。我们需要知道的是，无论是state改变，还是父组件传递的 props改变，render方法都可能会被执行。 \n. 一般我们更新子组件都是通过改变state值，更新新子组件的props值从而达到更新。\n\n#### 2.1.1 组件之间的通信\n\n1. 父子组件数通信 \n\n * 父与子之间通props属性进行传递\n * 子与父之间，父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信\n\n即： \n. . 父组件更新组件状态 —–props—–> 子组件更新 \n. . 子组件更新父组件状态 —–需要父组件传递回调函数—–> 子组件调用触发\n\n1. 非父子组件之间的通信，嵌套不深的非父子组件可以使共同父组件，触发事件函数传形参的方式来实现 \n 兄弟组件：\n\n（1）按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。 \n. 其实这种实现方式与子组件更新父组件状态的方式是大同小异的。\n\n（2）当组件层次很深的时候，在这里，React官方给我们提供了一种上下文方式，可以让子组件直接访问祖先的数据或函数，无需从祖先组件一层层地传递数据到子组件中。\n\n#### 2.1.2 组件的生命周期\n\n```javascript\nconstrutor() //创建组件\ncomponentWillMount() //组件挂载之前\ncomponentDidMount() // 组件挂载之后\ncomponentWillReceiveProps() // 父组件发生render的时候子组件调用该函数\nshouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true\ncomponentDidUpdate() // 更新\nrender() //渲染，react中的核心函数\ncomponentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除\n\n123456789\n```\n\n![组件的生命周期](http://upload-images.jianshu.io/upload_images/3333422-04ea055c73c50c98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n### 2.2 vue中的组件和数据流\n\n#### 2.2.1 组件化应用构建\n\n* 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。\n* 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例\n* 在一个大型应用中，有必要将整个应用程序划分为组件，以使开发可管理。\n* 组件(component)是 Vue 最强大的功能之一。组件可以帮助你扩展基本的 HTML 元素，以封装可重用代码。在较高层面上，组件是 Vue 编译器附加行为后的自定义元素。在某些情况下，组件也可以是原生 HTML 元素的形式，以特定的 is 特性扩展。\n* 组件中，data必须是一个函数\n* 组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。\n\n#### 2.2.2 响应式\n\n* 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。\n* 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。\n\n#### 2.2.3 组件的生命周期\n\n* 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。\n* 比如 created 钩子可以用来在一个实例被创建之后执行代码，也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。\n* 生命周期图示： \n![vue生命周期](https://cn.vuejs.org/images/lifecycle.png)\n\n#### 2.2.4 组件之间的通信\n\n* Vue默认的是单向数据流，这是Vue直接提出来说明的，父组件默认可以向子组件传递数据，但是子组件向父组件传递数据就需要额外设置了。\n* Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。\n* 父子组件之间的数据通信是通过Prop和自定义事件实现的，而非父子组件可以使用订阅/发布模式实现（类似于Angualr中的非父子指令之间的通信），再复杂一点也是建议使用状态管理（vuex）。\n* 在 Vue 中，父子组件之间的关系可以概述为：props 向下，events 向上。父组件通过 props 向下传递数据给子组件，子组件通过 events 发送消息给父组件。\n\n**1.父向子** \n. 每个组件实例都有自己的孤立隔离作用域。也就是说，不能（也不应该）直接在子组件模板中引用父组件数据。要想在子组件模板中引用父组件数据，可以使用 props 将数据向下传递到子组件。 \n. 每个 prop 属性,都可以控制是否从父组件的自定义属性中接收数据。子组件需要使用 props 选项显式声明 props，以便它可以从父组件接收到期望的数据。 \n. **动态Props**，类似于将一个普通属性绑定到一个表达式，我们还可以使用 v-bind 将 props 属性动态地绑定到父组件中的数据。无论父组件何时更新数据，都可以将数据向下流入到子组件中\n\n**2.子向父** \n. 使用自定义事件 \n. 每个 Vue 实例都接入了一个事件接口(events interface)，也就是说，这些 Vue 实例可以做到： \n. 使用 on(eventName)监听一个事件−使用\" role=\"presentation\" style=\"position: relative;\">on(eventName)监听一个事件−使用

o n (e v e n t N a m e) 监 听 一 个 事 件 - 使 用

emit(eventName) 触发一个事件\n\n**3. 非父子组件通信** \n. 可以使用一个空的 Vue 实例作为一个事件总线中心(central event bus)，用emit触发事件，\" role=\"presentation\" style=\"position: relative;\">emit触发事件，

e m i t 触 发 事 件 ，

on监听事件\n\n#### 2.2.5 单向数据流\n\n单向数据流示意图： \n![单向数据流](https://vuex.vuejs.org/zh-cn/images/flow.png)\n\n## 3.状态管理\n\n### ~~3.1 react中的状态管理：Flux~~\n\n* Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些简单绑定和 Vue 一起使用。 \n\n 1. 创建actions \n\n * 定义动作，事件触发需要用dispatcher来调用\n * 行为，如增加操作、删除操作、更新操作，就是一堆函数。\n 2. 创建store \n\n * store中包含应用的状态和逻辑，用来管理应用中不同的状态和逻辑，相当于Model层\n 3. 创建dispatcher \n\n * 在dispatcher中通过register来给每个action注对应的的store中的方法\n 4. 在view层调用action中的方法 \n\n * 就是各类component\n\n![flux的示意图](https://img-blog.csdn.net/20150625201409735?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VueHVhbnNvZnQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)\n\n### 3.2 vue中的状态管理vuex\n\n* vuex借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和改善过的开发体验。\n\n* 组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。\n\n* 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态\n\n* Vuex 和单纯的全局对象有以下两点不同：\n\n 1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。\n\n 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。\n\n 3. State\n* Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。这也意味着，每个应用将仅仅包含一个 store 实例。 \n\n 1. Getters\n\n* 从state中获取状态值，有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。\n\n 1. Mutation \n\n * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。\n * 你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法\n\n 2. Action\n\n * Action 类似于 mutation，不同在于：\n\n * Action 提交的是 mutation，而不是直接变更状态。\n * Action 可以包含任意异步操作。\n * dispatch分发action\n\n 3. Module\n* 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。\n* Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割\n\n![vuex示意图](https://raw.githubusercontent.com/vuejs/vuex/dev/docs/en/images/vuex.png)\n\n## 4.路由\n\n* 两者的路由很相似，都是利用了组件化思想\n\n### 4.1 react中的路由\n\n* 在路由库的问题上，React 选择把问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。\n* react中，需要引入react-router库， \n 使用时，路由器Router就是React的一个组件。\n* Router组件本身只是一个容器，真正的路由要通过Route组件定义。\n* Route组件定义了URL路径与组件的对应关系。你可以同时使用多个Route组件。\n\n```javascript\n\n \n \n \n\n12345\n```\n\n### 4.2 vue中的路由\n\n* Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。\n\n* 使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，**将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。**\n\n 1. HTML中：\n\n```javascript\n

Hello App!

\n \n \n \n Go to Foo\n Go to Bar\n

\n \n \n \n

\n12345678910111213\n```\n\n## 5. 渲染性能对比\n\n* 在操作界面时，要尽量减少对DOM的操作，Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。\n* 尽量减少除DOM操作以外的其他操作。（vue和react的不同）\n\n### 5.1 react视图渲染\n\n* React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。\n\n* Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。\n\n* 在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。\n\n* 元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。\n* 我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。我们将元素传入一个名为 ReactDOM.render() 的方法来将其渲染到页面上，页面上就会显示该元素。\n\n**组件渲染** \n. 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。\n\n### 5.2 vue视图渲染\n\n* Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。\n\n* vue渲染的过程如下：\n\n * new Vue，执行初始化\n * 挂载$mount方法，通过自定义Render方法、template、el等生成Render函数\n * 通过Watcher监听数据的变化\n * 当数据发生变化时，Render函数执行生成VNode对象\n * 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素\n\n## 6. 数据更新\n\n### 6.1 react数据更新\n\n* React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。\n* 根据我们现阶段了解的有关 React 知识，更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法\n\n### 6.2 vue数据更新\n\n## 7. 开发模式及规模\n\n### 7.1 react\n\n#### 7.1.1 开发模式\n\n* React本身，是严格的view层，MVC模式\n\n#### 7.1.2 规模\n\n* Vue 提供了Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。\n\n### 7.2 vue\n\n#### 7.2.1 开发模式\n\n* Vue是MVVM模式的一种方式实现\n* 虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。\n\n#### 7.2.2 脚手架\n\n* React 提供了create-react-app，但是现在还存在一些局限性： \n\n * 它不允许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制。\n * 它只提供一个构建单页面应用的单一模板，而 Vue 提供了各种用途的模板。\n * 它不能用用户自建的模板构建项目，而自建模板对企业环境下预先建立协议是特别有用的。\n\n## 8. HTML&&CSS\n\n* 在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。\n\nVue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。\n\n### 8.1 react\n\n#### 8.1.1 JSX\n\n* 在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。\n\n* JSX, 一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。\n\n* JSX 用来声明 React 当中的元素。\n* JSX本身也是一种表达式，在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以\n* JSX 说是手写的渲染函数有下面这些优势： \n\n * 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。\n * 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。\n\n#### 8.1.2 组件作用域内的CSS\n\n* 除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。\n\n### 8.2 vue\n\n#### 8.2.1 Templates模板语法\n\n* 事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势： \n\n * 对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。\n * 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。\n * 这也使得设计师和新人开发者更容易理解和参与到项目中。\n * 你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。\n* Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。\n* 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。\n\n#### 8.2.2 单文件组件CSS\n\n* Vue 设置样式的默认方法是单文件组件里类似 style 的标签。 \n 单文件组件让你可以在**同一个文件里完全控制 CSS**，将其作为组件代码的一部分。\n* Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在\n\n### 8.3 小结\n\n* 更抽象一点来看，我们可以把组件区分为两类：一类是**偏视图表现**的 (presentational)，一类则是**偏逻辑**的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。\n\n## 9. 使用场景\n\n### 9.1 选择react\n\n#### 9.1.1 期待构建一个大型应用程序——选择React\n\n* 同时用Vue和React实现的简单应用程序，可能会让一个开发者潜意识中更加倾向于Vue。这是因为基于模板的应用程序第一眼看上去更加好理解，而且能很快跑起来。但是这些好处引入的技术债会阻碍应用扩展到更大的规模。模板容易出现很难注意到的运行时错误，同时也很难去测试，重构和分解。 \n 相比之下，Javascript模板可以组织成具有很好的分解性和干（DRY）代码的组件，干代码的可重用性和可测试性更好。Vue也有组件系统和渲染函数，但是React的渲染系统可配置性更强，还有诸如浅（shallow）渲染的特性，和React的测试工具结合起来使用，使代码的可测试性和可维护性更好。 \n 与此同时，React的immutable应用状态可能写起来不够简洁，但它在大型应用中意义非凡，因为透明度和可测试性在大型项目中变得至关重要。\n\n#### 9.1.2 期待同时适用于Web端和原生APP的框架——选择React\n\n* React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。它与React.js相同，只是不使用Web组件，而是使用原生组件。如果你学过React.js，很快就能上手React Native，反之亦然。 \n 它的意义在于，开发者只需要一套知识和工具就能开发Web应用和移动端原生应用。如果你想同时做Web端开发和移动端开发，React为你准备了一份大礼。 \n 阿里的Weex也是一个跨平台UI项目，目前它以Vue为灵感，使用了许多相同的语法，同时计划在未来完全集成Vue，然而集成的时间和细节还不清楚。因为Vue将HTML模板作为它设计的核心部分，并且现有特性不支持自定义渲染，因此很难看出目前的Vue.js的跨平台能力能像React和React Native一样强大。\n\n#### 9.1.3 期待最大的生态系统——选择React\n\n* 毫无疑问，React是目前最受欢迎的前端框架。它在NPM上每个月的下载量超过了250万次，相比之下，Vue是22.5万次。人气不仅仅是一个肤浅的数字，这意味着更多的文章，教程和更多Stack Overflow的解答，还意味有着更多的工具和插件可以在项目中使用，让开发者不再孤立无援。 \n 这两个框架都是开源的，但是React诞生于Facebook，有Facebook背书，它的开发者和Facebook都承诺会持续维护React。相比之下，Vue是独立开发者尤雨溪的作品。尤雨溪目前在全职维护Vue，也有一些公司资助Vue，但是规模和Facebook和Google没得比。不过请对Vue的团队放心，它的小规模和独立性并没有成为劣势，Vue有着固定的发布周期，甚至更令人称道的是，Github上Vue只有54个open issue，3456个closed issue，作为对比，React有多达530个open issue，3447个closed issue。\n\n### 9.2 选择vue\n\n#### 9.2.1 期待模板搭建应用——选择 Vue\n\n* Vue应用的默认选项是把markup放在HTML文件中。数据绑定表达式采用的是和Angular相似的mustache语法，而指令（特殊的HTML属性）用来向模板添加功能。 \n 相比之下，React应用不使用模板，它要求开发者借助JSX在JavaScript中创建DOM。\n* 对于来自标准Web开发方式的新开发者，模板更容易理解。但是一些资深开发者也喜欢模板，因为模板可以更好的把布局和功能分割开来，还可以使用Pug之类的模板引擎。 \n 但是使用模板的代价是不得不学习所有的HTML扩展语法，而渲染函数只需要会标准的HTML和JavaScript。而且比起模板，渲染函数更加容易调试和测试。当然你不应该因为这方面的原因错过Vue，因为在Vue2.0中提供了使用模板或者渲染函数的选项。\n\n#### 9.2.2 期待简单和“能用就行”的东西——选择 Vue\n\n* 一个简单的Vue项目可以不需要转译直接运行在浏览器中，所以使用Vue可以像使用jQuery一样简单。当然这对于React来说在技术上也是可行的，但是典型的React代码是重度依赖于JSX和诸如class之类的ES6特性的。 \n Vue的简单在程序设计的时候体现更深，让我们来比较一下两个框架是怎样处理应用数据的（也就是state）。\n* React中是通过比较当前state和前一个state来决定何时在DOM中进行重渲染以及渲染的内容，因此需要不可变（immutable）的state。 \n Vue中的数据是可变（mutated）的，所以同样的操作看起来更加简洁。 \n 让我们来看看Vue中是如何进行状态管理的。当向state添加一个新对象的时候，Vue将遍历其中的所有属性并且转换为getter，setter方法，现在Vue的响应系统开始保持对state的跟踪了，当state中的内容发生变化的时候就会自动重新渲染DOM。令人称道的是，Vue中改变state的状态的操作不仅更加简洁，而且它的重新渲染系统也比React 的更快更有效率。\n* Vue的响应系统还有有些坑的，例如：它不能检测属性的添加和删除和某些数组更改。这时候就要用到Vue API中的类似于React的set方法来解决。\n\n#### 9.2.3 期待应用尽可能的小和快——选择Vue\n\n* 当应用程序的状态改变时，React和Vue都将构建一个虚拟DOM并同步到真实DOM中。两者都有各自的方法优化这个过程。 \n Vue核心开发者提供了一个benchmark测试，可以看出Vue的渲染系统比React的更快。测试方法是10000个项目的列表渲染100次，结果如下图。从实用的观点来看，这种benchmark只和边缘情况有关，大部分应用程序中不会经常进行这种操作，所以这不应该被视为一个重要的比较点。但是，页面大小是与所有项目有关的，这方面Vue再次领先，它目前的版本压缩后只有25.6KB。React要实现同样的功能，你需要React DOM（37.4KB）和React with Addon库（11.4KB），共计44.8KB，几乎是Vue的两倍大。双倍的体积并不能带来双倍的功能。\n\n## 10. 服务器端渲染（SSR）\n\n* 客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于可以运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. react-dom( 客户端 )从无到完整地，把数据渲染为响应页面\n\n* 服务端渲染路线：1. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )\n\n### 10.1 react\n\n* React的虚拟DOM是其可被用于服务端渲染的关键。首先每个ReactComponent 在虚拟DOM中完成渲染，然后React通过虚拟DOM来更新浏览器DOM中产生变化的那一部分，虚拟DOM作为内存中的DOM表现，为React在Node.js这类非浏览器环境下的吮吸给你提供了可能，React可以从虚拟DoM中生成一个字符串。而不是跟新真正的DOM，这使得我们可以在客户端和服务端使用同一个React Component。\n\n* React 提供了两个可用于服务端渲染组件的函数：React.renderToString 和React.render-ToStaticMarkup。在设计用于服务端渲染的ReactComponent时需要有预见性，考虑以下方面。\n\n * 选取最优的渲染函数。\n * 如何支持组件的异步状态。\n * 如何将应用的初始化状态传递到客户端。\n * 哪些生命周期函数可以用于服务端的渲染。\n * 如何为应用提供同构路由支持。\n * 单例、实例以及上下文的用法。\n\n### 10.2 vue\n\n**1. 什么是服务器端渲染（SSR）？**\n\n* Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。\n\n* 服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。\n\n**2. 服务器端渲染优势** \n. 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 \n. 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。\n\n## 11. 附： react理念\n\n### 1. 把UI图划分出组件层级\n\n### 2. 用React创建一个静态版本\n\n* 传入数据模型，渲染 UI 但没有任何交互。最好把这些过程解耦，因为创建一个静态版本更多需要的是码代码，不太需要逻辑思考，而添加交互则更多需要的是逻辑思考，不是码代码。\n* 在创建静态版本的时候不要使用 state。\n* 你可以自顶向下或者自底向上构建应用。也就是，你可以从层级最高的组件开始构建(即 FilterableProductTable开始)或层级最低的组件开始构建(ProductRow)。在较为简单的例子中，通常自顶向下更容易，而在较大的项目中，自底向上会更容易并且在你构建的时候有利于编写测试。\n* React 的单向数据流(也叫作单向绑定)保证了一切是模块化并且是快速的。\n\n#### 3. 定义 UI 状态的最小(但完整)表示\n\n* 想想实例应用中的数据，让我们来看看每一条，找出哪一个是 state。每个数据只要考虑三个问题：\n\n * 它是通过 props 从父级传来的吗？如果是，他可能不是 state。\n * 它随着时间推移不变吗？如果是，它可能不是 state。\n * 你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。\n\n#### 4. 确定你的State应该位于哪里\n\n* 对你应用的每一个 state：\n\n * 确定每一个需要这个 state 来渲染的组件。\n * 找到一个公共所有者组件(一个在层级上高于所有其他需要这个 state 的组件的组件)\n * 这个公共所有者组件或另一个层级更高的组件应该拥有这个 state。\n * 如果你没有找到可以拥有这个 state 的组件，创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。\n\n#### 5. 添加反向数据流\n\n## 小结\n\n总结一下，我们发现， \n. Vue的优势包括： \n. 模板和渲染函数的弹性选择 \n. 简单的语法及项目创建 \n. 更快的渲染速度和更小的体积 \n. React的优势包括： \n. 更适用于大型应用和更好的可测试性 \n. 同时适用于Web端和原生App \n. 更大的生态圈带来的更多支持和工具 \n. 而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的： \n. 利用**虚拟DOM**实现快速渲染 \n. 轻量级 \n. 响应式和组件化 \n. 服务器端渲染 \n. 易于集成路由工具，打包工具以及状态管理工具 \n. 优秀的支持和社区\n\n文章参考来源：\n\n* [vue官方文档关于框架的对比](https://cn.vuejs.org/v2/guide/comparison.html)\n* [react中文文档](https://discountry.github.io/react/docs/hello-world.html)\n* [vue官方文档](https://cn.vuejs.org/v2/guide/installation.html)\n",{"_54":328,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/83/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/83/timeline",{"_54":331,"_56":57,"_58":332,"_60":333,"_62":334,"_64":335,"_66":336,"_68":337,"_70":338,"_72":339,"_74":340,"_107":341,"_120":121,"_122":26,"_123":-5,"_124":343,"_126":344,"_148":141,"_142":346,"_144":347,"_147":-5,"_151":152,"_153":348,"_158":-5,"_159":349,"_161":350,"_173":352,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/80","https://api.github.com/repos/pro-collection/interview-question/issues/80/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/80/comments","https://api.github.com/repos/pro-collection/interview-question/issues/80/events","https://github.com/pro-collection/interview-question/issues/80",1619940099,"I_kwDOJGDC6c5gjlMD",80,"[Redux]: 看过 Redux 源码吗，对 Redux 了解多少？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[342],{"_66":314,"_68":315,"_54":316,"_113":317,"_115":318,"_117":26,"_118":319},[],{"_54":200,"_64":201,"_58":202,"_66":203,"_68":204,"_70":205,"_72":206,"_118":207,"_136":345,"_138":209,"_140":141,"_120":121,"_142":210,"_144":211,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T09:05:32Z","2023-03-11T09:07:07Z",{"_155":141,"_156":141,"_157":141},"## 深入Redux架构\r\n\r\n目录：\r\n- [1、关于redux](#01)\r\n- [2、API](#02)\r\n- [3、中间件与异步操作](#03)\r\n- [4、异步操作的基本思路](#04)\r\n- [5、React-Redux的用法](#05)\r\n\r\n参考文章：[http://www.cnblogs.com/MuYunyun/p/6530715.html](http://www.cnblogs.com/MuYunyun/p/6530715.html)\r\n\r\n##

1、关于redux

\r\n\r\n### 1.1、什么情况需要用redux？\r\n- 用户的使用方式复杂\r\n- 不同身份的用户有不同的使用方式（比如普通用户和管理员）\r\n- 多个用户之间可以协作\r\n- 与服务器大量交互，或者使用了WebSocket\r\n- View要从多个来源获取数据\r\n\r\n简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。多交互、多数据源场景就比较适合使用Redux。\r\n\r\n### 1.2、设计思想\r\n- Web 应用是一个状态机，视图与状态是一一对应的。\r\n- 所有的状态，保存在一个对象里面。\r\n\r\n### 1.3、Redux工作流程\r\n\r\n![react04-01](https://user-images.githubusercontent.com/22188674/224475588-53d35049-5ed3-4921-bd35-847a3859b23b.png) \r\n\r\n首先，用户发出 Action。 \r\n`store.dispatch(action);` \r\n\r\n然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。 \r\n`let nextState = todoApp(previousState, action);`\r\n\r\n\r\nState 一旦有变化，Store 就会调用监听函数。 \r\n// 设置监听函数 \r\n`store.subscribe(listener);`\r\n\r\nlistener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。 \r\n```javascript\r\nfunction listerner() {\r\n let newState = store.getState();\r\n component.setState(newState); \r\n}\r\n```\r\n\r\n如果现在没理解以上流程，不要急，看完以下API就差不多能懂得Redux的核心机制了。\r\n\r\n##

2、API

\r\n\r\n### Store\r\nStore 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。\r\n\r\nRedux 提供createStore这个函数，用来生成 Store。 \r\n下面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(fn);\r\n```\r\n\r\n### State\r\nStore对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。 \r\n当前时刻的 State，可以通过store.getState()拿到。\r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(fn);\r\n\r\nconst state = store.getState();\r\n```\r\nRedux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。\r\n\r\n\r\n### Action\r\nState 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。 \r\nAction 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。 \r\n```javascript\r\nconst action = {\r\n type: 'ADD_TODO',\r\n payload: 'Learn Redux'\r\n};\r\n```\r\n上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。 \r\n可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。\r\n\r\n\r\n### Action Creator\r\nView 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。 \r\n```javascript\r\nconst ADD_TODO = '添加 TODO';\r\n\r\nfunction addTodo(text) {\r\n return {\r\n type: ADD_TODO,\r\n text\r\n }\r\n}\r\nconst action = addTodo('Learn Redux');\r\n```\r\n\r\n### store.dispatch()\r\nstore.dispatch()是 View 发出 Action 的唯一方法。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(fn);\r\n\r\nstore.dispatch({\r\n type: 'ADD_TODO',\r\n payload: 'Learn Redux'\r\n});\r\n```\r\n上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。 \r\n结合 Action Creator，这段代码可以改写如下。\r\n```javascript\r\nstore.dispatch(addTodo('Learn Redux'));\r\n```\r\n\r\n### Reducer\r\nStore 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。 \r\nReducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。下面是一个实际的例子\r\n```javascript\r\nconst defaultState = 0;\r\nconst reducer = (state = defaultState, action) => {\r\n switch (action.type) {\r\n case 'ADD':\r\n return state + action.payload;\r\n default: \r\n return state;\r\n }\r\n};\r\n\r\nconst state = reducer(1, {\r\n type: 'ADD',\r\n payload: 2\r\n});\r\n```\r\n上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。\r\n其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。 \r\n实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。\r\n为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(reducer);\r\n```\r\n上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。\r\n以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。\r\n\r\n\r\n### store.subscribe()\r\nStore 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。 \r\n```javascript\r\nimport { createStore } from 'redux';\r\nconst store = createStore(reducer);\r\n\r\nstore.subscribe(listener);\r\n```\r\n显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。 \r\nstore.subscribe方法返回一个函数，调用这个函数就可以解除监听。 \r\n```javascript\r\nlet unsubscribe = store.subscribe(() =>\r\n console.log(store.getState())\r\n);\r\nunsubscribe();\r\n```\r\n\r\n\r\n##

3、中间件与异步操作

\r\n一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。 \r\n怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。\r\n\r\n为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？ \r\n（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。 \r\n（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。 \r\n（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。 \r\n想来想去，只有发送 Action 的这个步骤，即store.dispatch()方法，可以添加功能。 \r\n\r\n### 中间件的用法\r\n本文不涉及如何编写中间件，因为常用的中间件都有现成的，只要引用别人写好的模块即可。 \r\n```javascript\r\nimport { applyMiddleware, createStore } from 'redux';\r\nimport createLogger from 'redux-logger';\r\nconst logger = createLogger();\r\n\r\nconst store = createStore(\r\n reducer,\r\n applyMiddleware(logger)\r\n);\r\n```\r\n\r\n上面代码中，redux-logger提供一个生成器createLogger，可以生成日志中间件logger。\r\n然后，将它放在applyMiddleware方法之中，传入createStore方法，就完成了store.dispatch()的功能增强。\r\n\r\n这里有两点需要注意：\r\n（1）createStore方法可以接受整个应用的初始状态作为参数，那样的话，applyMiddleware就是第三个参数了。\r\n```javascript\r\nconst store = createStore(\r\n reducer,\r\n initial_state,\r\n applyMiddleware(logger)\r\n);\r\n```\r\n\r\n（2）中间件的次序有讲究。\r\n```javascript\r\nconst store = createStore(\r\n reducer,\r\n applyMiddleware(thunk, promise, logger)\r\n);\r\n```\r\n上面代码中，applyMiddleware方法的三个参数，就是三个中间件。有的中间件有次序要求，使用前要查一下文档。比如，logger就一定要放在最后，否则输出结果会不正确。\r\n\r\n\r\n##

4、异步操作的基本思路

\r\n\r\n理解了中间件以后，就可以处理异步操作了。\r\n\r\n同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。 \r\n- 操作发起时的 Action\r\n- 操作成功时的 Action\r\n- 操作失败时的 Action\r\n\r\n以向服务器取出数据为例，三种 Action 可以有两种不同的写法。\r\n```\r\n// 写法一：名称相同，参数不同\r\n{ type: 'FETCH_POSTS' }\r\n{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }\r\n{ type: 'FETCH_POSTS', status: 'success', response: { ... } }\r\n\r\n// 写法二：名称不同\r\n{ type: 'FETCH_POSTS_REQUEST' }\r\n{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }\r\n{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }\r\n```\r\n\r\n除了 Action 种类不同，异步操作的 State 也要进行改造，反映不同的操作状态。下面是 State 的一个例子。\r\n```javascript\r\nlet state = {\r\n // ... \r\n isFetching: true,\r\n didInvalidate: true,\r\n lastUpdated: 'xxxxxxx'\r\n};\r\n```\r\n上面代码中，State 的属性isFetching表示是否在抓取数据。didInvalidate表示数据是否过时，lastUpdated表示上一次更新时间。\r\n\r\n现在，整个异步操作的思路就很清楚了。 \r\n- 操作开始时，送出一个 Action，触发 State 更新为\"正在操作\"状态，View 重新渲染\r\n- 操作结束后，再送出一个 Action，触发 State 更新为\"操作结束\"状态，View 再一次重新渲染\r\n\r\n### 总结\r\n在异步请求的时候，其实很多时候都是直接发出请求如果请求成功了之后，在存入reducers, 并不是不管成功与否，都存入reducers。 \r\n\r\n\r\n### redux-thunk中间件\r\n异步操作至少要送出两个 Action：用户触发第一个 Action，这个跟同步操作一样，没有问题；如何才能在操作结束时，系统自动送出第二个 Action 呢？\r\n奥妙就在 Action Creator 之中。\r\n```javascript\r\nclass AsyncApp extends Component {\r\n componentDidMount() {\r\n const { dispatch, selectedPost } = this.props\r\n dispatch(getApplyList(selectedPost))\r\n }\r\n}\r\n// ...\r\n```\r\n上面代码是一个异步组件的例子。加载成功后（componentDidMount方法），它送出了（dispatch方法）一个 Action，向服务器要求数据 fetchPosts(selectedSubreddit)。\r\n这里的fetchPosts就是 Action Creator。 \r\n下面就是getApplyList的代码，关键之处就在里面，这是我在公司的代码风格写法。\r\n```javascript\r\nexport function getApplyList(query) {\r\n return function(dispatch) {\r\n dispatch(modalUpdate({\r\n loadingTable: true\r\n }));\r\n fetch('apply', query)\r\n .then(function(res) {\r\n dispatch(updateApply(res.data)); // 这个是调用的action Mppper\r\n dispatch(modalUpdate({\r\n loadingTable: false\r\n }));\r\n }).catch(function(err) {\r\n dispatch(modalUpdate({\r\n pageWarn: err.message,\r\n loadingTable: false\r\n }));\r\n });\r\n };\r\n}\r\n\r\n// 对应的action Mapper\r\nexport function updateApply(data) {\r\n return {\r\n type: UPDATE_APPLY,\r\n data\r\n };\r\n}\r\n```\r\n\r\n这里是博客文章的代码风格写法\r\n```javascript\r\nconst fetchPosts = postTitle => (dispatch, getState) => {\r\n dispatch(requestPosts(postTitle));\r\n return fetch(`/some/API/${postTitle}.json`)\r\n .then(response => response.json())\r\n .then(json => dispatch(receivePosts(postTitle, json)));\r\n};\r\n\r\n// 使用方法一\r\nstore.dispatch(fetchPosts('reactjs'));\r\n// 使用方法二\r\nstore.dispatch(fetchPosts('reactjs')).then(() =>\r\n console.log(store.getState())\r\n);\r\n```\r\n上面代码中，fetchPosts是一个Action Creator（动作生成器），返回一个函数。\r\n这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。\r\n拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)）。 \r\n\r\n上面代码中，有几个地方需要注意。\r\n- （1）fetchPosts返回了一个函数，而普通的 Action Creator 默认返回一个对象。\r\n- （2）返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。\r\n- （3）在返回的函数之中，先发出一个 Action（requestPosts(postTitle)），表示操作开始。\r\n- （4）异步操作结束之后，再发出一个 Action（receivePosts(postTitle, json)），表示操作结束。\r\n\r\n这样的处理，就解决了自动发送第二个 Action 的问题。但是，又带来了一个新的问题，Action 是由store.dispatch方法发送的。\r\n而store.dispatch方法正常情况下，参数只能是对象，不能是函数。 \r\n这时，就要使用中间件**redux-thunk**。\r\n```javascript\r\nimport { createStore, applyMiddleware } from 'redux';\r\nimport thunk from 'redux-thunk';\r\nimport reducer from './reducers';\r\n\r\n// Note: this API requires redux@>=3.1.0\r\nconst store = createStore(\r\n reducer,\r\n applyMiddleware(thunk)\r\n);\r\n```\r\n上面代码使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。 \r\n因此，异步操作的第一种解决方案就是，写出一个返回函数的 Action Creator，然后使用redux-thunk中间件改造store.dispatch。\r\n\r\n\r\n##

5、React-Redux的用法

\r\n为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux，本文主要介绍它。 \r\n这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。\r\n\r\n本人项目中使用的最多的就是 react-redux; \r\n\r\nReact-Redux 将所有组件分成两大类：**UI 组件（presentational component）和容器组件（container component）**。\r\n\r\n### UI组件\r\nUI 组件有以下几个特征。 \r\n- 只负责 UI 的呈现，不带有任何业务逻辑\r\n- 没有状态（即不使用this.state这个变量）\r\n- 所有数据都由参数（this.props）提供\r\n- 不使用任何 Redux 的 API\r\n\r\n下面就是一个 UI 组件的例子。\r\n```javascript\r\nconst Title = value =>

{value}

;\r\n```\r\n因为不含有状态，UI 组件又称为\"纯组件\"，即它纯函数一样，纯粹由参数决定它的值。\r\n\r\n### 容器组件\r\n容器组件的特征恰恰相反。\r\n- 负责管理数据和业务逻辑，不负责 UI 的呈现\r\n- 带有内部状态\r\n- 使用 Redux 的 API\r\n\r\n总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。\r\n\r\n你可能会问，如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。 \r\nReact-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。\r\n\r\n### connect()\r\nReact-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。 \r\nconnect方法的完整 API 如下。下面这个例子是我在项目中使用的一个完整结构示例 \r\n```javascript\r\n/* eslint-disable react/jsx-no-target-blank */\r\nimport React, {Component} from 'react';\r\nimport {push} from 'react-router-redux';\r\nimport {connect} from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport {Button, message} from 'antd';\r\n\r\n// mapStateToProps\r\nfunction propMap(state, ownProps) {\r\n return {\r\n modal: state.modal,\r\n routing: ownProps\r\n };\r\n}\r\n\r\nclass InvoiceList extends Component {\r\n constructor() {\r\n super();\r\n this.state = {\r\n invoiceListData: {}\r\n };\r\n this.handleGetList = this.handleGetList.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n // 每次刷新空拉数据一次\r\n this.handleGetList();\r\n }\r\n\r\n render() {\r\n const {routing, modal} = this.props;\r\n return (\r\n

\r\n \r\n {/*.......*/}\r\n

\r\n );\r\n }\r\n\r\n // 点击查询数据\r\n handleGetList(filters, type) {\r\n console.log('点击查询数据')\r\n }\r\n}\r\nInvoiceList.propTypes = {\r\n routing: PropTypes.object.isRequired,\r\n modal: PropTypes.object.isRequired,\r\n dispatch: PropTypes.func.isRequired\r\n};\r\nexport default connect(propMap)(InvoiceList);\r\n```\r\nInvoiceList就是由 React-Redux 通过connect方法自动生成的容器组件。\r\nconnect方法接受两个参数：mapStateToProps和mapDispatchToProps。\r\n它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。\r\n通常我们只使用了第一个参数； \r\n\r\n### mapStateToProps \r\nmapStateToProps是一个函数。它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。\r\n作为函数，mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。 \r\n```javascript\r\nconst mapStateToProps = (state) => {\r\n return {\r\n todos: getVisibleTodos(state.todos, state.visibilityFilter)\r\n }\r\n}\r\n```\r\n上面代码中，mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，\r\n后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。 \r\n下面就是getVisibleTodos的一个例子，用来算出todos。 \r\n```javascript\r\nconst getVisibleTodos = (todos, filter) => {\r\n switch (filter) {\r\n case 'SHOW_ALL':\r\n return todos\r\n case 'SHOW_COMPLETED':\r\n return todos.filter(t => t.completed)\r\n case 'SHOW_ACTIVE':\r\n return todos.filter(t => !t.completed)\r\n default:\r\n throw new Error('Unknown filter: ' + filter)\r\n }\r\n}\r\n```\r\nmapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。 \r\nmapStateToProps的第一个参数总是state对象，还可以使用第二个参数，代表容器组件的props对象 \r\n```javascript\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n active: ownProps.filter === state.visibilityFilter\r\n }\r\n}\r\n```\r\n使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。 \r\nconnect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。 \r\n\r\n\r\n### mapDispatchToProps()\r\nmapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。\r\n也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。\r\n\r\n如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。\r\n```javascript\r\nconst mapDispatchToProps = (\r\n dispatch,\r\n ownProps\r\n) => {\r\n return {\r\n onClick: () => {\r\n dispatch({\r\n type: 'SET_VISIBILITY_FILTER',\r\n filter: ownProps.filter\r\n });\r\n }\r\n };\r\n}\r\n```\r\n从上面代码可以看到，mapDispatchToProps作为函数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。 \r\n\r\n如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，\r\n返回的 Action 会由 Redux 自动发出。举例来说，上面的mapDispatchToProps写成对象就是下面这样。 \r\n```ecmascript 6\r\nconst mapDispatchToProps = {\r\n onClick: (filter) => {\r\n type: 'SET_VISIBILITY_FILTER',\r\n filter: filter\r\n }\r\n}\r\n```\r\n\r\n总结，实际上项目开发过程中，只用得上第一个参数，第二个参数一般来说是封装在reducers 层次里面的。不建议直接放置在组建成此调用。因为会导致使用和数据上的紊乱。 \r\n\r\n\r\n### 组件\r\nconnect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。React-Redux 提供Provider组件，可以让容器组件拿到state。\r\n```javascript\r\nimport { Provider } from 'react-redux'\r\nimport { createStore } from 'redux'\r\nimport todoApp from './reducers'\r\nimport App from './components/App'\r\n\r\nlet store = createStore(todoApp);\r\n\r\nrender(\r\n \r\n \r\n ,\r\n document.getElementById('root')\r\n)\r\n```\r\n上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。\r\n\r\n### React-Router路由库\r\n使用React-Router的项目，与其他项目没有不同之处，也是使用Provider在Router外面包一层，毕竟Provider的唯一功能就是传入store对象。\r\n```javascript\r\nconst Root = ({ store }) => (\r\n \r\n \r\n \r\n \r\n \r\n);\r\n```\r\n\r\n\r\n\r\n",{"_54":351,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/80/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/80/timeline",{"_54":354,"_56":57,"_58":355,"_60":356,"_62":357,"_64":358,"_66":359,"_68":360,"_70":361,"_72":362,"_74":363,"_107":364,"_120":121,"_122":26,"_123":-5,"_124":366,"_126":367,"_148":141,"_142":369,"_144":369,"_147":-5,"_151":152,"_153":370,"_158":-5,"_159":371,"_161":372,"_173":374,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/79","https://api.github.com/repos/pro-collection/interview-question/issues/79/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/79/comments","https://api.github.com/repos/pro-collection/interview-question/issues/79/events","https://github.com/pro-collection/interview-question/issues/79",1619939590,"I_kwDOJGDC6c5gjlEG",79,"[vue]: 是如何实现 MVVM 的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[365],{"_66":314,"_68":315,"_54":316,"_113":317,"_115":318,"_117":26,"_118":319},[],{"_54":200,"_64":201,"_58":202,"_66":203,"_68":204,"_70":205,"_72":206,"_118":207,"_136":368,"_138":209,"_140":141,"_120":121,"_142":210,"_144":211,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T09:03:45Z",{"_155":141,"_156":141,"_157":141},"\n\n## 引入：使用jquery和其他框架的区别\n\n### 原生JS实现一个todo-list\n```html\n\n

\n
\n \n

\n\n\n```\n\n\n### vue实现todo-list\n```html\n\n

\n
\n \n

{{item}}

\n\n\n```\n\n### 两者之间的区别\n- 数据和视图分离(开放封闭原则：扩展开放，修改封闭)\n- 数据驱动视图\n\n\n### 对mvvm的理解\n具体的理解自己再去整理\n\nMVVM框架的三大要素： \n响应式、模板引擎、渲染\n\n\n## 响应式的实现\n修改data属性之后，立马就能监听到。 \ndata属性挂在到vm实例上面。\n\n有下面的一个问题，我们是如何监听属性的获取和属性的赋值的。\n```javascript\nlet obj = {\n name: 'yanle',\n age: 25\n};\nconsole.log(obj.name);\nobj.age = 26;\n```\n\n是通过**Object.defineProperty** 实现的, 下面的代码就可以实现一个完整的属性修改和获取的监听。\n```javascript\nlet vm = {};\nlet data = {\n name: 'yanle',\n age: 25\n};\nlet key, value;\nfor (key in data) {\n (function (key) {\n Object.defineProperty(vm, key, {\n get: function () {\n console.log('get', data[key]);\n return data[key]; // data的属性代理到vm 上 \n },\n set: function (newValue) {\n console.log('set', newValue);\n data[key] = newValue;\n }\n })\n })(key)\n}\n```\n\n## vue中的模板\n\n**模板** \n本质就是字符串； \n有逻辑： if for 等； \n跟html格式很像，但是区别很大; \n最终要转为HTML来现实； \n模板需要用JS代码来实现，因为有逻辑，只能用JS来实现；\n\n\n**render函数-with用法**：\n```javascript\nlet obj = {\n name: 'yanle',\n age: 20,\n getAddress: function () {\n alert('重庆')\n }\n};\n// 不用with 的情况\n// function fn() {\n// alert(obj.name);\n// alert(obj.age);\n// obj.getAddress();\n// }\n// fn();\n\n// 使用with的情况\nfunction fn1() {\n with (obj) {\n alert(name);\n alert(age);\n getAddress();\n }\n}\nfn1();\n```\n这种with 的使用方法就如上所述。但是尽量不要用，因为《JavaScript语言精粹》中，作者说过，这种使用方式会给代码的调试带来非常大的困难。 \n但是vue源码中的render 就是用的这个;\n\n\n**render函数**: \n $\"02-12-1\"$ \n![02-12-2](https://user-images.githubusercontent.com/22188674/224475405-34baf640-f897-4a26-9817-109e8b4c1bde.png)\n\n模板中的所有信息都包含在了render 函数中。 \n一个特别简单的示例:\n```javascript\nlet vm = new Vue({\n el: '#app',\n data: {\n price: 200\n }\n });\n\n // 一下是手写的\n function render() {\n with (this) { // 就是vm\n _c(\n 'div',\n {\n attr: {'id': 'app'}\n },\n [\n _c('p', [_v(_s(price))])\n ]\n )\n }\n }\n\n function render1() {\n return vm._c(\n 'div',\n {\n attr: {'id': 'app'}\n },\n [\n _c('p', [vm._v(vm._s(vm.price))]) // vm._v 是创建文本， _s 就是toString\n ]\n )\n }\n```\n\n如果我们用一个复杂的例子来描述这个东西。在源码中，搜索code.render, 然后在在此之前打印render 函数，就可以看看这个到底是什么东西了。\n```javascript\nvar createCompiler = createCompilerCreator(function baseCompile (\n template,\n options\n) {\n var ast = parse(template.trim(), options);\n if (options.optimize !== false) {\n optimize(ast, options);\n }\n var code = generate(ast, options);\n console.log(code.render);\n return {\n ast: ast,\n render: code.render,\n staticRenderFns: code.staticRenderFns\n }\n});\n```\n然后运行，就可以看到到底render 函数是什么东西了。就可以截取源码出来看了。 \n相对应的模板如下:\n```html\n

\n
\n \n

{{item}}

\n```\n截取的render函数如下：\n```javascript\nfunction codeRender() {\n with (this) {\n return _c('div',\n {attrs: {\"id\": \"app\"}},\n [\n _c('div', [\n _c('input', {\n directives: [{\n name: \"model\",\n rawName: \"v-model\",\n value: (title), // 渲染指定数据\n expression: \"title\"\n }],\n domProps: {\"value\": (title)}, // 渲染指定数据\n on: { // 通过input输入事件，修改title\n \"input\": function ($event) {\n if ($event.target.composing) return;\n title = $event.target.value\n }\n }\n }),\n _v(\" \"), // 文本节点\n _c('br'),\n _v(\" \"),\n _c('button', { // dom 节点\n attrs: {\"id\": \"btn-submit\"},\n on: {\"click\": add} // methods 里面的东西也都挂在this上面去了\n },\n [_v(\"submit\")])]),\n\n _v(\" \"),\n\n _c('div', [\n _c('ul',\n {attrs: {\"id\": \"ul-list\"}},\n _l((list), function (item) { // 数组节点\n return _c('li', [_v(_s(item))])\n })\n )\n ])\n ])\n }\n}\n```\n从vue2.0开始支持预编译，我们在开发环境下，写模板，编译打包之后，模板就变成了JS代码了。vue已经有工具支持这个过程。\n\n\n## vue中的渲染\nvue的渲染是直接渲染为虚拟dom ,这一块儿的内容，其实是借鉴的snabbdom, 非常相似，可以去看看snabbdom 就可以一目了然了。 \nvue中的具体渲染实现: \n![02-12-03](https://user-images.githubusercontent.com/22188674/224475434-c4e33700-d223-4472-8e96-5cc7b6c04d70.png)\n\n\n\n## 整体流程的实现\n\n第一步：解析模板形成render 函数\n- with 用法\n- 模板中的所有数据都被render 函数包含\n- 模板中data的属性，变成了JS变量\n- 模板中的v-model、v-for、v-on都变成了JS的逻辑\n- render函数返回vnode\n\n第二步：响应式开始监听数据变化\n- Object.defineProperty 的使用\n- 讲data中的属性代理到vm 上\n\n第三步：首次渲染，显示页面，而且绑定数据和依赖\n- 初次渲染，执行updateComponent, 执行vm._render();\n- 执行render函数，会访问到vm.list和vm.title等已经绑定好了的数据；\n- 会被详情是的get 方法监听到 \n 为何一定要监听get, 直接监听set 不行吗？ data中有很多的属性，有的被用到了，有的没有被用到。被用到的会走get, 不被用到的不会走get。\n 没有被get监听的属性，set的时候也不会被坚挺。为的就是减少不必要的重复渲染，节省性能。\n- 执行updateComponent的时候，会执行vdom的patch方法\n- patch 讲vnode渲染为DOM，初次渲染完成\n\n第四步： data属性变化，出发render\n- 修改属性值，会被响应式的set监听到\n- set中会执行updateComponent，重新执行vm.render()\n- 生成vnode和prevVnode, 通过patch进行对比\n- 渲染到html中 \n",{"_54":373,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/79/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/79/timeline",{"_54":376,"_56":57,"_58":377,"_60":378,"_62":379,"_64":380,"_66":381,"_68":382,"_70":383,"_72":384,"_74":385,"_107":386,"_120":121,"_122":26,"_123":-5,"_124":388,"_126":389,"_148":141,"_142":391,"_144":392,"_147":-5,"_151":152,"_153":393,"_158":-5,"_159":394,"_161":395,"_173":397,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/78","https://api.github.com/repos/pro-collection/interview-question/issues/78/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/78/comments","https://api.github.com/repos/pro-collection/interview-question/issues/78/events","https://github.com/pro-collection/interview-question/issues/78",1619937730,"I_kwDOJGDC6c5gjknC",78,"[vue]: vue2.x 虚拟 dom 是怎么实现的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[387],{"_66":314,"_68":315,"_54":316,"_113":317,"_115":318,"_117":26,"_118":319},[],{"_54":200,"_64":201,"_58":202,"_66":203,"_68":204,"_70":205,"_72":206,"_118":207,"_136":390,"_138":209,"_140":141,"_120":121,"_142":210,"_144":211,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:57:17Z","2023-03-11T09:00:32Z",{"_155":141,"_156":141,"_157":141},"## virtual-dom 实现之一: snabbdom\r\n\r\nvue2.0就是使用的snabbdom \r\n一个简单的使用实例：\r\n```javascript\r\nvar snabbdom = require('snabbdom');\r\nvar patch = snabbdom.init([ // Init patch function with chosen modules\r\n require('snabbdom/modules/class').default, // makes it easy to toggle classes\r\n require('snabbdom/modules/props').default, // for setting properties on DOM elements\r\n require('snabbdom/modules/style').default, // handles styling on elements with support for animations\r\n require('snabbdom/modules/eventlisteners').default, // attaches event listeners\r\n]);\r\nvar h = require('snabbdom/h').default; // helper function for creating vnodes\r\n\r\nvar container = document.getElementById('container');\r\n\r\nvar vnode = h('div#container.two.classes', {on: {click: someFn}}, [\r\n h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),\r\n ' and this is just normal text',\r\n h('a', {props: {href: '/foo'}}, 'I\\'ll take you places!')\r\n]);\r\n// Patch into empty DOM element – this modifies the DOM as a side effect\r\npatch(container, vnode);\r\n\r\nvar newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [\r\n h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),\r\n ' and this is still just normal text',\r\n h('a', {props: {href: '/bar'}}, 'I\\'ll take you places!')\r\n]);\r\n// Second `patch` invocation\r\npatch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state\r\n```\r\n\r\n\r\n### snabbdom 核心api\r\n- snabbdom.init:\r\n The core exposes only one single function snabbdom.init. This init takes a list of modules and returns a patch function that uses the specified set of modules.\r\n```javascript\r\nvar patch = snabbdom.init([\r\n require('snabbdom/modules/class').default,\r\n require('snabbdom/modules/style').default,\r\n]);\r\n```\r\n\r\n- patch:\r\n```javascript\r\npatch(oldVnode, newVnode);\r\n```\r\n\r\n- snabbdom/h:\r\n It is recommended that you use snabbdom/h to create vnodes. h accepts a tag/selector as a string, an optional data object and an optional string or array of children.\r\n```javascript\r\nvar h = require('snabbdom/h').default;\r\nvar vnode = h('div', {style: {color: '#000'}}, [\r\n h('h1', 'Headline'),\r\n h('p', 'A paragraph'),\r\n]);\r\n```\r\n\r\n- snabbdom/tovnode:\r\n Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, server-side generated content.\r\n```javascript\r\nvar snabbdom = require('snabbdom')\r\nvar patch = snabbdom.init([ // Init patch function with chosen modules\r\n require('snabbdom/modules/class').default, // makes it easy to toggle classes\r\n require('snabbdom/modules/props').default, // for setting properties on DOM elements\r\n require('snabbdom/modules/style').default, // handles styling on elements with support for animations\r\n require('snabbdom/modules/eventlisteners').default, // attaches event listeners\r\n]);\r\nvar h = require('snabbdom/h').default; // helper function for creating vnodes\r\nvar toVNode = require('snabbdom/tovnode').default;\r\n\r\nvar newVNode = h('div', {style: {color: '#000'}}, [\r\n h('h1', 'Headline'),\r\n h('p', 'A paragraph'),\r\n]);\r\n\r\npatch(toVNode(document.querySelector('.container')), newVNode)\r\n```\r\n\r\n### h函数和 patch 的使用\r\n例如下面的一个dom 结构：\r\n```html\r\n

item1
item2

\r\n```\r\n用h函数来表示，就如下形式：\r\n```javascript\r\nlet vnode = h('ul#list', {}, [\r\n h('li.item', {}, 'item1'),\r\n h('li.item', {}, 'item2')\r\n])\r\n```\r\n作用就是模拟的一个真实节点。\r\n\r\npatch的使用方式： \r\n第一种方式 patch('容器', vnode); // 这种使用方式是直接渲染dom \r\n第二种是用方式: patch(oldVnode, newVnode); // 这种方式会自动对比dom的差异性，然后只渲染我们需要dom;\r\n\r\n一个简单的使用实例：\r\n```html\r\n\r\n\r\n\r\n \r\n snabbdom\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### snabbdom 的使用实例\r\n```html\r\n\r\n

\r\n
\r\n\r\n\r\n\r\n```\r\n\r\n\r\n## diff算法\r\n### 概念\r\n就是找出两个文件的不同\r\n\r\ndiff 算法是非常复杂的，实现难度非常大，源码两非常大。所以需要去繁就简，明白流程，不关心细节。 \r\n在vdom中，需要找出本次dom 必须更新的节点来更新，其他的不用更新。找出这个过程就是diff算法实现的。找出前后两个虚拟dom的差异。\r\n\r\n\r\n### diff实现的过程\r\n这里以snabbdom为例子： \r\npatch(container, vnode); patch(vnode, newVnode); 这两个方法里面就使用到了diff算法。用patch方法来解析diff算法流程核心。\r\n\r\n**patch(container, vnode)** \r\n![02-11-1](https://user-images.githubusercontent.com/22188674/224475327-0b8f19b3-7a35-40ec-960b-6040852f1a7d.png)\r\n\r\n如果上面的数据，我们怎么构建真正的dom 结构：\r\n```javascript\r\nlet createElement = function(vnode) {\r\n let tag = vnode.tag;\r\n let attrs = vnode.attrs || {};\r\n let children = vnode.children || {};\r\n \r\n if(!tag) return null;\r\n \r\n // 创建元素\r\n let elem = document.createElement(tag);\r\n \r\n // 属性\r\n let attrName;\r\n for (attrName in attrs) {\r\n if(attrs.hasOwnProperty(attrName)) {\r\n elem.setAttribute(attrName, attrs[attrName])\r\n }\r\n }\r\n \r\n // 子元素\r\n children.forEach(function (childVnode) {\r\n // 给 elem 添加元素\r\n elem.appendChild(createElement(childVnode))\r\n });\r\n \r\n return elem;\r\n};\r\n```\r\n\r\n**patch(vnode, newVnode)** \r\n![02-11-2](https://user-images.githubusercontent.com/22188674/224475289-d2f8b10a-1f02-4126-9f2e-b813b0387c84.png) \r\n![02-11-3](https://user-images.githubusercontent.com/22188674/224475309-45c68933-3aa8-402a-8353-d09b506e0d46.png)\r\n\r\n伪代码实现如下\r\n```javascript\r\nlet createElement = function(vnode) {\r\n let tag = vnode.tag;\r\n let attrs = vnode.attrs || {};\r\n let children = vnode.children || {};\r\n\r\n if(!tag) return null;\r\n\r\n // 创建元素\r\n let elem = document.createElement(tag);\r\n\r\n // 属性\r\n let attrName;\r\n for (attrName in attrs) {\r\n if(attrs.hasOwnProperty(attrName)) {\r\n elem.setAttribute(attrName, attrs[attrName])\r\n }\r\n }\r\n\r\n // 子元素\r\n children.forEach(function (childVnode) {\r\n // 给 elem 添加元素\r\n elem.appendChild(createElement(childVnode))\r\n });\r\n\r\n return elem;\r\n};\r\n```\r\n\r\n### diff算法的其他内容\r\n- 节点的新增和删除\r\n- 节点重新排序\r\n- 节点属性、样式、事件绑定\r\n- 如果极致压榨性能\r\n",{"_54":396,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/78/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/78/timeline",{"_54":399,"_56":57,"_58":400,"_60":401,"_62":402,"_64":403,"_66":404,"_68":405,"_70":406,"_72":407,"_74":408,"_107":409,"_120":121,"_122":26,"_123":-5,"_124":411,"_126":412,"_148":178,"_142":414,"_144":415,"_147":-5,"_151":152,"_153":416,"_158":-5,"_159":417,"_161":418,"_173":420,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/77","https://api.github.com/repos/pro-collection/interview-question/issues/77/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/77/comments","https://api.github.com/repos/pro-collection/interview-question/issues/77/events","https://github.com/pro-collection/interview-question/issues/77",1619937003,"I_kwDOJGDC6c5gjkbr",77,"虚拟 dom 原理是啥，手写一个简单的虚拟 dom 实现？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[410],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":413,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:54:21Z","2023-10-01T13:56:09Z",{"_155":141,"_156":141,"_157":141},"\n\n## vdom 概念\n用JS模拟DOM结构。 \nDOM变化的对比，放在JS层来做。 \n提升重绘性能。\n\n比如有abc 三个dom，如果我们要删除b dom, 以前浏览器的做法是全部删除abc dom ，然后在添加b dom 。这样做的成本会非常高。\n\n## 用JS模拟 dom\n例如下面的一个dom 结构：\n```html\n

item1
item2

\n```\n\n这样的dom 结构，可以模拟为下面的JS :\n```javascript\nlet dom = {\n tag: 'ul',\n attrs: {\n id: 'list'\n },\n children: [\n {\n tag: 'li',\n attrs: {className: 'item'},\n children: ['item1']\n },\n {\n tag: 'li',\n attrs: {className: 'item'},\n children: ['item2']\n }\n ]\n}\n```\n浏览器操作dom 是花销非常大的。执行JS花销要小非常多，所以这就是为什么虚拟dom 出现的一个根本原因。\n\n## jquery实现virtual-dom\n\n### 一个需求场景\n1、数据生成表格。 2、随便修改一个信息，表格也会跟着修改。\n```html\n\n

\n
\n\n\n\n```\n实际上上面的这段代码也是不符合预期的，因为每次使用render 方法，都会全部渲染整个table, 但是并未没有只渲染我们想要的第二行。\n\n**遇到的问题**： \nDOM 操作是非常 \"昂贵\" 的， JS 运行效率高。虚拟dom 的核心就是diff算法，对比出不同的dom数据，定点渲染不同的数据。\n",{"_54":419,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/77/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/77/timeline",{"_54":422,"_56":57,"_58":423,"_60":424,"_62":425,"_64":426,"_66":427,"_68":428,"_70":429,"_72":430,"_74":431,"_107":432,"_120":121,"_122":26,"_123":-5,"_124":434,"_126":435,"_148":141,"_142":437,"_144":438,"_147":-5,"_151":152,"_153":439,"_158":-5,"_159":440,"_161":441,"_173":443,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/76","https://api.github.com/repos/pro-collection/interview-question/issues/76/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/76/comments","https://api.github.com/repos/pro-collection/interview-question/issues/76/events","https://github.com/pro-collection/interview-question/issues/76",1619935514,"I_kwDOJGDC6c5gjkEa",76,"JS 内存泄露问题该如何排查？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[433],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":200,"_64":201,"_58":202,"_66":203,"_68":204,"_70":205,"_72":206,"_118":207,"_136":436,"_138":209,"_140":141,"_120":121,"_142":210,"_144":211,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:48:14Z","2023-03-11T08:48:38Z",{"_155":141,"_156":141,"_157":141},"## 什么是内存泄露\r\n\r\n> 该问题转载自：https://github.com/zhansingsong/js-leakage-patterns\r\n\r\n> **内存泄漏**指由于疏忽或错误造成程序未能释放已经不再使用的内存。内存泄漏并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。内存泄漏通常情况下只能由获得程序源代码的程序员才能分析出来。然而，有不少人习惯于把任何不需要的内存使用的增加描述为内存泄漏，即使严格意义上来说这是不准确的。\r\n> ————[wikipedia](https://zh.wikipedia.org/wiki/%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F)\r\n\r\n**⚠️ 注：下文中标注的 CG 是 Chrome 浏览器中 Devtools 的【Collect garbage】按钮缩写，表示回收垃圾操作。**\r\n![image](https://user-images.githubusercontent.com/22188674/224474179-30705fda-6d94-41b9-9979-053914e02da5.png)\r\n\r\n## 意外的全局变量\r\n\r\nJavaScript 对未声明变量的处理方式：在全局对象上创建该变量的引用(即全局对象上的属性，不是变量，因为它能通过`delete`删除)。如果在浏览器中，全局对象就是**window**对象。\r\n\r\n如果未声明的变量缓存大量的数据，会导致这些数据只有在窗口关闭或重新刷新页面时才能被释放。这样会造成意外的内存泄漏。\r\n\r\n```js\r\nfunction foo(arg) {\r\n bar = 'this is a hidden global variable with a large of data';\r\n}\r\n```\r\n\r\n等同于：\r\n\r\n```js\r\nfunction foo(arg) {\r\n window.bar = 'this is an explicit global variable with a large of data';\r\n}\r\n```\r\n\r\n另外，通过**this**创建意外的全局变量：\r\n\r\n```js\r\nfunction foo() {\r\n this.variable = 'potential accidental global';\r\n}\r\n\r\n// 当在全局作用域中调用foo函数，此时this指向的是全局对象(window)，而不是'undefined'\r\nfoo();\r\n```\r\n\r\n### 解决方法：\r\n\r\n在 JavaScript 文件中添加`'use strict'`，开启严格模式，可以有效地避免上述问题。\r\n\r\n```js\r\nfunction foo(arg) {\r\n 'use strict'; // 在foo函数作用域内开启严格模式\r\n bar = 'this is an explicit global variable with a large of data'; // 报错：因为bar还没有被声明\r\n}\r\n```\r\n\r\n如果需要在一个函数中使用全局变量，可以像如下代码所示，在**window**上明确声明：\r\n\r\n```js\r\nfunction foo(arg) {\r\n window.bar = 'this is a explicit global variable with a large of data';\r\n}\r\n```\r\n\r\n这样不仅可读性高，而且后期维护也方便\r\n\r\n> 谈到全局变量，需要注意那些用来临时存储大量数据的全局变量，确保在处理完这些数据后将其设置为 null 或重新赋值。全局变量也常用来做 cache，一般 cache 都是为了性能优化才用到的，为了性能，最好对 cache 的大小做个上限限制。因为 cache 是不能被回收的，越高 cache 会导致越高的内存消耗。\r\n\r\n## console.log\r\n\r\n`console.log`：向 web 开发控制台打印一条消息，常用来在开发时调试分析。有时在开发时，需要打印一些对象信息，但发布时却忘记去掉`console.log`语句，这可能造成内存泄露。\r\n\r\n在传递给`console.log`的对象是不能被垃圾回收 ♻️，因为在代码运行之后需要在开发工具能查看对象信息。所以最好不要在生产环境中`console.log`任何对象。\r\n\r\n### 实例\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n Leaker\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n这里结合 Chrome 的 Devtools–>Performance 做一些分析，操作步骤如下：\r\n\r\n**:warning:注：最好在隐藏窗口中进行分析工作，避免浏览器插件影响分析结果**\r\n\r\n1. 开启【Performance】项的记录\r\n2. 执行一次 CG，创建基准参考线\r\n3. 连续单击【click】按钮三次，新建三个 Leaker 对象\r\n4. 执行一次 CG\r\n5. 停止记录\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474228-13446f61-b837-4ede-88a7-38227d8ab9c5.png)\r\n\r\n可以看出【JS Heap】线最后没有降回到基准参考线的位置，显然存在没有被回收的内存。如果将代码修改为：\r\n\r\n```js\r\n!(function() {\r\n function Leaker() {\r\n this.init();\r\n }\r\n Leaker.prototype = {\r\n init: function() {\r\n this.name = Array(100000).join('*');\r\n },\r\n\r\n destroy: function() {\r\n // do something....\r\n },\r\n };\r\n document.querySelector('input').addEventListener(\r\n 'click',\r\n function() {\r\n new Leaker();\r\n },\r\n false,\r\n );\r\n})();\r\n```\r\n\r\n去掉`console.log(\"Leaking an object %o: %o\", (new Date()), this);`语句。重复上述的操作步骤，分析结果如下：\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474259-46b22d10-0314-4664-adc1-fdef2a575c19.png)\r\n\r\n从对比分析结果可知，`console.log`打印的对象是不会被垃圾回收器回收的。因此最好不要在页面中`console.log`任何大对象，这样可能会影响页面的整体性能，特别在生产环境中。除了`console.log`外，另外还有`console.dir`、`console.error`、`console.warn`等都存在类似的问题，这些细节需要特别的关注。\r\n\r\n## closures(闭包)\r\n\r\n当一个函数 A 返回一个内联函数 B，即使函数 A 执行完，函数 B 也能访问函数 A 作用域内的变量，这就是一个闭包——————本质上闭包是将函数内部和外部连接起来的一座桥梁。\r\n\r\n```js\r\nfunction foo(message) {\r\n function closure() {\r\n console.log(message);\r\n }\r\n return closure;\r\n}\r\n\r\n// 使用\r\nvar bar = foo('hello closure!');\r\nbar(); // 返回 'hello closure!'\r\n```\r\n\r\n在函数 foo 内创建的函数 closure 对象是不能被回收掉的，因为它被全局变量 bar 引用，处于一直可访问状态。通过执行`bar()`可以打印出`hello closure!`。如果想释放掉可以将`bar = null`即可。\r\n\r\n**由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多。**\r\n\r\n### 实例\r\n\r\n```html\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n Closure\r\n\r\n\r\n\r\n

不断单击【click】按钮

\r\n \r\n \r\n\r\n\r\n\r\n```\r\n\r\n这里结合 Chrome 的 Devtools->Memory 工具进行分析，操作步骤如下：\r\n\r\n**:warning:注：最好在隐藏窗口中进行分析工作，避免浏览器插件影响分析结果**\r\n\r\n1. 选中【Record allocation timeline】选项\r\n2. 执行一次 CG\r\n3. 单击【start】按钮开始记录堆分析\r\n4. 连续单击【click】按钮十多次\r\n5. 停止记录堆分析\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474271-188cb4f6-a00d-4a29-98ab-10e02818b93d.png)\r\n\r\n上图中蓝色柱形条表示随着时间新分配的内存。选中其中某条蓝色柱形条，过滤出对应新分配的对象：\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474296-a78617eb-17e6-4964-a1e5-2f9a08650872.png)\r\n\r\n查看对象的详细信息：\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474311-fca18dc0-7ce8-410f-a573-55cbd32ee07f.png)\r\n\r\n从图可知，在返回的闭包作用链(Scopes)中携带有它所在函数的作用域，作用域中还包含一个 str 字段。而 str 字段并没有在返回 getData()中使用过。为什么会存在在作用域中，按理应该被 GC 回收掉， why:question:\r\n\r\n原因是在相同作用域内创建的多个内部函数对象是共享同一个[变量对象（variable object）](http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/)。如果创建的内部函数没有被其他对象引用，不管内部函数是否引用外部函数的变量和函数，在外部函数执行完，对应变量对象便会被销毁。反之，如果内部函数中存在有对外部函数变量或函数的访问（可以不是被引用的内部函数），并且存在某个或多个内部函数被其他对象引用，那么就会形成闭包，外部函数的变量对象就会存在于闭包函数的作用域链中。这样确保了闭包函数有权访问外部函数的所有变量和函数。了解了问题产生的原因，便可以对症下药了。对代码做如下修改：\r\n\r\n```js\r\nfunction f() {\r\n var str = Array(10000).join('#');\r\n var foo = {\r\n name: 'foo',\r\n };\r\n function unused() {\r\n var message = 'it is only a test message';\r\n // str = 'unused: ' + str; //删除该条语句\r\n }\r\n function getData() {\r\n return 'data';\r\n }\r\n return getData;\r\n}\r\n\r\nvar list = [];\r\n\r\ndocument.querySelector('#click_button').addEventListener(\r\n 'click',\r\n function() {\r\n list.push(f());\r\n },\r\n false,\r\n);\r\n```\r\n\r\ngetData()和 unused()内部函数共享 f 函数对应的变量对象，因为 unused()内部函数访问了 f 作用域内 str 变量，所以 str 字段存在于 f 变量对象中。加上 getData()内部函数被返回，被其他对象引用，形成了闭包，因此对应的 f 变量对象存在于闭包函数的作用域链中。这里只要将函数 unused 中`str = 'unused: ' + str;`语句删除便可解决问题。\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474321-74c7546e-4e2a-4d06-b32d-b25ac5f4235b.png)\r\n\r\n查看一下闭包信息：\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474341-9c7ec3b8-e3a1-40ad-9bcc-f570ca7d2bd6.png)\r\n\r\n## DOM 泄露\r\n\r\n在 JavaScript 中，DOM 操作是非常耗时的。因为 JavaScript/ECMAScript 引擎独立于渲染引擎，而 DOM 是位于渲染引擎，相互访问需要消耗一定的资源。如 Chrome 浏览器中 DOM 位于 WebCore，而 JavaScript/ECMAScript 位于 V8 中。假如将 JavaScript/ECMAScript、DOM 分别想象成两座孤岛，两岛之间通过一座收费桥连接，过桥需要交纳一定“过桥费”。JavaScript/ECMAScript 每次访问 DOM 时，都需要交纳“过桥费”。因此访问 DOM 次数越多，费用越高，页面性能就会受到很大影响。[了解更多:information_source:](http://www.phpied.com/dom-access-optimization/)\r\n\r\n![](http://www.phpied.com/wp-content/uploads/2009/12/domlandia.png)\r\n\r\n为了减少 DOM 访问次数，一般情况下，当需要多次访问同一个 DOM 方法或属性时，会将 DOM 引用缓存到一个局部变量中。但如果在执行某些删除、更新操作后，可能会忘记释放掉代码中对应的 DOM 引用，这样会造成 DOM 内存泄露。\r\n\r\n### 实例------>\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n Dom-Leakage\r\n\r\n\r\n \r\n \r\n\r\n

\r\n

\r\n \r\n\r\n\r\n```\r\n\r\n这里结合 Chrome 浏览器的 Devtools–>Performance 做一些分析，操作步骤如下：\r\n\r\n**:warning:注：最好在隐藏窗口中进行分析工作，避免浏览器插件影响分析结果**\r\n\r\n1. 开启【Performance】项的记录\r\n2. 执行一次 CG，创建基准参考线\r\n3. 连续单击【add】按钮 6 次，增加 6 个文本节点到 pre 元素中\r\n4. 单击【remove】按钮，删除刚增加 6 个文本节点和 pre 元元素\r\n5. 执行一次 CG\r\n6. 停止记录堆分析\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474368-2e72c152-76f6-4246-983a-bd4793eac45b.png)\r\n\r\n从分析结果图可知，虽然 6 次 add 操作增加 6 个 Node，但是 remove 操作并没有让 Nodes 节点数下降，即 remove 操作失败。尽管还主动执行了一次 CG 操作，Nodes 曲线也没有下降。因此可以断定内存泄露了！那问题来了，如何去查找问题的原因呢？这里可以通过 Chrome 浏览器的 Devtools–>Memory 进行诊断分析，执行如下操作步骤：\r\n\r\n**:warning:注：最好在隐藏窗口中进行分析工作，避免浏览器插件影响分析结果**\r\n\r\n1. 选中【Take heap snapshot】选项\r\n2. 连续单击【add】按钮 6 次，增加 6 个文本节点到 pre 元素中\r\n3. 单击【Take snapshot】按钮，执行一次堆快照\r\n4. 单击【remove】按钮，删除刚增加 6 个文本节点和 pre 元元素\r\n5. 单击【Take snapshot】按钮，执行一次堆快照\r\n6. 选中生成的第二个快照报告，并将视图由\"Summary\"切换到\"Comparison\"对比模式，在[class filter]过滤输入框中输入关键字：**Detached**\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474384-936ed2c1-3e5d-4e86-bb50-291b53500de0.png)\r\n\r\n从分析结果图可知，导致整个 pre 元素和 6 个文本节点无法别回收的原因是：代码中存在全局变量`wrapper`对 pre 元素的引用。知道了产生的问题原因，便可对症下药了。对代码做如下就修改：\r\n\r\n```js\r\n// 因为要多次用到pre.wrapper、div.container、input.remove、input.add节点，将其缓存到本地变量中，\r\nvar wrapper = document.querySelector('.wrapper');\r\nvar container = document.querySelector('.container');\r\nvar removeBtn = document.querySelector('.remove');\r\nvar addBtn = document.querySelector('.add');\r\nvar counter = 0;\r\nvar once = true;\r\n// 方法\r\nvar hide = function(target) {\r\n target.style.display = 'none';\r\n};\r\nvar show = function(target) {\r\n target.style.display = 'inline-block';\r\n};\r\n// 回调函数\r\nvar removeCallback = function() {\r\n removeBtn.removeEventListener('click', removeCallback, false);\r\n addBtn.removeEventListener('click', addCallback, false);\r\n hide(addBtn);\r\n hide(removeBtn);\r\n container.removeChild(wrapper);\r\n\r\n wrapper = null; //在执行删除操作时，将wrapper对pre节点的引用释放掉\r\n};\r\nvar addCallback = function() {\r\n wrapper.appendChild(\r\n document.createTextNode('\\t' + ++counter + '：a new line text\\n'),\r\n );\r\n // 显示删除操作按钮\r\n if (once) {\r\n show(removeBtn);\r\n once = false;\r\n }\r\n};\r\n// 绑定事件\r\nremoveBtn.addEventListener('click', removeCallback, false);\r\naddBtn.addEventListener('click', addCallback, false);\r\n```\r\n\r\n在执行删除操作时，将 wrapper 对 pre 节点的引用释放掉，即在删除逻辑中增加`wrapper = null;`语句。再次在 Devtools–>Performance 中重复上述操作：\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474409-f5d310a6-8d94-40e8-be75-72250cf00da2.png)\r\n\r\n### 小试牛刀\r\n\r\n再来看看网上的一个实例，代码如下：\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n Practice\r\n\r\n\r\n

\r\n

\r\n\r\n \r\n\r\n\r\n```\r\n\r\n整个过程如下图所演示：\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474442-b0ceefcf-a959-4cab-800c-df389737098b.png)\r\n\r\n有兴趣的同学可以使用 Chrome 的 Devtools 工具，验证一下分析结果，实践很重要~~~:high_brightness:\r\n\r\n## timers\r\n\r\n在 JavaScript 常用`setInterval()`来实现一些动画效果。当然也可以使用链式`setTimeout()`调用模式来实现：\r\n\r\n```js\r\nsetTimeout(function() {\r\n // do something. . . .\r\n setTimeout(arguments.callee, interval);\r\n}, interval);\r\n```\r\n\r\n如果在不需要`setInterval()`时，没有通过`clearInterval()`方法移除，那么`setInterval()`会不停地调用函数，直到调用`clearInterval()`或窗口关闭。如果链式`setTimeout()`调用模式没有给出终止逻辑，也会一直运行下去。因此再不需要重复定时器时，确保对定时器进行清除，避免占用系统资源。另外，在使用`setInterval()`和`setTimeout()`来实现动画时，无法确保定时器按照指定的时间间隔来执行动画。为了能在 JavaScript 中创建出平滑流畅的动画，浏览器为 JavaScript 动画添加了一个新 API-requestAnimationFrame()。[关于 setInterval、setTimeout 与 requestAnimationFrame 实现动画上的区别 ➹ 猛击 😊](https://github.com/zhansingsong/js-leakage-patterns/blob/master/requestAnimationFrame/requestAnimationFrame.md)\r\n\r\n### 实例\r\n\r\n如下通过`setInterval()`实现一个 clock 的小实例，不过代码存在问题的，有兴趣的同学可以先尝试找一下问题的所在~~~~~😎\r\n操作：\r\n\r\n* 单击【start】按钮开始 clock，同时 web 开发控制台会打印实时信息\r\n* 单击【stop】按钮停止 clock，同时 web 开发控制台会输出停止信息\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n setInterval\r\n\r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n```\r\n\r\n上述代码存在两个问题：\r\n\r\n1. 如果不断的单击【start】按钮，会断生成新的 clock。\r\n\r\n2. 单击【stop】按钮不能停止 clock。\r\n\r\n输出结果:\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474541-d2ad7c5a-d465-4167-b69d-c38c09930a67.png)\r\n\r\n针对暴露出的问题，对代码做如下修改：\r\n\r\n```js\r\nvar counter = 0;\r\nvar clock = {\r\n timer: null,\r\n start: function() {\r\n // 解决第一个问题\r\n if (this.timer) {\r\n clearInterval(this.timer);\r\n }\r\n this.timer = setInterval(this.step.bind(null, ++counter), 1000);\r\n },\r\n step: function(flag) {\r\n var date = new Date();\r\n var h = date.getHours();\r\n var m = date.getMinutes();\r\n var s = date.getSeconds();\r\n console.log('%d-----> %d:%d:%d', flag, h, m, s);\r\n },\r\n // 解决第二个问题\r\n destroy: function() {\r\n console.log('----> stop <----');\r\n clearInterval(this.timer);\r\n node = null;\r\n counter = void 0;\r\n },\r\n};\r\ndocument\r\n .querySelector('.start')\r\n .addEventListener('click', clock.start.bind(clock), false);\r\ndocument\r\n .querySelector('.stop')\r\n .addEventListener('click', clock.destroy.bind(clock), false);\r\n```\r\n\r\n## EventListener\r\n\r\n做移动开发时，需要对不同设备尺寸做适配。如在开发组件时，有时需要考虑处理横竖屏适配问题。一般做法，在横竖屏发生变化时，需要将组件销毁后再重新生成。而在组件中会对其进行相关事件绑定，如果在销毁组件时，没有将组件的事件解绑，在横竖屏发生变化时，就会不断地对组件进行事件绑定。这样会导致一些异常，甚至可能会导致页面崩掉。\r\n\r\n### 实例\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n callbacks\r\n\r\n\r\n

\r\n \r\n\r\n\r\n```\r\n\r\n页面是存在问题的，这里结合 Devtools–>Performance 分析一下问题所在，操作步骤如下：\r\n\r\n**:warning:注：最好在隐藏窗口中进行分析工作，避免浏览器插件影响分析结果**\r\n\r\n1. 开启 Performance 项的记录\r\n2. 执行一次 CG，创建基准参考线\r\n3. 对窗口大小进行调整\r\n4. 执行一次 CG\r\n5. 停止记录\r\n\r\n![image](https://user-images.githubusercontent.com/22188674/224474562-ee38b81c-d14c-4340-8c60-a0ffb1357029.png)\r\n\r\n如分析结果所示，在窗口大小变化时，会不断地对`container`添加代理事件。\r\n\r\n同一个元素节点注册了多个相同的 EventListener，那么重复的实例会被抛弃。这么做不会让得 EventListener 被重复调用，也不需要用 removeEventListener 手动清除多余的 EventListener，因为重复的都被自动抛弃了。而这条规则只是针对于命名函数。[对于匿名函数，浏览器会将其看做不同的 EventListener](https://triangle717.wordpress.com/2015/12/14/js-avoid-duplicate-listeners/)，所以只要将匿名的 EventListener，命名一下就可以解决问题：\r\n\r\n```js\r\nvar container = document.querySelector('.container');\r\nvar counter = 0;\r\nvar createHtml = function(n, counter) {\r\n var template = `${new Array(n).join(\r\n `

${counter}: this is a new data

`,\r\n )}`;\r\n container.innerHTML = template;\r\n};\r\n//\r\nvar clickCallback = function(event) {\r\n var target = event.target;\r\n if (target.tagName === 'INPUT') {\r\n container.removeChild(target.parentElement);\r\n }\r\n};\r\nvar resizeCallback = function(init) {\r\n createHtml(10, ++counter);\r\n // 事件委托\r\n container.addEventListener('click', clickCallback, false);\r\n};\r\nwindow.addEventListener('resize', resizeCallback, false);\r\nresizeCallback(true);\r\n```\r\n\r\n在 Devtools–>Performance 中再重复上述操作，分析结果如下：\r\n![image](https://user-images.githubusercontent.com/22188674/224474599-dd23494a-8bc5-4064-859b-32d2ffa60221.png)\r\n\r\n在开发中，开发者很少关注事件解绑，因为浏览器已经为我们处理得很好了。不过在使用第三方库时，需要特别注意，因为一般第三方库都实现了自己的事件绑定，如果在使用过程中，在需要销毁事件绑定时，没有调用所解绑方法，就可能造成事件绑定数量的不断增加。如下链接是我在项目中使用 jquery，遇见到类似问题：[jQuery 中忘记解绑注册的事件，造成内存泄露 ➹ 猛击 😊](https://github.com/zhansingsong/js-leakage-patterns/blob/master/%E5%86%85%E5%AD%98%E6%B3%84%E9%9C%B2%E4%B9%8BListeners/%E5%86%85%E5%AD%98%E6%B3%84%E9%9C%B2%E4%B9%8BListeners.md)\r\n\r\n## 总结\r\n\r\n本文主要介绍了几种常见的内存泄露。在开发过程，需要我们特别留意一下本文所涉及到的几种内存泄露问题。因为这些随时可能发生在我们日常开发中，如果我们对它们不了解是很难发现它们的存在。可能在它们将问题影响程度放大时，才会引起我们的关注。不过那时可能就晚了，因为产品可能已经上线，接着就会严重影响产品的质量和用户体验，甚至可能让我们承受大量用户流失的损失。作为开发的我们必须把好这个关，让我们开发的产品带给用户最好的体验。\r\n\r\n## 参考文章：\r\n\r\n* [An interesting kind of JavaScript memory leak](https://blog.meteor.com/an-interesting-kind-of-javascript-memory-leak-8b47d2e7f156)\r\n* [Memory Leaks in Microsoft Internet Explorer](http://isaacschlueter.com/2006/10/msie-memory-leaks/trackback/index.html)\r\n* [Memory leak when logging complex objects](https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects)\r\n",{"_54":442,"_164":178,"_165":178,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/76/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/76/timeline",{"_54":445,"_56":57,"_58":446,"_60":447,"_62":448,"_64":449,"_66":450,"_68":451,"_70":452,"_72":453,"_74":454,"_107":455,"_120":121,"_122":26,"_123":-5,"_124":457,"_126":458,"_148":141,"_142":471,"_144":472,"_147":-5,"_151":152,"_153":473,"_158":-5,"_159":474,"_161":475,"_173":477,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/75","https://api.github.com/repos/pro-collection/interview-question/issues/75/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/75/comments","https://api.github.com/repos/pro-collection/interview-question/issues/75/events","https://github.com/pro-collection/interview-question/issues/75",1619931872,"I_kwDOJGDC6c5gjjLg",75,"[vue]: 手写 vue 双向绑定？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[456],{"_66":314,"_68":315,"_54":316,"_113":317,"_115":318,"_117":26,"_118":319},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":467,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/2","https://github.com/pro-collection/interview-question/milestone/2","https://api.github.com/repos/pro-collection/interview-question/milestones/2/labels",9124545,"MI_kwDOJGDC6c4AizrB",2,"中","中级程序面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},491,"2023-03-06T15:00:15Z","2025-02-10T16:32:39Z","2023-03-11T08:32:37Z","2023-03-11T08:32:38Z",{"_155":141,"_156":141,"_157":141},"## 双向绑定核心知识点\n\n如果一个对象中有属性有方法，那么调用属性可以直接. 就可以调用，但是如果是调用方法的时候，是通过入参来决定key的值来调用的话，请用[]来表示： \n```html\n\n\n \n \n MVVM 双项绑定\n \n \n \n

Hi，MVVM

\n \n

{{name}} 's age is {{age}}

\n \n

\n \n \n\n```\n\n",{"_54":476,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/75/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/75/timeline",{"_54":479,"_56":57,"_58":480,"_60":481,"_62":482,"_64":483,"_66":484,"_68":485,"_70":486,"_72":487,"_74":488,"_107":489,"_120":121,"_122":26,"_123":-5,"_124":491,"_126":492,"_148":141,"_142":494,"_144":495,"_147":-5,"_151":152,"_153":496,"_158":-5,"_159":497,"_161":498,"_173":500,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/73","https://api.github.com/repos/pro-collection/interview-question/issues/73/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/73/comments","https://api.github.com/repos/pro-collection/interview-question/issues/73/events","https://github.com/pro-collection/interview-question/issues/73",1619930916,"I_kwDOJGDC6c5gji8k",73,"express middleware(中间件) 工作原理是什么？？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[490],{"_66":192,"_68":193,"_54":194,"_113":195,"_115":196,"_117":26,"_118":197},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":493,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:28:39Z","2023-03-19T13:33:14Z",{"_155":141,"_156":141,"_157":141},"## express middleware 工作原理是什么？\n\nExpress middleware 的工作原理是通过拦截 HTTP 请求，对请求进行处理，然后将请求传递给下一个中间件或应用程序的路由处理。在 Express 中，中间件可以是一个或多个函数，每个函数都可以对请求进行操作或响应，从而实现对请求的处理和过滤。\n\n当 Express 应用程序接收到一个 HTTP 请求时，请求将首先被传递给第一个注册的中间件函数。这个中间件函数可以对请求进行操作，例如修改请求的头信息、检查请求是否包含有效的身份验证令牌等等。当这个中间件函数完成操作后，它可以选择将请求传递给下一个中间件函数，或者直接将响应返回给客户端。\n\n如果中间件函数选择将请求传递给下一个中间件函数，它可以调用 next() 函数来将控制权传递给下一个中间件。这个过程可以一直持续到所有中间件函数都被执行完毕，最后将请求传递给应用程序的路由处理函数。\n\n通过使用中间件，开发人员可以将应用程序的功能模块化，从而实现更好的代码组织和可维护性。同时，中间件还可以实现各种功能，例如身份验证、日志记录、错误处理等等，从而为应用程序提供更丰富的功能和更好的用户体验。\n\n## 它的设计模式是啥？写一个简单的示例呢\n\nExpress middleware 的设计模式是基于责任链模式。在责任链模式中，每个对象都有机会处理请求，并将其传递给下一个对象，直到请求被完全处理为止。在 Express 中，每个中间件函数都有机会对请求进行处理，并可以选择将请求传递给下一个中间件函数或应用程序的路由处理函数。\n\n以下是一个简单的示例，演示如何使用 Express middleware 实现身份验证：\n\n```javascript\nconst express = require('express');\nconst app = express();\n\n// 定义一个中间件函数，用于验证用户身份\nfunction authenticate(req, res, next) {\n const token = req.headers.authorization;\n if (token === 'secret-token') {\n // 如果令牌有效，则将控制权传递给下一个中间件函数\n next();\n } else {\n // 否则，返回 401 错误\n res.status(401).send('Unauthorized');\n }\n}\n\n// 注册中间件函数，用于验证用户身份\napp.use(authenticate);\n\n// 定义一个路由处理函数，用于返回受保护的资源\napp.get('/protected', (req, res) => {\n res.send('Protected resource');\n});\n\n// 启动应用程序\napp.listen(3000, () => {\n console.log('Server is running on port 3000');\n});\n```\n\n在上面的示例中，我们定义了一个名为 authenticate 的中间件函数，它用于验证用户的身份。在这个函数中，我们检查请求头中是否包含有效的身份验证令牌。如果令牌有效，则将控制权传递给下一个中间件函数或路由处理函数。否则，返回 401 错误。\n\n然后，我们通过调用 app.use() 方法来注册这个中间件函数，以便在每个请求中都进行身份验证。最后，我们定义一个名为 /protected 的路由处理函数，它表示受保护的资源。只有在身份验证通过后，才能访问这个路由处理函数。\n\n通过这个简单的示例，我们可以看到如何使用 Express middleware 实现基本的身份验证功能。中间件函数充当责任链中的一个环节，通过对请求进行处理和过滤，为应用程序提供更好的安全性和用户体验。",{"_54":499,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/73/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/73/timeline",{"_54":502,"_56":57,"_58":503,"_60":504,"_62":505,"_64":506,"_66":507,"_68":508,"_70":509,"_72":510,"_74":511,"_107":512,"_120":121,"_122":26,"_123":-5,"_124":514,"_126":515,"_148":141,"_142":517,"_144":518,"_147":-5,"_151":152,"_153":519,"_158":-5,"_159":520,"_161":521,"_173":523,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/72","https://api.github.com/repos/pro-collection/interview-question/issues/72/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/72/comments","https://api.github.com/repos/pro-collection/interview-question/issues/72/events","https://github.com/pro-collection/interview-question/issues/72",1619927637,"I_kwDOJGDC6c5gjiJV",72,"TCP 和 UDP的区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[513],{"_66":233,"_68":234,"_54":235,"_113":236,"_115":237,"_117":26,"_118":238},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":516,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:14:27Z","2023-03-11T08:14:57Z",{"_155":141,"_156":141,"_157":141},"## TCP和UDP的区别\n### TCP、UDP和HTTP关系\n1、TCP/IP是个协议组，可分为三个层次：网络层、传输层和应用层。\n\n在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。 \n在传输层中有TCP协议与UDP协议。 \n在应用层有FTP、HTTP、TELNET、SMTP、DNS等协议。 \n因此，HTTP本身就是一个协议，是从Web服务器传输超文本到本地浏览器的传送协议。\n\nTCP 是基于 TCP 协议实现的网络文本协议,属于传输层。 \nUDP 是和TCP 对等的，属于传输层，UDP 和 TCP 有重要的区别。\n\n2、HTTP协议是建立在请求/响应模型上的。\n\n首先由客户建立一条与服务器的TCP链接，并发送一个请求到服务器，请求中包含请求方法、URI、协议版本以及相关的MIME样式的消息。\n服务器响应一个状态行，包含消息的协议版本、一个成功和失败码以及相关的MIME式样的消息。 \nHTTP/1.0为每一次HTTP的请求/响应建立一条新的TCP链接，因此一个包含HTML内容和图片的页面将需要建立多次的短期的TCP链接。一次TCP链接的建立将需要3次握手。 \n另外，为了获得适当的传输速度，则需要TCP花费额外的回路链接时间（RTT）。\n每一次链接的建立需要这种经常性的开销，而其并不带有实际有用的数据，只是保证链接的可靠性，\n因此HTTP/1.1提出了可持续链接的实现方法。HTTP/1.1将只建立一次TCP的链接而重复地使用它传输一系列的请求/响应消息，因此减少了链接建立的次数和经常性的链接开销。\n\n三次握手的过程: \n第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。 \n第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；ACK:确认字符(Acknowledgement) \n第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。\n\n3、结论：虽然HTTP本身是一个协议，但其最终还是基于TCP的。\n\nSocket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。\n\n![02-05-01](https://user-images.githubusercontent.com/22188674/224473152-067c338d-86d5-48ff-8197-85396a77b3c8.jpg)\n\n\n\nHTTPS：（全称：Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。\n即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。\n\n优点：**协议较成熟，应用广泛、基于TCP/IP，拥有TCP优点、研发成本很低，开发快速、开源软件较多**，nginx,apache,tomact等\n缺点：**无状态、无连接**、只有PULL模式，不支持PUSH、数据报文较大\n特性：**基于TCP/IP应用层协议、无状态，无连接**、支持C/S模式、适用于文本传输\n\n### TCP\n\nTCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。\n一个TCP连接必须要经过三次“对话”才能建立起来，其中的过程非常复杂，我们这里只做简单、形象的介绍，你只要做到能够理解这个过程即可。\n我们来看看这三次对话的简单过程：主机A向主机B发出连接请求数据包：“我想给你发数据，可以吗？”，\n这是第一次对话；主机B向主机A发送同意连接和要求同步（同步就是两台主机一个在发送，一个在接收，协调工作）的数据包：“可以，你什么时候发？”，这是第二次对话；\n主机A再发出一个数据包确认主机B的要求同步：“我现在就发，你接着吧！”，这是第三次对话。\n三次“对话”的目的是使数据包的发送和接收同步，经过三次“对话”之后，主机A才向主机B正式发送数据。\n\nTCP：（Transmission Control Protocol，传输控制协议）是面向连接的协议，也就是说，在收发数据前，必须和对方建立可靠的连接。\n一个TCP连接必须要经过三次“对话”才能建立起来，其中的过程非常复杂。\n建立一个连接需要三次握手，而终止一个连接要经过四次握手，这是由TCP的半关闭（half-close）造成的。\n\n优点：**可靠性、全双工协议、开源支持多、应用较广泛、面向连接**、研发成本低、报文内容不限制（IP层自动分包，重传，不大于1452bytes） \n缺点：操作系统：较耗内存，支持连接数有限、设计：协议较复杂，自定义应用层协议、网络：网络差情况下延迟较高、传输：效率低于UDP协议特性：面向连接、可靠性、全双工协议、基于IP层、OSI参考模型位于传输层、适用于二进制传输\n\n**三次握手与四次挥手**\n当客户端和服务器通过三次握手建立了TCP连接以后，当数据传送完毕，肯定是要断开TCP连接的啊。那对于TCP的断开连接，这里就有了神秘的“四次挥手”。 \n1.第一次挥手：主机1(可以使客户端，也可以是服务器端)，设置Sequence Number和Acknowledgment Number，向主机2发送一个FIN报文段;此时，主机1进入FIN_WAIT_1状态;这表示主机1没有数据要发送给主机2了; \n2.第二次挥手：主机2收到了主机1发送的FIN报文段，向主机1回一个ACK报文段，Acknowledgment Number为Sequence Number加1;主机1进入FIN_WAIT_2状态;主机2告诉主机1，我也没有数据要发送了，可以进行关闭连接了; \n3.第三次挥手：主机2向主机1发送FIN报文段，请求关闭连接，同时主机2进入CLOSE_WAIT状态; \n4.第四次挥手：主机1收到主机2发送的FIN报文段，向主机2发送ACK报文段，然后主机1进入TIME_WAIT状态;主机2收到主机1的ACK报文段以后，就关闭连接;此时，主机1等待2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，主机1也可以关闭连接了。 \n至此，TCP的四次挥手就这么愉快的完成了。\n\n\n### UDP\nUDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！\nUDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。\n比如，我们经常使用“ping”命令来测试两台主机之间TCP/IP通信是否正常，其实“ping”命令的原理就是向对方主机发送UDP数据包，\n然后对方主机确认收到数据包，如果数据包是否到达的消息及时反馈回来，那么网络就是通的。\n例如，在默认状态下，一次“ping”操作发送4个数据包（如图2所示）。大家可以看到，发送的数据包数量是4包，\n收到的也是4包（因为对方主机收到后会发回一个确认收到的数据包）。这充分说明了UDP协议是面向非连接的协议，\n没有建立连接的过程。正因为UDP协议没有连接的过程，所以它的通信效果高；但也正因为如此，它的可靠性不如TCP协议高。\nQQ就使用UDP发消息，因此有时会出现收不到消息的情况。\n\nUDP：UDP是一个无连接协议，传输数据之前源端和终端不建立连接，当它想传送时就简单地去抓取来自应用程序的数据，\n并尽可能快地把它扔到网络上。在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、计算机的能力和传输带宽的限制；\n在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段。 \n优点：操作系统：并发高，内存消耗较低、传输：效率高，网络延迟低、传输模型简单，研发成本低 \n缺点：协议不可靠、单向协议、开源支持少、报文内容有限，不能大于1464bytes、设计：协议设计较复杂、网络：网络差，而且丢数据报文 \n特性：无连接，不可靠，基于IP协议层，OSI参考模型位于传输层，最大努力交付，适用于二进制传输\n\n\n### 对比\n\n场景 | TCP | UDP\n:- | :- |:-\n是否连接 | 面向连接 | 面向非连接\n传输可靠性 | 可靠 | 不可靠\n应用场合 | 传输大量数据 |少量数据\n速度 | 慢 | 快\n",{"_54":522,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/72/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/72/timeline",{"_54":525,"_56":57,"_58":526,"_60":527,"_62":528,"_64":529,"_66":530,"_68":531,"_70":532,"_72":533,"_74":534,"_107":535,"_120":121,"_122":26,"_123":-5,"_124":537,"_126":538,"_148":141,"_142":540,"_144":541,"_147":-5,"_151":152,"_153":542,"_158":-5,"_159":543,"_161":544,"_173":546,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/70","https://api.github.com/repos/pro-collection/interview-question/issues/70/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/70/comments","https://api.github.com/repos/pro-collection/interview-question/issues/70/events","https://github.com/pro-collection/interview-question/issues/70",1619926403,"I_kwDOJGDC6c5gjh2D",70,"前端做错误监控？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[536],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":539,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:09:14Z","2023-03-11T08:15:21Z",{"_155":141,"_156":141,"_157":141},"## 错误监控\n\n**错误分类**：即时运行错误（代码错误）、资源加载错误\n\n### 错误的捕获方式：\n**即时运行错误:**\ntry...catch \t\nwindow.onerror\n\n**资源加载错误:** \n1)、object.onerror\t \n2)、performance.getEntries() \n3)、Error事件捕获 \nperformance.getEntries()这个是可以获取到所有的家已经加载的资源\n\nError事件捕获使用方式:\n```javascript\nwindow.addEventListener('error',function(e){\n console.log('捕获',e)\n},true)\n```\n\n跨域是可以捕获的: \n1）、在script标签添加crossorigin属性 \n2)、在js响应头添加Access-Control-Allow-Origin:*;\n\n\n上报错误：ajax通信方式上报、通过Image对象上报,非常简单 \n(new Image()).src='http://baidu.com/test/sdflijsd?=sdlfkj'; \n\n\n",{"_54":545,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/70/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/70/timeline",{"_54":548,"_56":57,"_58":549,"_60":550,"_62":551,"_64":552,"_66":553,"_68":554,"_70":555,"_72":556,"_74":557,"_107":558,"_120":121,"_122":26,"_123":-5,"_124":560,"_126":561,"_148":141,"_142":563,"_144":564,"_147":-5,"_151":152,"_153":565,"_158":-5,"_159":566,"_161":567,"_173":569,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/69","https://api.github.com/repos/pro-collection/interview-question/issues/69/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/69/comments","https://api.github.com/repos/pro-collection/interview-question/issues/69/events","https://github.com/pro-collection/interview-question/issues/69",1619925729,"I_kwDOJGDC6c5gjhrh",69,"前端如何实现即时通讯？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[559],{"_66":233,"_68":234,"_54":235,"_113":236,"_115":237,"_117":26,"_118":238},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":562,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:06:25Z","2023-03-28T15:48:17Z",{"_155":141,"_156":141,"_157":141},"## 前端如何实现即时通讯\n### 短轮询\n短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据，一定程度上模拟实现了即时通讯。\n\n- 优点：兼容性强，实现非常简单\n- 缺点：延迟性高，非常消耗请求资源，影响性能\n\n### comet\ncomet有两种主要实现手段，\n一种是基于 AJAX 的长轮询（long-polling）方式，\n另一种是基于 Iframe 及 htmlfile 的流（streaming）方式，通常被叫做长连接。\n\n具体两种手段的操作方法请移步 [Comet技术详解：基于HTTP长连接的Web端实时通信技术](http://www.52im.net/thread-334-1-1.html)\n\n- 长轮询优缺点：\n - 优点：兼容性好，资源浪费较小\n - 缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护\n\n- 长连接优缺点：\n - 优点：兼容性好，消息即时到达，不发无用请求\n - 缺点：服务器维护长连接消耗资源\n\n\n### SSE\nSSE（Server-Sent Event，服务端推送事件）是一种允许服务端向客户端推送新数据的HTML5技术。\n- 优点：基于HTTP而生，因此不需要太多改造就能使用，使用方便，而websocket非常复杂，必须借助成熟的库或框架\n- 缺点：基于文本传输效率没有websocket高，不是严格的双向通信，客户端向服务端发送请求无法复用之前的连接，需要重新发出独立的请求\n\n\n### Websocket\nWebsocket是一个全新的、独立的协议，基于TCP协议，与http协议兼容、却不会融入http协议，仅仅作为html5的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。\n\n- 优点：真正意义上的实时双向通信，性能好，低延迟\n- 缺点：独立与http的协议，因此需要额外的项目改造，使用复杂度高，必须引入成熟的库，无法兼容低版本浏览器\n\n### Web Worker\nWeb Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行\n\n### Service workers\nService workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理，创建有效的离线体验。\n",{"_54":568,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/69/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/69/timeline",{"_54":571,"_56":57,"_58":572,"_60":573,"_62":574,"_64":575,"_66":576,"_68":577,"_70":578,"_72":579,"_74":580,"_107":581,"_120":121,"_122":26,"_123":-5,"_124":583,"_126":584,"_148":141,"_142":586,"_144":587,"_147":-5,"_151":152,"_153":588,"_158":-5,"_159":589,"_161":590,"_173":592,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/68","https://api.github.com/repos/pro-collection/interview-question/issues/68/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/68/comments","https://api.github.com/repos/pro-collection/interview-question/issues/68/events","https://github.com/pro-collection/interview-question/issues/68",1619925502,"I_kwDOJGDC6c5gjhn-",68,"如何避免重绘或者重排？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[582],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":585,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T08:05:32Z","2023-03-11T08:15:20Z",{"_155":141,"_156":141,"_157":141},"## 如何触发重排和重绘\n任何改变用来构建渲染树的信息都会导致一次重排或重绘：\n\n- 添加、删除、更新DOM节点\n- 通过display: none隐藏一个DOM节点-触发重排和重绘\n- 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化\n- 移动或者给页面中的DOM节点添加动画\n- 添加一个样式表，调整样式属性\n- 用户行为，例如调整窗口大小，改变字号，或者滚动。\n\n## 如何避免重绘或者重排\n\n### 集中改变样式\n我们往往通过改变class的方式来集中改变样式\n```js\n// 判断是否是黑色系样式\nconst theme = isDark ? 'dark' : 'light';\n\n// 根据判断来设置不同的class\nele.setAttribute('className', theme);\n```\n\n### 使用DocumentFragment\n我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，因此只触发一次重排\n```js\nvar fragment = document.createDocumentFragment();\n\nfor (let i = 0;i<10;i++){\n let node = document.createElement(\"p\");\n node.innerHTML = i;\n fragment.appendChild(node);\n}\n\ndocument.body.appendChild(fragment);\n```\n\n### 提升为合成层\n元素提升为合成层有以下优点：\n\n- 合成层的位图，会交由 GPU 合成，比 CPU 处理要快\n- 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层\n- 对于 transform 和 opacity 效果，不会触发 layout 和 paint\n\n提升合成层的最好方式是使用 CSS 的 will-change 属性：\n```css\n#target {\n will-change: transform;\n}\n```\n",{"_54":591,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/68/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/68/timeline",{"_54":594,"_56":57,"_58":595,"_60":596,"_62":597,"_64":598,"_66":599,"_68":600,"_70":601,"_72":602,"_74":603,"_107":604,"_120":121,"_122":26,"_123":-5,"_124":606,"_126":607,"_148":141,"_142":609,"_144":610,"_147":-5,"_151":152,"_153":611,"_158":-5,"_159":612,"_161":613,"_173":615,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/66","https://api.github.com/repos/pro-collection/interview-question/issues/66/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/66/comments","https://api.github.com/repos/pro-collection/interview-question/issues/66/events","https://github.com/pro-collection/interview-question/issues/66",1619921456,"I_kwDOJGDC6c5gjgow",66,"重绘与重排的区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[605],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":608,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T07:47:40Z","2023-09-09T06:17:28Z",{"_155":141,"_156":141,"_157":141},"浏览器重绘（Repaint）和重排（Reflow）是Web页面中常见的两种渲染方式，它们的区别如下：\r\n\r\n1. 重排（Reflow）：当DOM元素的结构或者布局发生变化时，浏览器需要重新计算元素的几何属性（比如位置、大小等），然后重新构建渲染树，这个过程叫做重排。重排的代价比较高，因为需要浏览器重新计算和布局，会消耗较多的CPU资源和时间。\r\n\r\n2. 重绘（Repaint）：当元素的样式（如背景颜色、字体颜色、边框颜色等）发生变化时，浏览器会重新绘制元素的样式，这个过程叫做重绘。重绘的代价比较低，因为不需要重新计算元素的位置和大小，只需要重新绘制元素的样式即可。\r\n\r\n因此，重排会触发重绘，但是重绘不一定会触发重排。在Web开发中，我们应该尽量避免频繁的重排和重绘，以提高页面的性能。一些常见的优化方式包括：减少DOM操作、使用CSS3动画代替JavaScript动画、避免使用table布局等。\r\n\r\n\r\n下面是它们的区别：\r\n\r\n| 区别 | 重绘 | 重排 |\r\n|--------------|--------------------------------------------------------|--------------------------------------------------------|\r\n| 定义 | 更新元素的可见样式，但不影响布局 | 更新元素的布局和尺寸 |\r\n| 影响范围 | 仅影响元素的外观，不影响其他元素 | 影响元素及其周围的布局、尺寸和位置 |\r\n| 执行顺序 | 在重排之后执行 | 在重绘之前执行 |\r\n| 开销 | 开销较小，不涉及元素的重新布局和计算 | 开销较大，需要重新计算元素的布局和位置 |\r\n| 触发条件 | 元素的可见样式属性发生变化，例如颜色、背景、阴影等 | 元素的尺寸、布局属性发生变化，例如宽度、高度、边距等 |\r\n| 优化建议 | 使用 CSS3 的 transform 和 opacity 属性实现动画效果 | 批量更新样式，使用文档片段进行 DOM 操作，禁用动画效果，减少样式计算 |\r\n| 示例 | 更改颜色、背景、边框等 | 更改尺寸、位置、边距、文本内容等 |\r\n\r\n请注意，重绘和重排是相互关联的，当发生重排时，会随之引发重绘。因此，为了提高性能，应该尽量减少重绘和重排的次数。\r\n",{"_54":614,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/66/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/66/timeline",{"_54":617,"_56":57,"_58":618,"_60":619,"_62":620,"_64":621,"_66":622,"_68":623,"_70":624,"_72":625,"_74":626,"_107":627,"_120":121,"_122":26,"_123":-5,"_124":629,"_126":630,"_148":141,"_142":632,"_144":633,"_147":-5,"_151":152,"_153":634,"_158":-5,"_159":635,"_161":636,"_173":638,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/65","https://api.github.com/repos/pro-collection/interview-question/issues/65/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/65/comments","https://api.github.com/repos/pro-collection/interview-question/issues/65/events","https://github.com/pro-collection/interview-question/issues/65",1619910086,"I_kwDOJGDC6c5gjd3G",65,"常见的浏览器内核有哪些，有啥区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[628],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":631,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T06:56:01Z","2023-03-11T06:56:02Z",{"_155":141,"_156":141,"_157":141},"常见的浏览器内核包括：\n\n- **Trident内核**：由Microsoft开发，主要用于Internet Explorer浏览器，也是Windows系统自带的默认浏览器内核。该内核在HTML和CSS的解释、渲染方面存在一些问题，但在JavaScript引擎的处理上表现较为出色。\n\n- **Gecko内核**：由Mozilla开发，主要用于Firefox浏览器。该内核在HTML和CSS的解释、渲染方面表现较好，同时也有较强的JavaScript引擎。\n\n- **WebKit内核**：由苹果公司开发，最初是为Safari浏览器所用。该内核在HTML、CSS和JavaScript处理方面都表现出色，支持的CSS特性较多。\n\n- **Blink内核**：由Google和Opera Software共同开发，用于Chrome浏览器和Opera浏览器。该内核是Webkit内核的一个分支，对Web标准的支持也非常好。\n\n这些浏览器内核之间的主要区别在于对Web标准的支持程度、渲染引擎的处理能力、JavaScript引擎的性能、浏览器的兼容性等方面。此外，不同的浏览器内核也会有一些独特的特性和优化，以满足不同用户的需求。\n\n\n## 下面是一个简单的表格对比\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

浏览器内核	开发公司	代表浏览器	支持程度	渲染引擎	JavaScript引擎	浏览器兼容性
Trident	Microsoft	Internet Explorer	一般	一般	出色	差
Gecko	Mozilla	Firefox	较好	较好	出色	好
WebKit	Apple	Safari	出色	出色	出色	好
Blink	Google and Opera Software	Chrome and Opera	出色	出色	出色	好

\n",{"_54":637,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/65/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/65/timeline",{"_54":640,"_56":57,"_58":641,"_60":642,"_62":643,"_64":644,"_66":645,"_68":646,"_70":647,"_72":648,"_74":649,"_107":650,"_120":121,"_122":26,"_123":-5,"_124":652,"_126":653,"_148":141,"_142":655,"_144":656,"_147":-5,"_151":152,"_153":657,"_158":-5,"_159":658,"_161":659,"_173":661,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/64","https://api.github.com/repos/pro-collection/interview-question/issues/64/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/64/comments","https://api.github.com/repos/pro-collection/interview-question/issues/64/events","https://github.com/pro-collection/interview-question/issues/64",1619909253,"I_kwDOJGDC6c5gjdqF",64,"浏览器 DOM Tree是如何构建的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[651],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":654,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T06:51:52Z","2023-03-11T06:51:53Z",{"_155":141,"_156":141,"_157":141},"浏览器构建DOM树的过程包括以下几个步骤：\n\n1. 解析HTML代码：浏览器会将HTML代码解析成一个DOM树的结构。\n\n2. 创建根节点：DOM树的根节点通常是HTML元素。\n\n3. 创建子节点：根据HTML标记的嵌套关系，浏览器会在DOM树中创建相应的子节点，每个节点表示一个HTML元素。\n\n4. 创建属性节点：HTML元素可能有一些属性，例如id、class、src等，浏览器会将这些属性创建为节点的属性节点。\n\n5. 创建文本节点：如果HTML元素中包含文本内容，浏览器会将这些文本内容创建为文本节点，并将它们作为元素的子节点插入到DOM树中。\n\n6. 创建注释节点：HTML代码中可能包含注释，浏览器会将注释创建为注释节点，并将它们插入到DOM树中。\n\n7. 构建完整的DOM树：经过以上步骤，浏览器会将所有HTML代码解析成一个完整的DOM树。\n\n需要注意的是，浏览器构建DOM树是一个逐步进行的过程，解析器会逐个读取HTML标记，并创建相应的节点，直到解析完整个HTML代码。在这个过程中，如果遇到错误的HTML标记，浏览器也会尽可能地将其解析成一个节点，以保证DOM树的完整性。\n",{"_54":660,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/64/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/64/timeline",{"_54":663,"_56":57,"_58":664,"_60":665,"_62":666,"_64":667,"_66":668,"_68":669,"_70":670,"_72":671,"_74":672,"_107":673,"_120":121,"_122":26,"_123":-5,"_124":675,"_126":676,"_148":141,"_142":678,"_144":679,"_147":-5,"_151":152,"_153":680,"_158":-5,"_159":681,"_161":682,"_173":684,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/63","https://api.github.com/repos/pro-collection/interview-question/issues/63/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/63/comments","https://api.github.com/repos/pro-collection/interview-question/issues/63/events","https://github.com/pro-collection/interview-question/issues/63",1619908865,"I_kwDOJGDC6c5gjdkB",63,"浏览器是如何渲染UI的？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[674],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":677,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T06:50:04Z","2023-03-11T06:50:05Z",{"_155":141,"_156":141,"_157":141},"浏览器渲染UI的过程通常被称为渲染流水线（rendering pipeline），它可以分为以下几个步骤：\n\n1. 解析HTML：浏览器首先解析HTML代码，创建DOM（文档对象模型）树。DOM树是由节点和对象组成的层次结构，它表示了文档的内容和结构。\n\n2. 解析CSS：浏览器接着解析CSS代码，创建CSSOM（CSS对象模型）树。CSSOM树是由CSS规则和对应的元素组成的层次结构，它表示了文档中的元素的样式信息。\n\n3. 创建渲染树：浏览器将DOM树和CSSOM树结合起来，生成渲染树。渲染树只包含需要显示的元素，它是一种按照渲染顺序排列的树形结构。\n\n4. 布局：浏览器对渲染树进行布局（layout），计算每个元素在屏幕上的位置和大小。\n\n5. 绘制：浏览器将渲染树中的每个元素绘制到屏幕上。\n\n6. 合成：如果有多个层叠的元素，浏览器将它们合成一个图层，以提高性能。\n\n这些步骤通常是逐步完成的，而且它们是相互依赖的。例如，布局必须在绘制之前完成，因为绘制需要知道每个元素的位置和大小。为了提高性能，浏览器通常会对这些步骤进行优化，例如使用异步布局和延迟合成等技术。\n\n\n\n",{"_54":683,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/63/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/63/timeline",{"_54":686,"_56":57,"_58":687,"_60":688,"_62":689,"_64":690,"_66":691,"_68":692,"_70":693,"_72":694,"_74":695,"_107":696,"_120":121,"_122":26,"_123":-5,"_124":698,"_126":699,"_148":141,"_142":701,"_144":587,"_147":-5,"_151":152,"_153":702,"_158":-5,"_159":703,"_161":704,"_173":706,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/62","https://api.github.com/repos/pro-collection/interview-question/issues/62/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/62/comments","https://api.github.com/repos/pro-collection/interview-question/issues/62/events","https://github.com/pro-collection/interview-question/issues/62",1619908353,"I_kwDOJGDC6c5gjdcB",62,"浏览器如何解析css选择器？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[697],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":700,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-11T06:47:36Z",{"_155":141,"_156":141,"_157":141},"浏览器会『从右往左』解析CSS选择器。\n\n#### CSS选择器的解析顺序\n相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系，比如尽量不要写成：\n```css\n#div P.class {\n color: red;\n}\n```\n\n而是写成：\n```css\n.class {\n color: red;\n}\n```\n之所以需要这么写，给的解释是这样可以减少选择器匹配的次数。\n初看觉得哦，有点道理啊，但是往细了再想想：\n如果我把层级定的足够的清晰分明，那不是可以直接去掉很多不对应的CSS选择器的索引路径的么？为什么都是建议少使用层级关系呢？\n\n原因其实很简单，我们犯了一个经验主义错误，默认CSS选择器是从左往右进行解析的，实际上恰恰相反，CSS选择器是从右往左解析的。\n\n#### CSS选择器进行优化的必要性\n\n再次看下图： \n![img](https://img-blog.csdn.net/20160805094241153)\n\n在图中我们可以看到HTML解析出了一颗DOM tree，与此同时样式脚本则解析生成了一个style rules，也可以说是一个CSS tree。\n最后，DOM tree同style rules一同结合解析出一颗Render Tree，\n而Render Tree就是包含了一个dom对象以及为其计算好的样式规则，提供了布局以及显示方法。\n\n因为不清楚一个DOM对象上究竟对应着哪些样式规则，所以只能选择一个最笨的办法，\n即每一个DOM对象都遍历一遍style rules，DOM对象的数量相信大家也都清楚，\n如果每次遍历style rules都是像一个晒太阳的老大爷一样的悠哉游哉，因此对CSS选择器进行优化就是一个必须的事情了。\n\n#### 从右往左解析到底好在哪里\n假如有如下的一段HTML：\n```html\n

\n ...\n

\n```\n\n和如下的CSS：\n```css\n#div1 .c .d {}\n.f .c .d {}\n.a .c .e {}\n#div1 .f {}\n.c .d{}\n```\n\n假如我们的CSS解析器是从左往右进行匹配的，那么会生成如下的style rules：\n![01_47_03](https://user-images.githubusercontent.com/22188674/224469670-1156d32e-ea84-4a5a-9323-308d2db320b3.jpg)\n\n\n首先，#div1 .c .d ｛｝ .f .c .d ｛｝.c .d｛｝这三个选择器里面都含有 **.c .d｛｝这么一个公用样式，**\n所以哪怕是我们的DOM节点明确了是在#div1下面都必须对style rules进行全部的匹配查找，\n这样一来基本上可以说是**每一个DOM节点都必须完全遍历一遍style rules**，\n不然搞不好就会漏掉一些公用样式之类的，所以想着将层级写的更加详细就能去掉很多不对应的CSS选择器的索引路径的就不要想了，\n不管你写的多细，你总是需要把整个style rules都遍历一遍，不然万一漏掉了某个公用样式不就思密达了？\n\n那么如果我们换成从右向左进行解析就能够避免这种情况了么？请看下面这个style rules： \n![01_47_04](https://user-images.githubusercontent.com/22188674/224469699-0dc5d98b-3995-4cb9-b4ae-375441dcc995.jpeg)\n\n别的先不提，**最少这个节点就少了很多**嘛，哪怕我这里同样是需要全部遍历一遍就冲着减少了这么多个节点也要从右往左进行解析啊！ \n更重要的是，只要有公用样式，那么选择器最右边的那个类型选择器一定是相同的，如此公共样式就很自然的都集中到一个分支上，\n这个时候我们**完全可以将其他不匹配的路径全部去掉而不用担心会漏掉某些个公用样式了**。\n虽然当这颗CSS树在遍历的时候还有有部分节点会遍历到最后才能确定到底是不是匹配的，\n但总的来说从**右往左进行解析还是会比从左往右解析要少很多次的匹配**，这样带来的效率提升是显而易见的！\n\n同时，这也是不建议使用*通配符来进行样式匹配的原因：浏览器专门建立了一个反常规思维的从右往左的匹配规则就是为了避免对所有元素进行遍历。\n\n最后，从右往左进行解析还有一个好处那就是从右往左进行匹配的时候，匹配的全部是DOM元素的父节点，\n而从左往右进行匹配的时候时候，匹配的全部是DOM元素的子节点，这样就**避免了HTML与CSS没有下载完需要进行等待的情形**。\n",{"_54":705,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/62/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/62/timeline",{"_54":708,"_56":57,"_58":709,"_60":710,"_62":711,"_64":712,"_66":713,"_68":714,"_70":715,"_72":716,"_74":717,"_107":718,"_120":121,"_122":26,"_123":-5,"_124":720,"_126":721,"_148":141,"_142":732,"_144":733,"_147":-5,"_151":152,"_153":734,"_158":-5,"_159":735,"_161":736,"_173":738,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/61","https://api.github.com/repos/pro-collection/interview-question/issues/61/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/61/comments","https://api.github.com/repos/pro-collection/interview-question/issues/61/events","https://github.com/pro-collection/interview-question/issues/61",1619907607,"I_kwDOJGDC6c5gjdQX",61,"浏览器的主要组成部分是什么？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[719],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":722,"_64":723,"_58":724,"_66":725,"_68":726,"_70":178,"_72":727,"_118":728,"_136":729,"_138":361,"_140":141,"_120":121,"_142":730,"_144":731,"_146":-5,"_147":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-03-11T06:44:18Z","2023-03-11T06:44:19Z",{"_155":141,"_156":141,"_157":141},"浏览器的主要组成部分是什么\n\n- **用户界面** - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。\n- **浏览器引擎** - 在用户界面和呈现引擎之间传送指令。\n- **呈现引擎** - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。\n- **网络** - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。\n- **用户界面后端** - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。\n- **JavaScript 解释器** - 用于解析和执行 JavaScript 代码。\n- **数据存储。这是持久层** - 浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。 \n",{"_54":737,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/61/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/61/timeline",{"_54":740,"_56":57,"_58":741,"_60":742,"_62":743,"_64":744,"_66":745,"_68":746,"_70":747,"_72":748,"_74":749,"_107":750,"_120":121,"_122":26,"_123":-5,"_124":752,"_126":753,"_148":133,"_142":755,"_144":756,"_147":-5,"_151":152,"_153":757,"_158":-5,"_159":758,"_161":759,"_173":761,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/60","https://api.github.com/repos/pro-collection/interview-question/issues/60/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/60/comments","https://api.github.com/repos/pro-collection/interview-question/issues/60/events","https://github.com/pro-collection/interview-question/issues/60",1619157594,"I_kwDOJGDC6c5ggmJa",60,"海量数据的处理问题: 如何从10亿个数中找出最大的10000个数？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[751],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":754,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:24:14Z","2025-02-20T08:42:19Z",{"_155":141,"_156":141,"_157":141},"从10亿个数中找出最大的10000个数是一项非常具有挑战性的任务，需要使用高效的算法和数据结构来处理。\r\n\r\n以下是一种基于分治思想的常见方法：\r\n\r\n将10亿个数分成1000个小文件，每个文件包含100万个数。\r\n对每个小文件进行排序，选出每个文件中最大的1000个数，并将它们放入一个临时文件中。\r\n将1000个临时文件合并成一个大文件，并再次对其进行排序。\r\n选出最大的10000个数。\r\n\r\n这种方法的时间复杂度为O(N*log(N/K))，其中N是所有数据的数量，K是每个小文件中的数据量。由于K相对较小，因此这种方法非常高效。\r\n",{"_54":760,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/60/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/60/timeline",{"_54":763,"_56":57,"_58":764,"_60":765,"_62":766,"_64":767,"_66":768,"_68":769,"_70":770,"_72":771,"_74":772,"_107":773,"_120":121,"_122":26,"_123":-5,"_124":781,"_126":782,"_148":141,"_142":784,"_144":785,"_147":-5,"_151":152,"_153":786,"_158":-5,"_159":787,"_161":788,"_173":790,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/59","https://api.github.com/repos/pro-collection/interview-question/issues/59/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/59/comments","https://api.github.com/repos/pro-collection/interview-question/issues/59/events","https://github.com/pro-collection/interview-question/issues/59",1619150703,"I_kwDOJGDC6c5ggkdv",59,"`display: block;`和`display: inline;`的区别",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[774],{"_66":775,"_68":776,"_54":777,"_113":778,"_115":779,"_117":26,"_118":780},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":783,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:19:36Z","2023-03-10T15:19:37Z",{"_155":141,"_156":141,"_157":141},"``block``元素特点：\n\n1.处于常规流中时，如果``width``没有设置，会自动填充满父容器\n2.可以应用``margin/padding``\n3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素\n4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）\n5.忽略``vertical-align``\n\n``inline``元素特点\n\n1.水平方向上根据``direction``依次布局\n2.不会在元素前后进行换行\n3.受``white-space``控制\n4.``margin/padding``在竖直方向上无效，水平方向上有效\n5.``width/height``属性对非替换行内元素无效，宽度由元素内容决定\n6.非替换行内元素的行框高由``line-height``确定，替换行内元素的行框高由``height``,``margin``,``padding``,``border``决定\n6.浮动或绝对定位时会转换为``block``\n7.``vertical-align``属性生效\n",{"_54":789,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/59/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/59/timeline",{"_54":792,"_56":57,"_58":793,"_60":794,"_62":795,"_64":796,"_66":797,"_68":798,"_70":799,"_72":800,"_74":801,"_107":802,"_120":121,"_122":26,"_123":-5,"_124":804,"_126":805,"_148":141,"_142":807,"_144":808,"_147":-5,"_151":152,"_153":809,"_158":-5,"_159":810,"_161":811,"_173":813,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/58","https://api.github.com/repos/pro-collection/interview-question/issues/58/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/58/comments","https://api.github.com/repos/pro-collection/interview-question/issues/58/events","https://github.com/pro-collection/interview-question/issues/58",1619148043,"I_kwDOJGDC6c5ggj0L",58,"`display: none;`与`visibility: hidden;`的区别是啥",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[803],{"_66":775,"_68":776,"_54":777,"_113":778,"_115":779,"_117":26,"_118":780},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":806,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:17:41Z","2023-03-10T15:18:10Z",{"_155":141,"_156":141,"_157":141},"联系：它们都能让元素不可见\n\n区别：\n\n1. display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；\n visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见\n2. display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；\n visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式\n3. 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。\n4. 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容\n",{"_54":812,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/58/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/58/timeline",{"_54":815,"_56":57,"_58":816,"_60":817,"_62":818,"_64":819,"_66":820,"_68":821,"_70":822,"_72":823,"_74":824,"_107":825,"_120":121,"_122":26,"_123":-5,"_124":827,"_126":828,"_148":141,"_142":830,"_144":831,"_147":-5,"_151":152,"_153":832,"_158":-5,"_159":833,"_161":834,"_173":836,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/57","https://api.github.com/repos/pro-collection/interview-question/issues/57/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/57/comments","https://api.github.com/repos/pro-collection/interview-question/issues/57/events","https://github.com/pro-collection/interview-question/issues/57",1619146384,"I_kwDOJGDC6c5ggjaQ",57,"手写 Promise , 并描述其原理与实现",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[826],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":829,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:16:34Z","2023-03-10T15:18:47Z",{"_155":141,"_156":141,"_157":141},"## Primise原理与实现\n\n目录\n\n\n\n- [Promise 核心](#promise-%E6%A0%B8%E5%BF%83)\n- [ES6 Promise细节](#es6-promise%E7%BB%86%E8%8A%82)\n- [动手实现](#%E5%8A%A8%E6%89%8B%E5%AE%9E%E7%8E%B0)\n * [内部属性](#%E5%86%85%E9%83%A8%E5%B1%9E%E6%80%A7)\n * [执行器](#%E6%89%A7%E8%A1%8C%E5%99%A8)\n * [then方法](#then%E6%96%B9%E6%B3%95)\n + [异步实现](#%E5%BC%82%E6%AD%A5%E5%AE%9E%E7%8E%B0)\n + [then 返回值](#then-%E8%BF%94%E5%9B%9E%E5%80%BC)\n + [具体代码](#%E5%85%B7%E4%BD%93%E4%BB%A3%E7%A0%81)\n- [七段经典的Promise](#%E4%B8%83%E6%AE%B5%E7%BB%8F%E5%85%B8%E7%9A%84promise)\n * [demo1](#demo1)\n * [demo2](#demo2)\n * [demo3](#demo3)\n * [demo4](#demo4)\n * [demo5](#demo5)\n * [demo6](#demo6)\n * [demo7](#demo7)\n- [参考文章](#%E5%8F%82%E8%80%83%E6%96%87%E7%AB%A0)\n\n\n\n### Promise 核心\n- Promise 概括来说是对异步的执行结果的描述对象。（这句话的理解很重要）\n- Promise 规范中规定了，promise 的状态只有3种：\n - pending\n - fulfilled\n - rejected \n Promise 的状态一旦改变则不会再改变。\n- Promise 规范中还规定了 Promise 中必须有 then 方法，这个方法也是实现异步的链式操作的基本。\n\n## ES6 Promise细节\n- Promise 构造器中必须传入函数，否则会抛出错误。(没有执行器还怎么做异步操作。。。)\n- Promise.prototype上的 catch(onrejected) 方法是 then(null,onrejected) 的别名,并且会处理链之前的任何的reject。\n- Promise.prototype 上的 then和 catch 方法总会返回一个全新的 Promise 对象。\n- 如果传入构造器的函数中抛出了错误,该 promise 对象的[[PromiseStatus]]会赋值为 rejected，并且[[PromiseValue]]赋值为 Error 对象。\n- then 中的回调如果抛出错误，返回的 promise 对象的[[PromiseStatus]]会赋值为 rejected，并且[[PromiseValue]]赋值为 Error 对象。\n- then 中的回调返回值会影响 then 返回的 promise 对象。(下文会具体分析)\n\n## 动手实现 \n做了上面的铺垫，实现一个 Promise 的思路就清晰很多了，本文使用 ES6 来进行实现，\n暂且把这个类取名为 GPromise吧(不覆盖原生的，便于和原生进行对比测试)。\n下文中 GPromise 代指将要实现的类，Promise 代指 ES6中的 Promise 类。\n\n### 内部属性\n在浏览器中打印出一个 Promise 实例会发现其中会包括两用”[[ ]]”包裹起来的属性，这是系统内部属性，只有JS 引擎能够访问。\n```\n[[PromiseStatus]]\n[[PromiseValue]]\n```\n以上两个属性分别是 Promise 对象的状态和最终值。 \n\n我们自己不能实现内部属性，JS中私有属性特性(#修饰符现在还是提案)暂时也没有支持，\n所以暂且用”_”前缀规定私有属性，这样就模拟了Promise 中的两个内部属性。\n```js\nclass GPromise {\n constructor(executor) {\n this._promiseStatus = GPromise.PENDING;\n this._promiseValue;\n this.execute(executor);\n }\n\n execute(executor){\n //...\n }\n\n then(onfulfilled, onrejected){\n //...\n }\n }\n\nGPromise.PENDING = 'pedding';\nGPromise.FULFILLED = 'resolved';\nGPromise.REJECTED = 'rejected';\n```\n\n### 执行器\n- 传入构造器的executor为函数，并且在构造时就会执行。\n- 我们给 executor 中传入 resolve 和 reject 参数，这两个参数都是函数，用于改变改变 _promiseStatus和 _promiseValue 的值。\n- 并且内部做了捕获异常的操作，一旦传入的executor 函数执行抛出错误，GPromise 实例会变成 rejected状态，\n 即 _promiseStatus赋值为’rejected’，并且 _promiseValue赋值为Error对象。\n \n```js\nexecute(executor) {\n if (typeof executor != 'function') {\n throw new Error(` GPromise resolver ${executor} is not a function`);\n }\n //捕获错误\n try {\n executor(data => {\n this.promiseStatus = GPromise.FULFILLED;\n this.promiseValue = data;\n }, data => {\n this.promiseStatus = GPromise.REJECTED;\n this.promiseValue = data; \n });\n } catch (e) {\n this.promiseStatus = GPromise.REJECTED;\n this.promiseValue = e;\n }\n}\n```\n\n### then方法\n#### 异步实现\nthen 方法内部逻辑稍微复杂点，并且有一点一定一定一定要注意到: then 方法中的回调是异步执行的，思考下下段代码:\n```js\nconsole.log(1);\nnew Promise((resolve,reject)=>{\n console.log(2);\n resolve();\n})\n.then(()=>console.log(3));\nconsole.log(4);\n```\n执行结果是什么呢？答案其实是:1 2 4 3。 \n\nthen 方法中的难点就是处理异步,其中一个方案是通过 setInterval来监听GPromise 对象的状态改变，\n一旦改变则执行相应then 中相应的回调函数(onfulfilled和onrejected),这样回调函数就能够插入事件队列末尾，\n异步执行，实验证明可行，这种方案是最直观也最容易理解的。\n\n#### then 返回值 \nthen 方法的返回值是一个新的 GPromise 对象，并且这个对象的状态和 then 中的回调返回值相关，回调指代传入的 onfulfilled 和 rejected。 \n1. 如果 then 中的回调抛出了错误，返回的 GPromise 的 _promiseStatus 赋值为’rejected’， _promiseValue赋值为抛出的错误对象。 \n2. 如果回调返回了一个非 GPromise 对象， then返回的 GPromise 的 _promiseStatus 赋值为’resolved’， _promiseValue赋值为回调的返回值。 \n3. 如果回调返回了一个 GPromise 对象，then返回的GPromise对象的_promiseStatus和 _promiseValue 和其保持同步。也就是 then 返回的GPromise记录了回调返回的状态和值，不是直接返回回调的返回值。\n\n#### 具体代码\n```js\nthen(onfulfilled, onrejected) {\n let _ref = null,\n timer = null,\n result = new GPromise(() => {});\n\n //因为 promise 的 executor 是异步操作,需要监听 promise 对象状态变化，并且不能阻塞线程\n timer = setInterval(() => {\n if ((typeof onfulfilled == 'function' && this._promiseStatus == GPromise.FULFILLED) ||\n (typeof onrejected == 'function' && this._promiseStatus == GPromise.REJECTED)) {\n //状态发生变化，取消监听\n clearInterval(timer);\n //捕获传入 then 中的回调的错误，交给 then 返回的 promise 处理\n try {\n if (this._promiseStatus == GPromise.FULFILLED) {\n _ref = onfulfilled(this._promiseValue);\n } else {\n _ref = onrejected(this._promiseValue);\n }\n\n //根据回调的返回值来决定 then 返回的 GPromise 实例的状态\n if (_ref instanceof GPromise) {\n //如果回调函数中返回的是 GPromise 实例，那么需要监听其状态变化，返回新实例的状态是根据其变化相应的\n timer = setInterval(()=>{\n if (_ref._promiseStatus == GPromise.FULFILLED ||\n _ref._promiseStatus == GPromise.REJECTED) {\n clearInterval(timer);\n result._promiseValue = _ref._promiseValue;\n result._promiseStatus = _ref._promiseStatus;\n }\n },0);\n\n } else {\n //如果返回的是非 GPromise 实例\n result._promiseValue = _ref;\n result._promiseStatus = GPromise.FULFILLED;\n }\n } catch (e) {\n //回调中抛出错误的情况\n result._promiseStatus = GPromise.REJECTED;\n result._promiseValue = e;\n }\n }\n }, 0);\n //promise 之所以能够链式操作，因为返回了GPromise对象\n return result;\n }\n```\n\n## 七段经典的Promise\nPromise 的 then 的注册微任务队列和执行是分离的。 \n注册 : 是完全遵循 JS 和 Promise 的代码的执行过程。 \n执行 : 先同步，再微任务，再宏观任务。 \n\n### demo1\n```js\n/**\n * promise 是可连续执行的？\n * 是可以的！\n */\n\nnew Promise((resolve, reject) => {\n console.log(1);\n // return reject();\n return resolve();\n})\n .then(() => {\n console.log(2);\n })\n .then(()=> {\n console.log(3);\n })\n .then(()=> {\n console.log(4);\n })\n .catch(()=> {\n console.log('catch');\n })\n .finally(()=> {\n console.log('finally');\n });\n```\n\n### demo2\n```js\nnew Promise((resolve, reject) => {\n console.log(1);\n return resolve()\n}).then(() => {\n console.log(2);\n // 外部第一个 then 方法里面 return 一个 Promise，这个 return ，代表外部的第二个 then 的执行需要等待 return 之后的结果。\n return new Promise((resolve) => {\n console.log(3);\n\n return resolve()\n })\n .then(() => {\n console.log(4);\n })\n .then(() => {\n console.log(5);\n })\n}).then(() => {\n console.log(6);\n}).then(() => {\n console.log(7);\n});\n```\n\n\n### demo3\n```js\n// 我们核心要看 then 的回调函数是啥时候注册的，我们知道，事件机制是 “先注册先执行”，\n// 即数据结构中的 “栈” 的模式，first in first out。那么重点我们来看下他们谁先注册的。\n\n// 外部的第二个 then 的注册，需要等待外部的第一个 then 的同步代码执行完成。\n// 当执行内部的 new Promise 的时候，然后碰到 resolve，resolve 执行完成，\n// 代表此时的该 Promise 状态已经扭转，之后开始内部的第一个 .then 的微任务的注册，此时同步执行完成。\nnew Promise((resolve) => {\n console.log(1);\n return resolve()\n}).then(() => {\n console.log(2);\n // 内部的 resolve 之后，当然是先执行内部的 new Promise 的第一个 then 的注册，这个 new Promise 执行完成，立即同步执行了后面的 .then 的注册。\n new Promise((resolve) => {\n console.log(3);\n return resolve()\n })\n .then(() => {\n console.log(4);\n })\n // 然而这个内部的第二个 then 是需要第一个 then 的的执行完成来决定的，而第一个 then 的回调是没有执行，仅仅只是执行了同步的 .then 方法的注册，所以会进入等待状态。\n .then(() => {\n console.log(5);\n })\n .then(()=> {\n console.log(6);\n })\n}).then(() => {\n // 外部的第一个 then 的同步操作已经完成了，\n // 然后开始注册外部的第二个 then，此时外部的同步任务也都完成了。\n // 外部第二个 then 完成之后，进入等待，内部的第二个 then 注册之后在执行\n console.log(7);\n}).then(() => {\n console.log(8);\n}).then(()=> {\n console.log(9);\n});\n```\n\n\n### demo4\n```js\n/**\n * 链式调用的注册是前后依赖的比如上面的外部的第二个 then 的注册，是需要外部的第一个的 then 的执行完成。\n *\n * 变量定义的方式，注册都是同步的比如这里的 p.then 和 var p = new Promise 都是同步执行的。\n */\nnew Promise(resolve=> {\n console.log('1');\n resolve();\n})\n .then(()=> {\n console.log(2);\n const p = new Promise(resove=> {\n console.log(3);\n resove();\n });\n\n p.then(()=> {\n console.log(4);\n });\n\n p.then(()=> {\n console.log(5);\n });\n })\n .then(()=> {\n console.log(6)\n })\n .then(()=> {\n console.log(7)\n });\n```\n\n### demo5\n```js\n/**\n * 这段代码中，外部的注册采用了非链式调用的写法，根据上面的讲解，\n * 我们知道了外部代码的 p.then 是并列同步注册的。\n * 所以代码在内部的 new Promise 执行完，p.then 就都同步注册完了。\n *\n * 内部的第一个 then 注册之后，\n * 就开始执行外部的第二个 then 了（外部的第二个 then 和外部的第一个 then 都是同步注册完了）。\n * 然后再依次执行内部的第一个 then ,内部的第二个 then。\n * @type {Promise}\n */\nconst p = new Promise(resolve => {\n console.log(1);\n resolve()\n});\n\np.then(() => {\n console.log(2);\n new Promise(resolve => {\n console.log(3);\n resolve();\n })\n .then(() => {\n console.log(4);\n })\n .then(() => {\n console.log(5);\n })\n});\n\np.then(() => {\n console.log(6);\n});\n\np.then(() => {\n console.log(7)\n});\n```\n\n### demo6\n```js\nnew Promise(resolve => {\n console.log(1);\n resolve();\n})\n .then(() => {\n console.log(2);\n new Promise(resolve => {\n console.log(3);\n resolve();\n })\n .then(() => {\n console.log(4);\n })\n .then(() => {\n console.log(5);\n });\n\n return new Promise(resolve => {\n console.log(6);\n resolve();\n })\n .then(() => {\n console.log(7);\n })\n .then(() => {\n console.log(8);\n })\n })\n .then(() => {\n console.log(9);\n })\n .then(() => {\n console.log(10);\n });\n```\n \n### demo7\n```js\nnew Promise((resolve, reject) => {\n console.log('外部promise');\n resolve();\n})\n .then(() => {\n console.log('外部第一个then');\n new Promise((resolve, reject) => {\n console.log('内部promise');\n resolve();\n })\n .then(() => {\n console.log('内部第一个then');\n return Promise.resolve();\n })\n .then(() => {\n console.log('内部第二个then');\n })\n })\n .then(() => {\n console.log('外部第二个then');\n })\n .then(() => {\n console.log('外部第三个then');\n })\n```\n\n\n\n\n## 参考文章\n- [解析 Promise 原理，实现一个Promise](https://blog.csdn.net/u014775861/article/details/78030508)\n- [深度揭秘 Promise 微任务注册和执行过程](https://juejin.im/post/5dc028dcf265da4d4b5fe94f)\n- [Promise 执行过程的正确理解姿势](https://juejin.im/post/5dad3405f265da5bb252ff32)\n",{"_54":835,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/57/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/57/timeline",{"_54":838,"_56":57,"_58":839,"_60":840,"_62":841,"_64":842,"_66":843,"_68":844,"_70":845,"_72":846,"_74":847,"_107":848,"_120":121,"_122":26,"_123":-5,"_124":850,"_126":851,"_148":464,"_142":853,"_144":854,"_147":-5,"_151":152,"_153":855,"_158":-5,"_159":856,"_161":857,"_173":859,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/56","https://api.github.com/repos/pro-collection/interview-question/issues/56/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/56/comments","https://api.github.com/repos/pro-collection/interview-question/issues/56/events","https://github.com/pro-collection/interview-question/issues/56",1619142302,"I_kwDOJGDC6c5ggiae",56,"[ES6]模块与[CommonJS]模块的差异有哪些？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[849],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":852,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:14:01Z","2025-03-08T14:54:06Z",{"_155":141,"_156":141,"_157":141},"差异主要有如下几点：\r\n- CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，ES6静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。\r\n- CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。\r\n- CommonJS 加载的是整个模块，即将所有的接口全部加载进来，ES6 可以单独加载其中的某个接口（方法），\r\n- CommonJS this 指向当前模块，ES6 this 指向undefined\r\n\r\nCommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。\r\nES6 模块的运行机制与 CommonJS 不一样。\r\nJS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。\r\n等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。\r\nES6 模块不会缓存运行结果，而是动态地去被加载的模块取值，并且变量总是绑定其所在的模块。 \r\n\r\n\r\n-----------------------------------\r\n> 2023.08.23 补充\r\n\r\n下面是一个表格，展示了ES6模块与CommonJS模块之间的差异：\r\n\r\n| 特点 | ES6模块 | CommonJS模块 |\r\n|------------------------------|-------------------------------------------|-------------------------------------------|\r\n| 语法 | 使用`import`和`export`语法 | 使用`require`和`module.exports`语法 |\r\n| 动态导入 | 支持动态导入，可以根据条件导入不同的模块 | 不支持动态导入，导入的模块在脚本加载时确定 |\r\n| 导入和导出的类型 | 可以导入和导出变量、函数、类、默认导出等多种类型 | 只能导入和导出整个模块对象 |\r\n| 导入方式 | 可以使用命名导入和默认导入方式 | 只支持命名导入方式 |\r\n| 导出方式 | 可以使用命名导出和默认导出方式 | 只支持命名导出方式 |\r\n| 模块加载时机 | 在编译时就会生成所有模块的依赖关系，可以进行静态分析 | 在运行时加载模块，无法进行静态分析 |\r\n| 模块间的关系 | 每个ES6模块都有自己的作用域，相互之间没有依赖关系 | 模块之间共享相同的作用域，可以直接访问和修改导出的变量和函数 |\r\n| 浏览器支持 | 部分浏览器原生支持，可以使用Babel转译实现兼容性 | 不支持，需要使用工具如Browserify、Webpack进行转译和打包 |\r\n| Node.js使用 | 需要使用`--experimental-modules`标志启用ES模块支持 | 原生支持CommonJS模块 |\r\n\r\n请注意，这些是一般规则，具体的差异可能因为不同的运行环境和工具而有所不同。\r\n",{"_54":858,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/56/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/56/timeline",{"_54":861,"_56":57,"_58":862,"_60":863,"_62":864,"_64":865,"_66":866,"_68":867,"_70":868,"_72":869,"_74":870,"_107":871,"_120":121,"_122":26,"_123":-5,"_124":873,"_126":874,"_148":178,"_142":876,"_144":877,"_147":-5,"_151":152,"_153":878,"_158":-5,"_159":879,"_161":880,"_173":882,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/55","https://api.github.com/repos/pro-collection/interview-question/issues/55/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/55/comments","https://api.github.com/repos/pro-collection/interview-question/issues/55/events","https://github.com/pro-collection/interview-question/issues/55",1619141171,"I_kwDOJGDC6c5ggiIz",55,"常见清除浮动的解决方案有哪些",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[872],{"_66":775,"_68":776,"_54":777,"_113":778,"_115":779,"_117":26,"_118":780},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":875,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:13:18Z","2024-10-22T07:14:27Z",{"_155":141,"_156":141,"_157":141},"## 清除浮动的解决方案（以下提供了八种解决方式）\n\n### 1、利用div定义height\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。\n\n优点：简单、代码少、容易掌握\n\n缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题\n\n**建议：不推荐使用，只建议高度固定的布局时使用**\n\n### 2、结尾处加空div标签 clear:both\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度\n\n优点：简单、代码少、浏览器支持好、不容易出现怪问题\n\n缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好\n\n**建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法**\n\n### 3、父级div定义伪类:after 和 zoom\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题\n\n优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）\n\n缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。\n\n**建议：推荐使用，建议定义公共类，以减少CSS代码。**\n\n### 4、父级div定义 overflow:hidden\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度\n\n优点：简单、代码少、浏览器支持好\n\n缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。\n\n**建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。**\n\n### 5、父级div定义 overflow:auto\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度\n\n优点：简单、代码少、浏览器支持好\n\n缺点：内部宽高超过父级div时，会出现滚动条。\n\n**建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。**\n\n### 6、父级div 也一起浮动\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：所有代码一起浮动，就变成了一个整体\n\n优点：没有优点\n\n缺点：会产生新的浮动问题。\n\n**建议：不推荐使用，只作了解。**\n\n### 7、父级div定义 display:table\n```html\n\n

Left

Right

\n div2\n

\n```\n原理：将div属性变成表格\n\n优点：没有优点\n\n缺点：会产生新的未知问题。\n\n**建议：不推荐使用，只作了解。**\n\n### 8、结尾处加 br标签 clear:both\n\n```html\n\n

Left

Right

\n
\n

\n div2\n

\n```\n原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both\n\n**建议：不推荐使用，只作了解。**\n",{"_54":881,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/55/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/55/timeline",{"_54":884,"_56":57,"_58":885,"_60":886,"_62":887,"_64":888,"_66":889,"_68":890,"_70":891,"_72":892,"_74":893,"_107":894,"_120":121,"_122":26,"_123":-5,"_124":896,"_126":897,"_148":899,"_142":900,"_144":901,"_147":-5,"_151":152,"_153":902,"_158":-5,"_159":903,"_161":904,"_173":906,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/54","https://api.github.com/repos/pro-collection/interview-question/issues/54/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/54/comments","https://api.github.com/repos/pro-collection/interview-question/issues/54/events","https://github.com/pro-collection/interview-question/issues/54",1619140038,"I_kwDOJGDC6c5ggh3G",54,"请设计一个算法, 将两个有序数组合并为一个数组, 请不要使用concat以及sort方法",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[895],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":898,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},6,"2023-03-10T15:12:33Z","2025-02-20T08:33:01Z",{"_155":141,"_156":141,"_157":141},"可以使用双指针法来合并两个有序数组。具体步骤如下：\r\n\r\n1. 创建一个新的数组来存储合并后的结果。\r\n2. 初始化两个指针，分别指向两个数组的起始位置。\r\n3. 比较两个指针所指向的元素，将较小的元素添加到新数组中，并将对应指针向后移动一位。\r\n4. 重复步骤3，直到其中一个数组的指针超出了数组的范围。\r\n5. 将剩余的未合并元素直接添加到新数组的末尾。\r\n6. 返回新数组作为结果。\r\n\r\n以下是用 JavaScript 实现的代码：\r\n\r\n```javascript\r\nfunction mergeArrays(arr1, arr2) {\r\n const merged = [];\r\n let i = 0; // 第一个数组的指针\r\n let j = 0; // 第二个数组的指针\r\n\r\n while (i < arr1.length && j < arr2.length) {\r\n if (arr1[i] <= arr2[j]) {\r\n merged.push(arr1[i]);\r\n i++;\r\n } else {\r\n merged.push(arr2[j]);\r\n j++;\r\n }\r\n }\r\n\r\n // 将剩余的未合并元素添加到新数组的末尾\r\n while (i < arr1.length) {\r\n merged.push(arr1[i]);\r\n i++;\r\n }\r\n\r\n while (j < arr2.length) {\r\n merged.push(arr2[j]);\r\n j++;\r\n }\r\n\r\n return merged;\r\n}\r\n\r\n// 示例\r\nconst arr1 = [1, 3, 5, 7];\r\nconst arr2 = [2, 4, 6, 8];\r\nconst mergedArray = mergeArrays(arr1, arr2);\r\nconsole.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6, 7, 8]\r\n```\r\n\r\n这个算法的时间复杂度是 O(n)，其中 n 是两个数组的总长度。",{"_54":905,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/54/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/54/timeline",{"_54":908,"_56":57,"_58":909,"_60":910,"_62":911,"_64":912,"_66":913,"_68":914,"_70":915,"_72":916,"_74":917,"_107":918,"_120":121,"_122":26,"_123":-5,"_124":920,"_126":921,"_148":141,"_142":923,"_144":924,"_147":-5,"_151":152,"_153":925,"_158":-5,"_159":926,"_161":927,"_173":929,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/53","https://api.github.com/repos/pro-collection/interview-question/issues/53/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/53/comments","https://api.github.com/repos/pro-collection/interview-question/issues/53/events","https://github.com/pro-collection/interview-question/issues/53",1619133128,"I_kwDOJGDC6c5gggLI",53,"手写实现函数节流",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[919],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":922,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-10T15:08:23Z","2023-03-10T15:08:24Z",{"_155":141,"_156":141,"_157":141},"## 实现函数节流\n\n[https://blog.csdn.net/beijiyang999/article/details/79836463](https://blog.csdn.net/beijiyang999/article/details/79836463)\n\n### 函数节流是什么\n**对于持续触发的事件，规定一个间隔时间（n秒），每隔一段只能执行一次。** \n函数防抖（debounce）与本篇说的函数节流（throttle）相似又不同。 \n函数防抖一般是指对于**在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。** \n二者都能防止函数过于频繁的调用。 \n区别在于，当事件持续被触发，如果触发时间间隔短于规定的等待时间（n秒），那么 \n- 函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；\n- 函数节流的情况下，函数将每个 n 秒执行一次。\n\n\n### 函数节流的实现\n函数节流的实现有不同的思路，可以通过**时间戳实现**，也可以通过**定时器实现**。\n\n### 时间戳\n#### 思路\n只要触发，就用 Date 获取现在的时间，与上一次的时间比较。 \n如果时间差大于了规定的等待时间，就可以执行一次； \n目标函数执行以后，就更新 previous 值，确保它是“上一次”的时间。 \n否则就等下一次触发时继续比较。 \n\n#### 代码如下\n```javascript\nfunction throttle(func, wait) {\n let previous = 0;\n return function() {\n let now = +new Date();\n let context = this;\n if (now - previous >= wait) {\n func.apply(context, arguments);\n previous = now; // 执行后更新 previous 值\n }\n }\n}\ncontainer.onmousemove = throttle(doSomething, 1000);\n```\n\n### 定时器\n#### 思路\n用定时器实现时间间隔。 \n当定时器不存在，说明可以执行函数，于是定义一个定时器来向任务队列注册目标函数 \n目标函数执行后设置保存定时器ID变量为空 \n当定时器已经被定义，说明已经在等待过程中。则等待下次触发事件时再进行查看。 \n\n#### 代码\n```javascript\nfunction throttle(func, wait) {\n let time, context;\n return function(){\n context = this;\n if(!time){\n time = setTimeout(function(){\n func.apply(context, arguments);\n time = null\n }, wait)\n }\n }\n}\n```\n\n\n### 效果差异\n一个周期内： \n时间戳实现的：先执行目标函数，后等待规定的时间段； \n计时器实现的：先等待够规定时间，再执行。即停止触发后，若定时器已经在任务队列里注册了目标函数，它也会执行最后一次。 \n\n### 优化：二者结合\n结合二者，实现一次触发，两次执行（先立即执行，结尾也有执行） \n```javascript\nfunction throttle (func, wait) {\n let previous = 0;\n let context, args, time;\n return function(){\n let now = +new Date();\n context = this;\n args = arguments;\n if(now - previous >= wait){ //当距上一次执行的间隔大于规定，可以直接执行\n func.apply(context, args);\n previous = now\n } else { // 否则继续等待，结尾执行一次\n if(time) clearTimeout(time);\n time = setTimeout(\n () => {\n func.apply(context, args);\n time = null\n }\n , wait)\n }\n }\n}\n```\n\n#### 问题\n已经实现了一次触发，两次执行，有头有尾的效果。 \n问题是，上一个周期的“尾”和下一个周期的“头”之间，失去了对时间间隔的控制。 \n\n#### 修复\n仔细查看，发现问题出在了 previous 的设置上。 \n仅仅在“可直接执行”的情况下更新了 previous 值，在通过计时器注册入任务队列后执行的情况下，忽略了 previous 的更新。\n导致了 previous 的值不再是“上一次执行”时的时间，而是“上一次直接可执行情况下执行”的时间。 \n同时，引入变量 remaining 表示还需要等待的时间，来让尾部那一次的执行也符合时间间隔。\n\n#### 完善后代码：\n```javascript\nfunction throttle(func, wait) {\n let previous = 0;\n let context, args, time, remaining;\n\n return function() {\n let now = +new Date();\n context = this;\n args = arguments;\n remaining = wait - (now - previous); // 剩余的还需要等待的时间\n if (remaining <= 0) {\n func.apply(context, args);\n previous = now // 重置“上一次执行”的时间\n } else {\n if (time) {\n clearTimeout(time);\n }\n time = setTimeout(() => {\n func.apply(context, args);\n time = null;\n previous = +new Date() // 重置“上一次执行”的时间\n }, remaining) //等待还需等待的时间\n }\n };\n}\n```\n\n\n#### 更进一步的优化\n参考 underscore 与 mqyqingfeng ，实现是否启用第一次 / 尾部最后一次计时回调的执行。 \n设置 options 作为第三个参数，然后根据传的值判断到底哪种效果，约定: \n- leading：false 表示禁用第一次执行\n- trailing: false 表示禁用停止触发的回调\n```javascript\nfunction throttle(func, wait, options) {\n let time, context, args, result;\n let previous = 0;\n if (!options) options = {};\n\n let later = function () {\n previous = options.leading === false ? 0 : new Date().getTime();\n time = null;\n func.apply(context, args);\n if (!time) context = args = null;\n };\n\n let throttled = function () {\n let now = new Date().getTime();\n if (!previous && options.leading === false) previous = now;\n let remaining = wait - (now - previous);\n context = this;\n args = arguments;\n if (remaining <= 0 || remaining > wait) {\n if (time) {\n clearTimeout(time);\n time = null;\n }\n previous = now;\n func.apply(context, args);\n if (!time) context = args = null;\n } else if (!time && options.trailing !== false) {\n time = setTimeout(later, remaining);\n }\n };\n return throttled;\n}\n```\n\n如果想添加一个取消功能：\n```javascript\nthrottled.cancel = function() {\n clearTimeout(time);\n time = null;\n previous = 0;\n}\n```\n",{"_54":928,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/53/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/53/timeline",{"_54":931,"_56":57,"_58":932,"_60":933,"_62":934,"_64":935,"_66":936,"_68":937,"_70":938,"_72":939,"_74":940,"_107":941,"_120":121,"_122":26,"_123":-5,"_124":943,"_126":944,"_148":141,"_142":946,"_144":947,"_147":-5,"_151":152,"_153":948,"_158":-5,"_159":949,"_161":950,"_173":952,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/52","https://api.github.com/repos/pro-collection/interview-question/issues/52/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/52/comments","https://api.github.com/repos/pro-collection/interview-question/issues/52/events","https://github.com/pro-collection/interview-question/issues/52",1617580053,"I_kwDOJGDC6c5galAV",52,"process.nextTick, setTimeout 以及 setImmediate 三者的执行顺序？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[942],{"_66":262,"_68":263,"_54":264,"_113":265,"_115":266,"_117":26,"_118":267},[],{"_54":459,"_64":460,"_58":461,"_66":462,"_68":463,"_70":464,"_72":465,"_118":466,"_136":945,"_138":468,"_140":141,"_120":121,"_142":469,"_144":470,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-09T16:30:06Z","2023-03-09T16:30:07Z",{"_155":141,"_156":141,"_157":141},"## process.nextTick, setTimeout 以及 setImmediate 三者的执行顺序\n[前端碎碎念之 nextTick, setTimeout 以及 setImmediate 三者的执行顺序](https://segmentfault.com/a/1190000008595101)\n\n首先来看一个非常经典的例子：\n```javascript\nsetImmediate(function(){\n console.log(1); // 7\n},0);\nsetTimeout(function(){\n console.log(2); // 8\n},0);\nnew Promise(function(resolve){\n console.log(3); // 1\n resolve();\n console.log(4); // 2\n}).then(function(){\n console.log(5); // 6\n});\nconsole.log(6); // 3\nprocess.nextTick(function(){\n console.log(7); // 5\n});\nconsole.log(8); // 4\n//输出结果是3 4 6 8 7 5 2 1\n```\n\nmacro-task(宏任务): script (整体代码)，setTimeout, setInterval, setImmediate, I/O, UI rendering. \nmicro-task(微任务): process.nextTick, Promise(原生)，Object.observe，MutationObserver\n\n除了script整体代码，micro-task的任务优先级高于macro-task的任务优先级。其中，script(整体代码) ，可以理解为待执行的所有代码。\n\n所以执行顺序如下：\n\n第一步. script整体代码被执行，执行过程为\n- 创建setImmediate macro-task\n- 创建setTimeout macro-task\n- 创建micro-task Promise.then 的回调，并执行script console.log(3); resolve(); console.log(4); 此时输出3和4，虽然resolve调用了，执行了但是整体代码还没执行完，无法进入Promise.then 流程。\n- console.log(6)输出6\n- process.nextTick 创建micro-task\n- console.log(8) 输出8\n\n第一个过程过后，已经输出了3 4 6 8\n\n第二步. 由于其他micro-task 的优先级高于macro-task。 \n此时micro-task 中有两个任务按照优先级 process.nextTick 高于 Promise。 \n所以先输出7，再输出5\n\n第三步，micro-task 任务列表已经执行完毕，家下来执行macro-task. 由于setTimeout的优先级高于setIImmediate，所以先输出2，再输出1。\n\n整个过程描述起来像是同步操作，实际上是基于Event Loop的事件循环。 \n关于micro-task和macro-task的执行顺序，可看下面这个例子(来自《深入浅出Node.js》)：\n```javascript\n//加入两个nextTick的回调函数\nprocess.nextTick(function () {\n console.log('nextTick延迟执行1');\n});\nprocess.nextTick(function () { \n console.log('nextTick延迟执行2');\n});\n// 加入两个setImmediate()的回调函数\nsetImmediate(function () {\n console.log('setImmediate延迟执行1'); \n // 进入下次循环 \n process.nextTick(function () {\n console.log('强势插入');\n });\n});\nsetImmediate(function () {\n console.log('setImmediate延迟执行2'); \n});\nconsole.log('正常执行');\n```\n书中给出的执行结果是：\n```\n正常执行\nnextTick延迟执行1\nnextTick延迟执行2\nsetImmediate延迟执行1\n强势插入\nsetImmediate延迟执行2\n```\n朴老师写那本书的时候，node最新版本为0.10.13，而我的版本是6.x\n\n老版本的Node会优先执行process.nextTick。\n当process.nextTick队列执行完后再执行一个setImmediate任务。\n然后再次回到新的事件循环。所以执行完第一个setImmediate后，队列里只剩下第一个setImmediate里的process.nextTick和第二个setImmediate。\n所以process.nextTick会先执行。\n\n而在新版的Node中，process.nextTick执行完后，会循环遍历setImmediate，将setImmediate都执行完毕后再跳出循环。\n所以两个setImmediate执行完后队列里只剩下第一个setImmediate里的process.nextTick。最后输出\"强势插入\"。\n\n\n**关于优先级的另一个比较清晰的版本：** \n观察者优先级 \n在每次轮训检查中，各观察者的优先级分别是： \nidle观察者 > I/O观察者 > check观察者。 \nidle观察者：process.nextTick \nI/O观察者：一般性的I/O回调，如网络，文件，数据库I/O等 \ncheck观察者：setImmediate，setTimeout\n\n**setImmediate 和 setTimeout 的优先级** \n看下面这个例子：\n```javascript\nsetImmediate(function () {\n console.log('1'); \n});\nsetTimeout(function () {\n console.log('2'); \n}, 0);\nconsole.log('3');\n//输出结果是3 2 1\n```\n\n我们知道现在HTML5规定setTimeout的最小间隔时间是4ms，也就是说0实际上也会别默认设置为最小值4ms。我们把这个延迟加大 \n上面说到setTimeout 的优先级比 setImmediate的高，其实这种说法是有条件的。 \n再看下面这个例子，为setTimeout增加了一个延迟20ms的时间：\n```javascript\nsetImmediate(function () {\n console.log('1'); \n});\nsetTimeout(function () {\n console.log('2'); \n}, 20);\nconsole.log('3');\n//输出结果是3 2 1\n```\n\n试试打印出这个程序的执行时间：\n```javascript\nvar t1 = +new Date();\nsetImmediate(function () {\n console.log('1'); \n});\nsetTimeout(function () {\n console.log('2'); \n},20);\n\nconsole.log('3');\nvar t2 = +new Date();\nconsole.log('time: ' + (t2 - t1));\n//输出\n3 \ntime: 23 \n2 \n1\n```\n\n程序执行用了23ms, 也就是说，在script(整体代码)执行完之前，setTimeout已经过时了，所以当进入macro-task的时候setTimeout依然优先于setImmediate执行。如果我们把这个值调大一点呢？\n```javascript\nvar t1 = +new Date();\nsetImmediate(function () {\n console.log('1'); \n});\nsetTimeout(function () {\n console.log('2'); \n},30);\n\nconsole.log('3');\nvar t2 = +new Date();\nconsole.log('time: ' + (t2 - t1));\n//输出\n3 \ntime: 23 \n1 \n2\n```\nsetImmediate早于setTimeout执行了，因为进入macro-task 循环的时候，setTimeout的定时器还没到。 \n以上实验是基于6.6.0版本Node.js测试，实际上在碰到类似这种问题的时候，最好的办法是参考标准，并查阅源码，不能死记概念和顺序，因为标准也是会变的。包括此文也是自学总结，经供参考。 \n",{"_54":951,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/52/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/52/timeline","pagination",{"_955":956,"_155":957},"value",31,32,"actionData","errors"]