摘要：在中，每一個(gè)節(jié)點(diǎn)被稱為回流重繪回流中部分全部元素的規(guī)模尺寸布局等改變而需要重新構(gòu)建頁(yè)面。而就是通過調(diào)用構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例的原型對(duì)象原型所指的就是一個(gè)對(duì)象，實(shí)例繼承對(duì)象的屬性。

display:none
徹底消失
將會(huì)隱藏它以及所有的后代元素
占據(jù)的空間消失，瀏覽器不會(huì)解析該元素
頁(yè)面產(chǎn)生回流+重繪

visibility:hidden
視覺消失可以理解為透明度為0
占據(jù)的空間仍存在，瀏覽器仍然會(huì)解析該元素
頁(yè)面產(chǎn)生重繪
visibility具有繼承性，父元素設(shè)置visibility:hidden，子元素也會(huì)繼承該屬性，當(dāng)子元素重新設(shè)置visibility:visible，元素又會(huì)重新顯示，而display:none不會(huì)

頁(yè)面的呈現(xiàn)流程

瀏覽器將讀取的所有html代碼解析，生成一個(gè)Dom樹 ->dom tree

瀏覽器將所有樣式解析成樣式結(jié)構(gòu)體 ->style rules

Dom數(shù)和樣式結(jié)構(gòu)體結(jié)合生成構(gòu)建呈現(xiàn)樹 render tree ->attachment

瀏覽器根據(jù)render tree 繪制頁(yè)面

some tips

在解析樣式結(jié)構(gòu)體的過程中瀏覽器會(huì)去除不能識(shí)別的樣式（IE去掉-moz開頭的樣式，firefox去除_開頭的樣式)

render tree與dom tree區(qū)別很大，render tree能夠識(shí)別樣式，且不會(huì)包含隱藏的節(jié)點(diǎn)(display:none)，visibility:hidden仍會(huì)包含在render tree內(nèi)。在render tree中，每一個(gè)節(jié)點(diǎn)被稱為box

回流&重繪

回流：render tree中部分（全部）元素的規(guī)模尺寸布局等改變而需要重新構(gòu)建頁(yè)面。
重繪：render tree中一些元素需要更新屬性，但這些屬性只影響元素的外觀、風(fēng)格而不引起布局的改變

在解析樣式結(jié)構(gòu)體的過程中瀏覽器會(huì)去除不能識(shí)別的樣式
回流必將引起重繪，重繪不一定引起回流
參考文檔：關(guān)于呈現(xiàn)、回流、重繪

get：通過查詢字符串的方式來進(jìn)行傳遞

用于獲取少量信息（單次運(yùn)輸量不大于64k），使用url傳遞參數(shù)->很不安全

post：通過表單的方式傳遞

用于修改服務(wù)器的資源，無信息量限制，采用請(qǐng)求體承載的方式，不易暴露
    

本質(zhì)上同根同源
get&post 都是http協(xié)議中用于發(fā)送請(qǐng)求的方法，而http是基于tcp/ip的關(guān)于數(shù)據(jù)如何在萬維網(wǎng)通信的協(xié)議
如何理解？
TCP->汽車 HTTP->交通規(guī)則 瀏覽器->運(yùn)輸公司
get->將貨物放在車頂上(url) ，只產(chǎn)生一個(gè)數(shù)據(jù)包
post->將貨物放在車廂里 ， 產(chǎn)生header+body兩個(gè)數(shù)據(jù)包

post產(chǎn)生兩個(gè)數(shù)據(jù)包，先發(fā)送header確認(rèn)后再發(fā)送body，然而并不是所有瀏覽器都在post中發(fā)兩次包，如firefox就只發(fā)一次

http://    www.baidu.com    :8080    /dir/other.html
協(xié)議        主機(jī)名            端口     文件路徑 參數(shù) 文件片段

transform
對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸
方法：
translate()：元素從當(dāng)前位置移動(dòng)根據(jù)給定的top left 坐標(biāo)移動(dòng)

transform:tanslate(50px,30px)    

rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度，負(fù)值->逆時(shí)針旋轉(zhuǎn)

transform:rotata(20deg)

scale():根據(jù)給定的XY軸參數(shù)、元素的尺寸會(huì)增加或減少（拉伸、收縮）

transform:scale(1.2,0.8)

skew():翻轉(zhuǎn)

transform:skew(20deg, 20deg);
//圍繞 X 軸把元素翻轉(zhuǎn)20度，圍繞 Y 軸翻轉(zhuǎn)20度

transition過渡
元素從一種樣式逐漸變?yōu)榱硪环N樣式,屬于一種簡(jiǎn)單的動(dòng)畫屬性
四個(gè)屬性：
transition-property: 過渡屬性的樣式(默認(rèn)值為all)
transition-duration: 過渡持續(xù)時(shí)間(默認(rèn)值為0s)必須值
transiton-timing-function: 過渡函數(shù)(默認(rèn)值為ease函數(shù))
transition-delay: 過渡延遲時(shí)間(默認(rèn)值為0s)

div{
width:100px;
transition: width 1s;
//時(shí)長(zhǎng)為一秒的寬度變化效果
}
div:hover{
width:500px;
}

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

為什么用虛擬dom？
生成頁(yè)面時(shí)，瀏覽器從構(gòu)建DOM樹開始從到到尾執(zhí)行一遍流程。比如在一次操作時(shí)，需要更新10個(gè)DOM節(jié)點(diǎn)，理想狀態(tài)是一次性構(gòu)建完DOM樹，再執(zhí)行后續(xù)操作。但是瀏覽器并不會(huì)這么做，收到第一個(gè)更新DOM請(qǐng)求后會(huì)馬上執(zhí)行流程，因此需要執(zhí)行10次。頻繁的操作會(huì)引起頁(yè)面卡頓。真實(shí)的DOM節(jié)點(diǎn)，哪怕最簡(jiǎn)單的一個(gè)div也會(huì)包含很多屬性

虛擬DOM干什么？
如一次操作有10個(gè)更新DOM的動(dòng)作，虛擬DOM不會(huì)立刻操作DOM，而是將10次更新的diff內(nèi)容保存到一個(gè)本地的js對(duì)象中，最終將js對(duì)象一次行attach到DOM樹上，避免了大量的無謂計(jì)算量

虛擬的DOM的核心思想：對(duì)復(fù)雜的文檔DOM結(jié)構(gòu)，提供一種方便的工具，進(jìn)行最小化地DOM操作

三個(gè)狀態(tài)：裝配 更新 卸載

初始化渲染：
constructor()構(gòu)造函數(shù)

componentWillMount組件將要加載（17版本棄用，在這里請(qǐng)求異步數(shù)據(jù)，render可能不會(huì)渲染到，因?yàn)閏omponentWillMount執(zhí)行后，render立馬執(zhí)行）
整個(gè)生命周期只調(diào)用一次（組件更新不再調(diào)用）

render()渲染方法

componentDidMount 組件已經(jīng)加載
整個(gè)生命周期只調(diào)用一次（組件更新不再調(diào)用）
↑在這里可以異步請(qǐng)求數(shù)據(jù)，在這里設(shè)置狀態(tài)會(huì)觸發(fā)重新渲染，但是不推薦使用setstate函數(shù),會(huì)觸發(fā)額外一次渲染，且在瀏覽器刷新屏幕之前執(zhí)行，會(huì)導(dǎo)致性能問題

更新：
共有五個(gè)環(huán)節(jié)（不同的情況有不同的執(zhí)行步驟）

1.componentWillReceiveProps(nextprops獲取更新狀態(tài)以及相應(yīng)的組件狀態(tài)，組件將要接收參數(shù)

2.shouldComponentUpdate(nextprops,nextstate)根據(jù)下一個(gè)props和state決定組件是否應(yīng)該更新
↑immutable data在此使用immutable是一旦創(chuàng)建，就不能再被更改的數(shù)據(jù)

3.componentWillUpdate()組件將要更新 做準(zhǔn)備工作（定時(shí)、網(wǎng)絡(luò)請(qǐng)求等）
在這里可以更改state 但是不能使用setState函數(shù) 會(huì)引起函數(shù)調(diào)用componentshouldupdate從而進(jìn)入死循環(huán)
4.render()渲染

getSnapshotBeforeUpdate(nextprops,nextstate)在更新前截圖//不會(huì)用

5.componentDidUpdate() 組件已經(jīng)更新完畢
可以在這里獲取DOM

卸載
只有一個(gè)步驟，因?yàn)樾遁d后將失去控制能力
componentWillUnmount()組件將要卸載
在這里清除一些不需要的監(jiān)聽和計(jì)時(shí)器

三種模式下的執(zhí)行步驟：

父組件帶動(dòng)子組件更新 -> 12345

setState() 跳過componentWillReceiveProps() ->2345

forceUpdate()強(qiáng)制更新 跳過shouldComponentUpdate()無需判讀->345

defaultProps()
設(shè)定默認(rèn)props 在組件沒有被傳入時(shí)生效，避免報(bào)錯(cuò)
propTypes 類型檢查

import PropTypes from "prop-types".//結(jié)合第三方prop-types庫(kù)
static propTypes = {
    title:PropTypes.string
}

原型是JavaScript中繼承的基礎(chǔ),JavaScript的繼承就是基于原型的繼承

什么是原型？
我們創(chuàng)建的每一個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，這個(gè)對(duì)象可以包含由特定類型的所有實(shí)例共享的屬性和方法。而prototype就是通過調(diào)用構(gòu)造函數(shù)創(chuàng)建的對(duì)象實(shí)例的原型對(duì)象

原型所指的就是一個(gè)對(duì)象，實(shí)例繼承對(duì)象的屬性。在原型上定義的屬性，通過繼承，實(shí)例也擁有了這個(gè)屬性
實(shí)例通過_proto_這個(gè)屬性直接訪問到原型

function Person(){
Person.prototype.type   = "object named Person";
person = new Person();
person._proto_ === Person.prototype;//兩者等價(jià)

}

構(gòu)造函數(shù)->prototype->訪問原型
原型->constructor->訪問構(gòu)造函數(shù)

使用原型的好處：
可以讓對(duì)象的實(shí)例共享它所包含的屬性和方法，不必在構(gòu)造函數(shù)中添加定義對(duì)象信息，而是可以將這些信息添加到原型中（如果使用構(gòu)造函數(shù)就要讓每個(gè)方法都在實(shí)例中創(chuàng)建一遍）

constructor是原型的一個(gè)屬性，Constructor是真正的構(gòu)造函數(shù)

什么是原型鏈？
_proto_是實(shí)例指向原型對(duì)象的一個(gè)指針，是任何對(duì)象都有的屬性,js萬物皆對(duì)象，所以就形成了一條由_proto_連起來的鏈條，遞歸訪問到頭，終值為null

在讀取一個(gè)實(shí)例的屬性時(shí)，如果該屬性在當(dāng)前實(shí)例沒有找到，那么就會(huì)循著_proto_指定的原型繼續(xù)向上找，如果還找不到，則尋找原型的原型，如果一直沒有找到，則直到搜索到null為止

原型繼承

Son.prototype = new Father();//Son繼承了Father,通過原型，形成鏈條

參考文章：原型
參考文章：原型鏈

變量提升
ES6之前沒有塊級(jí)作用域，只有全局作用域和局部作用域，變量提升就是將變量聲明提升到它所在作用域的最開始的部分

函數(shù)提升
創(chuàng)建函數(shù)有兩種形式：函數(shù)聲明和函數(shù)字面量，只有函數(shù)聲明有變量提升

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

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

函數(shù)提升與變量提升的優(yōu)先級(jí)
函數(shù)提升要比變量提升的優(yōu)先級(jí)要高一些，且不會(huì)被變量聲明覆蓋，但是會(huì)被變量賦值之后覆蓋。

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;

正常的執(zhí)行順序

 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;

參考文章

事件監(jiān)聽
onclick方法、addEventlistener、attachEvent(不支持ie，執(zhí)行順序3-2-1)

setTimeout超時(shí)調(diào)用
setInterval間歇調(diào)用，按照指定的時(shí)間間隔反復(fù)執(zhí)行任務(wù)代碼

generator 能夠多次返回的“函數(shù)”
每執(zhí)行一次后就暫停，返回的值就是yield的返回值，每次返回一個(gè)值，直到done為true，這個(gè)generate對(duì)象已經(jīng)全部執(zhí)行完畢

promise
三種狀態(tài)：等待（pengding） 成功（resolved） 失?。╮ejected）

async/await
一種特殊的語(yǔ)法，可以更舒適地與promise協(xié)同工作
async放置在一個(gè)函數(shù)前面，使函數(shù)總是返回一個(gè)promise，即使其中包含非promise（會(huì)自動(dòng)將返回值包裝成promise的resolved值）
await只能使用在async內(nèi)，能夠使JavaScript等待，直到promise處理結(jié)束
1.如果它是一個(gè)錯(cuò)誤，異常就產(chǎn)生了，就像在那個(gè)地方調(diào)用了throw error一樣。
2.否則，它會(huì)返回一個(gè)結(jié)果，我們可以將它分配給一個(gè)值

參考

觀察者模式
publish()/subscribe
又稱為發(fā)布、訂閱模式
某個(gè)任務(wù)執(zhí)行完畢，則向信號(hào)中心發(fā)布一個(gè)信號(hào)，其他任務(wù)可以向信號(hào)中心訂閱該信號(hào)，從而知道何時(shí)執(zhí)行自己的任務(wù)

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

　　　　setTimeout(function () {

　　　　　　// f1的任務(wù)代碼

　　　　　　jQuery.publish("done");

　　　　}, 1000);

　　}

//f2執(zhí)行完畢后可以取消訂閱
　　jQuery.unsubscribe("done", f2);

該方法優(yōu)于事件監(jiān)聽，可以通過查看消息中心了解現(xiàn)在有多少信號(hào)、訂閱者，從而監(jiān)控程序的執(zhí)行狀態(tài)
參考文檔

優(yōu)點(diǎn)：容易理解和部署
缺點(diǎn)：不利于代碼閱讀、維護(hù)，各個(gè)部分耦合性很高,流程混亂，且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)

什么是跨域：
瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，由瀏覽器的同源策略造成，是瀏覽器對(duì)JavaScript施加的安全限制
判讀是同域：
相同域名,端口相同,協(xié)議相同

Jsonp：
Json with Padding，為了解決跨域請(qǐng)求資源而產(chǎn)生的解決方案，是一種依靠開發(fā)人員創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議。

Jsonp的產(chǎn)生：
ajax直接請(qǐng)求普通文件存在跨域無權(quán)限訪問的問題，而web頁(yè)面調(diào)用js時(shí)不受跨域影響，凡是帶有src屬性標(biāo)簽的都擁有跨域能力->在遠(yuǎn)程服務(wù)器上把數(shù)據(jù)裝進(jìn)js格式的文件里，可以實(shí)現(xiàn)跨域訪問
JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜的程序，JSON還被原生js支持
所以，web客戶端調(diào)用跨域服務(wù)器生成的js文件（JSON），便獲得了自己想要的數(shù)據(jù)

Jsonp原理
利用script標(biāo)簽沒有跨域限制的“漏洞”達(dá)到和第三方通訊的目的
首先在客戶端注冊(cè)一個(gè)回調(diào)函數(shù)，然后把回調(diào)函數(shù)的名字傳給服務(wù)器，這時(shí)服務(wù)器生成json數(shù)據(jù)，以JavaScript的方式生成function，將jasonp以入?yún)⒌姆绞椒诺絝unction里，生成JavaScript文檔，返回給客戶端，瀏覽器解析這個(gè)script，執(zhí)行JavaScript文檔，此時(shí)數(shù)據(jù)作為參數(shù)傳入了客戶端之前定義的回調(diào)函數(shù)里。

jsonp是請(qǐng)求之后后臺(tái)包裝好一段json，并且把數(shù)據(jù)放在一個(gè)callback函數(shù)，返回一個(gè)js文件，動(dòng)態(tài)引入這個(gè)文件，下載完成js之后，會(huì)去調(diào)用這個(gè)callback,通過這樣訪問數(shù)據(jù)
json 是一種數(shù)據(jù)格式，jsonp 是一種數(shù)據(jù)調(diào)用的方式，帶callback的json就是jsonp

跨域的幾種方法

Jsonp
優(yōu)點(diǎn)：不受同源策略限制，兼容性好，低版本的瀏覽器也可以運(yùn)行，在請(qǐng)求完畢后可以通過調(diào)用callback的方式回傳結(jié)果。
缺點(diǎn)：只支持get請(qǐng)求不支持post請(qǐng)求，只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問題。

document.domain跨域
前提條件：
這兩個(gè)域名必須屬于同一個(gè)基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致，否則無法利用document.domain進(jìn)行跨域.
方法：
需要在a.html里與b.html里都加入：document.domain = "xxx.com";

HTML5的postMessage方法跨域
高級(jí)瀏覽器Internet Explorer 8+, chrome，F(xiàn)irefox , Opera 和 Safari 都將支持這個(gè)功能。這個(gè)功能主要包括接受信息的"message"事件和發(fā)送消息的"postMessage"方法。
比如damonare.cn域的A頁(yè)面通過iframe嵌入了一個(gè)google.com域的B頁(yè)面，可以通過以下方法實(shí)現(xiàn)A和B的通信

CORS跨域
基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗。
整個(gè)CORS通信過程，都是瀏覽器自動(dòng)完成，不需要用戶參與。
對(duì)于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺。
更適用于現(xiàn)代瀏覽器

參考文檔

把能夠接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)的函數(shù)，并且返回接受余下參數(shù)而且返回結(jié)果的函數(shù)技術(shù)

柯里化是指這樣一個(gè)函數(shù)(假設(shè)叫做createCurry)，他接收函數(shù)A作為參數(shù)，運(yùn)行后能夠返回一個(gè)新的函數(shù)。并且這個(gè)新的函數(shù)能夠處理函數(shù)A的剩余參數(shù)。

函數(shù)柯里化（function currying）又稱部分求值。一個(gè)currying的函數(shù)首先會(huì)接受一些參數(shù)，接受了這些參數(shù)后，該函數(shù)并不會(huì)立即求值，而是繼續(xù)返回另外一個(gè)函數(shù)，剛才傳入的參數(shù)在函數(shù)形成的閉包里被保存起來。待到函數(shù)真正需要求值的時(shí)候，之前傳入的參數(shù)都會(huì)被一次性用于求值。

Q：函數(shù)經(jīng)過createCurry轉(zhuǎn)化為一個(gè)柯里化函數(shù)，最后執(zhí)行的結(jié)果，不是正好相當(dāng)于執(zhí)行函數(shù)自身嗎？柯里化是不是把簡(jiǎn)單的問題復(fù)雜化了？

好處：
1.參數(shù)復(fù)用
2.提前返回
3.延時(shí)執(zhí)行

參考文檔
參考文檔，高階

對(duì)模塊化的理解
功能封裝，針對(duì)Javascript代碼，隔離、組織復(fù)制的javascript代碼，將它封裝成一個(gè)個(gè)具有特定功能的的模塊。
模塊可以通過傳遞參數(shù)的不同修改這個(gè)功能的的相關(guān)配置，每個(gè)模塊都是一個(gè)多帶帶的作用域，根據(jù)需要調(diào)用。
模塊化就是為了減少系統(tǒng)耦合度，提高內(nèi)聚性，減少資源循環(huán)依賴，增強(qiáng)系統(tǒng)框架設(shè)計(jì)。
CommonJs
它的終極目標(biāo)是提供一個(gè)類似Python，Ruby和Java標(biāo)準(zhǔn)庫(kù)。這樣的話，開發(fā)者可以使用CommonJS API編寫應(yīng)用程序，然后這些應(yīng)用可以運(yùn)行在不同的JavaScript解釋器和不同的主機(jī)環(huán)境中。
CommonJs的特點(diǎn)：

所有代碼都運(yùn)行在模塊作用域，不會(huì)污染全局作用域。

模塊可以多次加載，但是只會(huì)在第一次加載時(shí)運(yùn)行一次，然后運(yùn)行結(jié)果就被緩存了，以后再加載，就直接讀取緩存結(jié)果。要想讓模塊再次運(yùn)行，必須清除緩存。

模塊加載的順序，按照其在代碼中出現(xiàn)的順序。

AMD規(guī)范和commonJS規(guī)范
1.相同點(diǎn)：都是為了模塊化。
2.不同點(diǎn)：AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。CommonJS規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。
參考文檔

懶加載

利用jQuery實(shí)現(xiàn)圖片懶加載的原理。它的基本思想是：在輸出HTML的時(shí)候，不要直接輸出

監(jiān)聽scroll事件，調(diào)用目標(biāo)元素（綠色方塊）的getBoundingClientRect()方法，得到它對(duì)應(yīng)于視口左上角的坐標(biāo)，再判斷是否在視口之內(nèi)。這種方法的缺點(diǎn)是，由于scroll事件密集發(fā)生，計(jì)算量很大，容易造成性能問題。

參考：JQuery實(shí)現(xiàn)

使用IntersectionObserve(callback,option) api監(jiān)聽圖片素到視口的距離判斷是否加載圖片，實(shí)現(xiàn)懶加載
callback一般會(huì)觸發(fā)兩次。一次是目標(biāo)元素剛剛進(jìn)入視口（開始可見），另一次是完全離開視口（開始不可見）。
參考

有些事件（resize Mousemove scroll）幾乎是不間斷觸發(fā)的，如果存在復(fù)雜的函數(shù)方法，非常影響性能，所以需要函數(shù)節(jié)流

函數(shù)節(jié)流

函數(shù)節(jié)流的基本思想是設(shè)置一個(gè)定時(shí)器，在指定時(shí)間間隔內(nèi)運(yùn)行代碼時(shí)清除上一次的定時(shí)器，并設(shè)置另一個(gè)定時(shí)器，直到函數(shù)請(qǐng)求停止并超過時(shí)間間隔才會(huì)執(zhí)行。
一個(gè)函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會(huì)執(zhí)行第二次

防抖
函數(shù)調(diào)用n秒后才會(huì)執(zhí)行，如果函數(shù)在n秒內(nèi)被調(diào)用的話則函數(shù)不執(zhí)行，重新計(jì)算執(zhí)行時(shí)間

函數(shù)的節(jié)流和函數(shù)的去抖都是通過減少實(shí)際邏輯處理過程的執(zhí)行來提高事件處理函數(shù)運(yùn)行性能的手段，并沒有實(shí)質(zhì)上減少事件的觸發(fā)次數(shù)。

節(jié)流和防抖的區(qū)別
函數(shù)節(jié)流是指一定時(shí)間內(nèi)js方法只跑一次。
比如人的眨眼睛，就是一定時(shí)間內(nèi)眨一次。這是函數(shù)節(jié)流最形象的解釋。
函數(shù)防抖是指頻繁觸發(fā)的情況下，只有足夠的空閑時(shí)間，才執(zhí)行代碼一次。
比如生活中的坐公交，就是一定時(shí)間內(nèi)，如果有人陸續(xù)刷卡上車，司機(jī)就不會(huì)開車。只有別人沒刷卡了，司機(jī)才開車。

代碼實(shí)現(xiàn)
節(jié)流
聲明一個(gè)變量為標(biāo)志位，當(dāng)這個(gè)變量為true的時(shí)候，代表現(xiàn)在的滾動(dòng)處理事件是空閑的，可以使用。直接return并將變量設(shè)為false這樣，其他請(qǐng)求執(zhí)行滾動(dòng)事件的方法，就被擋回去了。然后用settimeout規(guī)定時(shí)間間隔，再執(zhí)行定時(shí)函數(shù)內(nèi)的代碼，執(zhí)行完畢將變量重新設(shè)為true
防抖
也需要一個(gè)settimeout輔助，延遲執(zhí)行需要跑的代碼
如果方法多次觸發(fā)，則把上次記錄的延遲執(zhí)行代碼用clearTimeout清掉，重新開始。
如果計(jì)時(shí)完畢，沒有方法進(jìn)來訪問觸發(fā)，則執(zhí)行代碼。
?函數(shù)防抖的實(shí)現(xiàn)重點(diǎn)，就是巧用setTimeout做緩存池，而且可以輕易地清除待執(zhí)行的代碼。clearTimeout(timer)
參考

只要父組件的render了，那么默認(rèn)情況下就會(huì)觸發(fā)子組件的render過程，子組件的render過程又會(huì)觸發(fā)它的子組件的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;//必要時(shí)拆行顯示
        align-content:space-between;//各行在彈性盒容器中平均分布
    .column{
        flex-basis:100%;
        display:flex;
        justify-content: space-between;
    }

• 上一篇：滑動(dòng)穿透(鎖body)終極探索
• 下一篇：仿stackoverflow highlight.js 選用哪種editor ？