最近在工作中遇到了需要服务器推送消息的场景，这里总结一下收集整理WebSocket相关资料的收获。 1. 概述 1.1 服务器推送 WebSocket作为一种通信协议，属于服务器推送技术的一种，IE10+支持。 服务器推送技术不止一种，有短轮询、长轮询、WebSocket、Server-sent Events（SSE）等，他们各有优缺点： # 短轮询 长轮询 Webs...

在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。

大多数设备的刷新频率是60Hz，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。前端的用户体验给了前端直观的印象，因此对B/S架构的开发人员来说，熟悉浏览器的内部执行原理显得尤为重要。

CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 {代码...} 内联样式 {代码...} 外部样式 {代码...} 2. 选择器类型 选择器 栗子 ID #id class .class 标签 p 属性 [type='text'] 伪类 :hover 伪元素 ::first-line 相邻选择器、子代选择器 > + 3. 权重计算...

在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案

柯里化，是固定部分参数，返回一个接受剩余参数的函数，也称为部分计算函数，目的是为了缩小适用范围，创建一个针对性更强的函数。核心思想是把多参数传入的函数拆成单参数（或部分）函数，内部再返回调用下一个单参数（或部分）函数，依次处理剩余的参数。

柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原理是：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收器会按照固定的时间...

单线程编程会因阻塞I/O导致硬件资源得不到更优的使用。多线程编程也因为编程中的死锁、状态同步等问题让开发人员头痛。Node在两者之间给出了它的解决方案：利用单线程，远离多线程死锁、状态同步等问题；利用异步I/O，让单线程远离阻塞，以好使用CPU。

在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。其实就是函数的封装，比如要对某个DOM元素添加color和backgroundColor，可以封装个changeColor函数，这样可以在多个相似逻辑中提升智商...

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。其实就是用一个对象或者数组记录一组状态，每个状态对应一个实现，实现的时候根据状态挨个去运行实现。

高阶函数就是那种输入参数里面有一个或者多个函数，输出也是函数的函数，这个在js里面主要是利用闭包实现的，最简单的就是经常看到的在一个函数内部输出另一个函数，比如

适配器模式（Adapter）是将一个类（对象）的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类（对象）可以一些工作。

外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。外观模式在JS中常常用于解决浏览器兼容性问题。

可以看到函数 findNodes() 和 hide() 分别两次进行了循环，这是十分低效的，如果要避免这种重复循环，并且只要在 findNodes() 中选择的时候就进行 hide() 那么将是高效的实现方式。如果在 findNodes() 中实现修改逻辑，由于检索和修改逻辑耦合，那么它将不再是一个通用函数。对这种问题的解决方法是采用回调模式。

单例模式 (Singleton) 的实现在于保证一个特定类只有一个实例，第二次使用同一个类创建新对象的时候，应该得到与第一次创建对象完全相同的对象。当创建一个新对象时，实际上没有其他对象与其类似，因为新对象已经是单例了 {a:1} === {a:1} // false 。

对于原型模式，我们可以利用JavaScript特有的原型继承特性去创建对象的方式，也就是创建的一个对象作为另外一个对象的prototype属性值。原型对象本身就是有效地利用了每个构造器创建的对象，例如，如果一个构造函数的原型包含了一个name属性（见后面的例子），那通过这个构造函数创建的对象都会有这个属性。

在软件系统中，有时候面临着“一个复杂对象”的创建工作，其通常由各个部分的子对象用一定的算法构成；由于需求的变化，这个复杂对象的各个部分经常面临着剧烈的变化，但是将它们组合在一起的算法确相对稳定。如何应对这种变化？如何提供一种“封装机制”来隔离出“复杂对象的各个部分”的变化，从而保持系统中的“稳定构建算法...

1. 简介 工厂模式的目的是为了创建对象，它通常在类或者类的静态方法中实现，具有以下目标： 当创建相似对象时执行重复操作 当编译时不知道具体类型的情况下，为工厂客户提供一个创建对象的接口 与创建型模式类似，工厂模式创建对象（视为工厂里的产品）时无需指定创建对象的具体类。 工厂模式定义一个用于创建对象的接...

JS中是没有直接的抽象类的，abstract是个保留字，但是还没有实现，因此我们需要在类的方法中抛出错误来模拟抽象类，如果继承的子类中没有覆写该方法而调用，就会抛出错误。

可以用*1来转化为数字(实际上是调用.valueOf方法)然后使用Number.isNaN来判断是否为NaN，或者使用 a !== a 来判断是否为NaN，因为 NaN !== NaN

我们经常说JS是单线程的，比如node.js研讨会上大家都说JS的特色之一是单线程的，这样使JS更简单明了，可是大家真的理解所谓JS的单线程机制吗？单线程时，基于事件的异步机制又该当如何，这些知识在《JavaScript权威指南》并没有介绍，我也一直困惑了，直到看到一篇外文，才有了些眉目，这里与大家分享下。后来发现《Java...

__proto__隐式原型与prototype显式原型是个容易令人混淆的概念，简而言之prototype是构造函数用来被自己的实例继承的原型，而_proto_是实例用来继承父类原型的载体。

代码执行或函数调用生成执行上下文(只有当前执行上下文有执行权)，该执行上下文内只能访问当前执行上下文的变量、函数和上一级执行上下文中的变量、函数，激活下一个执行上下文的时候执行权转移到新的执行上下文，形成执行上下文栈。

为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然如果你有兴趣也可以看看，毕竟这是js中必须要掌握的东西。

这两天跟同事同事讨论遇到的一个问题，js中的event loop，引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题，从而引出了Nodejs的event loop机制，记录一下，感觉还是蛮有收获的

Js中两种基本数据类型：原始类型（基本数据类型）和引用类型；原始类型保存为简单数据值，引用类型则保存为对象，其本质是指向内存位置的应用。其它编程语言用栈存储原始类型，用堆存储引用类型，而js则不同：它使用一个变量对象追踪变量的生存期。原始值被直接保存在变量对象里，而引用值则作为一个指针保存在变量对象...

概念： 平稳退化 渐进增强 以用户为中心 第一章 js简史 可以使用DOM（Document Object Model）给HTML（HyperText Markup Language）文档增加交互能力，就像CSS（Cascading Style Sheet）给文档增加样式一样。DOM是一种API（Application Programing Interface），就是一种已得到各方认同的基本约定，作为一种标准可以使得...