Paperjs：先验内容
本文主要介绍一些paperjs的先验知识（当然英文可以的，你也可以选择直接阅读官方原版文档）。1. 关于paperjs中的图形(path)，官方定义如下：
In Paper.js, paths are represented by a sequence of segments that are connected by curves. A segment consists of a point and two handles, defining the location and direction of the curves.
在paperjs中，paths（路径，或者说是图形），是由一系列曲线(curves)连接的段(segments)，组成的。每个段segment都有一个点和两端的handler组成—->handleIn和handleOut（注意，这三个东西代码层面，都是一个东西，vector）。上图中0，1，2三个segment构成了当前的这个波浪path。handler的作用，用于定义两边的位置及方向。实质就是俩向量，确定该段的始端和末端。为了方便理解，可以直接先将 ...
Nginx--简论
本文会帮你解答一个问题，nginx 这玩意儿是干嘛的Nginx 是啥，官方说法，一种高性能的 http 与反向代理的 web 服务器。什么叫高性能？说白了就是响应尽可能地快。一般的项目后端配置 tomcat 即可满足需求，因为一个站点在某个时刻不可能会有大量的请求达到。tomcat 最高同时能够满足 5、600 的请求响应，所以说一般场景下基本 hold 住。但是总有些热门的站点。在某一时刻会有数以万计的请求，这个时候，tomcat 就扛不住了，服务器直接飘红。为了解决这一问题，nginx 就来了（最大支持 50000 请求）。
反向代理、负载均衡、动静分离、打包预览
反向代理先说明什么是正向代理。客户端不直接访问目标服务器，而是先把请求发给中间代理；由代理代替客户端去请求目标服务，再把结果返回给客户端。即：代理客户端就是正向代理。而反向代理的典型就是 nginx。当客户端的请求发送给服务端的时候，实际上被 nginx 拦截，代替服务端返回响应。即：代理服务端就叫做反向代理。两者都是在客户端和服务器之间加一层，区别主要在部署位置：正向代理更靠近客户端，反向代理更靠近服务端。同一个站点的 ...
Vue.js系列：实现一个自己的vue
本文开始，我们尝试着实现一个自个儿的vue框架（简陋版本）。
基本功能数据变化，更新视图，视图变化，改变数据。(MVVM中的VM做的事情)
首先我们的页面结构如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My_vue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{msg}}---{{info}}</ ...
Vue.js系列：对象的变化侦测
对于对象属性的变化侦测，是vue响应式的核心。其本质需要实现的功能：当改变对象某属性值的时候，我们需要捕捉到这个变化。那么vue是怎么做到的？defineProperty
前端目前三大框架三分天下，实现响应式的方式却各有不同。angular、react属于”pull（拉）“，而vue则属于”push（推）“。两者的区别在于，拉的方式是被动的，推的方式则是主动的。当我们改变了某个对象的某个值之后,对于前者而言，框架能够知道,某些状态发生了变化但是不知道具体谁发生了变化，所以此时会暴力的对比找出变化的状态，而对于后者而言，当属性值改变后，会把这个改变了的状态主动告诉框架。然后框架去通知这个状态的所有依赖。这就是为什么vue的响应式被称之为“细粒度”的响应式。
具体实现：
const definePropertyReactive = (obj, key, val) => {
Object.defineProperty(obj, key, {
get() {
console.log('val>>', val)
return va ...
JS的转折分界: ES6
不管有没有系统的去学习ES6相关的概念，但我相信，在日常开发中，都或多或少的使用到了相关方法。笔者一直很纳闷，事实上ES6从发布至今也蛮长时间了，但是面试的时候总会有面试官问这么个问题：ES6有什么新的特性。。。。事实上这是因为该版本,对于js这门语言而言,具有里程碑的意义.那么本文尝试着将最重大的改动梳理梳理.
首当其冲的必定是let、const块级作用域声明方式。同var相比两个不同。块级作用域能够屏蔽var的变量提升，将变量的生命周期局限在块中。本质讲，var所谓的变量提升指的是用其声明的变量，会自动提升到作用域的顶部。const f = function () {
if (false) {
let name = '1234'
//var name = '1234'
}
console.log('name:', name)
}
f()
用var声明的name，打印是undefined，而用let打印的是not defined，error
模板字面量。简单地讲，就是可以在字符串 ...
性能的考量：第三回(canvas)
本文主介绍canvas的性能优化策略关于性能问题,实际上,针对于类似管理系统这样的项目而言,不需要关注太多,也没那必要.但是对于图形编程类的项目而言,则是至关重要的指标.关乎生死。
先点名canvas的耗时因素
图形的数量
图形的大小。
高质量、大文件的图片（画在画布上）
图形编程类的项目,关注性能问题的原因,在于交互体验。比如我们废了半天劲写了一个web端的类cs射击游戏,当我兴奋的准备往前走两步时,发现页面直接给我来了个帧数级别的慢动作,江湖说法叫做”卡成狗”，用户体验几乎为0。这种完全不能玩的应用,如同垃圾。
我们首先来定义一下, 什么叫做卡?卡顿原理可以解释为,每一帧js主线程执行的事情过多,导致帧内时间没来得及干完,即当前帧耗时超过分配的帧时间。那么什么是”分配的帧时间?60hz举例,一秒钟60帧,那么一帧的时间大约在16.7ms.所以,如果在一帧内的耗时超过了16.7ms,就会出现视觉层面的”卡”。目前主流的屏幕基本都是60hz,也就是显示器,以每秒60次的频率闪频,但我们人眼无法察觉。
在实践的项目中，我们遇到了一个这样的警告：白话就是，“大哥，您在一帧时间内做的事情太 ...
性能的考量：第一回(方法篇）
本文旨在梳理目下通用的性能优化方法性能优化没有一个统一的指标，但目的是明确的，就是要让站点应用的加载速度够快，如此用户体验才能高（暂且不管页面做的烂不烂）,毕竟从应用开发者的角度看，时间就是金钱。为了让时间压缩到极致，我们需要从请求到完全响应的全部细节入手，尽可能的压缩。即：从用户在地址栏中输入—>页面加载完成，该过程中的每一个点，都需要倍加注意。可能这就是为什么那么多面试官那么喜欢问一道烂大街的题： 地址栏里输入地址后到直到页面展示，尽可能详细地说说…
精髓部分根据《高性能浏览器网络》的研究结论得出，性能优化三个大的角度：带宽、延时和渲染耗时.那么由于现代光纤通信的大规模普及，带宽的影响因素，已经小到可以忽略不计的地步（管道宽到你怎么都塞不满），所以本文不讨论，剩下的就是延时和渲染。
延迟耗时层面《计算机网络》的第六版中，对于延迟给出了明确的定义，从c端发出消息到s端收到消息的时间消耗，具体包括：排队延迟 –（缓冲）-> 处理延迟–（路由）->传输延迟—>传播延迟。但是扯了这么多是基于一个大前提的，就是真实发送请求的情况下。引用《高性能浏览器网络》的终极解决 ...
js的上古规则:原型链那些事儿
本文目标：捋清原型链那一套在《JS类型详论》的那篇文章中，我们有提到过自有属性和原型属性的概念。二者的区别，就是原型链存在的意义。
const obj = {
name: 'dddd'
}
console.log(obj.hasOwnProperty('constructor'))
console.log('constructor' in obj)
在上面的代码中，我们创建了一个对象obj，含有一个name属性。随后用两种方式打印constructor，很显然我们并没有看到constructor属性，但是，通过in的方式，打印出了true。为什么？我们说过in能够扫描的属性不单单是对象上显式写出来的属性（自有属性），还包括了对象原型链上的（原型属性）。而此处的constructor，就存在于obj的原型对象中，所以打印出了true。具体查找流程：发现自有属性没有，然后沿着obj的__proto__属性找到其原型对象，发现目标输出。倘若依旧没有，那就继续沿着原型对象的原型对象找。直到世界尽头。这，就是原型链。
__proto__和prototype首先我们需要搞清 ...
JS类型详论
本文主旨： 极尽一切可能的，详细介绍js类型相关内容主要数据类型两类
基本类型： 变量存储值数字、布尔、undefined、null、字符串、Symbol
引用类型：变量存储地址，类似于c语言中的指针函数、数组、对象
判断数据类型
typeof： 能够判断除了null和数组的所有数据类型
console.log(typeof 'a')
console.log(typeof true)
console.log(typeof Symbol())
console.log(typeof undefined)
console.log(typeof null)
console.log(typeof {})
console.log(typeof function() {})
console.log(typeof [])
// 结果
string
boolean
symbol
undefined
object
object
function
object
instanceof: 实话讲，该方法用的并不多，因为他明显没有typeof用的舒服，且他并不是用来做类 ...
Git亲妈级教程
一般的代码提交流程：
git add .
git commit -m 'message'
git push
提交到自己的分支，发起合并到dev分支的merge交由负责人审查合并代码。
克隆分支并同步远端
git checkout -b '分支名'
git push origin '分支名'
查看哪些文件被修改及修改的内容
git diff --cached
本地仓库与远程主机仓库关联起来
git remote add origin "https://github.com/kinglion580/shiyanlou.git"
如何在本地给远程仓库创建一个分支？（就是远程仓库没有该分支）首先需要在本地新建一个分支： git checkout -b 分支名同步到远程：git push –set-upstream origin 分支名然后通过命令直接push到远程：git push
如何在本地删除远程分支
// 删除本地分支
git branch -d 分支名
// 删除远程分支
git push origin --delete 分支名
// 本地分支和远程同步
git re ...