阶段三模块一 直播

1.只需了解原理即可
2.很少用设计模式
3.
4.SSR首次渲染比SPA快

面试题

12
解：模拟call
|| 如果是0 或者 ‘’ 也会返回window
？？就不会（只判断undefined或null）19 20的新语法





也就是

call的小bug，传参情况


自己写的call




由于js天生缺陷，原生的没有报错，自己写的报错了。只有对象有属性和方法 数值是没有的。

处理问题：这里只判断一种原始值，转换成包装类型

snabbdom的案例演示

附一个在线敲码的
https://codesandbox.io/dashboard/home?workspace=021542f0-c6be-4b7a-bcbc-dd00947d10c4

自己下源码看

虚拟DOM回顾

• 浏览器环境转换成dom，node服务端渲染可以转换成html字符串，移动端转换成原生的文本框啥的，这就是虚拟dom最大的好处-跨平台。
• 性能-首次渲染会创建很多额外的对象（开始耗时），但界面复杂时，会进行虚拟dom对比（避免不必要的渲染，浏览器重新渲染（绘图）是非常耗时的）。

svelet框架

因为有人说虚拟dom不好，创建额外的对象，还进行复杂的diff算法。

体验和vue差不多，没有虚拟dom，因为直接变成js，没有diff算法，应该会比vue这些框架快点。

虚拟dom过程回顾

• 算法-解决问题的
• 例如排序算法，排序算法有很多，但都是对数据进行排序，只是看哪种效率好，根据不同的计算机处理速度也不一样，所以有一个统一描述名称，时间复杂度
• 时间复杂度- O(n^3) ^表示立方, O表示时间算法复杂度 O（1） 一次就可以获得结果 O（n）要n次才能获得结果 这样就能明显感觉到O1的算法明显比On好。
  
  找差异是N，3的平方次，然后又要变量到真实dom，这样就变成了O（n^3）3次方了。
  这种时间复杂度是非常恐怖的，例如
  网页中100个节点， 那么需要对比 100的三次方 需要对比100W次

snabdom中对算法进行了优化


只对比同级节点

把同级比较完才差异直接更新到dom上，所以这里的时间复杂度是O（n），也就是有n个节点进行n次操作即可

例如有100个节点，100次操作即可完成。

key的场景

案例

没有key，那么key是一样的，li标签页一样，那么diff会认为这是相同的节点。



绑定key，问题就解决了


场景2

重新创建就会有过度的效果。

更改第一个元素，没有设置key

跳过3次左右到 li内容对比

f11进入方法看对比过程


节点或key相同，会进行patchVnode 继续对比
patchVnode中会看节点是否定义，没有定义就进行children的比较



更新的内容，li还是复用之前的。
索引++ 继续比较下一个节点

没有key的情况，即使内容不相同，也会认为li是相同节点，li中的内容不一样，只会更新内容，li还是重用的。

更改第一个元素，设置key

跳过三次 找到li




children不相等 进入updatechildern，继续比较文本节点，





总结有key新增和移除了节点（在最后一步还需要变量，时间复杂度更高），似乎慢了，没有key只更新了文本节点（文档上也说了不设置key就最大重用元素）。
以上因为太多 很多漏记，练习一定要调试走一遍。