因为有很多核心页面是h5实现的，包括首屏过后用户看到的第一个页面，所以有个季度，我的okr就是把全站核心h5的p90 load时间降低到3s内。为了达成目标，分阶段采取了很多措施。蛮有趣的一件事，总结下来就是下面我画的一张图。

树在前端的重要性就不言而喻了，随处可见，vdom，dom tree，render tree，有时候前后端交互中也会收到具有递归性质的tree结构数据，需要注意一点的是es6中虽然出现了set和map数据结构，但其实现和其它语言（例如java中）底层实现不同，在chrome的 v8中其实现基于hash，利用空间换时间的思想，毕竟查找起来hash O(1)而红...

最近开发遇到一个npm依赖导致的问题，报错如下。经过错误定位，发现原因是项目中用了vue不同版本语法的写法，如下所示 ，重点关注的是被**包围的写法。

Websocket是一个持久化的协议，改协议定义了一个 API 用以在browser和server建立一个 socket 连接。WebSocket是建立在http的基础上，复用了HTTP的握手环节，握手成功后经过协商在走Websocket协议格式的数据。

redux概念 redux是一个状态管理容器,使用redux可以更好的管理和监测组件之间需要通信的数据。 redux基本原则 单一数据源 在redux中,整个应用保持一个数据源,数据源是一个树形的结构 状态只读 状态只读意思是不能直接修改,需要通过dispatch action方式才可以,返回的是一个新的状态对象 纯函数操作改变数据 改变数据的纯函...

在使用react做复杂的spa开发中,开发中必不可少的就是react-router,它使用Lerna管理多个仓库, 在browser端常使用的几个如下所示

说明 从源码中摘取了初始化的的第一步,做了简化,当运行webpack命令的的时候,运行的是webpack-cli下webpack.js,其内容是一个自执行函数,上面是执行的第一步,进行参数的解析合并处理,并创建compiler实例,然后启动编译运行run方法,其中关键步骤 compiler = webpack(options); 详细展开如下所示

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript...

树是一种重要的数据结构,由根结点和若干颗子树构成的。 根据结构的不同又可以划分为二叉树,trie树,红黑树等等。今天研究的对象是AST,抽象语法树,它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。通过操作这棵树,可以精准的定位到声明、赋值、运算语句,从而实现对代码的分析、优化、变更...

说明 demo例子参考了webpack的官方文档,使用这个简短的demo作为我们分析的入口,一步一步来分析。首先我们写插件都是这种结构形式,只有这样webpack才能解析。而上面这个简短的插件的作用是将build后asset目录下的所有的文件遍历后取出文件名,然后生成一个filelist.md文件。原型上为什么要有apply方法呢?因为在安装插件时...

去年3月的时候当时写了一篇webpack2-update之路,到今天webpack已经到了4.2,更新挺快的,功能也在不断的完善,webpack4特性之一就是零配置, webpack生命力真的很顽强,积极跟上环境的变化,响应社区的需求,不断的迭代,因为parcel在其之前就有这个特性了。直接运行webpack命令,默认production模式,但是会有WARNING。

目前express最新版本是4.16.2,所以本文分析也基于这个版本。目前从npm仓库上来看express使用量挺高的,express月下载量约为koa的40倍。所以目前研究下express还是有一定意义的。

static web server,例如常见的nginx apache等等 dynamic web server,例如常见的tomcat,jboss,resin等等

tcp是网络七层模型当中传输层的协议,由IETF的RFC 793定义,是面向连接的、可靠的、基于字节流的通信协议。而传输层位于七层模型的中间,下面是网络层,上面的话有应用层,承上启下,地位还是很重要的。在传输层中还有一种协议udp(无连接、不保证可靠性)。相比来说tcp有以下特点

流是抽象化的概念,形象生动的描述了数据的流动、变化。 具体来说,在node中流是处理数据的抽象接口,继承了EventEmitter,通过这个接口我们能够控制流的开关,流动的方向等等。比较形象直观一点类似我们在linux上使用shell,通过管道,链接处理各个部分,下面是我写的一个命令,筛选出version并导出到文件中。

我们写的js代码经过js引擎(解释器)转化为高效的机器码,现在的v8引擎由TurboFan和Ignition两部分构成,其中Ignition是解释器,而TurboFan主要对代码做些优化,以提高执行性能。

16年时在公司分享过一次promise,犹记得当时是第一次分享,还蛮紧张的,当时分享的主要是promise的使用和基本原理,后来又给无线部门同学分享了一次。现在回顾想想,其实讲的不是很完美,因为我当时的实现方式类似于简化版q库的实现,考虑的也不全面,也没有完全遵循promise/a+规范。经过这么长一段时间的学习和积累,阐述一下自...

在学习过程中,发现一个小问题,因为小很少人关注讨论过这个问题, react构建component的render方法中return后面为什么要加括号?下面尝试给出些解释。首先('<p></p>'),(1,2)这些都是原生支持的写法,括号中多个合法的表达式都会执行,返回最后一个表达式的值。如下demo示例所示

平时开发单页项目应用基于vue,目前另外两个比较热的库还有angular和react,angular 1系列用过,进入公司后由于基于vue技术栈就没在关注了。一直在关注react,目的不是学习用法,只是为了拓展自己的视野和思维,通过了解一些使用上的差异性,来进一步的思考其底层设计的思想。

可以看到时间差异蛮大的,对于热点代码,v8会进行类型的动态检查,通过类型反馈进行优化,比如说都是小整数时,可以使用快速模式。快速模式还包括堆区的数值,怪异类型,字符串链接等。但是如果不小心写成第一种形式反而deoptimizer了,不断的重优化很耗性能,达到一定次数后,v8不在优化。

内存泄漏一般是由于我们编码缺陷导致的,首先明确一下内存泄漏的定义,就是应用程序不需要,但是又不能返回给操作系统以供重新分配使用,导致可用内存越来越少的现象。下面总结一下在browser端内存泄漏几种方式

性能优化本质来说就是怎样让用户体验更好。之前同事分享过一个关于体验的时间标准,我感觉蛮有趣的,就是说我们尽量让交互响应在0.1秒内,这时体验比较好;如果1秒左右就需要loading;如果10秒左右就需要一个进度条。性能优化不是银弹,在程序做不到0.1内响应的时候,外在辅助措施就很必要。接下总结一些性能优化点,虽不常规,但...

翻译：jsdt原文标题：Understanding Service Workers原文链接：[链接]声明：转载请指明出处。 在网络早期,很难想象在用户离线的时候一个网页可以访问。你总需要一直在线。 链接网络吧,伙伴们都在这,不要离开了。 但随着移动互联网的出现,以及这个世界上越来越多的地区连接上网络,参差不齐的网络连接速度在现代web用户中...

说明 table-cell方式兼容性比较好,但是外层标签不能设置定位或浮动,否则middle会失效。当table-cell内部是block元素时,middle也会生效。

上面两种方式都是基于browser,可断点调试,针对非browser的应用测试,例如典型的WeChat,可以借助于Vconsole,以log的方式查看在开发时需要的相关信息。

说明 需求:点击select下拉选项,弹窗提示是否修改(select最多有200个)。实现:不适合用watch和computed,因为offer.measureUnit太多,且每个都是独立的不同的响应式属性,考虑用指令,点击恢复按钮,列表重新渲染,此时指令会全部执行一遍,因为指令是在同一个组件模板中。通过在指令中比较前后值,以及设置cache.submitFlag避免不...

js的模式匹配不强大,但是也有一些应用,最近在利用业余周末时间断续系统性的学scala,我学习scala目的就是理解和掌握它的函数式编程，整体还没学完。在这篇文章中会js结合scala的方式一起对比分析总结下,不说明默认是js写法。

(a -> b) -> f a -> f b 意思就是说一个a到b的映射,在接受a的functor之后,返回一个b的functor，下面是map over应用示例，可以结合着理解这句话。

说明 curry一言以蔽之就是为每个参数返回一个函数。好处是可以依赖透明,无观察副作用,哈哈,其实所有fp纯函数都有这个特性,其次简化函数使用难度(相对来说,为curry而curry就得不偿失了)和方便compose。

对错误进行分类,理解错误是如何产生的,以及错误发生后怎么定位解决,这在构建一个稳定运行的程序过程中会经常遇到。总结一下,以便有更清晰的认知。