前端知识点

UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式。

UTF-8 最大的一个特点，就是它是一种变长的编码方式。它可以使用1~4个字节表示一个符号，根据不同的符号而变化字节长度。

UTF-8 的编码规则很简单 只有二条:

1.对于单字节的符号，字节的第一位设为0，后面7位为这个符号的 Unicode 码。因此对于英语字母，UTF-8 编码和 ASCII 码是相同的。
2.对于n字节的符号（n > 1），第一个字节的前n位都设为1，第n + 1位设为0，后面字节的前两位一律设为10。剩下的没有提及的二进制位，全部为这个符号的 Unicode 码。



//严的 Unicode 是4E25（100111000100101）
//根据上表，可以发现4E25处在第三行的范围内（0000 0800 - 0000 FFFF）
//因此严的 UTF-8 编码需要三个字节，即格式是1110xxxx 10xxxxxx 10xxxxxx。
//然后，从严的最后一个二进制位开始，依次从后向前填入格式中的x，多出的位补0。
//这样就得到了，严的 UTF-8 编码是11100100 10111000 10100101，转换成十六进制就是E4B8A5。

服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码
再对主体进行解析。

-DNS解析 (查询 DNS 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存) -> 

-TCP连接 (
 // 3次握手
 // 第一次握手 客户端发送 SYN=> 服务端 (客户端: 我来了)
 // 第二次握手 服务端发送 ACK=> 客户端 (服务端: 好嘞)
 // 第三次握手 客户端发送 ACK=> 服务端 (客户端: 好嘞)
 
 // 4次挥手
 // 第一次挥手 主动关闭方 FIN=> 被动关闭方 (客户端: 该撤了)
 // 第二次挥手 被动关闭方 ACK=> 主动关闭发 (服务端: 好嘞)
 // 第三次挥手 被动关闭方 FIN=> 主动关闭发 (服务端: 你撤那我也得撤啊 都确认了你最后再吱一声 不然我一直等着就智障了)
 // 第四次挥手 主动关闭方 ACK=> 被动关闭方 (客户端: 好勒)
) ->

-( SSL 四次握手 hello -> certificate-hello -> exchangekey -> finished )

-发送HTTP请求 (HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文) ->

-服务器处理请求返回HTTP报文 (查找资源返回状态码) ->

-浏览器解析渲染页面 (
 // T0 -> [Get HTML] => [Browser Parsing HTML & prefetch]
 // T1.0 -> [Parsing Dom (Will Parse All The Tags Before Script Soon)] 
 // T1.1 -> (Maybe CSS Recieved / JS Recieved) => [(Dom Render Blocking) Load CSS & Build CSSOM] => [Combine CSSOM + DOM -> Render Tree] => [Paint]
 // T1.2 -> [(Dom Parser Blocking) Load JS] => [Run JS] => [Parsing Dom] => (DomContentLoaded Event)
 // T1.3 -> [Composite Layers] => (Load Event)
 ) ->
连接结束

// T0
浏览器预下载: 现代浏览器很聪明，会进行 prefetch 优化，浏览器在获得 HTML 文档之后会对页面上引用的资源进行提前下载。

// T1.0
DOM解析: 解析器把 HTML 转换为 JavaScript 可存取的 Dom 对象 (由浏览器 UI Render 线程负责)
// T1.1
CSS加载: CSS加载会阻塞 DOM 渲染，不会阻塞 DOM 解析。CSS是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
Render树: CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
// T1.2
JavaScript加载: JavaScript可以查询和修改 DOM 与 CSSOM，所以 JavaScript 执行会阻止 DOM 和 CSSOM 构建 （除非将 JavaScript 显式声明为异步执行）。需要尽量将JavaScript放在 body 的末尾，保证首屏页面先渲染。V8 引擎执行 JavaScript 代码。
DOMContentLoaded Event: 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
// T1.3
Load Event: 浏览器已经加载了所有的资源（图像，样式表等）。

// Paint 问题
// 经过 Chrome Performance 试验结果:
// 正常情况下 CSS Loaded + Parse StyleSheet (Build CSSOM) 随后会 Paint (即 T1.1 中的 Paint)
// 个别情况下 如 JS 资源下载不耗时 原先 T1.1 中的 Paint 可能会延后到 T1.2 DomContentLoaded Event 之后

1.通过 Meta 标签控制: 
例如 - <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
只有部分浏览器支持 并为广泛使用

2.通过 HTTP 缓存控制:  
-2.1 强缓存:
 Expires 是服务器端在响应请求时用来规定资源的失效时间。  
 Cache-Control (HTTP 1.1 出现) 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。  

 Cache-Control 的优先级要高于 Expires

-2.2 协商缓存:
 Etag ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。
 Last-Modify 该资源的最后修改时间

 服务器会优先验证ETag

触屏网页的 tap 与 click :
两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件
//(触屏穿透问题最好通过300ms隐形浮层方法解决 或者 fastclick.js)

tap 实现思路:
基于三个基础触摸事件: touchstart、touchmove、touchend
// 滑动则不触发 tap + 长按超时则不触发 tap

LocalStorage 同源则 => 可以
SessionStorage 同源也 => 不可以

ES6常用新特性:

1.let && const

2.iterable类型
/**
 * 
let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();

iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }
 */

3.for of 
// 用于遍历数组 与forEach()不同的是 它可以正确响应 break continue return 语句

4.解构赋值 
// let [a, b, c] = [1, 2, 3];

5.箭头函数 
// =>

6....操作符 
// Math.max(...[14, 3, 77]) 等同于 Math.max(14, 3, 77);

7.类
// ES6 的 class 可以看作只是一个语法糖
// 类的方法内部如果含有 this 它默认指向类的实例
// 如果一定要实现私有方法可以通过 Symbol 变通实现
const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class {

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }

  // ...
};


ES7新特性:

1.Array.prototype.includes

2.Exponentiation Operator(求幂运算)


ES8新特性:
1.Object.values + Object.entries 
// let obj = { a: 1, b: 2, c: 3 }; 
// Object.values(obj) [1,2,3]; 
// Object.entries(obj) ['a', 1], ['b', 2], ['c', 3]

2.String padding 
// 字符串填充

3.Object.getOwnPropertyDescriptors 
// writable 属性的值是否可以被重写 
// enumerable 此属性是否可以被枚举
// configurable 是否可以删除目标属性或是否可以再次修改属性的特

4.函数参数列表和调用中的尾逗号 
// Trailing commas

5.异步函数 
// Async Functions

// throttle 节流
// 例如用户8s内连续点击300次按钮 可以throttle(fn, 5000)实现节流5s内只触发一次
module.exports = function throttle (fn, time) { 

    var that = fn, 
        timer,  
        firstTime = true;

    return function () { 
        let args = arguments,
            me = this;
            
        if (firstTime) {
            fn.apply(me, args)
            return firstTime = false
        }
        if (timer) {
            return false
        }

        timer = setTimeout(function() { 
          clearTimeout(timer)
          timer = null
          fn.apply(me, args)
        }, time || 500)
    }
}



// debounce 防抖
// 例如搜索框只有在用户停止输入1s后才出现联想词 deboune(fn, 1000)
module.exports = function debounce (fn, delay) { 
    var timer = null;

    return function () {
        clearTimeout(timer);
        timer = setTimeout( function () {
            fn();
        }, delay);
    }
}

//错误用法
//会根据首个char字符assic码排序
Array.prototype.sort.call([12,1,5])
>>> (3) [1, 12, 5]

//正确用法
Array.prototype.sort.call([12,1,5],(a,b)=>(a-b))
>>> (3) [1, 5, 12]

使用Array.prototype.sort不应该只返回两种值 true false 相当于 1 0 而没有 -1

1.纯粹的函数调用: this === 全局对象 
console.log(this === window) // true

2.作为对象方法的调用: 这时 this 就指这个上级对象
x = {
  a: 1, 
  f: function() { console.log(this.a) }
}
x.f() //1

3.作为构造函数调用: this 指向这个新对象 
function o(n) { this.a = n }
let o1 = new o(1) // {a: 1}

4.call/apply调用: 指向显式调用的对象
x = {
  a: 1, 
  f: function() { console.log(this.a) }
}
x.f.call({a:2}) //2

5.箭头函数: 箭头函数不会创建自己的 this 它只会从自己的作用域链的上一层继承 this
x = {
  a: 1, 
  f: () => { console.log(this === window) }
}
x.f() //true

setTimeout(() => {console.log(1)}, 0);
new Promise((resolve, reject) => {
    resolve('ok')
}).then(function() {
    console.log(2);
}).then(function() {
    console.log(3);
}).then(function() {
    console.log(4);
});
console.log(5);

// >> 5 2 3 4 1
// 主线程的所有代码执行结束后。先从微任务queue里拿回掉函数，然后微任务queue空了后再从宏任务的queue拿函数。
// 事件循环总是 一个宏任务 => 所有微任务 => 一个宏任务 => 所有微任务 ...

六种基本数据类型

undefined
null
string
boolean
number
symbol(ES6)



一种引用类型

Object

//本质原理
原始数据类型 => 存储在栈中
//占据空间固定
引用类型 => 存储在堆中
//(而存储在变量处的值实际上是指针point,指向存储对象内存地址)
//占据空间大小会变

typeof(undefined); // undefined
typeof(null); // object ☆
typeof(true); // boolean
typeof(3); // number
typeof('str'); // string
typeof(Symbol('k')); // symbol
typeof({key: 0}); // object
typeof(function(){}); // function
typeof([1, 2, 3]); // object  ☆

let arr = [1, 2, 3]

console.log(arr instanceof Array); // true // es6

Object.prototype.toString.call(arr) === '[object Array]'; // true

arr.constructor === Array; // true

let obj = {};

// 直接 for in + hasOwnProperty
function ieo (obj) {
   for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        return false;
      }
   }
   return true;
}



ieo(obj); // true

JSON.stringify(obj) === '{}'; // true

Object.keys(obj).length === 0; // true // es6

1.箭头函数不会创建自己的this 只会从自己的作用域链的上一层继承this ☆

2.通过 call() 或 apply() 方法调用一个函数时 第一个参数会被忽略 (bind也同样成立)

3.不绑定Arguments对象

4.不能和new一起使用 和new一起用会抛出错误
// 因为使用箭头函数后this会指定闭合的当前上下文，而当函数做为构造器的时候，this又会指向生成的实例， 这个造成歧义。

5.没有prototype

6.不能使用yield关键字

XSS: 跨站脚本攻击
恶意web用户将代码植入到提供给其它用户使用的页面中

XSS防范:
永远不要相信用户的输入 后端转义 + 前端转义

CSRF: 跨站请求伪造
一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法

CSRF 防范

1.最基础的防范就是在 Get 与 Post 区别的文章中有说过
Post 请求要比 Get 更为安全 但只能说会 Pass 一些低级攻击选手。

2.请求来源限制——验证 HTTP Referer 字段
在 HTTP 请求头中有一个字段叫 Referer 它记录了请求的来源地址 
服务器需要做的是验证这个来源地址是否合法 如果是来自一些不受信任的网站 则拒绝响应
(但是 Refer 也能伪造)

1. CSRFToken 
使用随机数作为请求参数来校验

hash模式: [hash 改变] + [监听 hashChange] + [route map 执行回调]
history模式: [主动 pushState 改变 Path] + [route map 执行回调]

=> 多进程

// 为了将多核 CPU 的性能发挥到极致
// 最大程度地榨干服务器资源
// egg 采用多进程模型
// 解决了一个 Node.js 进程只能运行在一个 CPU 上的问题

app.use:
加载用于处理 http 请求的 middleware 中间件 

函数数组:
express 内部维护一个函数数组 这个函数数组表示在发出响应之前要执行的所有函数

结论:
使用 app.use(fn) 后 传进来的fn就会被扔到这个数组里
执行完毕后调用 next() 方法执行函数数组里的下一个函数
如果没有调用 next() 的话 调用就会被终止

router对象的主要作用:
创建一个普通中间件 或者 路由中间件的引导着(这个引导着Layer对象链接到一个route对象)
然后将其保存到自己的stack数组中

var express = require('express');
var app = express();

// 没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
app.get('/user/:id', function (req, res, next) {
  res.send('USER');
});


var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

function qsort(arr) {
  if (arr.length <= 1) { return arr; }
    var pivot = arr[0];
    var left = []
    var right = [];
    for (var i = 1; i < arr.length; i++) {
      if (arr[i] < pivot) {left.push(arr[i])}
      else {right.push(arr[i])}
    }
  return qsort(left).concat([pivot], qsort(right));
}

alert(qsort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”

//  <div id="app">
//    <h1>{{message}}</h1>
//  </div>


------beforeCreate------ 
el     : undefined
data   : undefined
message: undefined

        ------created------   // 此时 data已初始化 dom节点还未创建
        el     : undefined
        data   : {"message":"你好 Vue"}
        message: 你好 Vue






                ------beforeMount------   // 此时 dom节点已创建已添加到页面 {{message}}插值运算还未计算
                el     : <h1>{{message}}</h1>
                data   : {"message":"你好 Vue"}
                message: 你好 Vue

                        ------mounted------  // {{message}}插值运算结束
                        el     : <h1>你好 Vue</h1>
                        data   : {"message":"你好 Vue"}
                        message: 你好 Vue






                        >>> vm.message = '你好世界'



                                ------beforeUpdate------  // data已经改变 virtualdom还未驱动dom更新
                                el     : <h1>你好 Vue</h1>
                                data   : {"message":"你好世界"}
                                message: 你好世界

                                        ------updated------  // 已更新dom
                                        el     : <h1>你好世界</h1>
                                        data   : {"message":"你好世界"}
                                        message: 你好世界

Observer: 数据的观察者，让数据对象的读写操作都处于自己的监管之下

Watcher: 数据的订阅者，数据的变化会通知到Watcher，然后由Watcher进行相应的操作，例如更新视图

Dep: Observer与Watcher的纽带，当数据变化时，会被Observer观察到，然后由Dep通知到 Watcher 更新而执行 queuewatcher()


// 示意:

$vm.data => Observer // 一个 data 对应[一个] Observer
                  v
                  Observer.walk // 通过 Observer.walk 多次 defineReactive()
                  v
                  for (..) {
                      const dep = new Dep()..  // 实例化[多个] Dep
                      proxy(data) // Vue 3.0 使用 Proxy 代理多个 key 的 set 和 get
                      dep.depend().. addDep.. addSub.. // 添加[多个]实例化的 watcher 到数组 dep.subs
                  }
                  
                  
----> 拦截到 set ---> Observer 调用 dep.notify()
                                      v
                                      遍历subs去更新
                                      V
                                      for (...) {
                                          queueWatcher() -> -> -> nextTick(flushSchedulerQueue)
                                      }
                  
                  

// nextTick 原理

- queuewatcher 更新本身就用的 nextTick(flushSchedulerQueue)   
- Vue.nextTick 依然使用 nextTick 即可保证回调进入事件队列队尾
- nextTick 基于 microTimerFunc (promise) 或者 macroTimerFunc (setImmediate, MessageChannel, setTimeout) 来实现

// 主要在执行异步事件时
用户输入操作，比如点击，提交等
请求服务端数据
定时事件，比如setTimeout，setInterval

// 如何监听全部异步事件的?
Angular接入了ZoneJS 由它监听了Angular所有的异步事件
// ZoneJS是怎么做到的呢？
其实它重写了所有的异步api（所谓的猴子补丁Monkey patch）！ZoneJS会通知Angular可能有数据发生变化，需要检测更新。

v-for => 使用就地复用原则
// 数据顺序改变时不会移动 dom 
// 而是就地改变元素 
// 这个策略不适合类似表单输入框的场景

可以用 :key 来追踪元素
// 类似 vue 1.x 的 track-by

// Cordova
// 通过打开gap://协议请求被native端拦截

... return prompt(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId])); 

... window.webkit.messageHandlers.cordova.postMessage(command);

// native 把返回值和 callbackID 返回给 js
// 完成通信

// RN

React Native会在一开始生成OC模块表
然后把这个模块表传入JS中 
JS参照模块表 就能通过JavaScriptCore执行而间接调用OC的代码(微信小程序方式类似)

safari无痕浏览模式
window.localStorage.setItem is true but call error

1.单体/单例模式: 一个类只能保证有一个实例 例如对象字面量的方式创建一个单例

//先判断实例是否存在，存在则返回，不存在则创建，这样可以保证一个类只有一个实例对象
var test_simple = test_simple || {
   name: 'alice'
}

2.1.观察者模式
观察者模式: 要求希望接收到主题通知的观察者必须订阅内容改变的事件

2.2.发布订阅模式
发布订阅模式: 使用了一个主题/事件通道 这个通道介于订阅者和发布者之间 其目的是避免订阅者和发布者产生依赖

3.工厂模式
工厂模式: 提供创建对象的接口 封装一些公用的方法 如果实现具体的业务逻辑 可以放在子类重写父类的方法
优点: 弱化对象间的耦合 防止代码重复
缺点: 简单业务可以用 复杂的业务会导致代码维护性差 不易阅读

FruitCake.prototype.makeCake = function(type){
    var cake;
    switch (type){
        case 'apple':
            cake = new AppleCake();break;
        case 'pear':
            cake = new Pear();break;
        default:
            cake = new Orange();break;
    }
    return cake;
}

'2' in {'2': 2}; // true
[1,2].includes(2);  // true
(new Set([1,2])).has(2); // true

波浪号（tilde）+指定版本：安装时不改变大版本号和次要版本号。
插入号（caret）+指定版本：安装时不改变大版本号。
latest：安装最新版本。

控制台打印的[折叠的][按引用传]的对象,把折叠打开后才拿到折叠起来的值。

1.可以使用css代替的标签
删除 basefont,big,center,font,s,strike,tt,u 这些纯表现的元素 html5中提倡把画面展示性功能放在css中统一编辑

2.html5不再使用frame
不再用 frame,noframes和frameset，这些标签对可用性产生负面影响。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。

3.只有个别浏览器支持的标签
bgsound 背景音乐，blink 文字闪烁，marquee 文字滚动, applet 用于插入JAVA渲染的代码

4.其他不常用的标签
ul替代dir
pre替代listing
code替代xmp
ruby替代rb
abbr替代acronym
废除isindex使用form与input相结合的方式替代。
废除listing使用pre替代
废除nextid使用guids
废除plaintex使用“text/plian”（无格式正文）MIME类型替代。

transform => 不会触发 repaint
// 一点非常类似3D绘图功能
// 最终这些使用 transform 的图层都会由独立的合成器进程进行处理
// opacity filter 也支持硬件加速

工作区 (Working Directory):
就是你在电脑里能看到的目录

暂存区 (stage):
工作区有一个隐藏目录 .git 这个不算工作区 而是Git的版本库。 
Git的版本库里存了很多东西 其中最重要的就是称为stage（或者叫index）的暂存区

添加+提交 (add+commit)
git add: 把文件添加进去 实际上就是把文件修改添加到暂存区
git commit: 提交更改 实际上就是把暂存区的所有内容提交到当前分支。
一旦提交后 如果你又没有对工作区做任何修改 那么工作区就是"干净"的

(HEAD就是当前活跃分支的游标)