分类 技术分享 中的文章

RxJS入门指南

RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用的比较广泛的响应式编程框架,这个框架很好的应用了Observer Pattern(观察者模式),让异步编程变得简单且清晰。本文会带大家对RxJS有一个初步的入门。

阅读全文

图片懒加载从简单到复杂

图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍,逐步增加复杂度,希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法。

阅读全文

Js中的防抖与节流

防抖(debounce)和节流(throttle)两词其实并非计算机领域的原生词语。追根溯源,防抖一词来自于弱电领域,指代的是消除外界对于开关扰动的技术。而节流来自于流体力学,指代的是限定流体流量的一种技术。由于JavaScript拥有事件驱动的特性,为避免事件频繁触发导致性能的损耗,防抖和节流这两种技术在JavaScript中亦被广泛应用。

阅读全文

Deep In React(五)setState中的黑魔法

在React官方文档中有这么一句话React does not guarantee that the state changes are applied immediately。在我最开始使用React的时候,我只是简单的把这句话当做React这个框架的约束,但是随着使用的深入,setState这个函数也让我觉得越来越神秘。在这篇文章中,我将通过反思自己在使 …

阅读全文

git中的二分查找– git bisect

二分查找是一种大家都熟悉的算法。这种算法由于套路非常的清晰,在程序开发中被广泛使用。很常见的一个例子就是使用二分查找去进行程序的debug,逐步缩小代码区间最终确定问题。循着这个思路,在多人合作的场景下,如果某次你pull代码之后发现某些代码不能工作了,你也可以通过二分查找的方式找出出问题的commit。而git bisect就是git内置的二分查找命令。

阅读全文

使用yeoman创建属于你自己的脚手架

现代前端开发,由于构建工具的大规模使用,项目的配置趋于日渐复杂。很多时候你只是需要快速编写一个简单的demo,但是你首先需要做的可能是花费不少的时间搭建一整套的前端工具链。为了解决这个问题,社区创造出了不少比较成熟的脚手架或者boilerplate来让开发者快速搭建项目。但是如果你想快速的定制化属于你自己的脚手架,今天要聊的yeoman可能是一个不错的选择。

阅读全文

Deep In React (四) stack reconciliation

在前一篇文章中我们谈到了DOM diff的基石,Internal Instance。同时我们也留下了一些悬而未解解的问题,比如Internal Instance到底有什么更进一步的应用。在这篇文章中,我们来了解一下基于Internal Instance的stack reconciliation(DOM Diff算法)

阅读全文

Deep In React (三)Internal Instance

在上一篇文章中我们谈到了React的递归式渲染这个名词,那么一个React element经过了怎样的变化最后映射成了对应的DOM结构,Reacte element又是怎样在DOM树中挂载/卸载的?这篇文章会带你一探究竟。

阅读全文

Deep In React (二) Component,Element和渲染

在上一篇文章中,我们谈到了如何从应用层面优化React的性能,在随后的几篇文章中,我们将深入React的底层实现,仔细分析一下为什么React会有如此高的性能。在介绍React底层的reconciliation算法之前,我们需要先了解一些先导知识。

阅读全文

Deep In React (一) 高性能React组件

React在推向社区之初, 一个备受社区欢迎的点就是React的优秀的性能。得益于React出色的架构, React相比于传统的方式确实快很多。但是在实际开发中也存在着很多React性能的陷阱。虽然我们绝大多数时候其实不需要过于关心React的性能问题,但是当需要提升性能时,我们也会有一些很好的切入点去做这件事情.

阅读全文