今天才在某个论坛上看到这个网站：http://websth.com/， 深感所知甚晚啊，自己一直想做的web指纹识别，已经有童鞋做成chrome插件发布了，并且功能还算比较强大，不过准确性确实有待提高。于是我下载了其源码并开始围观一下。
从本质上来说，Virtual Dom 是一个 JavaScript 对象，通过对象的方式来表示 DOM 结构。将页面的状态抽象为 JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次 DOM 修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改 DOM 的重绘重排次数，提高渲染性能。
本篇是「源码级回答」大厂高频Vue面试题系列的第二篇，本篇也是选择了面试中经常会问到的一些经典面试题，从源码角度去分析。
6. 新的DOM（实际上就是DocumentFragment），和原始的DOM做比对，找差异
答案： 虚拟dom(virtual dom) 其实就是一个JavaScript对象，通过这个JavaScript对象来描述真实dom。 真实dom：以前没有虚拟dom，如果需要比较两个页面的差异，我们需要通过对真实dom进行比对。真实dom节点是非常复杂的，它里面会绑定的事件，它会有属性，背后会有各种方法，会频繁触发重排与重绘，所以两个真实dom比对，非常耗性能。 总损耗 = 真实DOM完全增删改 + （可能较多的节点）重排与重绘 虚拟dom：相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提髙性能。 总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）重排与重绘 具体实现步骤如下： 1. 用JavaScript对象结构表示DOM树的结构；然后用这个树构建一个真正的DOM树，插到文档当中; 2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异; 3. 把步骤2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
如果 oldVnode和 newVnode不是同一个虚拟节点，那么就直接暴力删除旧的，插入新的。
在面试的过程中，可能也会被问到对虚拟dom的理解，像这种面试题是比较宽泛的，面试官想知道你到底知道多少？既然是理解，那就只能是知无不言言无不尽,尽量组织下语言多说点，这样才显得专业素养比较高，接下来，我来谈谈自己的理解，切记不要去背，一定要理解之后，用自己的语言来描述出来。
你知道 Vue3.0 Object.difineProperty和vue3.0的proxy的区别吗？
上线了不到 5 天，没有任何推文介绍的情况下，销量已经超过 400，这个是我万万没想到的，不过这也侧面反映了各位掘友对我的信任。在后台大概看了一下 ID 名单，其中不乏熟悉的面孔，但更多的是几乎没什么印象甚至完全陌生的 ID，确实，回头看看在掘金这些日子的成长，写作、思考和挣扎的过程是极其痛苦的，但正是因为你偶然看到了文章，不经意点了赞、给了一些反馈，才让我有足够的斗志和毅力坚持下去。可能我们从未谋面，甚至互相连微信都没有，但就偏偏在一个叫"掘金"的地方，我收到了来自一个陌生人的认可，这种感觉从未有过，也是一直激励我不断坚持的动力。各位无论是期待已久还是偶尔打开这篇文章，请让我非常真诚地说上一声: 非常感谢！
React 的代码库现在已经比较庞大了，加上 v16 的 Fiber 重构，初学者很容易陷入细节的汪洋大海，搞懂了会让人觉得自己很牛逼，搞不懂很容易让人失去信心, 怀疑自己是否应该继续搞前端。那么尝试在本文这里找回一点自信吧(高手绕路).
Monaco Editor 是一个从 VS Code 中分离出来的、网页版代码编辑器，由微软开源、界面美观、功能强大、开箱即用。（PS：要吐槽一下 Monaco Editor 的官方文档 ...... 是真的难读😕 ）
万幸只有一个加密参数，搜索大法好呀，拿着加密参数全局搜一下，参数值呢就是密码输入框的 id 标签，和上一篇分享的那个 JS 逆向案例一样的。有惊喜…
本文首发于政采云前端团队博客：基于 Web 端的人脸识别身份验证 https://www.zoo.team/article/web-face-recognition
登陆操作 1、在servlet程序中新建一个login方法 2、在业务层新建一个login的方法，传入empId、password两个参数。 在业务层的实现类中可以有两种写法。 常规写法，
Immutable数据就是一旦创建，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变
服务端渲染是数据与模版组成的html，即 HTML = 数据 ＋ 模版。将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。页面没使用服务渲染，当请求页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来;
不单是互金系统交易时会生产此问题，凡涉及表单提交都会遇到，这里以某互金系统为例说明交易防重的过程设计。下图是交易防重设计的示图：
最近在复盘项目的时候，想到了之前做的关于前端加密与验签的需求，感觉这块很少有文章介绍，所以我就把这块内容做一下整理，希望可以帮助到后面有这一块需求的朋友。
工作中，有一个业务功能：周期扫描任务，每一个周期会扫描出数据，然后按照周期数存到elasticsearch,现在需要每个周期之间的数据是否有重叠关联的数据去支撑周期快照功能，通过Query DSL +kibana可视化查询，或可通过肉眼比对，未免劳心劳力。kibana也是通过http post请求，然后返回数据json，那么我们完全可以模拟kibana请求，获取数据，再通过代码比对相邻周期数据，输出文件，一个小爬虫兼数据分析的小工具构想浮现在脑海中。
最近发现一篇关于使用Chrome进行调试和优化的文章，写的特别全面和友好，虽然Chrome版本比较老了，但是和现在的功能基本没有大变化，还是非常值得参考的。下面是原作者的连接，但是已经打不开了
在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说，使用React后无需太多工作就会让客户端执行性能有质的提升。然而，还是很其他更多的办法来加速React程序。
关于 React16 开始应用的新生命周期： 可以看出，React16 自上而下地对生命周期做了另一种维度的解读：
一篇介绍从各个角度介绍数据变化和UI变化的文章，解析了主流的库是怎么工作的：http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html 分析了过去和现在的JS框架是怎么处理前端数据和页面更新的。
今天就来探索 VNode 的源码，VNode 是 Vue2 渲染机制中很重要的一部分，是深入Vue 必须了解的部分
前端优化是一个大的课题，需要花好多时间才能理解，之前对前端优化陆陆续续有一些了解。所以这次从渲染优化，打包优化，代码优化做了一个系统的总结，并且引申出了几个需要关注的问题，文章可能有点长，大家一定要看到最后。最后写作不易，希望觉得还可以的话，帮忙点赞一波，提前感谢了。当然如果有写不好的地方，也请指出来，我会积极改进，共同成长。
以 setState 为例，在 react 内部，每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中
React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最外层上。
在JSP页面实现验证码校验文章中当时是使用的Servlet类来进行的验证码校验，但是这种方式并不能即时校验，在正常情况下都是直接在用户输入之后就进行校验，这样对用户来说很方便的。
使用虚拟dom，会用js对象先模拟dom的更新，比对出实际更新的dom进行局部更新。
上篇文章咱们介绍了大文件切片上传的原理，但是在传输过程中难免出现切片丢失的情况，传输过程中网速卡顿，服务器链接超时，等等都会造成切片信息的丢失，那如何避免文件切片信息丢失呢？
最近在看卡颂大佬的《React 设计原理》，看了第一章，就有一种醍醐灌顶的感觉，于是决定记录分享一下这一章的内容。这里也极力推荐各位小伙伴读一下。
计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。
实际上，diff 算法探讨的就是虚拟 DOM 树发生变化后，生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异，将更新补丁作用于真实 DOM，以最小成本完成视图更新。 具体的流程如下：
原文地址：https://www.cnblogs.com/DOMLX/p/7822962.html
虽然前端有垃圾回收机制，但当某块无用的内存，却无法被垃圾回收机制认为是垃圾时，也就发生内存泄漏了
Node.js作为常见的Web开发语言之一，Xcheck也针对该语言打造了对应的扫描引擎：JsCheck。
因工作需要手机端运用人脸识别打卡，本期教程人脸识别第三方平台为虹软科技，本文章讲解的是人脸识别RGB活体追踪技术，免费的功能很多可以自行搭配，希望在你看完本章课程有所收获。
小程序的渲染层和逻辑层分别由两个线程管理，两个线程的通信由微信客户端(Native)做中转。
因为使用了 Virtual DOM 的原因，Vue.js具有了跨平台的能力，例如：weex、小程序、web、h5、等
思想: 双重 for 循环是比较笨拙的方法，它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；因为它的时间复杂度是O(n^2)，如果数组长度很大，效率会很低。
网站,APP越来越多,安全问题也面临着严重挑战,我们SINE安全在对客户网站做安全服务的同时,发现很多客户网站都有使用JSON的交互方式来进行数据的传输,包括JSON调用,在使用JSON同时发生的安全问题以及如何做好JSON的网站安全防护,下面我们跟大家来分享一下.
客户端缓存分为Http缓存和本地缓存,使用缓存好处很多,例如减少相同数据的重复传输,节省网络带宽资源缓解网络瓶颈,降低了对原始服务器的要求，避免出现过载，这样服务器可以更快响应其他的请求
来源 | OSCHINA 社区 作者 | 京东云开发者-孙凯 原文链接：https://my.oschina.net/u/4090830/blog/5587296 一、前言：我全都要 面对当今前端界两座大山一样的主流框架，React 和 Vue，相信很多小伙伴都或多或少都产生过这样疑问，而这样的问题也往往很让人头疼和犹豫不决： 业务场景中是不是团队用什么我就用什么？ 如果选择了其中一个使用，那为什么不用另一个？ 这两个框架各有什么优点和无法解决的问题？ 最新版本的 Vue3 已经出了一段时间了，我要不要做组
最近在项目中遇到并解决了一个弹窗拖拽卡顿严重的问题，解决过程还是挺有意思挺有感触的，因此记录一下。
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
在DOM中根据标签去获取元素的原生api是 getElementsByTagName()，它返回的是一个包含所有给定标签名称的元素 HTML集合HTMLCollection[1], 整个文件结构都会被搜索，包括根节点。
AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
