Vue.js系列：patch
节点的patch（补丁）操作，是虚拟dom核心中的核心,就是对比出新旧节点中，变化了的那些部分。本质上来讲就三种情况：创建节点、删除节点和修改需要更新的节点。
创建节点，两种情况。
当oldVnode中不存在但是vnode中存在的某些节点时，需要创建新节点
当新旧节点是完全不同的节点时，比如新节点时一个text，但是旧节点是一个div。此时需要删除旧的创建新的。
删除节点：上面提了不赘述
当两个节点是同一节点的时候，才需要进行更新节点的操作
3.1 首先判断新旧节点是否为如下所示的静态节点：
<p>asdasdasd</p>
所谓的静态节点就是不存在状态的标签节点。此时，直接跳过，因为他不会变化。
3.2 新节点是否为文本节点3.2.1 新节点是文本节点： 旧节点有children删children，有text覆盖更新3.2.2 新节点不是文本节点，是元素节点3.2.2.1 新节点有children3.2.2.1.1 旧节点无children：遍历新节点children挨个添加3.2.2.1.2 旧节点有children： Diff后论3.2.2.2 新 ...
Vue.js系列：虚拟dom
首先开宗明义，为什么要用虚拟DOM？理论上来讲，任何状态改变后，我们完全可以粗暴的根据当前的状态，生成对应的dom，就像jquery时代那样。但是设想一个场景：有一个ul下面绑着是个li标签。我们可能只是改变了其中的一个li，就是说此时，我们只需要更新那个变化了的li即可，而不需要费劲的旧dom全删了然后再一个个重新创建一遍。虚拟DOM就是为了解决这个问题，本质上做了两件事情：
提供与真实dom节点对应的虚拟节点vnode（就是一个对象）
每次状态变化后，生成新的vnode，然后通过算法对新旧vnode对比，找出变化了的更新即可。重在性能优化，这也是为什么这些框架如此流行。
那么具体，什么是虚拟DOM(Vnode)？DOM元素有元素节点（div）、文本节点（text）、注释节点等。vnode实际上就是这些节点的ADT（抽象数据类型）。举例解释：
<p>asdasdasd</p>
const vnode = {
tag: 'p',
data: {...} // 比如class、style等
children: [... ...
Vue.js系列：对象的变化侦测
对于对象属性的变化侦测，是vue响应式的核心。其本质需要实现的功能：当改变对象某属性值的时候，我们需要捕捉到这个变化。那么vue是怎么做到的？defineProperty
前端目前三大框架三分天下，实现响应式的方式却各有不同。angular、react属于”pull（拉）“，而vue则属于”push（推）“。两者的区别在于，拉的方式是被动的，推的方式则是主动的。当我们改变了某个对象的某个值之后,对于前者而言，框架能够知道,某些状态发生了变化但是不知道具体谁发生了变化，所以此时会暴力的对比找出变化的状态，而对于后者而言，当属性值改变后，会把这个改变了的状态主动告诉框架。然后框架去通知这个状态的所有依赖。这就是为什么vue的响应式被称之为“细粒度”的响应式。
具体实现：
const definePropertyReactive = (obj, key, val) => {
Object.defineProperty(obj, key, {
get() {
console.log('val>>', val)
return va ...
Vue.js系列：序章
毕业到现在快两年了，职业生涯中的项目基本都是基于vue2开发的。一直以来，注重的都是业务功能的实现，却很少关注其底层的逻辑特性。从本文开始，我会通过手头的资料，对vue2以及vue3，做一些备忘录，重点记录下其实现的基本逻辑，以及自己对其的思考。同时，因为我们也都知道，vue2.0版本，将于本年年底，也就是2023年的12月份停止维护，也算是个人对其的一个致敬吧。
vue这种框架出现的结果，就是将以前jquery那样的命令式操作dom的方式—>声明式的操作dom，翻译成人话就是：数据驱动视图，数据变，视图自动的变。同时视图由于用户的操作变化，也会更新数据。至于怎么生成节点插入节点等dom操作，不再关心，也无需关心。
举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="add">+</button>
<button id="sub">-</button> ...
JS的转折分界: ES6
不管有没有系统的去学习ES6相关的概念，但我相信，在日常开发中，都或多或少的使用到了相关方法。笔者一直很纳闷，事实上ES6从发布至今也蛮长时间了，但是面试的时候总会有面试官问这么个问题：ES6有什么新的特性。。。。事实上这是因为该版本,对于js这门语言而言,具有里程碑的意义.那么本文尝试着将最重大的改动梳理梳理.
首当其冲的必定是let、const块级作用域声明方式。同var相比两个不同。块级作用域能够屏蔽var的变量提升，将变量的生命周期局限在块中。本质讲，var所谓的变量提升指的是用其声明的变量，会自动提升到作用域的顶部。const f = function () {
if (false) {
let name = '1234'
//var name = '1234'
}
console.log('name:', name)
}
f()
用var声明的name，打印是undefined，而用let打印的是not defined，error
模板字面量。简单地讲，就是可以在字符串 ...
谷歌插件流程：第二回
在前文中，我们通过一个小例子，简单介绍了谷歌插件的一些规则。那么本文正式尝试着，去实现自己的视频下载器插件的开发。目的：能够自动下载知乎上的短视频资源。古语云：知己知彼百战不殆。那么我们首先就去看一看知乎站点的小视频资源是如何加载的。
我们发现，video的src属性绑定的是真实的资源地址，也就是说，我们只需要找到video标签即可。思路: 进入到目标tab页面的环境，获取video标签,创建a标签下载.所以有了如下代码:
changeColor.addEventListener("click", async () => {
console.log('click')
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: downloadVideo,
} ...
谷歌插件流程：第一回
相信经常使用chrome的小伙伴们，对其丰富的插件工具不会陌生。比如下载页面视频、音乐等等等。那么这些工具究竟是如何编写的呢？本文将以谷歌官方实例为基础，简单介绍一下chrome插件的开发流程，我们最终的目标，是写一个自己的视频下载器插件。部分内容参考下面地址文章
http://runxinzhi.com/wintertone-p-12053751.html
1. 第一步创建一个空的文件夹，后创建manifest.json文件，可以理解为整个插件的名片，代码如下。{
"name": "Ta-da",
"description": "download_zhihu_short_video",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
...
性能的考量：第四回(代码层面)
本文从代码层面出发，介绍一些小技巧以提升性能古语有云，千里之堤，溃于蚁穴，性能的问题如出一辙。尤其是在图形化编程的项目中，日积月累的烂代码，导致最终页面的不堪重负。而此时，却束手无策，只能大量重构。因此，在写每一行代码的时候，都应该对性能有所考虑。
1.HTML、JS、CSS三者解耦，各司其职html是数据，js是行为，css负责外观。三者代表了三个层面，应该各司其职互不干扰.如下代码:
const dom = document.getElementById('id')
dom.style.height = 100 + 'px'
dom.style.width = 100 + 'px'
css才应该负责样式层，所以任何的样式问题都应该通过css文件解决。而上述代码则是js承担了页面显示的任务。造成js和css的耦合。但是这种需求有时候不可避免，我们可以使用替代方案，降低耦合度：
const dom = document.getElementById('id')
dom.className = 'dddd'
通过设置类名的方式，达到我们目的的同时，还能保持css负责显示的底线。
2.事件 ...
性能的考量：第三回(canvas)
本文主介绍canvas的性能优化策略关于性能问题,实际上,针对于类似管理系统这样的项目而言,不需要关注太多,也没那必要.但是对于图形编程类的项目而言,则是至关重要的指标.关乎生死。
先点名canvas的耗时因素
图形的数量
图形的大小。
高质量、大文件的图片（画在画布上）
图形编程类的项目,关注性能问题的原因,在于交互体验。比如我们废了半天劲写了一个web端的类cs射击游戏,当我兴奋的准备往前走两步时,发现页面直接给我来了个帧数级别的慢动作,江湖说法叫做”卡成狗”，用户体验几乎为0。这种完全不能玩的应用,如同垃圾。
我们首先来定义一下, 什么叫做卡?卡顿原理可以解释为,每一帧js主线程执行的事情过多,导致帧内时间没来得及干完,即当前帧耗时超过分配的帧时间。那么什么是”分配的帧时间?60hz举例,一秒钟60帧,那么一帧的时间大约在16.7ms.所以,如果在一帧内的耗时超过了16.7ms,就会出现视觉层面的”卡”。目前主流的屏幕基本都是60hz,也就是显示器,以每秒60次的频率闪频,但我们人眼无法察觉。
在实践的项目中，我们遇到了一个这样的警告：白话就是，“大哥，您在一帧时间内做的事情太 ...
性能的考量：第二回(工具篇)
本文主要是介绍一些实用的性能相关的工具1. 工具traceroute我们都知道请求会通过不止一台路由器去跳转，直到找到最终的目标ip服务器。那么这个工具能够帮助你查看个中的细节。
2. performance对象运行一个前端项目，除了通过开发者工具中的memory组件，查看内存使用情况，实质上浏览器也提供了api。
通过window的performance属性，我们能够看到一些陌生的字段。包含memory、navigation、timing和eventCounts。
memory字段。很显然，就是我们想看的内存的大小。usedJSHeapSize表示：JS 对象占用的内存数。totalJSHeapSize表示：可使用的内存大小。jsHeapSizeLimit表示：内存大小限制。通常，usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出现了内存泄漏。
利用这个api可以做一个页面性能的监控器
3. 工具curl,测试目标域的响应 curl www.baidu.com
<!DOCTYPE html>
<!--STATUS OK- ...