文章列表
结一 于 7小时前发表 30 0 0
React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化。 REACT组件渲染 react的组件渲染分为初始化渲染和更新渲染。 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): react 组件渲染 初始化渲染 [http://7tszky.com1.z0.glb.clouddn.com/FrGKO_9NVh9tD57aZDYKDBxEjOAF] 但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变): react 组件渲染 更新子组件 [http://7tszky.com1.z0.glb.clouddn.com/Fu_CLUzDTVEB0qJHZO86a1XzNMBx] 我们的理想状态是只调用关键路径上组件的render,如下图:
7小时前
javascript技术
朱灵子 于 10小时前发表 136 0 0
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript库。 创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。 本文初探react的顶层事件代理机制~ 顶级事件代理机制 React采用的是顶层的事件代理机制,能够保持事件冒泡的一致性,可以跨浏览器执行,甚至可以在IE8中使用HTML5的事件。 React 实现了一个“合成事件”层,这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。首先区分原生事件与合成事件,我们在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件,使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener,所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”。 “合成事件”会以事件委托(event delegation)的方式绑定到组件最上层,并且在组件卸载(unmount)的时候自动销毁绑定的事件。 事件代理
10小时前
javascript技术
何方舟 于 14小时前发表 40 0 1
co.js 作为 koa 框架的核心库,利用 es6 Generator 新特性来解决 callback hell 已经非常流行 。 本文将剖析 co.js 是为何用同步的写法,就可以解决异步回调的问题。 GENERATOR 首先简要介绍一下 Generator 特性, co.js 是基于该特性实现的,所以弄清 Generator 的远离非常重要。 function* fn(){ beforeA(); yield doA(); yield doB(); afterB(); } var gen = fn(); //生成构造器; gen.next(); //这里会执行到以第一个yield之前的位置,所以执行beforeA 和 doA 这两行; gen.next(); //这里会执行到第二个yield的位置,也就是执行 doB() gen.next(); //这里会执行到生成器结束的位置,afterB(); 简单来说 generator 可以变成一种分步函数,gen 成为这 Generator 函数的指针,通过调用 gen.next()
14小时前
前端库
莫卓颖 于 1天前发表 146 1 2
{{tags: 工具建设 开发模式}} 序言 相信很多程序员都会经历两件事:第一件事情是没日没夜加班撸代码;第二件事情是写的程序出现bug没有及时发现而被老板骂。不知道大家有木有考虑从工具或者架构的角度出发去解决以上两个问题,木有考虑的同学也木有关系,本系列文章将会将会围绕整个前端的开发流程出发解决这两个问题,帮助大家提高产品质量以及开发效率。 文章导航图 对于前端开发来说大致分为5个阶段:开发、联调、测试、上线、监控维护,本系列文章将会选取每个阶段比较影响效率以及质量的点进行详细描述。这一章我们先来从开发阶段出发考虑有哪些方面可以做效率提升?[http://7tszky.com1.z0.glb.clouddn.com/FjS2kLJ0-Mxs066zwKNYvOyRDl0r] 页面结构继承化
1天前
开发模式
Red626 于 1天前发表 164 0 2
[http://7tszky.com1.z0.glb.clouddn.com/FtBNk5TEyh1gSunrZelbWnERhl5j] Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). 为什么写这篇文章
1天前
CSS/重构
link ,除了分享,也是知识管理。 于 2天前发表 96 0 1
[http://7tszky.com1.z0.glb.clouddn.com/FvgoQmNATnByOO4B4KuYSkZHVQfv] 概述 为什么要在NODE.JS中调用动态链接库 1. 由于腾讯体系下的许多公共的后台服务(L5, CKV, msgQ等)已经有了非常成熟的C/C++编写的API,以供应用程序调用,node.js作为在公司内新兴的后台runtime在调用这些公共服务的时候没必要再造一遍轮子,而是可以将这些API编译成.so文件直接使用。 2. 对于一些密集计算型的任务可以由C++编写好模块,生成.so文件后由node.js调用。 FFI简介与安装 我们使用 node-ffi [https://github.com/node-ffi/node-ffi] 来帮助我们调用动态链接库。 FFI的全称是Foreign Function
2天前
nodeJS全栈
江源 ,非常让人头疼…… 于 2天前发表 77 0 0
原文 [http://jiangyuan.me/blog/2016/06/28/bash-for-and-condition/] 条件语句和循环可以统称为流程控制,是一门语言最基础的部分。 bash 的流程控制和大家熟悉的语言非常类似,所以这块上手应该很快。 条件语句 条件这块建议先去瞧瞧《 bash 的 Test [http://jiangyuan.me/blog/2016/05/30/bash-test/] 》。 bash 中的条件语句,基础就是 Test 。 IF 先来个实例: x=5; if [ $x = 5 ]; thenecho'x equals 5.'; elseecho'x does not equal 5'; fi# 输出: x equals 5. 和我们熟悉的语言非常相似,不妨抽象一下: if commands; then commands [elif commands; then commands...] [else commands] fi
2天前
工具建设
黄龙 于 2天前发表 82 0 0
为什么要解析FLV格式? 在直播项目里面遇到需要统计flash视频帧间隔时长,首帧,GOP,等关键数据的时候,不可避免的需要对flv文件进行解析。 名词定义 * 首帧:是指用户看到第一个视频帧。 * 首帧时长:是指用户打开网页到看到第一个视频帧。 * I帧:视频关键帧,包含全部的图形信息。 * P帧:视频间隔帧,是根据P帧前面的P帧或者I帧diff出来的帧。数据量比I帧小。 * GOP:Group of picture(图像组),指两个I帧之间的距离 FLV文件格式的定义 FLV格式定义:FLV是一种容器格式,它支持的音频编码有 linear PCM、ADPCM、MP3、Nellymoser、G711 A-law PCM、G711 mu-law PCM、AAC、Speex等,支持的视频编码有H264、On2 VP6、Sorenson Spark等。 使用OSMF解析FLV格式 地址: https://sourceforge.net/adobe/osmf/home/Home/ [https://sourceforge.net/adobe/osmf/home/Home/]
2天前
运营
ShiJianwen 于 3天前发表 1822 0 0
REACT React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: * 组件化 * 利用 props 形成单向的数据流 * 根据 state 的变化来更新 view * 利用虚拟 DOM 来提升渲染性能 [http://7tszky.com1.z0.glb.clouddn.com/FgHh-hjZfigrSqf_9MZhjgmknC5N] 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?React 中每个组件都有 setState 方法用于改变组件当前的 state,所以可以把更改 state 的逻辑写在各自的组件里,但这样做的问题在于,当项目逻辑变得越来越复杂的时候,将很难理清 state 跟 view 之间的对应关系(一个 state 的变化可能引起多个 view 的变化,一个 view 上面触发的事件可能引起多个 state 的改变)。我们需要对所有引起 state
3天前
javascript技术
结一 于 4个月前发表 2095 3 2
首先,本文是普通入门知识篇,主要说的是断点的设置。 很多想接触响应式的同学都会有以下疑惑: * 为什么要做响应式? * 怎么入门响应式,是不是很难? * 分辨率那么多,响应式断点怎么设置? 所以本文简单说下下手响应式的一些基础,包你入门响应式,没学会的话再手把手教。 为什么要学响应式 这个问题呢就跟女神有多面一样,比喻在家是睡衣,上班是职业装,团建参加活动什么的就是休闲运动装了。网页呢,对于pc,平板,手机当然也得有不同的打扮排版才吸引用户,提升体验。 不然如中国移动手机端的表现是这样的(整个大小被等比例缩放到适应移动端的device-width),根本没法提用户体验: 中国移动移动端表现 [http://7tszky.com1.z0.glb.clouddn.com/FtN1lC_cKmEXPUkFBaU8tFEkq0Lw] 当然还有个更俗的原因就是你要全方位无死角伺候好你的各种平台的用户,让他们用得爽,然后你每个月才有白花花的银子。 响应式是什么 简单来说,响应式就是在不同的分辨率下,都要让内容以最佳的展现形式呈现给你用户,提升用户体验。如下图:
4个月前
CSS/重构
结一 于 14天前发表 314 2 0
需求 要实现音频的播放如下图: 音频播放 [http://7tszky.com1.z0.glb.clouddn.com/FnCgWfKtusTjiBONJSmanGaQw4gW] HTML html代码如下: <audiosrc=""preload="metadata"controls /> 本来我以为在css3这么强大的年代,自定义一个audio的皮肤应该是完全没问题的,后来的事实证明too young too simple。 看了下audio的shadow dom结构,然后试了试用css去自定义,于是发现两个问题: audio shadow dom [http://7tszky.com1.z0.glb.clouddn.com/FmGJEoL4Yu909jlvByfHydNzjZ7F] * 第一个为播放暂停按钮,就是一个标签没有状态,默认的css定义是为 -webkit-appearance: media-play-button; ,一个样式控制两种状态,没招。
14天前
移动开发
huscot ,undefined 于 3个月前发表 559 1 0
web性能优化,这是大家耳熟能详的东西了。 一说到性能优化,大家可能立马就会想到和加载相关的时间了,比如首字节时间、白屏时间、首屏时间、用户可交互时间、DOMContentLoaded时间、onLoad时间等等,但是不同的人也许会有不同的衡量标准,比如有些人比较重视白屏时间,有的比较关注首屏时间等,这并非完全一致的。当然我们可能还会考虑其他方面的性能优化问题,比如DOM渲染、60FPS动画、benchmarks等,但是我们应该什么时候去做优化呢?一直做?所有都做?这可能有点不切实际。 我们大部分人都没有足够的时间投入到优化工作中,我们需要一个权威的标准来告诉我们哪些重要的事情是必须优化的和哪些次要的。 对此,Chrome团队提出了一个以用户为中心的性能模型: RAIL 。 在我们深入了解 RAIL 之前,我们先回想一下,我们为什么要做性能优化?其实无非就是一个字,“慢”! 一个DOM操作很慢?一个网页加载很慢?在 <head> 中加载一个 <script> 很慢?JavaScript动画很慢?一个20ms的操作很慢?那么0.5s或者10s呢?...
3个月前
性能