react 16做了哪些更新

  • react作为一个ui库，将前端编程由传统的命令式编程转变为申明式编程，即所谓的数据驱动视图，但如果简略粗犷的操作，比方讲生成的html间接采纳innerHtml替换，会带来重绘重排之类的性能问题。为了尽量进步性能，React团队引入了虚构dom，即采纳js对象来形容dom树，通过比照前后两次的虚构对象，来找到最小的dom操作（vdom diff），以此进步性能。
  • 下面提到的reactDom diff，在react 16之前，这个过程咱们称之为stack reconciler，它是一个递归的过程，在树很深的时候，单次diff工夫过长会造成JS线程继续被占用，用户交互响应通畅，页面渲染会呈现显著的卡顿，这在古代前端是一个致命的问题。所以为了解决这种问题，react 团队对整个架构进行了调整，引入了fiber架构，将以前的stack reconciler替换为fiber reconciler。采纳增量式渲染。引入了工作优先级(expiration)和requestIdleCallback的循环调度算法，简略来说就是将以前的一根筋diff更新，首先拆分成两个阶段：reconciliation与commit;第一个reconciliation阶段是可打断的，被拆分成一个个的小工作（fiber），在每一侦的渲染闲暇期做小工作diff。而后是commit阶段，这个阶段是不拆分且不能打断的，将diff节点的effectTag一口气更新到页面上。
  • 因为reconciliation是能够被打断的，且存在工作优先级的问题，所以会导致commit前的一些生命周期函数屡次被执行， 如componentWillMount、componentWillReceiveProps 和 componetWillUpdate，但react官网已申明这些问题，并将其标记为unsafe，在React17中将会移除
  • 因为每次唤起更新是从根节点(RootFiber)开始，为了更好的节点复用与性能优化。在react中始终存workInprogressTree(future vdom) 与 oldTree（current vdom）两个链表，两个链表互相援用。这无形中又解决了另一个问题，当workInprogressTree生成报错时，这时也不会导致页面渲染解体，而只是更新失败,页面依然还在

React hooks原理

在React 16前，函数式组件不能领有状态治理？因为16以前只有类组件有对应的实例，而16当前Fiber 架构的呈现，让每一个节点都领有对应的实例，也就领有了保留状态的能力。

Hooks的实质就是闭包和两级链表。

闭包是指有权拜访另一个函数作用域中变量或办法的函数，创立闭包的形式就是在一个函数内创立闭包函数，通过闭包函数拜访这个函数的局部变量, 利用闭包能够冲破作用链域的个性，将函数外部的变量和办法传递到内部。

hooks 链表

一个组件蕴含的hooks 以链表的模式存储在fiber节点的memoizedState属性上，currentHook链表就是以后正在遍历的fiber节点的。nextCurrentHook 就是行将被增加到正在遍历fiber节点的hooks的新链表

let currentHook: Hook | null = null;let nextCurrentHook: Hook | null = null;type Hooks = {    memoizedState: any, // 指向以后渲染节点 Fiber  baseState: any, // 初始化 initialState， 最新的state  baseUpdate: Update<any> | null,  // 以后须要更新的 Update ，每次更新完之后，会赋值上一个 update，不便 react 在渲染谬误的边缘，数据回溯  queue: UpdateQueue<any> | null,// 能够让state变动的，即update或dispach产生的update  next: Hook | null, // link 到下一个 hooks}

state链表

其实state 链表不是hooks独有的，类操作的setState也存在。

  • memoizedState，cursor 是存在哪里的？如何和每个函数组件一一对应的？
    react 会生成一棵组件树（或Fiber 单链表），树中每个节点对应了一个组件，hooks 的数据就作为组件的一个信息，存储在这些节点上，随同组件一起出世，一起死亡。
  • 为什么只能在函数最外层调用 Hook？

    memoizedState 是按 hook定义的程序来搁置数据的，如果 hook 程序变动，memoizedState 并不会感知到。

  • 自定义的 Hook 是如何影响应用它的函数组件的？
    共享同一个 memoizedState，共享同一个程序。
  • “Capture Value” 个性是如何产生的？
    每一次 ReRender 的时候，都是从新去执行函数组件了，对于之前曾经执行过的函数组件，并不会做任何操作。

react setState 异步更新

setState 实现原理

setState 通过一个队列机制来实现 state 更新，当执行 setState() 时，会将须要更新的 state 浅合并后放入 状态队列，而不会立刻更新 state，队列机制能够高效的批量更新 state。如果不通过setState，间接批改this.state 的值，则不会放入状态队列，当下一次调用 setState 对状态队列进行合并时，之前对 this.state 的批改将会被疏忽，造成无奈预知的谬误。

setState()有的同步有的异步？

在React中， 如果是由React引发的事件处理（比方通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener间接增加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

起因： 在React的setState函数实现中，会依据一个变量isBatchingUpdates判断是间接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就示意setState会同步更新this.state，然而，有一个函数batchedUpdates，这个函数会把isBatchingUpdates批改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的结果，就是由React管制的事件处理过程setState不会同步更新this.state。

setState的“异步”并不是说外部由异步代码实现，其实自身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用程序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，模式了所谓的“异步”，能够通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的后果。

调用危险

当调用 setState 时，实际上是会执行 enqueueSetState 办法，并会对 partialState 及 _pendingStateQueue 队列进行合并操作，最终通过 enqueueUpdate 执行 state 更新。

而 performUpdateIfNecessary 获取 _pendingElement、 _pendingStateQueue、_pendingForceUpdate，并调用 reaciveComponent 和 updateComponent 来进行组件更新。

但，如果在 shouldComponentUpdate 或 componentWillUpdate 办法里调用 this.setState 办法，就会造成解体。 这是因为在 shouldComponentUpdate 或 componentWillUpdate 办法里调用 this.setState 时，this._pendingStateQueue!=null，则 performUpdateIfNecessary 办法就会调用 updateComponent 办法进行组件更新，而 updateComponent 办法又会调用 shouldComponentUpdate和componentWillUpdate 办法，因而造成循环调用，使得浏览器内存占满后解体。

React Fiber

掉帧：在页面元素很多，且须要频繁刷新的场景下，React 15 会呈现掉帧的景象，其根本原因，是大量的同步计算工作阻塞了浏览器的 UI 渲染。默认状况下，JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中，他们之间是互斥的关系。如果 JS 运算继续占用主线程，页面就没法失去及时的更新。当咱们调用setState更新页面的时候，React 会遍历利用的所有节点，计算出差别，而后再更新 UI，整个过程不能被打断。如果页面元素很多，整个过程占用的机会就可能超过 16 毫秒，就容易呈现掉帧的景象。

如何解决主线程长时间被 JS 运算？将JS运算切割为多个步骤，分批实现。在实现一部分工作之后，将控制权交回给浏览器，让浏览器有工夫进行页面的渲染。等浏览器忙完之后，再持续之前未实现的工作。

React 15 及以下版本通过递归的形式进行渲染，应用的是 JS 引擎本身的函数调用栈，它会始终执行到栈空为止。而Fiber实现了本人的组件调用栈，它以链表的模式遍历组件树，能够灵便的暂停、持续和抛弃执行的工作。实现形式是应用了浏览器的requestIdleCallback

window.requestIdleCallback()会在浏览器闲暇期间顺次调用函数，这就能够让开发者在主事件循环中执行后盾或低优先级的工作，而且不会对像动画和用户交互这些提早触发但要害的事件产生影响。函数个别会按先进先调用的程序执行，除非函数在浏览器调用它之前就到了它的超时工夫。

React 框架外部的运作能够分为 3 层：

  • Virtual DOM 层，形容页面长什么样。
  • Reconciler 层，负责调用组件生命周期办法，进行 Diff 运算等。
  • Renderer 层，依据不同的平台，渲染出相应的页面，比拟常见的是 ReactDOM 和 ReactNative。

Fiber 表征reconciliation阶段所能拆分的最小工作单元，其实指的是一种链表树，它能够用一个纯 JS 对象来示意：

const fiber = {  stateNode: {},    // 节点实例  child: {},        // 子节点  sibling: {},      // 兄弟节点  return: {},       // 示意解决实现后返回后果所要合并的指标，通常指向父节点};

Reconciler区别

  • 以前的 Reconciler 被命名为Stack Reconciler。Stack Reconciler 运作的过程是不能被打断的，必须一条道走到黑；
  • Fiber Reconciler 每执行一段时间，都会将控制权交回给浏览器，能够分段执行；

从Stack Reconciler到Fiber Reconciler，源码层面其实就是干了一件递归改循环的事件。

scheduling(调度)

scheduling(调度)是fiber reconciliation的一个过程，次要是进行任务分配，达到分段执行。工作的优先级有六种：

  • synchronous，与之前的Stack Reconciler操作一样，同步执行
  • task，在next tick之前执行
  • animation，下一帧之前执行
  • high，在不久的未来立刻执行
  • low，略微提早执行也没关系
  • offscreen，下一次render时或scroll时才执行

优先级高的工作（如键盘输入）能够打断优先级低的工作（如Diff）的执行，从而更快的失效。

Fiber Reconciler 在执行过程中，会分为 2 个阶段：

  • 阶段一，生成 Fiber 树，得出须要更新的节点信息。这一步是一个渐进的过程，能够被打断。
  • 阶段二，将须要更新的节点一次过批量更新，这个过程不能被打断。

阶段一可被打断的个性，让优先级更高的工作先执行，从框架层面大大降低了页面掉帧的概率。

参考：

React Fiber 原理介绍

React Fiber

HOC 与render props区别

Render Props: 把将要包裹的组件作为props属性传入，而后容器组件调用这个属性，并向其传参

实现形式：

  1. 通过props.children(props)，props.children返回的是UI元素。<RenderProps> JSX 标签中的所有内容都会作为一个 children prop 传递给 RenderProps组件。因为 RenderProps 将 {props.children} 渲染在一个 <div> 中，被传递的这些子组件最终都会呈现在输入后果中。
// 定义const RenderProps = props => <div>   {props.children(props)}</div>// 调用<RenderProps>    {() => <>Hello RenderProps</>}</RenderProps>
  1. 通过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、反对ES6
2、不必放心props命名问题，在render函数中只取须要的state
3、不会产生无用的组件加深层级
4、render props模式的构建都是动静的，所有的扭转都在render中触发，能够更好的利用组件内的生命周期。

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

class Home extends React.Component {  // UI}export default Connect()(Home);

高阶组件因为每次都会返回一个新的组件，对于react来说，这是不利于diff和状态复用的，所以高阶组件的包装不能在render 办法中进行，而只能像下面那样在组件申明时包裹，这样也就不利于动静传参。

长处：
1、反对ES6
2、复用性强，HOC为纯函数且返回值为组件，能够多层嵌套
3、反对传入多个参数，加强了适用范围
毛病：
1、当多个HOC一起应用时，无奈直接判断子组件的props是哪个HOC负责传递的
2、多个组件嵌套，容易产生同样名称的props
3、HOC可能会产生许多无用的组件，加深了组件的层级

总的来说，render props其实和高阶组件相似，就是在puru component上减少state，响应react的生命周期。

React 通信

react的数据流是单向的，最常见的就是通过props由父组件向子组件传值。

  • 父向子通信： 传入props
  • 子向父通信：父组件向子组件传一个函数，而后通过这个函数的回调，拿到子组件传过来的值
  • 父向孙通信：利用context传值。React.createContext()
  • 兄弟间通信：

1、找一个雷同的父组件，既能够用props传递数据，也能够用context的形式来传递数据。
2、用一些全局机制去实现通信，比方redux等
3、公布订阅模式

react合成事件

React 合成事件（SyntheticEvent）是 React 模仿原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。

为什么要应用合成事件？

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

实现原理
在 React 中，“合成事件”会以事件委托形式绑定在 document 对象上，并在组件卸载（unmount）阶段主动销毁绑定的事件。

合成事件和原生事件

当实在 DOM 元素触发事件，会冒泡到 document 对象后，再解决 React 事件；所以会先执行原生事件，而后解决 React 事件；最初真正执行 document 上挂载的事件。

合成事件和原生事件最好不要混用。 原生事件中如果执行了stopPropagation办法，则会导致其余React事件生效。因为所有元素的事件将无奈冒泡到document上，所有的 React 事件都将无奈被注册。

合成事件的事件池

合成事件对象池，是 React 事件零碎提供的一种性能优化形式。合成事件对象在事件池对立治理，不同类型的合成事件具备不同的事件池。

react与vue区别

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

Vue通过 getter/setter以及一些函数的劫持，能准确晓得数据变动。
React默认是通过比拟援用的形式（diff）进行的，如果不优化可能导致大量不必要的VDOM的从新渲染。

2. 数据流不同

Vue1.0中能够实现两种双向绑定：父子组件之间props能够双向绑定；组件与DOM之间能够通过v-model双向绑定。
Vue2.x中父子组件之间不能双向绑定了（然而提供了一个语法糖主动帮你通过事件的形式批改)。
React始终不反对双向绑定，提倡的是单向数据流，称之为onChange/setState()模式。

3. HoC和mixins

Vue组合不同性能的形式是通过mixin，Vue中组件是一个被包装的函数，并不简略的就是咱们定义组件的时候传入的对象或者函数。
React组合不同性能的形式是通过HoC(高阶组件）。

4. 模板渲染形式的不同

模板的语法不同，React是通过JSX渲染模板， Vue是通过一种拓展的HTML语法进行渲染。
模板的原理不同，React通过原生JS实现模板中的常见语法，比方插值，条件，循环等。而Vue是在和组件JS代码拆散的独自的模板中，通过指令来实现的，比方 v-if 。

举个例子，阐明React的益处：react中render函数是反对闭包个性的，所以咱们import的组件在render中能够间接调用。然而在Vue中，因为模板中应用的数据都必须挂在 this 上进行一次直达，所以咱们import 一个组件完了之后，还须要在 components 中再申明下。

5. 渲染过程不同

Vue能够更快地计算出Virtual DOM的差别，这是因为它会跟踪每一个组件的依赖关系，不须要从新渲染整个组件树。
React当状态被扭转时，全副子组件都会从新渲染。通过shouldComponentUpdate这个生命周期办法能够进行管制，但Vue将此视为默认的优化。

6. 框架实质不同

Vue实质是MVVM框架，由MVC倒退而来；
React是前端组件化框架，由后端组件化发展而来。

性能优化

1. 动态资源应用 CDN

CDN是一组散布在多个不同地理位置的 Web 服务器。当服务器离用户越远时，提早越高。

2. 无阻塞

头部内联的款式和脚本会阻塞页面的渲染，款式放在头部并应用link形式引入，脚本放在尾部并应用异步形式加载

3. 压缩文件

压缩文件能够缩小文件下载工夫。

  1. 在 webpack 能够应用如下插件进行压缩：
  • JavaScript：UglifyPlugin
  • CSS ：MiniCssExtractPlugin
  • HTML：HtmlWebpackPlugin
  1. 应用 gzip 压缩。通过向 HTTP 申请头中的 Accept-Encoding 头增加 gzip 标识来开启这一性能。

4. 图片优化

  1. 图片懒加载
  2. 响应式图片：浏览器依据屏幕大小主动加载适合的图片。
  3. 升高图片品质：办法有两种，一是通过 webpack 插件 image-webpack-loader，二是通过在线网站进行压缩。

5. 缩小重绘重排

  • 升高 CSS 选择器的复杂性
  • 应用 transform 和 opacity 属性更改来实现动画
  • 用 JavaScript 批改款式时，最好不要间接写款式，而是替换 class 来扭转款式。
  • 如果要对 DOM 元素执行一系列操作，能够将 DOM 元素脱离文档流，批改实现后，再将它带回文档。举荐应用暗藏元素（display:none）或文档碎片（DocumentFragement），都能很好的实现这个计划。

6. 应用 requestAnimationFrame 来实现视觉变动

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

index.html 设置成 no-cache，这样每次申请的时候都会比对一下 index.html 文件有没变动，如果没变动就应用缓存，有变动就应用新的 index.html 文件。
其余所有文件一律应用长缓存，例如设置成缓存一年 maxAge: 1000 * 60 * 60 * 24 * 365。
前端代码应用 webpack 打包，依据文件内容生成对应的文件名，每次从新打包时只有内容产生了变动，文件名才会发生变化。

  • max-age: 设置缓存存储的最大周期，超过这个工夫缓存被认为过期(单位秒)。在这个工夫前，浏览器读取文件不会收回新申请，而是间接应用缓存。
  • 指定 no-cache 示意客户端能够缓存资源，每次应用缓存资源前都必须从新验证其有效性

输出url后产生了什么

  1. DNS域名解析；
  2. 建设TCP连贯（三次握手）；
  3. 发送HTTP申请；
  4. 服务器解决申请；
  5. 返回响应后果；
  6. 敞开TCP连贯（四次握手）；
  7. 浏览器解析HTML；
  8. 浏览器布局渲染；

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

客户端收到你输出的域名地址后，它首先去找本地的hosts文件，查看在该文件中是否有相应的域名、IP对应关系，如果有，则向其IP地址发送申请，如果没有，再去找DNS服务器。

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报文给对方来表示同意当初敞开连贯，因而，己方ACK和FIN个别都会离开发送，从而导致多了一次。

客户端：“兄弟，我这边没数据要传了，咱敞开连贯吧。” -- FIN + seq
服务端：“收到，我看看我这边有木有数据了。” -- ACK + seq + ack
服务端：“兄弟，我这边也没数据要传你了，咱能够敞开连贯了。” - FIN + ACK + seq + ack
客户端：“好嘞。” -- ACK + seq + ack

7. 浏览器解析HTML

浏览器须要加载解析的不仅仅是HTML，还包含CSS、JS，以及还要加载图片、视频等其余媒体资源。

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSSOM树，而后通过DOM树和CSSPOM树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不用显示的节点。

浏览器的解析过程并非是串连进行的，比方在解析CSS的同时，能够持续加载解析HTML，但在解析执行JS脚本时，会进行解析后续HTML，会呈现阻塞问题。

8. 浏览器渲染页面

依据渲染树布局，计算CSS款式，即每个节点在页面中的大小和地位等几何信息。HTML默认是流式布局的，CSS和js会突破这种布局，扭转DOM的外观款式以及大小和地位。最初浏览器绘制各个节点，将页面展现给用户。

replaint：屏幕的一部分重画，不影响整体布局，比方某个CSS的背景色变了，但元素的几何尺寸和地位不变。

reflow： 意味着元素的几何尺寸变了，须要从新计算渲染树。

参考：

细说浏览器输出URL后产生了什么

浏览器输出 URL 后产生了什么？

Babel Plugin与preset区别

Babel是代码转换器，比方将ES6转成ES5，或者将JSX转成JS等。借助Babel，开发者能够提前用上新的JS个性。

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

Plugin

实现Babel代码转换性能的外围，就是Babel插件（plugin）。Babel插件个别尽可能拆成小的力度，开发者能够按需引进, 既进步了性能，也进步了扩展性。比方对ES6转ES5的性能，Babel官网拆成了20+个插件。开发者想要体验ES6的箭头函数个性，那只须要引入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"  ]}

webpack hash区别

hash个别是联合CDN缓存来应用，通过webpack构建之后，生成对应文件名主动带上对应的MD5值。如果文件内容扭转的话，那么对应文件哈希值也会扭转，对应的HTML援用的URL地址也会扭转，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。

  • hash

hash是跟整个我的项目的构建相干，只有我的项目里有文件更改，整个我的项目构建的hash值都会更改。同一次构建过程中生成的哈希都是一样的。

output:{  path:path.join(__dirname, '/dist'),  filename: 'bundle.[name].[hash].js',}
  • chunkhash

依据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。把一些公共库和程序入口文件辨别开，独自打包构建，接着咱们采纳chunkhash的形式生成哈希值，那么只有咱们不改变公共库的代码，就能够保障其哈希值不会受影响。

output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[chunkhash].js',}

采纳chunkhash，我的项目主入口文件Index.js及其对应的依赖文件Index.css因为被打包在同一个模块，共用雷同的chunkhash。因为公共库是不同的模块，有独自的chunkhash。所以Index文件的更改不会影响公共库。如果index.js更改了代码，css未扭转，因为该模块产生了扭转，导致css文件会反复构建。

  • contenthash

依据文件内容创立出惟一 hash。当文件内容发生变化时，[contenthash] 才会发生变化。

output: {  filename: '[name].[contenthash].js',  chunkFilename: '[name].[contenthash].js',  path: path.resolve(__dirname, '../dist'),}

typeof 如何判断的

js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息：

对象： 000
浮点数： 010
字符串： 100
布尔： 110
整数： 1
null：所有机器码均为0
undefined：用 −2^30 整数来示意

// JavaScript 诞生以来便如此typeof null === 'object';

在 JavaScript 最后的实现中，JavaScript 中的值是由一个示意类型的标签和理论数据值示意的。对象的类型标签是 0。因为 null 代表的是空指针（大多数平台下值为 0x00），因而，null 的类型标签是 0，typeof null 也因而返回 "object"。

怎么开发和部署前端代码

为了进一步晋升网站性能，会把动态资源和动静网页分集群部署，动态资源会被部署到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;};