皮蛋很白的博客

用 QQ 的截图录屏功能录制的 mp4 视频，无法用 video 标签正常播放

对于左子节点，上限就是当前节点，下限就是当前节点检测的下限（即当前节点作为右子节点的父节点或无限）；对于右子节点，上限就是当前节点检测的上限（即当前节点作为左子节点的父节点或无限），下限就是当前节点；）入栈，栈中存储的就是等待操作的节点，当遍历完左子树，再从栈中提取右子节点依次操作，操作右子树也遵循前序遍历的顺序进行入栈出栈。列表，所以要验证一个二叉搜索树，就可以对其进行中序遍历，下一个节点总是大于上一个节点，则验证成功，否则验证失败。注意这里的F是右子节点，用数组表示C的子节点时，可以用。......

时会导致后续元素位移，性能开销大。数组之所以要占用一段连续的内存空间，是为了快速通过索引获取数据，这也是相对链表所具有的优点。性能测试示例。

尤雨溪在创建 Vue 的时候大量参考了 Web Components 的语法，下面写个简单示例。首先写个 Vue 组件 ：这是很标准的 Vue 组件，不过非常遗憾的是 HTML 文件并不能有效的利用这个 vue 文件，如果想让它能够正确运行，还需要下载 node、webpack、vue-loader 将其打包，而且它只能在 Vue 的项目中使用，也就是必须依赖 Vue 的安装包。如果在 React、Angular 甚至 jQuery 项目中，这个组件就不能用了。但是以前只需要将它稍稍修改一下，它就会变成

开发项目的时候为什么不手写原生 JS，而是要用现如今非常流行的前端框架，原因有很多，例如：Web Components 就是为了解决“组件化”而诞生的，它是浏览器原生支持的组件化，不依赖任何库、依赖和打包工具就可以在浏览器中运行。Vue、React 的组件化并不是真正的组件化，虽然写代码时写的是确实的组件化代码，但是编译后就不再是组件化了。例如用 Vue + ElementUI 开发的应用，ElementUI 的组件都是 开头的，如 ，但编译后显示在页面上的就不再是 标签了。这有点类似于 CSS 预处理

面试题console.log('1');setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }); new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5'); });}); p

概述随着前端技术栈和工具链的迭代成熟，前端工程化、模块化也已成为了当下的主流技术方案。在这波前端技术浪潮中，涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架。这类框架所构建的 **单页应用（SPA）**的优点：用户体验好开发效率高渲染性能好可维护性好…**单页应用（SPA）**也有一些很大的缺陷，其中主要涉及到以下两点：首屏渲染时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同单页应用使用 JavaScript 在客户端生成 HTML 来

前言本文使用 WebSocket 实现实时通信案例。包括：使用 Socket.IO 实现官方实时聊天应用示例。在 Vue 中使用 Socket.IO技术铺垫WebSocket参阅：WebSocket 教程 - 阮一峰的网络日志Socket.IO官网：https://socket.io/HTML5 引入了很多新的特性，WebSocket 就是其中之一，它为浏览器端和服务端提供了一个基于 TCP 链接的双向通道，这样 Web 开发人员可以使用 WebSocket 构建真实的实时 Web

前端在向服务器 API 发送请求时一般会设置一个超时时间，避免超过期望时间的持续等待。以 Axios 为例，一般会设置 timeout 请求超时选项。但是浏览器判断超时并不是这么简单。搭建环境express + axios 搭建 web 服务。在项目目录下安装依赖：npm i express axios添加文件：// start.jsconst express = require('express')const PORT = 3000let app = express()app.

双 token 机制关于**“双 token 机制”**指的是使用户的登录状态在活跃期间保持有效的一种安全机制。一般需要用户登录的系统为了校验用户的身份或登陆状态，会在用户登录时由服务器生成一个存储了或指向用户信息的 token，返回给客户端存储，这个 token 称为 access_token。在请求其它接口的时候将 access_token 发送给服务器（通过 Header 或 Cookie）。服务器根据 access_token 获取到用户信息，作为鉴权的依据。而为了避免 token 被用户

前言最近被安排做一个数据可视化的项目，其中包括视频直播（实时监控）功能，于是只懂用 <video> 播放视频文件的我开始学习关于直播、实时播放等知识，在此做下笔记，并转发一些参考性文章。前置知识直播协议在选择工具之前首先要先了解直播的相关原理，这里推荐：直播协议RTMP、HLS、HTTP FLV - Gopherzhang介绍推流、拉流和常用协议《理解RTMP、HttpFlv和HLS的正确姿势》 - 北塔资讯介绍了常用的三个协议的来龙去脉流媒体直播播放三大件PK：

参考：体现工匠精神的Resource Hints

EventLoop 单次循环摘自 MDN：在执行 JavaScript 代码的时候，JavaScript 运行时实际上维护了一组用于执行 JavaScript 代码的代理。每个代理由一组执行上下文的集合、执行上下文栈、主线程、一组可能创建用于执行 worker 的额外的线程集合、一个任务队列以及一个微任务队列构成。除了主线程之外，其它组成部分对该代理都是唯一的。JavaScript EventLoop（事件循环）每次循环就是执行这样一个代理。忽略本文不关注的多线程和worker，每次执行（代

实际操作理解 HTTP 缓存网上很多优秀的文章介绍了 HTTP 缓存，但大多是文字内容。最好结合实际操作，方便更好的理解。实际操作就需要开启一个 HTTP 服务测试 HTTP 协议，建议使用原生的 Node.js 的 http 模块。不建议使用 Express Koa Egg 等开发框架，因为它们内置了很多功能，不利于学习原生的 API。开启 HTTP 服务创建 app.js// 使用 nodejs 开启一个 HTTP 服务const http = require('http')cons

方案一：结合服务端实现将用户所选的图片上传到服务器服务器接收上传的文件保存到服务器并返回服务器上的图片访问地址（http://example.com/a.jpg）客户端将 img 的 src 设置为收到的图片地址优点：兼容性好缺点：麻烦方案二：纯客户端实现有两种 HTML5 增加的 API：使用 URL.createObjectURL()创建一个 DOMString，返回一个表示传递的参数对象的 URL，例如：blob:null/88a6a6a6-9858-4bfe-81ed

WebSocket 介绍WebSocket 的诞生HTTP协议 是单向通讯，通信只能由客户端发起，一个请求对应一个响应，服务器无法向客户端主动发送消息。随着 Web 2.0 时代的到来，有越来越多的应用需要 实时通讯 这样的场景，例如 天气变化通知。起初使用的方案是 Ajax 轮询：开个定时器，定时请求服务器数据，达到一个类似实时的效果。缺点：资源消耗过大，服务器需要处理每个客户端定时发送的请求大部分处理无意义，数据并没有发生变化，但是仍要定时通讯于是2008年 HTML5 定义了 We

关于跨域 和 CORSCORS 主要用于解决跨域问题。跨域就是浏览器的浏览器的同源策略（协议+域名+端口）。网上有太多的总结介绍文章，例如：阮一峰老师的 跨域资源共享 CORS 详解MDN 的 浏览器的同源策略MDN 的 跨源资源共享（CORS）跨域解决方案现在常用的跨域解决方案主要有两个：代理 Proxy开发环境需要前端自己配置 web 服务器生产环境如果不同源，需要运维人员配置CORS缺点：低版本浏览器不支持跨源资源共享（CORS） 最下面有介绍，

监控工具 performanceperformance是W3C引入的web API。接口可以获取当前页面中与性能相关的信息。可以获取的信息：白屏时间：从打开网站到有内容渲染出来的时间节点首屏时间：首屏内容渲染完毕的时间节点用户可操作的时间节点：domready触发节点页面总下载时间：window.onload的触发节点DNS查询时间TCP链接时间…使用：可以通过只读属性window.performance获得可以通过浏览器开发者工具使用window.performance

JavaScript性能优化什么属于性能优化1.提高运行效率的行为2.降低运行开销的行为学习点内存管理垃圾回收(GC：Garbage Collection)及一些算法V8引擎垃圾回收内存监控：chrome开发工具Performance内存管理内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间JavaScript中的内存管理EcmaScript并没有提供操作内存的API，所以JS不能像其他语

History API模拟vue-router的history模式的实践时，需要用到 History API 的知识。historywindow.history对象是一个只读属性。提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。history.gohistory.backhistory.forwardhistory.pushStatehistory.replaceState提供了会话历史的信息history.length 会话历史

响应式原理前置知识（属性描述符、虚拟DOM、数据劫持）参考：MDN - Object.defineProperty()初识JavaScript对象Vue2.0的虚拟DOM渲染原理深入分析虚拟DOM的渲染原理和特性数据劫持 OR 数据代理（Proxy与Object.defineProperty）属性描述符ES5之前，JavaScript语言本身没有提供可以直接检测属性特性的方法，比如判断属性是否只读。Object.getOwnPropertyDescriptor()ES5 在 Obje

Pointfree 编程风格指南在你身边你左右 --函数式编程别烦恼

参考使用异步编程

JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。运行时的概念可视化描述Stack(栈)、Frame(帧)，Heap(堆)、Object(对象)、Queue(队列)、Message(消息)栈 Stack函数调用形成了一个由若干 帧(Frame) 组成的 栈(Stack)。function foo(b) { let a =...

内存声明周期分配你所需要的内存使用分配到的内存（读、写）、不需要时将其释放\归还所有语言第二部分都是明确的（例如访问对象属性，修改对象属性）。一些语言第一和第三部分在底层语言中是明确的（手动分配内存，手动释放内存）。但在像JavaScript这些高级语言中，大部分都是隐含的（自动分配内存，自动释放内存）。第三部分内存的释放/归还，称为垃圾回收。JavaScript语言的 “自动...

要解决的问题前端开发中，经常绑定一些持续触发的事件或异步执行的事件，例如：1.select下拉框支持远程查询可选列表（异步请求获取数据作为选项列表）2.用户注册时，手机号 email等格式验证。3.鼠标在一块div上moverover时执行某些行为。4.监听页面滚动执行某些行为。当类似这些行为，不需要实时的去执行时，可以考虑采用防抖和节流的方式。防抖和节流都是优化高频率执行js代码的...

事件传播模式事件冒泡：事件由最具体的元素接收，不断经过上级节点，直到页面元素document。事件捕获：事件由最外层页面元素接收，不断经过下级节点，直到触发的目标节点。浏览器默认按照冒泡方式传播。三个阶段冒泡阶段： 冒泡传播模式中，由目标节点到document的过程，叫冒泡阶段。目标阶段： 事件不断传递(或直接触发)，最终在具体元素(目标节点)上触发的时候，叫做目标阶段。捕获阶段：捕...