转载

深度剖析:如何实现一个 Virtual DOM 算法

本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚。希望在阅读本文后,能让你深入理解 Virtual DOM 算法,给你现有前端的编程提供一些新的思考。本文所实现的完整代码存放在 Github

Virtual DOM 的内部工作原理

虚拟DOM (VDOM,也称为 VNode) 是非常神奇的,同时也是复杂难懂的。 ReactPreact 以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以,我就想到自己动手写一篇。

理解 Virtual DOM

使用过React的同学对于Virtual DOM并不陌生,作为React的重要核心概念,Virtual DOM凭借其高效的diff算法,让我们不用关心应用的性能问题,毫无顾忌地修改各种数据状态。在实际的开发中,我们并不需要关注Virtual DOM在一个框架中是如何运行的,但是理解Virtual DOM的实现原理却是非常有必要的,同时也有助于我们更加深入React。

JavaScript数组所有API全解密

数组是一种非常重要的数据类型,它语法简单、灵活、高效。 在多数编程语言中,数组都充当着至关重要的角色,以至于很难想象没有数组的编程语言会是什么模样。特别是JavaScript,它天生的灵活性,又进一步发挥了数组的特长,丰富了数组的使用场景。可以毫不夸张地说,不深入地了解数组,不足以写JavaScript。截止ES7规范,数组共包含33个标准的API方法和一个非标准的API方法,使用场景和使用方案纷繁复杂,其中有不少浅坑、深坑、甚至神坑。下面将从Array构造器及ES6新特性开始,逐步帮助你掌握数组。

用简单的方法学习ES6

这里是ES6 简要概览。本文大量参考了ES6特性代码仓库,请允许我感谢其作者@Luke Hoban的卓越贡献,也感谢@Axel Rauschmayer所作的[优秀书籍]//exploringjs.com/es6/)。起初当我听说ES6时,我花了很多精力去消化学习其概念和基础知识。我经历了这些,希望你们无需重蹈覆辙。因此我写下了这篇对ES6及其新特性的简要介绍,所有知识点都解释得通俗易懂,简明扼要,对于像我这样的新人非常友好。

Preload,Prefetch 和它们在 Chrome 之中的优先级

今天我们来深入研究一下 Chrome 的网络协议栈,来更清晰的描述早期网络加载(像 <link rel=“preload"><link rel=“prefetch”>)背后的工作原理,让你对其更加了解。像其他文章描述的那样,preload 是声明式的 fetch,可以强制浏览器请求资源,同时不阻塞文档 onload 事件。

资源预加载

当提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

5个你可能不知道的CSS属性

每年都有新的CSS属性被标准化,并在主流浏览器中可用。 它们旨在使Web开发人员的工作变得轻松,创造出新颖美丽的网站。在这篇文章中,我将介绍5个相对较新的CSS属性,你可能从来没有听说过,我觉得很有趣。 本文的目的是带领你总览这些CSS的属性,告诉你可以使用哪些值,它们的使用场景,还有一些例子。

关键请求

网站服务看起来很简单:发送HTML,浏览器进行处理并加载资源,然后我们只要耐心的等页面渲染好即可。但是你很少知道,整个过程背后发生了很多事情。你有没有想过,浏览器如何知道应该加载哪些资源,并且以什么顺序来加载这些资源?今天我们将看看如何利用资源优先级来提高加载速度。

表单验证第四部分: MailChimp订阅表单中的验证

在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。我们也学会了如何使用约束验证 API 来提高浏览器原生的验证能力以提供更好的用户体验。 并且我们写了一个 polyfill 将支持一直延伸到IE9(并在一些较新版本中添加了几个功能)。现在, 让我们把学到的知识运用到一个真实的例子中:MailChimp注册表单。

页面

返回顶部