前端基础知识整理汇总（下）

 // 定义

    
 const RenderProps = props => <div>
    
    {props.children(props)}
    
 </div>
    
  
    
 // 调用
    
 <RenderProps>
    
     {() => <>Hello RenderProps</>}
    
 </RenderProps>

复制

2.通过props中的任何函数, 自行定义传入内容

 // 定义

    
 const LoginForm = props => {
    
   const flag = false;
    
   const allProps = { flag, ...props };
    
  
    
   if (flag) {
    
     return <>{props.login(allProps)}</>
    
   } else {
    
     return <>{props.notLogin(allProps)}</>
    
   }
    
 }
    
  
    
 // 调用
    
 <LoginForm
    
   login={() => <h1>LOGIN</h1>}
    
   noLogin={() => <h1>NOT LOGIN</h1>}
    
 />

优点：

1. 兼容新标准
   2.无需担心Props命名冲突，在 render 函数中仅提取必要的 state
   3.避免不必要的组件加深层级
   4.以动态方式构建 render props 模式，并确保所有更改均在 render 阶段触发

HOC: 接受一个组件作为参数，返回一个新的组件的函数。

 class Home extends React.Component {

    
   // UI
    
 }
    
  
    
 export default Connect()(Home);

由于每次都会生成新的组件对象，在React中这使得diff和状态复用变得不可行。因此，在render方法中无法对高阶组件进行包装处理；然而这也不适合实现动态传参的需求

优点：
1、兼容新标准 2、便于复用，在这种情况下HOC采用纯函数式结构并返回组件对象 3、能够处理多参数输入从而扩大了适用范围 缺点：
1、当多个HOC协同工作时很难追踪子组件所使用的props具体由哪个HOC传递 2、过多嵌套可能导致相同名称的props出现从而引发冲突 3、这种做法可能导致大量不必要的组件生成进而增加了层级复杂度

总体而言，在Puru组件上添加状态与高级组件类似，并且与React生命周期对应。

React 通信

React中的数据流呈现单向传输的特点，在实际应用中最为常见的方式是通过props从父组件传递到子组件。

• 父子之间信息传递：接收 props 参数
• 子组件与父组件之间进行数据交互时，可以通过将一个函数传递给父组件，并在该函数回调时获取子组件发送回来的值。
• 父亲节点与孙子节点之间的数据传输依赖于 context 引用机制，并通过 React.createContext() 方法创建上下文。
• 兄弟节点之间可以通过特定机制进行交互和数据交换。

1、被一个相同的父组件所承载的信息可以通过props或context这两种方式传递。
2、通过引入特定的全局机制来实现信息传递。
3、采用发布与订阅相结合的模式

react合成事件

React 合成事件（SyntheticEvent）是一种模拟原生 DOM 事件能力的特殊对象，在该框架中实现了对所有原生DOM事件功能的支持。其作用相当于将各种浏览器原生事件进行跨域统一处理。

为什么要使用合成事件？

1. 进行浏览器兼容，实现更好的跨平台 React 采用的是顶层事件代理机制，能够保证冒泡一致性，可以跨浏览器执行。React 提供的合成事件用来抹平不同浏览器事件对象之间的差异，将不同平台事件模拟合成事件。
2. 避免垃圾回收 事件对象可能会被频繁创建和回收，因此 React 引入事件池，在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉，而是存放进一个数组中，当事件触发，就从这个数组中弹出，避免频繁地去创建和销毁(垃圾回收)。
3. 方便事件统一管理和事务机制

实现机制 在 React 中，“合成事件”会通过委托事件的方式绑定到 document 对象上，并在组件卸载环节自动销毁绑定的事件。

当真实 DOM 元素发生 event 时,该 event 会被向上级对象发送,从而触发 React 的 event 处理流程;因此,该 event 将优先执行原生 event,随后才会处理 React 所做的后续操作;最终,真正的 event 将会在 document 对象上进行挂载并执行。为了保证良好的 event 处理效果,建议避免同时使用合成和原生 event;在执行 stopPropagation 方法时,则会导致其他 React event 无法被注册。因为所有 element 的 event 将无法向上级对象发送,导致这些 React events 被跳过而不再响应。

由合成的系列事件组成的集合 合成型的行为集是一种用于提升 React 应用程序性能的技术方案。该系统通过整合多种类型的合成性行为来提升效率。所有这些行为被组织在一个集中化的处理框架中，并且可以根据其性质和应用场景被分类分配到相应的区域。

react 虚拟dom

什么是虚拟dom?

在 React 应用程序中，默认情况下 render 方法生成的是轻量级的数据结构而非实际存在的 DOM 结构。为了实现高效的DOM操作，在React内部引入了一种称为 virtual DOM 的概念。virtual DOM 机制是基于 JS 的 Object 对象来模拟实际存在的 DOM 节点的一种高效方式。这种机制允许开发者仅管理轻量级的对象即可完成复杂的DOM交互逻辑。

虚拟DOM被认为是React的一大创新，并不仅支持批处理操作（batching），还具备高效的差分算法（diff）。其差分算法的时间复杂度较传统方法显著降低至O(n)，提升了性能。

batching(批量处理) 的核心概念是：不管您在 React 的事件处理程序或同步生命周期方法中执行多少次 setState 操作（即 state setter），它都会整合这些操作成为一个更新过程，并最终只触发一次渲染事件。

虚拟 DOM 与 原生 DOM

如果不使用Virtual DOM，则必须直接操作原生DOM。当处理一个长数据表且所有内容发生改变时，默认重置innerHTML是可以接受的。然而，在单行数据变化的情况下，并非如此。这将导致资源浪费。

在内联样式（innerHTML）与虚拟DOM的渲染效率对比中，在内联样式（innerHTML）的渲染流程中包含解析html字符串并生成相应的DOM节点；而虚拟DOM（Virtual DOM）的渲染流程则涉及生成虚拟DOM结构、计算差异并应用必要的DOM更新。

相比而言，在纯 JavaScript 层面上实现 Virtual DOM 的渲染操作及其差分运算确实相对缓慢；尽管如此，在纯 JavaScript 层面上实现 Virtual DOM 的渲染操作及其差分运算确实相对缓慢；相较于后续的DOM操作而言，在成本上仍然低得多；无论是基于 JavaScript 的直接计算还是基于DOM的操作方式，“内HTML”的总计算量始终与整个界面的大小密切相关；而 Virtual DOM 的具体实现则仅受 JavaScript 逻辑以及界面尺寸的影响

虚拟 DOM 与 MVVM

与 React 比较而言，在实现功能时，
其他基于 MVVM 的框架（如 Angular、Knockout、Vue 和 Avalon）普遍采用了相似的设计理念。
这些框架主要通过 Directive/Binding 对象来实现对数据动态绑定，
实时跟踪数据变化，并保留对相应 DOM 元素的实际引用。
其变化检测机制侧重于数据层面，
而 React 则侧重于 DOM 结构的变化检测。

MVVM 的性能也因变动检测的实现原理而有所不同：Angular 基于脏检查；Knockout/Vue/Avalon 采用依赖收集。

• 数据清理：通过scope.digest(watcher.count)对监视器计数进行数据整理，并执行必要的DOM更新操作。
  • 依赖管理：根据数据变化情况重新收集相关依赖项，并执行必要的DOM更新操作。

Angular的效率问题主要体现在任何一次的小规模变更都会带来与依赖项数量相关的性能开销；然而，在数据发生大幅变化时（例如所有字段同步修改），Angular的表现反而更加突出。具体而言，在初始化阶段以及数据发生变化的过程中（即发生rebuild事件），都需要重新收集相关依赖项以维护应用的状态一致性；然而，在实际开发中这一额外开销通常在数据更新量较小的情况下可忽略不计，在处理大规模数据时则会变得明显。

性能比较

当比较系统性能时, 需要能够区分出初始渲染阶段, 小批量数据更新阶段以及大数据量更新阶段的不同特点. 虚拟DOM技术, 以及 dirty check MVVM模式与 data collection MVVM模式在各自适用的场景下展现出各自的特点, 并对相应的优化策略提出独特的需求.

Virtual DOM旨在提升用于轻量级更新操作时的性能表现，并对这些场景进行了专门针对轻量级更新操作进行的性能优化措施。例如SCU和immutable datasets。

• 初始渲染：基于虚 Dom 的初始渲染阶段包括对脏节点及其相关依存项的汇总。
• 小量数据更新：在完成虚拟 Dom 构建后会触发对 dirty check 结点及其相关依存项的汇总。
• 大量数据更新：当系统处理大规模数据时，在执行 dirty check 结点及相应依存项汇总的基础上进行性能调优。

diff 算法

传统diff算法采用逐层遍历的方式对节点逐一比对其功能进行分析。该算法的时间复杂度为O(n³)，其中n代表树中节点的数量。当处理包含1000个节点的数据时（即n=1000），该算法需要进行约十亿次比较操作（即约1×10⁹次运算）。这样的计算量对于现代前端开发来说无疑是一个巨大的挑战。

diff 算法主要包括几个步骤：

• 以 JavaScript 对象的形式描绘 DOM 树的架构。
  随后基于此对象生成真实完整的 DOM 结构体.
  该结构体会被 .NET 框架整合并插入到当前文档中。
• (在)状态发生变更时 (当状态变更的时候)
  系统将重构一棵新的对象树.
  (NET系统会对比新旧两棵树以获取差异信息)
  (将差异信息应用)后
  系统会更新视图界面。

diff 策略

React 通过制定大胆的diff策略，将diff算法复杂度从 O(n^3) 转换成 O(n) 。

• 该策略以层次区分的方式实现了对树状差异的优化。
• 基于同一类别构建相似的树形架构，并根据不同类别形成独特的架构体系后，则可实现组件差异的有效处理。
• 该方法通过为每个元素赋予独特的标识符来完成元素差异的具体处理。

tree diff（层级比较）

React 在处理树结构时采用层次化对比方式。在每一轮对比过程中仅会考察当前层级的所有节点。一旦识别出某一层级的某个节点不存在，则其所在的整个子树结构将被彻底移除而不参与后续检查。无需继续深入对比后续层次。

这样仅需对树进行单次遍历即可完成整个DOM树结构的比较分析。 在节点跨层级移动的情况下，并未执行任何移动操作而是生成以该节点为新根节点的新子树结构 这种行为会显著影响React应用性能 因此React官方强烈建议避免在DOM层次上进行跨层级操作。

首先将同一父节点下的所有子节点进行逐一比对；
随后识别节点的类型；
当遇到组件时，请执行 Component Diff操作；
而如果涉及标签或元素，则执行 Element Diff操作。

在开发组件时，维持稳定的DOM架构有助于提高运行效率。具体而言，在无需实际增减DOM节点的情况下，可以通过CSS隐现或显式相关节点来实现功能变更。

component diff（组件比较）

• 如果是同一类型的组件，则沿用原有方法进行 virtual DOM tree 的对比和评估。
• 如果不是，则将该组件标记为 dirty component，并替换其所有子节点；例如，在一个元素从
  更变为 时, 系统会启动完整的重建流程以确保数据一致性。

对于同一类型的组件来说，在某些情况下其Virtual DOM并不会发生任何变化；如果能够明确这一点的话，则可以节省大量diff运算的时间。因此，在React中提供了一个函数shouldComponentUpdate()用于判断该组件是否需要进行更新和diff运算。

考虑两个类型虽有差异但结构上具有一致性的组件时，则不会对两者进行结构对比，并且会对整个组件的所有内容进行替代操作。一般情况下，在不同类型的 component 中发现具有相同DOM树的机会极为罕见；因此，在实际开发过程中受到这类极端因素显著影响的可能性微乎其微。

element diff (元素比较)

对于所有处于同一层级的节点而言，在React diff中包含了以下三种节点动作：INSERT (插入)、MOVE (迁移) 和 REMOVE (去除)。

• INSERT_MARKUP：对于新增的组件类型不在现有集合中，则表示这是一个全新的节点，并需对该节点进行添加处理。
• MOVE_EXISTING：当旧集合中存在新组件类型且element是可更新的数据时，则应采取移动操作，并可利用原有的DOM结构进行复用。
• REMOVE_NODE：若旧组件类型存在于新的组件集中但对应元素不同或旧组件未被包含在内，则需执行删除操作。

 <ul>

    
   <li>Duke</li>
    
   <li>Villanova</li>
    
 </ul>
    
  
    
 <ul>
    
   <li>Connecticut</li>
    
   <li>Duke</li>
    
   <li>Villanova</li>
    
 </ul>

React 并不负责保有 Duke 和 Villanova 的列表项, 而会重构每个子元素, 也不会执行任何 DOM 移动操作.

key 优化

为了解决该问题, React 通过在同级组内分配唯一的 key 值来实现了对同组子节点的区分。

当子元素包含 key 属性时，在 React 中会根据该 key 值匹配原有树结构中的相应子元素以及最新的树结构中的对应子元素。如果发现有完全相同的节点存在，则无需进行任何新建或删除操作；只需将旧集合中的所有节点位置更新至新集合对应的相对位置即可完成数据迁移操作。

• 在开发过程中，在一定程度上会影响 React 的渲染性能的情况下，请尽量避免类似于将最后一个节点移动到列表首部的操作。
• 每个 key 在全局范围内不需要是唯一的，在列表中只需保证其唯一性即可。
• Key 应具备稳定性、可预测性以及在列表中具有唯一性。
• 不稳定的 key（如通过 Math.random() 生成）会导致许多组件实例和 DOM 节点被不必要地重新创建。
• 这样的操作可能导致性能下降以及子组件的状态丢失。

react与vue区别

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

Vue利用获取器/修改器以及一些函数的劫持来精确感知数据的变化。 React主要依靠引用比较的方法（称为diff）来实现数据同步。 如果未进行优化处理，则会导致频繁不必要的VDOM重构。

2. 数据流不同

在Vue1.0版本中可实现两种双向往绑定关系：父级组件与其子组件间可实现代际属性的双向往；而组件与DOM元素间也可通过v-model机制实现双向往。但在Vue 2.x版本中发现父级组件与其子组件间的双向往已经被断开了（但提供了便捷的解决方案以利用事件机制来间接完成）。React框架并不支持双向往接合关系，默认情况下采用了单向的数据流动模式，并将其称为onChange或setState模式。

3. HoC和mixins

Vue整合不同功能的方式是以mixin的形式实现，在Vue中，默认组件被视为一个封装好的函数实体，并不等同于我们在定义组件时传递的对象或调用的函数。 React整合不同功能的方式是以High Orders Components（High Order Components, HoC）的形式实现。

4. 模板渲染方式的不同

在功能机制上存在差异，在开发体验方面也有所不同。 React框架采用JavaScript扩展语言JSX来进行模版渲染, 而Vue则采用了基于扩展型HTML语法实现模版编译的技术。 在功能机制上存在差异, React框架利用内置JavaScript API来处理常见的语法元素, 包括插值运算、条件判断以及循环操作等基础功能模块; 而Vue则是将组件脚本与数据逻辑分离, 在独立于组件代码的功能模块中进行管理, 这种做法使得其模版系统的控制权更加集中化。

举个例子来说明 React 的优点：React 的库函数具有闭合特性，在 render 调用时，默认情况下即可直接调用这些导入的组件。然而，在 Vue 中则不同，在使用模板时由于模板中的数据必须通过 this 进行一次额外的传递，在导入一个组件完成之后（即完成 import），还需在 components 中进行相应的声明。

5. 渲染过程不同

该技术能够更快速地计算出Virtual DOM的差异, 其原因是这种技术会追踪每个组件的所有依赖关系, 因此无需完整重构整个层级结构. 当React的状态发生变化时, 默认情况下所有子组件都会被重新渲染. 可通过shouldComponentUpdate生命周期方法来实现此功能, 并认为这一机制属于一种默认优化.

6. 框架本质不同

Vue的核心是MVVM框架，并源自MVC架构的发展；React属于前端组件化框架，并源自于后端组件化的演变。

性能优化

1. 静态资源使用 CDN

CDN是一种部署于全球不同地理区域的 Web 服务集合体，在这个系统中每个节点都是一个被双引号引用的"服务器"。随着单个服务器与目标用户的物理距离越拉越大，在该系统中的延迟会随之增加

2. 无阻塞

头部内联的样式和脚本可能会对页面渲染产生影响，在实际开发中发现将样式代码置于页面头部区域时采用链接的方式引入会导致性能下降；同时建议将前端代码逻辑放置于页面底部，并采用异步加载策略进行导入。

3. 压缩文件

压缩文件可以减少文件下载时间。

1. webpack支持配置可选的压缩工具集合以实现文件大小优化。JavaScript语言对应的工具是UglifyPlugin,CSS开发中使用MiniCssExtractPlugin,而HTML则采用 HtmlClassLoader。
2. 为实现高效的网络传输,建议启用gzip压缩策略。可以通过在HTTP头部设置Accept-Encoding字段并附加gzip标识符的方式实现这一功能。

4. 图片优化

1. 懒加载图片技术
2. 响应式的图像：当屏幕尺寸变化时, 图像会自动调整以适应显示环境。
3. 减小图像文件体积：主要采用两种方式实现。第一种方法是借助于 image-webpack-loader 插件；第二种则是通过网络资源进行文件压缩处理。

5. 减少重绘重排

• 简化 CSS 选择器的复杂性程度
• 通过运用 transform 和 opacity 属性的变化来实现动画效果
• 在 JavaScript 编程中修改样式时，请尽量避免直接编写样式的代码片段，并采用替换 class 的方式完成风格变更。
• 完成一系列 DOM 元素的操作任务后，在修改完成后将它们正确地带回当前文档流是必要的。为此建议采用隐藏元素的方式（如设置 display属性为 none）或者利用 DocumentFragment 来临时存储和管理这些元素。

6. 使用 requestAnimationFrame 来实现视觉变化

window.requestAnimationFrame()向浏览器发出指令——指示你需要执行一个动画，并且要求在下次重绘事件发生前更新动画内容。此方法需接收一个特定事件作为触发条件，并将在下一个绘制过程中被触发以完成更新操作。

7. webpack 打包， 添加文件缓存

将index.html配置为no-cache以便在每次请求时都会比较index.html文件是否有变化。如果没有变化则会使用缓存而如果有变化则会采用新的index.html文件。其余所有文件均采用长时间缓存策略前端代码采用webpack进行打包以确保只有内容发生变动时才会生成新的文件名。对于index.html的设置具体操作如下：设置no-cache选项后系统会在每次请求时执行差异校验如果检测到无差异则直接调用已有的缓存内容否则就会下载并处理最新的index.html文件以确保数据的一致性和最新性。

• maxAge字段用于配置缓存的有效时长（以秒为单位）。它决定了从何时起开始失效。
  • 指定no_cache表示客户端能够存储并访问本地资源。
    在访问任何从本地加载的资源时必须先验证其有效性和完整性。
    一旦达到此阈值（以秒计），相应的缓存将被视为已失效。
    在达到该时长之前（以秒计），浏览器将不再提交新的请求

输入url后发生了什么

1. DNS功能用于域名解析;
2. 创建TCP连接通常涉及三次握手流程；
3. 向服务器发送HTTP请求；
4. 服务器接收并处理客户端发送的HTTP请求；
5. 返回相应的HTTP响应信息；
6. 完成四次握手后释放相关的TCP连接资源；
7. 网页浏览器根据预设的CSS样式表进行页面内容的显示与布局安排；
8. 根据CSS样式表进行页面布局渲染；

1. DNS域名解析：拿到服务器ip

当客户端接收到输入的域名地址时

2. 建立TCP链接：客户端链接服务器

TCP提供了稳定的服务机制，在数据传输中采用分组方式，并基于连接建立。
在客户端与服务器之间的TCP通信中不可忽视的是『三次握手』的过程。
通过这一过程（即即『3次握手』），双方能够清晰地确认收发操作均正常进行

客户端发送带有SYN标志的第一阶段数据包至服务端。
服务端接收到该数据包后立即返回带有SYN/ACK标志的确认应答数据包。
最终客户端发送带有ACK标志的第三阶段应答数据包完成双方通信握手流程，
实现连接建立。

SYN被定义为设置连接初始序号的一种方法；ACK的作用是确认并确保确认号码的有效性；RST命令用于重置当前的数据连接状态；FIN标志表示发送方已停止传输本报文段的信息

客户端：“你好，在家不。” -- SYN 服务端：“在的，你来吧。” -- SYN + ACK 客户端：“好嘞。” -- ACK

3. 发送HTTP请求

4. 服务器处理请求

5. 返回响应结果

6. 关闭TCP连接（需要4次握手）

为防止两端的服务器和客户端在没有请求或相应数据传输的情况下发生资源消耗，在任何一方均可主动发送关闭指令的情形下触发。

当连接关闭时（即客户端向服务器发出FIN信号）时

客户端："伙伴们"没有需要传输的数据了"咱们就先把连接关闭了吧" -- FIN+seq 服务端："收到回应"接收到您的信息后"检查一下我们这边是否有数据" -- ACK+seq+ack 服务端："伙伴们"同样没有需要传输的数据了"咱们就可以放心地关闭连接了" - FIN+ACK+seq+ack 客户端："明白了" -- ACK+seq+ack

7. 浏览器解析HTML

在解析网页内容时

以解析的方式处理HTML内容而创建DOM数据结构；对CSS文件进行解析以构建CSS对象模型（CSSOM）数据结构；随后利用DOM与CSSOM数据结构构建出一系列渲染 tree实例；值得注意的是，在此过程中构建出的渲染 tree与传统的DOM tree存在显著差异；特别地，在这种情况下构建出的渲染 tree并未包含那些通常位于head标记或设置为不可见（如display属性设为none）而无需在页面上显示的内容

在处理过程中，并非所有步骤都是连续完成的；例如，在同时处理CSS样式时，并行加载HTML文件是可行的；然而，在执行JavaScript脚本时，则会暂停后续HTML文件的解析工作而导致资源被阻塞。

8. 浏览器渲染页面

基于渲染树结构计算CSS样式方案，则包括每个节点在页面中的尺寸、位置以及其他几何属性等细节信息。而HTML默认采用流式布局方式，在此情况下通过JavaScript会影响DOM的外观样式进而包括调整尺寸与位置等参数。最终浏览器按照各节点的位置与样式进行绘制并呈现给用户。

replaint: 定义为在屏幕上更新绘制区域的操作，在此操作中不会修改布局结构。例如当某个CSS属性值发生变化时（如背景色），其他元素的位置与几何尺寸将保持不变。

reflow: 表示由于元素的几何尺寸发生了变化而导致需要重新计算渲染树。

参考： 细说浏览器输入URL后发生了什么 浏览器输入 URL 后发生了什么？

前端路由

什么是路由

路由是用于连接后端服务器的一种方式，在其作用范围内通过不同路径发起请求获取不同资源。 路由的概念最初出现在后端系统中，在前后未整合阶段通常由后端负责管理路由逻辑；当客户端发送请求时，服务器会解析请求中的URL路径，并根据该路径返回相应的网页或资源信息。

前端路由

Ajax是一种支持非阻塞式数据传输的技术框架；其全称为Asynchronous JavaScript And XML；它被浏览器采用以实现异步加载。

当时，在Ajax尚未出现的时候，传统的网页大多直接返回HTML内容。这种情况下，在用户每次进行页面更新时都需要手动刷新页面以查看最新内容，并因此影响了用户体验。针对这一问题，在20世纪90年代末期提出了 Ajax（异步加载方案）。有了Ajax之后，在不中断正常操作的情况下让用户无需每次都手动刷新页面即可获取最新内容。随后逐渐演变成单页应用（SPAs）技术。

SPA 中用户的操作由 JavaScript 控制以修改 HTML 内容，并未改变其 URL 未发生更改的情况。这导致了以下两个相关问题：

• SPA 没有存储用户的操作记录能力，在刷新、前进或后退的过程中也无法呈现用户的真实预期信息。
• 虽然由于业务不同而存在多种页面展示形式（每个页面都有其特定的功能和作用），然而只有一个唯一 URL地址不利于搜索引擎优化，并且导致搜索引擎难以有效地进行索引。

前端路由就是为了解决上述问题而出现的。

前端路由的实现方式

前端路由的具体实现过程通常包括判断 url 是否发生变动，并在此基础上捕获访问的 url 地址进行解析以匹配相应的路由规则。具体实现时通常会采用以下两种策略：

1. Hash模式

hash 包括 url 后面的 # 符号及其后续的所有字符。当 hash 值发生变化时，并不会引发浏览器向服务器发送请求。由于浏览器无需发送请求，因此也不会重新加载页面。

...的更改会导致对应的...事件被触发，并且可以通过该事件来关注和监控...的变化情况。

 // 监听hash变化，点击浏览器的前进后退会触发

    
 window.onhashchange = function() { ... }
    
  
    
 window.addEventListener('hashchange', function(event) { ...}, false);

2.History 模式

在早期阶段（即在HTML5出现之前），浏览器已经具备了 history 对象的功能。然而，在早期版本的历史功能中主要功能就是实现多页面的跳转：

 history.go(-1);       // 后退一页

    
 history.go(2);        // 前进两页
    
 history.forward();    // 前进一页
    
 history.back();       // 后退一页

在 HTML5 的规范中，history 新增了几个 API:

 history.pushState();   // 向当前浏览器会话的历史堆栈中添加一个状态

    
 history.replaceState();// 修改了当前的历史记录项（不是新建一个）
    
 history.state          // 返回一个表示历史堆栈顶部的状态的值

复制

因为JavaScript中的history对象提供了pushState()和replaceState()方法来管理URL，并且这些方法不会触发浏览器的历史重放机制，在HTML5标准下的历史对象（history）具备实现前端路由能力的条件。window对象通过onpopstate事件来监控历史栈的变化状态，在历史信息发生变更时会自动触发这一事件。

调用history.pushState()或history.replaceState()的行为不会导致popstate事件的发生。仅在执行浏览器相关操作时才会触发该事件。例如，在执行history.back()或history.forward()操作后会触发window.onpopstate事件。

 // 历史栈改变

    
 window.onpopstate = function() { ... }

请注意：调用pushState()方法时不会触发hashchange事件, 因为即使新旧URL仅在锚的数据上存在差异

请注意：调用pushState()方法时不会触发hashchange事件, 因为即使新旧URL仅在锚的数据上存在差异

两种模式对比

前端路由实践

Vue Router 和 React Router 均基于前端路由技术开发而成，并采用了相似的核心逻辑架构~在 React Router 中常用的 History 类型主要包括以下几种形式：

• browserHistory: 通过 History API 来管理 URL 的功能，在支持 HTML5 的设备上实现这一功能。
• hashHistory: 基于 hash 标识符的部分创建路由路径，在旧版浏览器中提供这一服务。
• createMemoryHistory: 避免与地址栏交互，在内存环境中运行历史记录功能，并广泛应用于测试和移动应用开发（如 React Native）。

Babel Plugin与preset区别

Babel是一种代码转换工具，在具体应用中例如将ES6代码转换为相应的ES5版本，并非直接复制粘贴原生语法；同时也能处理诸如将JSX语法转化为JavaScript语言的实际场景下使用；通过这种方式开发者能够提前体验到新的JavaScript特性

    原始代码 --> [Babel Plugin] --> 转换后的代码

Plugin

核心在于通过Babel插件（plugin）来实现代码转换功能。该工具通常会以最小的力量进行拆分以便开发者按需引入这些小模块 这不仅提升了性能还增强了系统的可扩展性。例如 在将JavaScript中的Class转义为 bow-tie语法时 Babel官方提供了超过18个专门的小模块供开发者选择使用。如果开发者只想体验Arrow Function的特点只需引入transform-es2015-arrow-functions这个插件就足够了 而无需加载整个 ES6 生态系统

Preset

本质上，可以把Babel Preset看作是Babel Plugin的一个集合体。如果需要将所有的ES6代码转换为ES5，并且逐个插件导入的方式效率相对较低时，则可以选择使用Babel Preset。例如，babel-preset-es2015这个版本就集成了与ES6转换相关的全部插件。

Plugin与Preset执行顺序

可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。

1. 在完成所有Plugin的全部操作后, 随后进行Preset的处理.
2. 多个Plugin, 按照声明次序依次进行操作.
3. 多个Preset, 依照声明次序相反的流程依次处理.

比如.babelrc配置如下，那么执行的顺序为：

1. Plugin：transform-react-jsx、transform-async-to-generator
2. Preset：es2016、es2015

 {

    
   "presets": [ 
    
     "es2015",
    
     "es2016"    
    
   ],
    
   "plugins": [ 
    
     "transform-react-jsx",
    
     "transform-async-to-generator"
    
   ]
    
 }

怎样开发和部署前端代码

为增强网站整体性能优化策略 采用集群部署方案 将静态资源与动态网页分别实施集群部署策略 将这些静态资源分配至CDN服务器进行存储 相应地 在线访问的网页内容将直接指向本地存储路径 在维护系统时 将会同步更新所有相关的在线数据 同时 相应地 更新HTML文件中的引用信息

在同时修改页面结构与样式时，并更新了相应的静态资源URL地址，请问现在需要考虑的是如何安排代码发布顺序？究竟是先上传页面文件还是优先上传静态资源文件？

1. 先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。
2. 先部署资源，再部署页面：在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。

这一类怪异的问题主要源于资源的 覆盖性质，在待发布资源被用来覆盖已发布资源的情况下，则会出现这一类问题。

轻而易举地解决这个问题吗？答案是可以做到的就是完成一种非重叠式的更新策略。具体来说就是通过提取所有文档摘要的信息并将这些信息应用到相应的资源文件重命名过程中。随后将这些摘要信息整合到相应的资源文件发布路径中这样就可以确保当有内容发生修改时它们会被独立地以新的版本在云端线上平台重新发布而不影响原有数据的安全性和完整性

在上线的过程中,首先进行全量静态资源的部署;随后进行灰度化的页面部署;最终实现了问题的有效解决.

大公司的静态资源优化方案，基本上要实现这么几个东西：

1. 设置长期本地缓存配置以降低带宽消耗并提升服务器性能。
2. 基于内容摘要作为缓存更新依据确保精确的缓存控制。
3. 采用静态资源CDN部署方案以提升网络请求效率。
4. 通过调整资源发布路径实现非覆盖式发布确保平滑升级过程。

大数相加

 function add(a, b){

    
    const maxLength = Math.max(a.length, b.length);
    
    a = a.padStart(maxLength, 0);
    
    b = b.padStart(maxLength, 0);
    
    let t = 0;
    
    let f = 0; 
    
    let sum = "";
    
  
    
    for (let i = maxLength - 1; i >= 0; i--) {
    
       t = parseInt(a[i]) + parseInt(b[i]) + f;
    
       f = Math.floor(t / 10);
    
       sum = `${t % 10}${sum}`;
    
    }
    
    if (f === 1){
    
       sum = "1" + sum;
    
    }
    
    return sum;
    
 }

斐波那契数列求和

 function fib(n) {

    
     if (n <= 0) {
    
     return 0;
    
     }
    
     let n1 = 1;
    
     let n2 = 1;
    
     let sum = 1;
    
     for(let i = 3; i <= n; i++) {
    
     [n1, n2] = [n2, sum];
    
     sum = n1 + n2;
    
     }
    
     return sum;
    
 };