摘要：在中，每一個節點被稱為回流重繪回流中部分全部元素的規模尺寸布局等改變而需要重新構建頁面。而就是通過調用構造函數創建的對象實例的原型對象原型所指的就是一個對象，實例繼承對象的屬性。

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 ？