前端部分知识总结

摘要：在中，每一个节点被称为回流重绘回流中部分全部元素的规模尺寸布局等改变而需要重新构建页面。而就是通过调用构造函数创建的对象实例的原型对象原型所指的就是一个对象，实例继承对象的属性。

display:none
彻底消失
将会隐藏它以及所有的后代元素
占据的空间消失，浏览器不会解析该元素
页面产生回流+重绘

visibility:hidden
视觉消失可以理解为透明度为0
占据的空间仍存在，浏览器仍然会解析该元素
页面产生重绘
visibility具有继承性，父元素设置visibility:hidden，子元素也会继承该属性，当子元素重新设置visibility:visible，元素又会重新显示，而display:none不会

页面的呈现流程

浏览器将读取的所有html代码解析，生成一个Dom树 ->dom tree

浏览器将所有样式解析成样式结构体 ->style rules

Dom数和样式结构体结合生成构建呈现树 render tree ->attachment

浏览器根据render tree 绘制页面

some tips

在解析样式结构体的过程中浏览器会去除不能识别的样式（IE去掉-moz开头的样式，firefox去除_开头的样式)

render tree与dom tree区别很大，render tree能够识别样式，且不会包含隐藏的节点(display:none)，visibility:hidden仍会包含在render tree内。在render tree中，每一个节点被称为box

回流&重绘

回流：render tree中部分（全部）元素的规模尺寸布局等改变而需要重新构建页面。
重绘：render tree中一些元素需要更新属性，但这些属性只影响元素的外观、风格而不引起布局的改变

在解析样式结构体的过程中浏览器会去除不能识别的样式
回流必将引起重绘，重绘不一定引起回流
参考文档：关于呈现、回流、重绘

get：通过查询字符串的方式来进行传递

用于获取少量信息（单次运输量不大于64k），使用url传递参数->很不安全

post：通过表单的方式传递

用于修改服务器的资源，无信息量限制，采用请求体承载的方式，不易暴露
    

本质上同根同源
get&post 都是http协议中用于发送请求的方法，而http是基于tcp/ip的关于数据如何在万维网通信的协议
如何理解？
TCP->汽车 HTTP->交通规则 浏览器->运输公司
get->将货物放在车顶上(url) ，只产生一个数据包
post->将货物放在车厢里 ， 产生header+body两个数据包

post产生两个数据包，先发送header确认后再发送body，然而并不是所有浏览器都在post中发两次包，如firefox就只发一次

http://    www.baidu.com    :8080    /dir/other.html
协议        主机名            端口     文件路径 参数 文件片段

transform
对元素进行移动、缩放、转动、拉长或拉伸
方法：
translate()：元素从当前位置移动根据给定的top left 坐标移动

transform:tanslate(50px,30px)    

rotate()：元素顺时针旋转给定的角度，负值->逆时针旋转

transform:rotata(20deg)

scale():根据给定的XY轴参数、元素的尺寸会增加或减少（拉伸、收缩）

transform:scale(1.2,0.8)

skew():翻转

transform:skew(20deg, 20deg);
//围绕 X 轴把元素翻转20度，围绕 Y 轴翻转20度

transition过渡
元素从一种样式逐渐变为另一种样式,属于一种简单的动画属性
四个属性：
transition-property: 过渡属性的样式(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)必须值
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

div{
width:100px;
transition: width 1s;
//时长为一秒的宽度变化效果
}
div:hover{
width:500px;
}

参考：深入理解trasition
参考：transition和transform

为什么用虚拟dom？
生成页面时，浏览器从构建DOM树开始从到到尾执行一遍流程。比如在一次操作时，需要更新10个DOM节点，理想状态是一次性构建完DOM树，再执行后续操作。但是浏览器并不会这么做，收到第一个更新DOM请求后会马上执行流程，因此需要执行10次。频繁的操作会引起页面卡顿。真实的DOM节点，哪怕最简单的一个div也会包含很多属性

虚拟DOM干什么？
如一次操作有10个更新DOM的动作，虚拟DOM不会立刻操作DOM，而是将10次更新的diff内容保存到一个本地的js对象中，最终将js对象一次行attach到DOM树上，避免了大量的无谓计算量

虚拟的DOM的核心思想：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作

三个状态：装配 更新 卸载

初始化渲染：
constructor()构造函数

componentWillMount组件将要加载（17版本弃用，在这里请求异步数据，render可能不会渲染到，因为componentWillMount执行后，render立马执行）
整个生命周期只调用一次（组件更新不再调用）

render()渲染方法

componentDidMount 组件已经加载
整个生命周期只调用一次（组件更新不再调用）
↑在这里可以异步请求数据，在这里设置状态会触发重新渲染，但是不推荐使用setstate函数,会触发额外一次渲染，且在浏览器刷新屏幕之前执行，会导致性能问题

更新：
共有五个环节（不同的情况有不同的执行步骤）

1.componentWillReceiveProps(nextprops获取更新状态以及相应的组件状态，组件将要接收参数

2.shouldComponentUpdate(nextprops,nextstate)根据下一个props和state决定组件是否应该更新
↑immutable data在此使用immutable是一旦创建，就不能再被更改的数据

3.componentWillUpdate()组件将要更新 做准备工作（定时、网络请求等）
在这里可以更改state 但是不能使用setState函数 会引起函数调用componentshouldupdate从而进入死循环
4.render()渲染

getSnapshotBeforeUpdate(nextprops,nextstate)在更新前截图//不会用

5.componentDidUpdate() 组件已经更新完毕
可以在这里获取DOM

卸载
只有一个步骤，因为卸载后将失去控制能力
componentWillUnmount()组件将要卸载
在这里清除一些不需要的监听和计时器

三种模式下的执行步骤：

父组件带动子组件更新 -> 12345

setState() 跳过componentWillReceiveProps() ->2345

forceUpdate()强制更新 跳过shouldComponentUpdate()无需判读->345

defaultProps()
设定默认props 在组件没有被传入时生效，避免报错
propTypes 类型检查

import PropTypes from "prop-types".//结合第三方prop-types库
static propTypes = {
    title:PropTypes.string
}

原型是JavaScript中继承的基础,JavaScript的继承就是基于原型的继承

什么是原型？
我们创建的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象可以包含由特定类型的所有实例共享的属性和方法。而prototype就是通过调用构造函数创建的对象实例的原型对象

原型所指的就是一个对象，实例继承对象的属性。在原型上定义的属性，通过继承，实例也拥有了这个属性
实例通过_proto_这个属性直接访问到原型

function Person(){
Person.prototype.type   = "object named Person";
person = new Person();
person._proto_ === Person.prototype;//两者等价

}

构造函数->prototype->访问原型
原型->constructor->访问构造函数

使用原型的好处：
可以让对象的实例共享它所包含的属性和方法，不必在构造函数中添加定义对象信息，而是可以将这些信息添加到原型中（如果使用构造函数就要让每个方法都在实例中创建一遍）

constructor是原型的一个属性，Constructor是真正的构造函数

什么是原型链？
_proto_是实例指向原型对象的一个指针，是任何对象都有的属性,js万物皆对象，所以就形成了一条由_proto_连起来的链条，递归访问到头，终值为null

在读取一个实例的属性时，如果该属性在当前实例没有找到，那么就会循着_proto_指定的原型继续向上找，如果还找不到，则寻找原型的原型，如果一直没有找到，则直到搜索到null为止

原型继承

Son.prototype = new Father();//Son继承了Father,通过原型，形成链条

参考文章：原型
参考文章：原型链

变量提升
ES6之前没有块级作用域，只有全局作用域和局部作用域，变量提升就是将变量声明提升到它所在作用域的最开始的部分

函数提升
创建函数有两种形式：函数声明和函数字面量，只有函数声明有变量提升

console.log(a)  // f a() { console.log(a) }
console.log(b) //undefined，不存在函数提升
    
function a() {
        console.log(a) 
}

var b = function(){
        console.log(b)
}

函数提升与变量提升的优先级
函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖。

console.log(a);    // f a() {console.log(10)}
console.log(a());    //  undefined
var a = 3;

function a() {
        console.log(10) //10
}
console.log(a)   //3
a = 6;
console.log(a());  //a is not a function;

正常的执行顺序

 var a = funtion () {
        console.log(10)
    }
    var a;
    console.log(a);    // f a() {console.log(10)}
    console.log(a());  //  undefined

    a = 3;
    console.log(a)   //3
    a = 6;
    console.log(a());   //a() is not a function;

参考文章

事件监听
onclick方法、addEventlistener、attachEvent(不支持ie，执行顺序3-2-1)

setTimeout超时调用
setInterval间歇调用，按照指定的时间间隔反复执行任务代码

generator 能够多次返回的“函数”
每执行一次后就暂停，返回的值就是yield的返回值，每次返回一个值，直到done为true，这个generate对象已经全部执行完毕

promise
三种状态：等待（pengding） 成功（resolved） 失败（rejected）

async/await
一种特殊的语法，可以更舒适地与promise协同工作
async放置在一个函数前面，使函数总是返回一个promise，即使其中包含非promise（会自动将返回值包装成promise的resolved值）
await只能使用在async内，能够使JavaScript等待，直到promise处理结束
1.如果它是一个错误，异常就产生了，就像在那个地方调用了throw error一样。
2.否则，它会返回一个结果，我们可以将它分配给一个值

参考

观察者模式
publish()/subscribe
又称为发布、订阅模式
某个任务执行完毕，则向信号中心发布一个信号，其他任务可以向信号中心订阅该信号，从而知道何时执行自己的任务

//f2()
　jQuery.subscribe("done", f2);
//f1()
function f1(){

　　　　setTimeout(function () {

　　　　　　// f1的任务代码

　　　　　　jQuery.publish("done");

　　　　}, 1000);

　　}

//f2执行完毕后可以取消订阅
　　jQuery.unsubscribe("done", f2);

该方法优于事件监听，可以通过查看消息中心了解现在有多少信号、订阅者，从而监控程序的执行状态
参考文档

优点：容易理解和部署
缺点：不利于代码阅读、维护，各个部分耦合性很高,流程混乱，且每个任务只能指定一个回调函数

什么是跨域：
浏览器不能执行其他网站的脚本，由浏览器的同源策略造成，是浏览器对JavaScript施加的安全限制
判读是同域：
相同域名,端口相同,协议相同

Jsonp：
Json with Padding，为了解决跨域请求资源而产生的解决方案，是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

Jsonp的产生：
ajax直接请求普通文件存在跨域无权限访问的问题，而web页面调用js时不受跨域影响，凡是带有src属性标签的都拥有跨域能力->在远程服务器上把数据装进js格式的文件里，可以实现跨域访问
JSON的纯字符数据格式可以简洁的描述复杂的程序，JSON还被原生js支持
所以，web客户端调用跨域服务器生成的js文件（JSON），便获得了自己想要的数据

Jsonp原理
利用script标签没有跨域限制的“漏洞”达到和第三方通讯的目的
首先在客户端注册一个回调函数，然后把回调函数的名字传给服务器，这时服务器生成json数据，以JavaScript的方式生成function，将jasonp以入参的方式放到function里，生成JavaScript文档，返回给客户端，浏览器解析这个script，执行JavaScript文档，此时数据作为参数传入了客户端之前定义的回调函数里。

jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback,通过这样访问数据
json 是一种数据格式，jsonp 是一种数据调用的方式，带callback的json就是jsonp

跨域的几种方法

Jsonp
优点：不受同源策略限制，兼容性好，低版本的浏览器也可以运行，在请求完毕后可以通过调用callback的方式回传结果。
缺点：只支持get请求不支持post请求，只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

document.domain跨域
前提条件：
这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域.
方法：
需要在a.html里与b.html里都加入：document.domain = "xxx.com";

HTML5的postMessage方法跨域
高级浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。这个功能主要包括接受信息的"message"事件和发送消息的"postMessage"方法。
比如damonare.cn域的A页面通过iframe嵌入了一个google.com域的B页面，可以通过以下方法实现A和B的通信

CORS跨域
基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
更适用于现代浏览器

参考文档

把能够接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下参数而且返回结果的函数技术

柯里化是指这样一个函数(假设叫做createCurry)，他接收函数A作为参数，运行后能够返回一个新的函数。并且这个新的函数能够处理函数A的剩余参数。

函数柯里化（function currying）又称部分求值。一个currying的函数首先会接受一些参数，接受了这些参数后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包里被保存起来。待到函数真正需要求值的时候，之前传入的参数都会被一次性用于求值。

Q：函数经过createCurry转化为一个柯里化函数，最后执行的结果，不是正好相当于执行函数自身吗？柯里化是不是把简单的问题复杂化了？

好处：
1.参数复用
2.提前返回
3.延时执行

参考文档
参考文档，高阶

对模块化的理解
功能封装，针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。
模块可以通过传递参数的不同修改这个功能的的相关配置，每个模块都是一个多带带的作用域，根据需要调用。
模块化就是为了减少系统耦合度，提高内聚性，减少资源循环依赖，增强系统框架设计。
CommonJs
它的终极目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
CommonJs的特点：

所有代码都运行在模块作用域，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序。

AMD规范和commonJS规范
1.相同点：都是为了模块化。
2.不同点：AMD规范则是非同步加载模块，允许指定回调函数。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
参考文档

懒加载

利用jQuery实现图片懒加载的原理。它的基本思想是：在输出HTML的时候，不要直接输出

监听scroll事件，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。

参考：JQuery实现

使用IntersectionObserve(callback,option) api监听图片素到视口的距离判断是否加载图片，实现懒加载
callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。
参考

有些事件（resize Mousemove scroll）几乎是不间断触发的，如果存在复杂的函数方法，非常影响性能，所以需要函数节流

函数节流

函数节流的基本思想是设置一个定时器，在指定时间间隔内运行代码时清除上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行。
一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

防抖
函数调用n秒后才会执行，如果函数在n秒内被调用的话则函数不执行，重新计算执行时间

函数的节流和函数的去抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。

节流和防抖的区别
函数节流是指一定时间内js方法只跑一次。
比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。
比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

代码实现
节流
声明一个变量为标志位，当这个变量为true的时候，代表现在的滚动处理事件是空闲的，可以使用。直接return并将变量设为false这样，其他请求执行滚动事件的方法，就被挡回去了。然后用settimeout规定时间间隔，再执行定时函数内的代码，执行完毕将变量重新设为true
防抖
也需要一个settimeout辅助，延迟执行需要跑的代码
如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
如果计时完毕，没有方法进来访问触发，则执行代码。
 函数防抖的实现重点，就是巧用setTimeout做缓存池，而且可以轻易地清除待执行的代码。clearTimeout(timer)
参考

只要父组件的render了，那么默认情况下就会触发子组件的render过程，子组件的render过程又会触发它的子组件的render过程，一直到React元素（即jsx中的

function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(1111)
  return temple
}
test();
//延迟1000ms输出了1111

        display: flex;
        justify-content: center;
        align-items:center;

        display: flex;
        flex-direction: column;//垂直显示
        justify-content: space-between;
        align-items:center;

    .item:nth-child(2){
        align-self:center;
    }
    .item:nth-child(3){
        align-self:flex-end;
    }

        display: flex;
        flex-wrap:wrap;//必要时拆行显示
        align-content:space-between;//各行在弹性盒容器中平均分布
    .column{
        flex-basis:100%;
        display:flex;
        justify-content: space-between;
    }

• 上一篇：滑动穿透(锁body)终极探索
• 下一篇：仿stackoverflow highlight.js 选用哪种editor ？