2021-01-08(今日笔记)

1、css 预处理器(sass/less)

原理：是将类css语言通过 webpack 编译转成浏览器可读的真正css。常用功能：
   嵌套
   变量
   循环语句
   条件语句
   自动前缀
   单位转换
   mixin复用

2、css动画

transition:过渡动画
    transition-property:属性
    transition-duration:间隔
    transition-timing-function: 曲线
    transition-delay:延迟
    
animation/keyframes:
    animation-name:动画名称，对应 @keyframes
    animation-duration:间隔
    ...

动画属性：尽量使用动画属性进行动画
    translate
    scale
    rotate
    skew

3、原型/构造函数/实例

原型(prototype):一个简单的对象，用于实现对象的属性继承。每个js对象中都包含一个 __proto__的
属性指向它爹(该对象的原型)，可 obj.__proto__ 进行访问。

构造函数：可以通过 new 来新建一个对象的函数。

实例：通过构造函数和new创建出来的对象，便是实例。实例通过 __proto__ 指向原型，通过constructor
指向构造函数。

//实例
const instance = new Object()
实例为 instance，构造函数为object，构造函数拥有一个prototype的属性指向原型。
//原型
const prototype = Object.prototype

实例.__proto__ === 原型
原型.constructor ===  构造函数
构造函数.prototype === 原型
实例.constructor === 构造函数


原型链：
    原型链是由原型对象组曾，每个对象都有 __proto__ 属性，指向了创建对象的构造函数的原型，__proto__
将对象连接起来组成了原型链。是一个用来实现继承和共享属性的有限的对象链。

执行上下文：(EC 可以理解为一个对象)
    包含三个部分：
        变量对象VO
        作用域链（词法作用域）
        this指向
    类型：
        全局执行上下文
        函数执行上下文
        eval执行上下文
    代码执行过程：
        创建 全局上下文global EC;
        全局执行上下文逐行自上而下执行。
        函数执行上下文被激活，成为active EC,开始执行函数中的代码，caller被挂起
        函数执行完成后，callee 被pop移除执行栈，控制权交还全局上下文caller，继续执行。


作用域：
    执行上下文中包含作用域链。作用域其实可以理解为该上下文中声明的 变量和声明的作用范围。分为 块级作用
域和函数作用域。
    特性：
       声明提前：一个声明在函数体内都是可见的，函数优先于变量。
       非匿名执行函数，函数变量为 只读 状态，无法修改。
    let fun = function(){console.log('func')}
    (function fun(){ fun = 10;console.log(fun) }()) ;//这里会输出： f fun(){fun=10;
    console.log((fun)} 


闭包：
   (定义)父函数被销毁的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以
    继续访问到父级的变量对象。

    会产生的问题：多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，
    所有子函数都受到影响。
    
    解决：
        变量可以通过 函数参数的形式 传入，避免使用默认的[[scope]]向上查找。
        使用 setTimeout 包裹，通过第三个参数传入
        使用块级作用域，让变量成为自己上下文的属性，避免共享。


script 引入方式：
    静态<script>引入
    js动态插入<script>
    <script defer>:延迟加载，元素解析完成后执行
    <script async>:异步加载，但执行时会阻塞元素渲染


对象的拷贝：
    浅拷贝：以赋值的形式拷贝引用对象，仍指向同一个地址，修改时原对象也会受到影响。
         Object.assign
         展开运算符(...)
    深拷贝：完全拷贝一个新对象，修改时原对象不再受到任何影响。
         JSON.parse(JSON.stringify(obj)):性能最快。
         递归进行逐一赋值。
  

new 运算符的执行过程：
    新生成一个对象
    链接到原型：obj.__proto__ = Con.prototype
    绑定 this: apply
    返回新对象。


代码复用方式：
    函数封装，
    继承，
    复制extend
    混入mixin
    借用apply/call

3、let, const 以及 var 的区别？

es5只有全局作用域和函数作用域，没有块级作用域。
es6中增加了块级作用域的概念。

let命令：
    用来声明变量，但是所声明的变量，只在let命令所在的代码块内有效。
    不存在变量提升。（var命令会发生'变量提升'现象，即变量可以在声明之前使用，值为undefined。）
    不允许重复声明。
    暂时性死区（只要块级作用域内存在let命令，它所声明的变量就绑定这个区域，不再受外部的影响。在代码块
       内，使用let命令声明变量之前，该变量都是不可用的。temporal dead zone => TDZ）

const:
    声明一个只读的常量。一旦声明，常量的值就不能改变。
    const 一旦声明变量，就必须立即初始化，不能留到以后赋值。对于const来说，只声明不赋值，就会报错。
    const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
    const 的作用域与let命令相同：只在声明所在的块级作用域内有效。

var：变量提升（无论声明在何处，都会被提至其所在作用域的顶部。
let：无变量提升（未到let声明时，是无法访问该变量的）
const:无变量提升，声明一个基本类型的时候为常量，不可修改；声明对象可以修改。

4、HTTP常见状态码

HTTP状态码表示客户端HTTP请求的返回结果，标记服务器端的处理是否正常或者是出现的错误，能够根据返回的状态
码判断请求是否得到正确的处理。

1xx   信息性状态码： 接受的请求正在处理
2xx   成功状态码：   请求正常处理完毕
   200  -> ok
   204  -> no content: 表示客户端发送请求得到处理，但在返回的响应报文中不含实体的主体部分。
       
3xx   重定向        需要进行附加操作已完成请求
   301  -> moved permanently: 永久性重定向，表示请求的资源被分配了新的url，之后应使用更改的url。
   302  -> found：临时性重定向
   304  -> not modified: 表示客户端发送附带条件的请求时，服务端允许访问资源。 
4xx   客户端错误     客户端请求出错，服务器无法处理请求
   400  ->bad request:请求报文中存在语法错误
   401  ->unauthorized:未经许可，需要通过HTTP认证
   403  ->forbidden:服务器拒绝该次访问
   404  ->not found: 表示服务器上无法找到请求的资源。
5xx   服务器错误     服务器处理请求出错

5、vuex

vuex 是一个专门为vue.js应用设计的状态管理构架，统一管理和维护各个组件的可变化状态。
五个核心概念：
    state： vuex的基本数据，用来存储变量
    getter：从基本数据state派生的数据，相当于state的计算属性
    mutation：提交更新数据的方法，必须是同步的（异步可使用action）
    action：异步操作
    modules：模块化vuex，可以让每一个模块都拥有自己的state，mutation等，方便管理。

6、防抖/节流

高频触发优化方式，能对性能有较大的帮助。

防抖(debounce):将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需要再输入完成后做一次
 校验即可。
    function debounce(fn,wait,immediate){
       let timer = null;
       return function(){
           let args = arguments;
           let context = this;
           if(immediate && !timer){
              fn.apply(context,args)
           }
           if(timer) clearTimeout(timer)
           timer = setTimeout(()=>{
              fn.apply(context,args)
           },wait)
       }
    }

节流：每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景：滚动条事件或者resize
事件，通常每隔100-500ms执行一次即可。
    function throttle(fn,wait,immediate){
       let timer = null;
       let callNow = immediate
       return function(){
           let context = this,
               args = arguments;
           if(callNow){
               fn.apply(context,args);
               callNow = false
           }
           if(!timer){
               timer = setTimeout(()=>{
                   fn.apply(context,args)
                   timer = null;
               },wait)
           }
       }
    }

7、函数执行改变this

在函数中，可以引用运行环境中的变量。就需要一个机制来让我们在函数体内部获取当前的运行环境，即this。
this指向，即谁调用了函数。例如
    obj.fn(),便是obj调用了函数，即函数中的this === obj;
    fn(),即window.fn(),因此 this === window;

手动修改this的指向，即：
    call:   fn.call(target,1,2)
    apply:  fn.apply(target,[1,2])
    bind:   fn.bind(target)(1,2)
共同点：第一个参数都是this要指向的对象，都可以利用后续参数传参，都可以改变this指向。
不同点：
      call 和 apply 都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面需要()进行调用才可以。  
      call后面的参数与func方法中是一一对应的，apply的第二个参数是一个数组，数组中的元素和func方法中一一对应。
      由于bind返回的仍然是一个函数，所以我们可以在调用的时候进行传参。
   例如：
      var obj = {
          name:'xx',
          age:18,
          say:function(param1,param2){
              console.log(this.name +',今年'+ this.age+'岁，'+params1 + param2)
          }
      }  
      var obj2 = {
          name:'yy',
          name:'20'
      }
      obj2.say.call(obj1,'hello','world')
      obj2.say.apply(obj1,['hello','world'])
      obj2.say.bind(obj1)('hello','world')

8、ES6/ES7

声明
   let/const:块级作用域，不存在变量提升，暂时性死区，不允许重复声明
   const:声明常量，无法修改
解构赋值
class/extend:类声明与继承
set/map：新的数据结构
异步解决方案：
    promise 的使用与实现
    generator:
       yield:暂停代码
       next():继续执行代码

    function* helloworld(){
       yield 'hello';
       yield 'world';
       return 'ending';
    }
    const generator = helloworld();
    generator.next() //{value:'hello',done:false}
    generator.next() //{value:'world',done:false}
    generator.next() //{value:'ending',done:false}
    generator.next() //{value:undefined,done:true}

    await/async: 是generator的语法糖，Babel中是基于promise实现。

        async function getUserByAsync(){
           let users = await fetchUser();
           return users;
        }
        const user = await getUserByAsync()
        console.log(user,'user')

9、函数柯里化

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。
const add = function add(x){
   return function(y){
      return x+y
   }
}
const add1 = add(1);
add1(2)  => 3

10、数组 array

map:遍历数组，返回回调返回值组成的新数组
forEach:无法break，可以用try/catch 中 throw new Error 来停止。
filter:过滤
some:有一项返回true,则返回true
every:有一项返回false，则返回false。
join:通过指定连接符生成字符串
push/pop:末尾添加和删除，改变原数组。
unshift/shift:头部添加和删除，改变原数组。
sort(fn)/reverse:排序与反转，改变原数组
concat:连接数组，不影响原数组，浅拷贝
slice（start,end):返回截断后的新数组，不改变原数组
splice(start,number,value...):返回删除元素组成的数组，value为插入项，改变原数组
indexOf/lastIndexOf(value,formIndex):查找数组项，返回对应的下标
reduce/reduceRight()

数组乱序：
   var arr = [1,2,3,4,5,6,7,8,9,10]
   arr.sort(function({
      return Math.random() - 0.5;
   })
数组拆解：flat:[1,[2,3]] ->[1,2,3]
   Array.prototype.flat = function(){
      return this.toString.split(',').map(item => +item)
   }
   

11、从输入url到页面展示的过程

DNS解析
TCP三次握手
发送请求，分析url,设置请求报文(头，主体）
服务器返回请求的文件html
浏览器渲染(html  css layout布局...)

12、回流必定触发重绘，重绘不一定触发回流。重绘的开销较小，回流的代价较高。

13、存储

存储分为短暂性存储和持久性存储
  短暂性存储：将数据存在内存中，只在运行时用即可。
  持久性存储：分为浏览器端和服务器端。
      浏览器：
         cookie：通常用于存储用户身份，登录状态等。（体积上限4k,可自行设置过期时间）
         localStorage/sessionStorage:长久存储/窗口关闭删除，体积限制4-5M
         indexDB
      服务器：
         分布式缓存redis
         数据库

14、内存泄露

意外的全局变量：无法被回收
定时器：未被正确关闭，导致所引用的外部变量无法被释放
事件监听：没有正确销毁
闭包：导致父级中的变量无法被释放
dom引用:dom元素被删除时，内存中的引用未被正确清空

15、get/post

get:缓存，请求长度受限，会被历史保存记录
post:安全，大数据，更多编码类型。

16、websocket

websocket 是一个持久化协议，基于http,服务端可以主动push。

new WebSocket(url)
ws.onerror = fn
ws.onclose = fn
ws.onopen = fn
ws.onmessage = fn
ws.send()

17、TCP三次握手，四次挥手

建立连接前，客户端和服务端需要通过握手来确认对方：
    客户端发送syn（同步序列编号）请求，进入 syn_send 状态，等待确认。
    服务端接收并确认syn包后发送 syn+ack包，进入 syn_recv状态
    客户端接收 syn+ack 包后，发送 ack 包，双方进入 established 状态。

四次挥手：
    客户端  -FIN ->服务端，FIN-WAIT
    服务端  -ACK ->客户端，CLOSE-WAIT
    服务端  -ACK,FIN ->客户端，LAST-ACK
    客户端  -ACK ->服务端，CLOSED

18、跨域

JSONP: 利用 <script>标签不受跨域限制的特点，缺点是只能支持get请求
function jsonp(url,jsonpCallback,success){
   const script = document.createElement('script')
   script.src = url
   script.async = true
   window[jsonpCallback] = function(data){
      success && successs(data)
   }
   document.body.appendChild(script)
}

设置 CORS: Access-Control-Allow-Origin:'*'
postMessage

参考链接：https://juejin.cn/post/6844903776512393224#heading-16