css相關

1. 萬能居中

1.margin: 0 auto;水平

2.text-align: center;水平

3.行高占贫，垂直

4.表格核无，center,middle叁执；水平垂直

5.display:table-cell篙悯；模擬表格单匣，all

6.絕對定位夕凝，50%減自身寬高

7.絕對定位宝穗，上下左右全0，margin:auto

8.絕對定位加相對定位码秉。不需要知道寬高

9.IE6逮矛，IE7：給父元素設一個font-size:高度/1.14,vertical-align:middle

2.?BFC優(yōu)化

塊格式化上下文, 特性:

使 BFC 內(nèi)部浮動元素不會到處亂跑；

和浮動元素產(chǎn)生邊界转砖。

3. 盒模型哪兩種模式须鼎？什么區(qū)別？如何設置

標準模式: box-sizing: content-box; 寬高不包括內(nèi)邊距和邊框

怪異模式: box-sizing: border-box

4.?常用清除浮動的方法府蔗，如不清除浮動會怎樣晋控？

當父元素不給高度的時候，內(nèi)部元素不浮動時會撐開, 而浮動的時候姓赤，父元素變成一條線, 造成塌陷.

額外標簽法（在最后一個浮動標簽后赡译，新加一個標簽，給其設置clear：both不铆；）（不推薦）

父元素添加overflow:hidden; (觸發(fā)BFC)

使用after偽元素清除浮動（推薦使用）

使用before和after雙偽元素清除浮動

5. 刪格化的原理

比如antd的row和col, 將一行等分為24份, col是幾就占幾份, 底層按百分比實現(xiàn); 結合媒體查詢, 可以實現(xiàn)響應式

6. 純css實現(xiàn)三角形

// 通過設置border.box? ? ? ? {? ? ? ? ? ? width:0px;? ? ? ? ? ? height:0px;? ? ? ? ? ? border-top:50px solid rgba(0,0,0,0);? ? ? ? ? ? border-right:50px solid? rgba(0,0,0,0);? ? ? ? ? ? border-bottom:50px solid green;? ? ? ? ? ? border-left:50px solid? rgba(0,0,0,0);? ? ? ? ? ? }

7. 高度不定蝌焚，寬100%，內(nèi)一div高不確定誓斥，如何實現(xiàn)垂直居中只洒？

verticle-align: middle;

絕對定位50%加translateY(-50%)

絕對定位，上下左右全0劳坑，margin:auto

8. 至少兩種方式實現(xiàn)自適應搜索

rem, em

百分比

媒體查詢

bs, antd等的柵格布局

9. 設置一段文字的大小為6px

谷歌最小12px, 其他瀏覽器可以更小

通過transform: scale實現(xiàn)

10.?css菊花圖

四個小圓點一直旋轉

// 父標簽animation:antRotate1.2s infinite linear;// 子標簽animation:antSpin1s infinite linear;@keyframeantSpin{to{opacity:1}}@keyframeantRotate{to{transform:rotate(405)}}// animation-delay: 逐個延遲0.4s

11. 關于em

<divstyle="font-size: 20px">123<divstyle="font-size: 2em;width: 2em">456</div></div>// 此時子元素的font-size為40px, 寬度為80px(還要乘以子元素font-size的系數(shù))

12. 關于vh, vw

vw：viewpoint width红碑，視窗寬度，1vw等于視窗寬度的1%泡垃。

vh：viewpoint height析珊，視窗高度，1vh等于視窗高度的1%蔑穴。

vmin：vw和vh中較小的那個忠寻。

vmax：vw和vh中較大的那個。

13.?Flex布局

flex-direction控制主副軸

flex-wrap控制換行(默認不換行)

flex-flow是上兩個的結合

justify-content主軸對齊方式

align-items交叉軸對齊方式

14.?overflow原理

overflow: hidden能清除塊內(nèi)子元素的浮動影響. 因為該屬性進行超出隱藏時需要計算盒子內(nèi)所有元素的高度, 所以會隱式清除浮動

創(chuàng)建BFC條件(滿足一個):

float的值不為none存和；

overflow的值不為visible奕剃；

position的值為fixed / absolute畔柔；

display的值為table-cell / table-caption / inline-block / flex / inline-flex祈搜。

15. 實現(xiàn)自適應的正方形:

使用vw, vh

width百分比,?height: 0,?padding-top(bottom): 50%

16. 標準模式和怪異模式

document.compatMode屬性可以判斷是否是標準模式，當 document.compatMode為“CSS1Compat”祈秕，是標準模式茄袖，“BackCompat”是怪異模式操软。

怪異模式是為了兼容舊版本的瀏覽器, 因為IE低版本document.documentElement.clientWidth獲取不到

怪異模式盒模型:?box-sizing: border-box; 標準模式:?box-sizing: content-box

17. CSS3實現(xiàn)環(huán)形進度條

兩個對半矩形遮罩, 使用rotate以及overflow: hidden進行旋轉

18.?css優(yōu)先級

選擇器的特殊性值表述為4個部分，用0,0,0,0表示宪祥。

ID選擇器的特殊性值聂薪，加0,1,0,0家乘。

類選擇器、屬性選擇器或偽類藏澳，加0,0,1,0仁锯。

元素和偽元素，加0,0,0,1翔悠。

通配選擇器*對特殊性沒有貢獻业崖，即0,0,0,0。

最后比較特殊的一個標志!important（權重）蓄愁，它沒有特殊性值腻要，但它的優(yōu)先級是最高的，為了方便記憶涝登，可以認為它的特殊性值為1,0,0,0,0雄家。

JS相關

1. ES5和ES6繼承方式區(qū)別

ES5定義類以函數(shù)形式, 以prototype來實現(xiàn)繼承

ES6以class形式定義類, 以extend形式繼承

2.?Generator了解

ES6 提供的一種異步編程解決方案, Generator 函數(shù)是一個狀態(tài)機，封裝了多個內(nèi)部狀態(tài)胀滚。

function*helloWorldGenerator(){yield'hello';yield'world';return'ending';}varhw=helloWorldGenerator();

調用后返回指向內(nèi)部狀態(tài)的指針, 調用next()才會移向下一個狀態(tài), 參數(shù):

hw.next()// { value: 'hello', done: false }hw.next()// { value: 'world', done: false }hw.next()// { value: 'ending', done: true }hw.next()// { value: undefined, done: true }

3. 手寫Promise實現(xiàn)

varmyPromise=newPromise((resolve,reject)=>{// 需要執(zhí)行的代碼...if(/* 異步執(zhí)行成功 */){resolve(value)}elseif(/* 異步執(zhí)行失敗 */){reject(error)}})myPromise.then((value)=>{// 成功后調用, 使用value值},(error)=>{// 失敗后調用, 獲取錯誤信息error})

4. Promise優(yōu)缺點

優(yōu)點: 解決回調地獄, 對異步任務寫法更標準化與簡潔化

缺點: 首先趟济，無法取消Promise，一旦新建它就會立即執(zhí)行咽笼，無法中途取消; 其次顷编，如果不設置回調函數(shù)，Promise內(nèi)部拋出的錯誤剑刑，不會反應到外部; 第三媳纬，當處于pending狀態(tài)時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成).

極簡版promise封裝:

functionpromise(){this.msg=''// 存放value和errorthis.status='pending'varthat=thisvarprocess=arguments[0]process(function(){that.status='fulfilled'that.msg=arguments[0]},function(){that.status='rejected'that.msg=arguments[0]})returnthis}promise.prototype.then=function(){if(this.status==='fulfilled'){arguments[0](this.msg)}elseif(this.status==='rejected'&&arguments[1]){arguments[1](this.msg)}}

5.?觀察者模式

又稱發(fā)布-訂閱模式, 舉例子說明.

實現(xiàn): 發(fā)布者管理訂閱者隊列, 并有新消息推送功能. 訂閱者僅關注更新就行

6. 手寫實現(xiàn)bind

Function.prototype.bind=function(){// 保存原函數(shù)varself=this// 取出第一個參數(shù)作為上下文, 相當于[].shift.call(arguments)varcontext=Array.prototype.shift.call(arguments)// 取剩余的參數(shù)作為arg; 因為arguments是偽數(shù)組, 所以要轉化為數(shù)組才能使用數(shù)組方法vararg=Array.prototype.slice.call(arguments)// 返回一個新函數(shù)returnfunction(){// 綁定上下文并傳參self.apply(context,Array.prototype.concat.call(arg,Array.prototype.slice.call(arguments)))}}

7.?手寫實現(xiàn)4種繼承

functionFather(){}functionChild(){}// 1. 原型繼承Child.prototype=newFather()// 2. 構造繼承functionChild(name){Father.call(this,name)}// 3. 組合繼承functionChild(name){Father.call(this,name)}Child.prototype=newFather()// 4. 寄生繼承functioncloneObj(o){varclone=object.create(o)clone.sayName=...returnclone}// 5. 寄生組合繼承// 6. ES6 class extend繼承

8.?css菊花圖

四個小圓點一直旋轉

// 父標簽animation:antRotate1.2s infinite linear;// 子標簽animation:antSpin1s infinite linear;@keyframeantSpin{to{opacity:1}}@keyframeantRotate{to{transform:rotate(405)}}// animation-delay: 逐個延遲0.4s

9. http狀態(tài)碼

1**: 服務器收到請求, 需請求者進一步操作

2**: 請求成功

3**: 重定向, 資源被轉移到其他URL了

4**: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源

5**: 服務端錯誤, server error

304: Not Modified. 指定日期后未修改, 不返回資源

10. Object.create實現(xiàn)（原型式繼承施掏，特點：實例的proto指向構造函數(shù)本身）

11. async和await：

Generator函數(shù)的語法糖钮惠，將*改成async，將yield換成await七芭。

是對Generator函數(shù)的改進, 返回promise素挽。

異步寫法同步化，遇到await先返回狸驳，執(zhí)行完異步再執(zhí)行接下來的.

內(nèi)置執(zhí)行器, 無需next()

12. 算法和數(shù)據(jù)結構：

算法：

解決具體問題所需要的解決方法预明。執(zhí)行效率最快的最優(yōu)算法。時間復雜度耙箍。輸入撰糠，輸出，有窮性辩昆，確定性阅酪，可行性。冒泡排序，二叉樹遍歷遮斥，最長回文，二分查找扇丛，指針术吗，鏈表等，堆棧帆精，隊列等较屿。力扣，codewar卓练，算法導論隘蝎。

數(shù)據(jù)結構：

邏輯結構：集合、線性襟企、樹形嘱么、圖形結構

物理結構：順序、鏈式存儲結構

13. 封裝JSONP

jsonp

functionjsonp({url,param,callback}){returnnewPromise((resolve,reject)=>{varscript=document.createElement('script')window.callback=function(data){resolve(data)document.body.removeChild('script')}varparam={...param,callback}vararr=[]for(letkeyinparam){arr.push(`${key}=${param[key]}`)}script.src=`${url}?${arr.join('&')}`document.body.appendChild(script)})}

14. 手動實現(xiàn)map(forEach以及filter也類似)

// for循環(huán)實現(xiàn)Array.prototype.myMap=function(){vararr=thisvar[fn,thisValue]=Array.prototype.slice.call(arguments)varresult=[]for(vari=0;i<arr.length;i++){result.push(fn.call(thisValue,arr[i],i,arr))}returnresult}vararr0=[1,2,3]console.log(arr0.myMap(v=>v+1))// forEach實現(xiàn)(reduce類似)Array.prototype.myMap=function(fn,thisValue){varresult=[]this.forEach((v,i,arr)=>{result.push(fn.call(thisValue,v,i,arr))})returnresult}vararr0=[1,2,3]console.log(arr0.myMap(v=>v+1))

15. js實現(xiàn)checkbox全選以及反選

<body><buttonid="other">反選</button><inputtype="checkbox"id="all"/>全選<inputtype="checkbox"class="check"/>1<inputtype="checkbox"class="check"/>2<inputtype="checkbox"class="check"/>3<script>var checkbox = document.getElementsByClassName('check')? ? ? var checkAll = document.getElementById('all')? ? ? var checkOther = document.getElementById('other')? ? ? checkAll.onclick = function() {? ? ? ? var flag = true? ? ? ? for (var i = 0; i < checkbox.length; i++) {? ? ? ? ? if (!checkbox[i].checked) flag = false? ? ? ? }? ? ? ? if (flag) {? ? ? ? ? for (var i = 0; i < checkbox.length; i++) {? ? ? ? ? ? checkbox[i].checked = false? ? ? ? ? }? ? ? ? } else {? ? ? ? ? for (var i = 0; i < checkbox.length; i++) {? ? ? ? ? ? checkbox[i].checked = true? ? ? ? ? }? ? ? ? }? ? ? }? ? ? checkOther.onclick = function() {? ? ? ? for (var i = 0; i < checkbox.length; i++) {? ? ? ? ? checkbox[i].checked = !checkbox[i].checked? ? ? ? }? ? ? }</script></body>

16.?對原型鏈的理解顽悼？prototype上都有哪些屬性

在js里曼振，繼承機制是原型繼承。繼承的起點是 對象的原型（Object prototype）蔚龙。

一切皆為對象冰评，只要是對象，就會有 proto 屬性木羹，該屬性存儲了指向其構造的指針甲雅。

Object prototype也是對象，其 proto 指向null坑填。

對象分為兩種：函數(shù)對象和普通對象抛人，只有函數(shù)對象擁有『原型』對象（prototype）。

prototype的本質是普通對象脐瑰。

Function prototype比較特殊函匕，是沒有prototype的函數(shù)對象。

new操作得到的對象是普通對象蚪黑。

當調取一個對象的屬性時盅惜，會先在本身查找，若無忌穿，就根據(jù) proto 找到構造原型抒寂，若無，繼續(xù)往上找掠剑。最后會到達頂層Object prototype屈芜，它的 proto 指向null，均無結果則返回undefined，結束井佑。

由 proto 串起的路徑就是『原型鏈』属铁。

通過prototype可以給所有子類共享屬性

17. 為什么使用繼承

通常在一般的項目里不需要,因為應用簡單,但你要用純js做一些復雜的工具或框架系統(tǒng)就要用到了,比如webgis、或者js框架如jquery躬翁、ext什么的,不然一個幾千行代碼的框架不用繼承得寫幾萬行,甚至還無法維護

18. setTimeout時間延遲為何不準

單線程, 先執(zhí)行同步主線程, 再執(zhí)行異步任務隊列

19.?事件循環(huán)述焦蘑，宏任務和微任務有什么區(qū)別？

先主線程后異步任務隊列

先微任務再宏任務

20. let const var作用域

塊級作用域, 暫時性死區(qū)

21.?節(jié)流和防抖

函數(shù)節(jié)流是指一定時間內(nèi)js方法只跑一次盒发。比如人的眨眼睛例嘱，就是一定時間內(nèi)眨一次。這是函數(shù)節(jié)流最形象的解釋宁舰。

// 函數(shù)節(jié)流? 滾動條滾動varcanRun=true;document.getElementById("throttle").onscroll=function(){if(!canRun){// 判斷是否已空閑拼卵，如果在執(zhí)行中，則直接returnreturn;}canRun=false;setTimeout(function(){console.log("函數(shù)節(jié)流");canRun=true;},300);};

函數(shù)防抖是指頻繁觸發(fā)的情況下蛮艰，只有足夠的空閑時間腋腮，才執(zhí)行代碼一次。比如生活中的坐公交壤蚜，就是一定時間內(nèi)低葫，如果有人陸續(xù)刷卡上車，司機就不會開車仍律。只有別人沒刷卡了嘿悬，司機才開車。

// 函數(shù)防抖vartimer=false;document.getElementById("debounce").onscroll=function(){clearTimeout(timer);// 清除未執(zhí)行的代碼水泉，重置回初始化狀態(tài)timer=setTimeout(function(){console.log("函數(shù)防抖");},300);};

22. 實現(xiàn)一個sleep函數(shù)

// 這種實現(xiàn)方式是利用一個偽死循環(huán)阻塞主線程善涨。因為JS是單線程的。所以通過這種方式可以實現(xiàn)真正意義上的sleep()草则。functionsleep(delay){varstart=(newDate()).getTime();while((newDate()).getTime()-start<delay){continue;}}functiontest(){console.log('111');sleep(2000);console.log('222');}test()

23. 閉包

概念: 內(nèi)層函數(shù)能夠訪問外層函數(shù)作用域的變量

缺點: 引起內(nèi)存泄漏（釋放內(nèi)存）

作用:

使用閉包修正打印值

實現(xiàn)柯里化

實現(xiàn)node commonJs 模塊化, 實現(xiàn)私有變量

保持變量與函數(shù)活性, 可延遲回收和執(zhí)行

24.?Immutable.js

Facebook出品, 倡導數(shù)據(jù)的不可變性, 用的最多就是List和Map.

25. js實現(xiàn)instanceof

// 檢測l的原型鏈（__proto__）上是否有r.prototype钢拧，若有返回true，否則falsefunctionmyInstanceof(l,r){varR=r.prototypewhile(l.__proto__){if(l.__proto__===R)returntrue}returnfalse}

27.?ES6的模塊引入和CommonJs區(qū)別

28.?嚴格模式

// 嚴格模式下, 隱式綁定丟失后this不會指向window, 而是指向undefined'use strict'vara=2varobj={a:1,b:function(){// console.log(this.a)console.log(this)}}varc=obj.bc()// undefined

29.?fetch, axios區(qū)別

30. typescript缺點

并不是嚴格意義的js的超集, 與js不完全兼容, 會報錯

更多的限制, 是一種桎梏

有些js第三方庫沒有dts, 有問題

31. 構造函數(shù)實現(xiàn)原理

構造函數(shù)中沒有顯示的創(chuàng)建Object對象, 實際上后臺自動創(chuàng)建了

直接給this對象賦值屬性和方法, this即指向創(chuàng)建的對象

沒有return返回值, 后臺自動返回了該對象

// 模擬構造函數(shù)實現(xiàn)varBook=function(name){this.name=name;};//正常用法varjava=newBook(‘Master Java’);//使用代碼模擬炕横，在非IE瀏覽器中測試源内，IE瀏覽器不支持varpython={};python.__proto__=Book.prototype;Book.call(python,'Master Python');

32.?for in 和 for of區(qū)別

for in遍歷數(shù)組會遍歷到數(shù)組原型上的屬性和方法, 更適合遍歷對象

forEach不支持break, continue, return等

使用for of可以成功遍歷數(shù)組的值, 而不是索引, 不會遍歷原型

for in 可以遍歷到myObject的原型方法method,如果不想遍歷原型方法和屬性的話，可以在循環(huán)內(nèi)部判斷一下,hasOwnPropery方法可以判斷某屬性是否是該對象的實例屬性

33. JS實現(xiàn)并發(fā)控制:

使用消息隊列以及setInterval或promise進行入隊和出隊

34.?ajax和axios份殿、fetch的區(qū)別

35. promise.finally實現(xiàn)

Promise.prototype.finally=function(callback){letP=this.constructor;returnthis.then(value=>P.resolve(callback()).then(()=>value),reason=>P.resolve(callback()).then(()=>{throwreason}));};

瀏覽器網(wǎng)絡相關

1.?reflow(回流)和repaint(重繪)優(yōu)化

render

瀏覽器渲染過程: DOM tree, CSS tree --> Render tree --> Paint

DOM tree根節(jié)點為html

渲染從瀏覽器左上角到右下角

第一次打開頁面至少觸發(fā)一次重繪和回流, 結構如寬高位置變化時, 觸發(fā)reflow回流;非結構如背景色變化時, 觸發(fā)repaint重繪. 二者都會造成體驗不佳

如何減少重繪和回流?

通過classname或cssText一次性修改樣式, 而非一個一個改

離線模式: 克隆要操作的結點, 操作后再與原始結點交換, 類似于虛擬DOM

避免頻繁直接訪問計算后的樣式, 而是先將信息保存下來

絕對布局的DOM, 不會造成大量reflow

div不要嵌套太深, 不要超過六層

2.一個頁面從輸入 URL 到頁面加載顯示完成膜钓，這個過程中都發(fā)生了什么？

瀏覽器根據(jù)請求的URL交給DNS域名解析卿嘲，找到真實IP颂斜，向服務器發(fā)起請求；

服務器交給后臺處理完成后返回數(shù)據(jù)拾枣，瀏覽器接收文件（HTML沃疮、JS盒让、CSS、圖象等）司蔬；

瀏覽器對加載到的資源（HTML邑茄、JS、CSS等）進行語法解析俊啼，建立相應的內(nèi)部數(shù)據(jù)結構（如HTML的DOM Tree）肺缕；

載入解析到的資源文件，渲染頁面吨些，完成搓谆。

3.localStorage 與 sessionStorage 與cookie的區(qū)別總結

共同點: 都保存在瀏覽器端, 且同源

localStorage 與 sessionStorage 統(tǒng)稱webStorage,保存在瀏覽器,不參與服務器通信,大小為5M

生命周期不同: localStorage永久保存, sessionStorage當前會話, 都可手動清除

作用域不同: 不同瀏覽器不共享local和session, 不同會話不共享session

Cookie: 設置的過期時間前一直有效, 大小4K.有個數(shù)限制, 各瀏覽器不同, 一般為20個.攜帶在HTTP頭中, 過多會有性能問題.可自己封裝, 也可用原生

4.瀏覽器如何阻止事件傳播炒辉，阻止默認行為

阻止事件傳播(冒泡): e.stopPropagation()

阻止默認行為: e.preventDefault()

5.虛擬DOM方案相對原生DOM操作有什么優(yōu)點豪墅，實現(xiàn)上是什么原理？

虛擬DOM可提升性能, 無須整體重新渲染, 而是局部刷新.

JS對象, diff算法

6.瀏覽器事件機制中事件觸發(fā)三個階段

事件捕獲階段: 從dom樹節(jié)點往下找到目標節(jié)點, 不會觸發(fā)函數(shù)

事件目標處理函數(shù): 到達目標節(jié)點

事件冒泡: 最后從目標節(jié)點往頂層元素傳遞, 通常函數(shù)在此階段執(zhí)行.

addEventListener第三個參數(shù)默認false(冒泡階段執(zhí)行),true(捕獲階段執(zhí)行).

阻止冒泡見以上方法

7.什么是跨域黔寇？為什么瀏覽器要使用同源策略偶器？你有幾種方式可以解決跨域問題？了解預檢請求嘛缝裤？

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源

防止XSS屏轰、CSFR等攻擊, 協(xié)議+域名+端口不同

jsonp; 跨域資源共享（CORS）(Access control); 服務器正向代理等

jsonp封裝

預檢請求: 需預檢的請求要求必須首先使用 OPTIONS 方法發(fā)起一個預檢請求到服務器，以獲知服務器是否允許該實際請求憋飞。"預檢請求“的使用霎苗，可以避免跨域請求對服務器的用戶數(shù)據(jù)產(chǎn)生未預期的影響

8.了解瀏覽器緩存機制嗎？

瀏覽器緩存就是把一個已經(jīng)請求過的資源拷貝一份存儲起來榛做，當下次需要該資源時唁盏，瀏覽器會根據(jù)緩存機制決定直接使用緩存資源還是再次向服務器發(fā)送請求.

from memory cache ; from disk cache

作用: 減少網(wǎng)絡傳輸?shù)膿p耗以及降低服務器壓力。

優(yōu)先級: 強制緩存 > 協(xié)商緩存; cache-control > Expires > Etag > Last-modified

9.為什么操作 DOM 慢?

DOM本身是一個js對象, 操作這個對象本身不慢, 但是操作后觸發(fā)了瀏覽器的行為, 如repaint和reflow等瀏覽器行為, 使其變慢

10.什么情況會阻塞渲染检眯？

js腳本同步執(zhí)行

css和圖片雖然是異步加載, 但js文件執(zhí)行需依賴css, 所以css也會阻塞渲染

11.如何判斷js運行在瀏覽器中還是node中厘擂？

判斷有無全局對象global和window

12.關于web以及瀏覽器處理預加載有哪些思考？

圖片等靜態(tài)資源在使用之前就提前請求

資源使用到的時候能從緩存中加載, 提升用戶體驗

頁面展示的依賴關系維護

13.http多路復用

Keep-Alive: Keep-Alive解決的核心問題：一定時間內(nèi)锰瘸，同一域名多次請求數(shù)據(jù)刽严，只建立一次HTTP請求，其他請求可復用每一次建立的連接通道避凝，以達到提高請求效率的問題舞萄。這里面所說的一定時間是可以配置的，不管你用的是Apache還是nginx管削。

解決兩個問題: 串行文件傳輸(采用二進制數(shù)據(jù)幀); 連接數(shù)過多(采用流, 并行傳輸)

14.?http和https：

http: 最廣泛網(wǎng)絡協(xié)議鹏氧，BS模型，瀏覽器高效佩谣。

https: 安全版把还，通過SSL加密，加密傳輸，身份認證吊履，密鑰

https相對于http加入了ssl層, 加密傳輸, 身份認證;

需要到ca申請收費的證書;

安全但是耗時多安皱，緩存不是很好;

注意兼容http和https;

連接方式不同, 端口號也不同, http是80, https是443

15.?CSRF和XSS區(qū)別及防御

16. cookie可設置哪些屬性？httponly?

chrome控制臺的application下可查看:

cookie

name　　字段為一個cookie的名稱艇炎。

value　　字段為一個cookie的值酌伊。

domain　　字段為可以訪問此cookie的域名。

path　　字段為可以訪問此cookie的頁面路徑缀踪。 比如domain是abc.com,path是/test居砖，那么只有/test路徑下的頁面可以讀取此cookie。

expires/Max-Age 　　字段為此cookie超時時間驴娃。若設置其值為一個時間奏候，那么當?shù)竭_此時間后，此cookie失效唇敞。不設置的話默認值是Session蔗草，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標簽頁疆柔，而是整個瀏覽器) 后咒精，此cookie失效。

Size　　字段 此cookie大小旷档。

http　　字段 cookie的httponly屬性模叙。若此屬性為true，則只有在http請求頭中會帶有此cookie的信息鞋屈，而不能通過document.cookie來訪問此cookie范咨。

secure　　 字段 設置是否只能通過https來傳遞此條cookie

17. 登錄后，前端做了哪些工作谐区，如何得知已登錄

前端存放服務端下發(fā)的cookie, 簡單說就是寫一個字段在cookie中表明已登錄, 并設置失效日期

或使用后端返回的token, 每次ajax請求將token攜帶在請求頭中, 這也是防范csrf的手段之一

18.?http狀態(tài)碼

1**: 服務器收到請求, 需請求者進一步操作

2**: 請求成功

3**: 重定向, 資源被轉移到其他URL了

4**: 客戶端錯誤, 請求語法錯誤或沒有找到相應資源

5**: 服務端錯誤, server error

301: 資源(網(wǎng)頁等)被永久轉移到其他URL, 返回值中包含新的URL, 瀏覽器會自動定向到新URL

302: 臨時轉移. 客戶端應訪問原有URL

304: Not Modified. 指定日期后未修改, 不返回資源

403: 服務器拒絕執(zhí)行請求

404: 請求的資源(網(wǎng)頁等)不存在

500: 內(nèi)部服務器錯誤

19. #?Http請求頭緩存設置方法

Cache-control, expire, last-modify

20. 實現(xiàn)頁面回退刷新

舊: window.history.back() + window.location.href=document.referrer;

新: HTML5的新API擴展了window.history湖蜕，使歷史記錄點更加開放了∷瘟校可以存儲當前歷史記錄點昭抒、替換當前歷史記錄點、監(jiān)聽歷史記錄點onpopstate, replaceState

21.?正向代理和反向代理

正向代理:

正向代理

（1）訪問原來無法訪問的資源炼杖，如google

（2） 可以做緩存灭返，加速訪問資源

（3）對客戶端訪問授權，上網(wǎng)進行認證

（4）代理可以記錄用戶訪問記錄（上網(wǎng)行為管理）坤邪，對外隱藏用戶信息

反向代理:

反向代理

（1）保證內(nèi)網(wǎng)的安全熙含，可以使用反向代理提供WAF功能，阻止web攻擊大型網(wǎng)站艇纺，通常將反向代理作為公網(wǎng)訪問地址怎静，Web服務器是內(nèi)網(wǎng)邮弹。

（2）負載均衡，通過反向代理服務器來優(yōu)化網(wǎng)站的負載

22.?關于預檢請求

在非簡單請求且跨域的情況下蚓聘，瀏覽器會自動發(fā)起options預檢請求腌乡。

23.?三次握手四次揮手

開啟連接用三次握手, 關閉用四次揮手

24. TCP和UDP協(xié)議

TCP（Transmission Control Protocol：傳輸控制協(xié)議；面向連接夜牡，可靠傳輸

UDP（User Datagram Protocol）：用戶數(shù)據(jù)報協(xié)議与纽；面向無連接，不可靠傳輸

25.?進程和線程的區(qū)別

進程：是并發(fā)執(zhí)行的程序在執(zhí)行過程中分配和管理資源的基本單位塘装，是一個動態(tài)概念急迂，競爭計算機系統(tǒng)資源的基本單位。

線程：是進程的一個執(zhí)行單元蹦肴，是進程內(nèi)科調度實體僚碎。比進程更小的獨立運行的基本單位。線程也被稱為輕量級進程冗尤。

一個程序至少一個進程听盖，一個進程至少一個線程胀溺。

vue相關

1.?生命周期

生命周期

2 .雙向數(shù)據(jù)綁定v-model裂七。這個最好也是自己實現(xiàn)一下 理解更深

通過v-model

VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設置屬性值(set)的操作來實現(xiàn)的。

// 依賴收集// 簡化版varobj={}varname//第一個參數(shù)：定義屬性的對象仓坞。//第二個參數(shù)：要定義或修改的屬性的名稱背零。//第三個參數(shù)：將被定義或修改的屬性描述符。Object.defineProperty(obj,"data",{//獲取值get:function(){returnname},//設置值set:function(val){name=valconsole.log(val)}})//賦值調用setobj.data='aaa'//取值調用getconsole.log(obj.data)// 詳細版myVue.prototype._obverse=function(obj){// obj = {number: 0}varvalue;for(keyinobj){//遍歷obj對象if(obj.hasOwnProperty(key)){value=obj[key];if(typeofvalue==='object'){//如果值是對象无埃，則遞歸處理this._obverse(value);}Object.defineProperty(this.$data,key,{//關鍵enumerable:true,configurable:true,get:function(){console.log(`獲取${value}`);returnvalue;},set:function(newVal){console.log(`更新${newVal}`);if(value!==newVal){value=newVal;}}})}}}

3.vue父子組件傳遞參數(shù)

父 -->子: 通過props

子 -->父: 通過 $$refs 或 $emit

4.vue傳遞參數(shù)方法

父子組件傳參如上, v-bind : v-on @

兄弟組件傳參:(通過EventBus事件總線實現(xiàn))

// 1. 新建eventBus.jsimportVuefrom'vue'exportdefaultnewVue// 或直接在main.js中初始化EventBus(全局)Vue.prototype.$EventBus=newVue()// 2. 發(fā)射與接收// 如果是定義在eventBus.js中importeventBusfrom'eventBus.js'eventBus.$emit()eventBus.$on()// 如果是定義在main.js中this.bus.$emit()this.bus.$on()// 3. 移除監(jiān)聽eventBus.$off()

5.vue自定義組件

可以使用獨立可復用的自定義組件來構成大型應用, 采用帕斯卡命名法或橫線連接, 通過以上方式進行組件間通信. 每一個組件都是Vue實例, 可以使用生命周期鉤子.

6.?vue自定義指令

除核心指令之外的指令, 使用directive進行注冊.

指令自定義鉤子函數(shù): bind, inserted, update, componentUpdated, unbind

7.vuex組成和原理

組成: 組件間通信, 通過store實現(xiàn)全局存取

修改: 唯一途徑, 通過commit一個mutations(同步)或dispatch一個actions(異步)

簡寫: 引入mapState徙瓶、mapGetters、mapActions

8.vue-router的原理嫉称，例如hashhistory和History interface這些東西要弄明白侦镇。其實看一下源碼就好了，看不懂可以直接看解析的相關技術博客织阅。

vue-router用法:

在router.js或者某一個路由分發(fā)頁面配置path, name, component對應關系

每個按鈕一個value, 在watch功能中使用this.$router.push實現(xiàn)對應跳轉, 類似react的this.history.push

或直接用router-link to去跳轉, 類似react的link to

vue-router原理: 通過hash和History interface兩種方式實現(xiàn)前端路由

HashHistory: 利用URL中的hash（“#”）;replace()方法與push()方法不同之處在于壳繁，它并不是將新路由添加到瀏覽器訪問歷史的棧頂，而是替換掉當前的路由

History interface: 是瀏覽器歷史記錄棧提供的接口荔棉，通過back(), forward(), go()等方法闹炉，我們可以讀取瀏覽器歷史記錄棧的信息，進行各種跳轉操作. pushState(), replaceState() 這下不僅是讀取了润樱，還可以對瀏覽器歷史記錄棧進行修改

9.vue的seo問題

seo關系到網(wǎng)站排名, vue搭建spa做前后端分離不好做seo, 可通過其他方法解決:

SSR服務端渲染: 將同一個組件渲染為服務器端的 HTML 字符串.利于seo且更快.

vue-meta-info, nuxt, prerender-spa-plugin頁面預渲染等

10.預渲染和ssr

以上

11.生命周期內(nèi)create和mounted的區(qū)別

created: 在模板渲染成html前調用渣触，即通常初始化某些數(shù)據(jù)，然后再渲染成視圖壹若。

mounted: 在模板渲染成html后調用嗅钻，通常是初始化頁面完成后皂冰，再對html的dom節(jié)點進行一些需要的操作和方法。

12.監(jiān)聽watch

對應一個對象养篓，鍵是觀察表達式灼擂，值是對應回調。值也可以是methods的方法名觉至，或者是對象剔应，包含選項。在實例化時為每個鍵調用 $watch()

13.登錄驗證攔截(通過router)

先設置requireAuth:

routes = [? ? {? ? ? ? name: 'detail',? ? ? ? path: '/detail',? ? ? ? meta: {? ? ? ? ? ? requireAuth: true? ? ? ? }? ? },? ? {? ? ? ? name: 'login',? ? ? ? path: '/login'? ? }]

再配置router.beforeEach:

router.beforeEach((from,to,next)=>{if(to.meta.requireAuth){// 判斷跳轉的路由是否需要登錄if(store.state.token){// vuex.state判斷token是否存在next()// 已登錄}else{next({path:'/login',query:{redirect:to.fullPath}// 將跳轉的路由path作為參數(shù)语御，登錄成功后跳轉到該路由})}}else{next()}})

14. v-for key值

不寫key值會報warning, 和react的array渲染類似. 根據(jù)diff算法, 修改數(shù)組后, 寫key值會復用, 不寫會重新生成, 造成性能浪費或某些不必要的錯誤

15.?vue3.0的更新和defineProperty優(yōu)化

放棄 Object.defineProperty 峻贮，使用更快的原生 Proxy (訪問對象攔截器, 也成代理器)

提速, 降低內(nèi)存使用, Tree-shaking更友好

支持IE11等

使用Typescript

15. vue使用this獲取變量

正常要通過vm.

root傳參取值

16.?jQuery的優(yōu)缺點，與vue的不同应闯，vue的優(yōu)缺點纤控？

jq優(yōu)點: 比原生js更易書寫, 封裝了很多api, 有豐富的插件庫; 缺點: 每次升級與之前版本不兼容, 只能手動開發(fā), 操作DOM很慢, 不方便, 變量名污染, 作用域混淆等.

vue優(yōu)缺點: 雙向綁定, 虛擬DOM, diff算法, MVVM, 組件化, 通信方便, 路由分發(fā)等

17. vue解除雙向綁定

let obj = JSON.parse(JSON.stringify(this.temp1));

18. vue異步組件

為了簡化，Vue 允許你以一個工廠函數(shù)的方式定義你的組件碉纺，這個工廠函數(shù)會異步解析你的組件定義船万。Vue 只有在這個組件需要被渲染的時候才會觸發(fā)該工廠函數(shù)，且會把結果緩存起來供未來重渲染

Vue.component('async-webpack-example',//這個 `import` 函數(shù)會返回一個 `Promise` 對象骨田。()=>import('./my-async-component'))

19.?MVC與MVVM

model-數(shù)據(jù)層 view-視圖層 controller-控制層

MVC的目的是實現(xiàn)M和V的分離耿导，單向通信，必須通過C來承上啟下

MVVM中通過VM（vue中的實例化對象）的發(fā)布者-訂閱者模式實現(xiàn)雙向綁定态贤，數(shù)據(jù)綁定舱呻，dom事件監(jiān)聽

區(qū)別：MVC和MVVM的區(qū)別并不是VM完全取代了C，ViewModel存在目的在于抽離Controller中展示的業(yè)務邏輯悠汽，而不是替代Controller箱吕，其它視圖操作業(yè)務等還是應該放在Controller中實現(xiàn)。也就是說MVVM實現(xiàn)的是業(yè)務邏輯組件的重用

20. vue漸進式

小到可以只使用核心功能柿冲，比如單文件組件作為一部分嵌入茬高；大到使用整個工程，vue init webpack my-project來構建項目假抄；VUE的核心庫及其生態(tài)系統(tǒng)也可以滿足你的各式需求（core+vuex+vue-route）

react相關

1.?新舊生命周期

舊: will, did; mount, update...

新: 16版本之后:

getDerivedStateFromProps: 虛擬dom之后怎栽，實際dom掛載之前, 每次獲取新的props或state之后, 返回新的state, 配合didUpdate可以替代willReceiveProps

getSnapshotBeforeUpdate: update發(fā)生的時候，組件更新前觸發(fā), 在render之后慨亲，在組件dom渲染之前婚瓜；返回一個值，作為componentDidUpdate的第三個參數(shù)刑棵；配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法

componentDidCatch: 錯誤處理

對比: 棄用了三個will, 新增兩個get來代替will, 不能混用, 17版本會徹底刪除. 新增錯誤處理

2. react核心

虛擬DOM, Diff算法, 遍歷key值

react-dom: 提供了針對DOM的方法巴刻，比如：把創(chuàng)建的虛擬DOM，渲染到頁面上 或 配合ref來操作DOM

react-router

3. fiber核心(react 16)

舊: 瀏覽器渲染引擎單線程, 計算DOM樹時鎖住整個線程, 所有行為同步發(fā)生, 有效率問題, 期間react會一直占用瀏覽器主線程蛉签，如果組件層級比較深胡陪，相應的堆棧也會很深沥寥，長時間占用瀏覽器主線程, 任何其他的操作（包括用戶的點擊，鼠標移動等操作）都無法執(zhí)行

新: 重寫底層算法邏輯, 引入fiber時間片, 異步渲染, react會在渲染一部分樹后檢查是否有更高優(yōu)先級的任務需要處理(如用戶操作或繪圖), 處理完后再繼續(xù)渲染, 并可以更新優(yōu)先級, 以此管理渲染任務. 加入fiber的react將組件更新分為兩個時期（phase 1 && phase 2）柠座，render前的生命周期為phase1邑雅，render后的生命周期為phase2, 1可以打斷, 2不能打斷一次性更新. 三個will生命周期可能會重復執(zhí)行, 盡量避免使用

4. 渲染一個react

分為首次渲染和更新渲染

生命周期, 建立虛擬DOM, 進行diff算法

對比新舊DOM, 節(jié)點對比, 將算法復雜度從O(n^3)降低到O(n)

key值優(yōu)化, 避免用index作為key值, 兄弟節(jié)點中唯一就行

5. 高階組件

高階組件就是一個函數(shù)，且該函數(shù)(wrapper)接受一個組件作為參數(shù)妈经，并返回一個新的組件淮野。

高階組件并不關心數(shù)據(jù)使用的方式和原因，而被包裹的組件也不關心數(shù)據(jù)來自何處.

react-dnd: 根組件, source, target等

export default DragSource(type, spec, collect)(MyComponent)

重構代碼庫使用HOC提升開發(fā)效率

6. hook(v16.7測試)

在無狀態(tài)組件(如函數(shù)式組件)中也能操作state以及其他react特性, 通過useState

7. redux和vuex以及dva：

redux: 通過store存儲吹泡，通過action唯一更改竿刁，reducer描述如何更改求摇。dispatch一個action

dva: 基于redux，結合redux-saga等中間件進行封裝

vuex：類似dva讼油，集成化打月。action異步辞嗡，mutation非異步

8.?react和vue的區(qū)別

數(shù)據(jù)是否可變: react整體是函數(shù)式的思想不狮，把組件設計成純組件欣除，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中潭袱，是單向數(shù)據(jù)流柱嫌，推崇結合immutable來實現(xiàn)數(shù)據(jù)不可變; vue的思想是響應式的，也就是基于是數(shù)據(jù)可變的敌卓，通過對每一個屬性建立Watcher來監(jiān)聽慎式，當屬性變化的時候伶氢，響應式的更新對應的虛擬dom趟径。總之癣防，react的性能優(yōu)化需要手動去做蜗巧，而vue的性能優(yōu)化是自動的，但是vue的響應式機制也有問題蕾盯，就是當state特別多的時候幕屹，Watcher也會很多，會導致卡頓级遭，所以大型應用（狀態(tài)特別多的）一般用react望拖，更加可控。

通過js來操作一切挫鸽，還是用各自的處理方式: react的思路是all in js说敏，通過js來生成html，所以設計了jsx丢郊，還有通過js來操作css盔沫，社區(qū)的styled-component医咨、jss等; vue是把html，css架诞，js組合到一起拟淮，用各自的處理方式，vue有單文件組件谴忧，可以把html很泊、css、js寫到一個文件中沾谓，html提供了模板引擎來處理撑蚌。

類式的組件寫法，還是聲明式的寫法: react是類式的寫法搏屑，api很少; 而vue是聲明式的寫法争涌，通過傳入各種options，api和參數(shù)都很多辣恋。所以react結合typescript更容易一起寫亮垫，vue稍微復雜。

擴展不同: react可以通過高階組件（Higher Order Components--HOC）來擴展伟骨，而vue需要通過mixins來擴展

什么功能內(nèi)置饮潦，什么交給社區(qū)去做: react做的事情很少，很多都交給社區(qū)去做携狭，vue很多東西都是內(nèi)置的继蜡，寫起來確實方便一些，

比如 redux的combineReducer就對應vuex的modules逛腿，

比如reselect就對應vuex的getter和vue組件的computed稀并，

vuex的mutation是直接改變的原始數(shù)據(jù)，而redux的reducer是返回一個全新的state单默，所以redux結合immutable來優(yōu)化性能碘举，vue不需要。

9. react單向數(shù)據(jù)流怎么理解

React是單向數(shù)據(jù)流搁廓，數(shù)據(jù)主要從父節(jié)點傳遞到子節(jié)點（通過props）引颈。如果頂層（父級）的某個props改變了，React會重渲染所有的子節(jié)點境蜕。

10. React算法復雜度優(yōu)化

react樹對比是按照層級去對比的蝙场， 他會給樹編號0,1,2,3,4.... 然后相同的編號進行比較。 所以復雜度是n粱年，這個好理解售滤。

關鍵是傳統(tǒng)diff的復雜度是怎么算的？ 傳統(tǒng)的diff需要出了上面的比較之外逼泣，還需要跨級比較趴泌。 他會將兩個樹的節(jié)點舟舒，兩兩比較，這就有n^2的復雜度了嗜憔。 然后還需要編輯樹秃励，編輯的樹可能發(fā)生在任何節(jié)點，需要對樹進行再一次遍歷操作吉捶，因此復雜度為n夺鲜。加起來就是n^3了。

11. React優(yōu)點

聲明式, 組件化, 一次學習, 隨處編寫. 靈活, 豐富, 輕巧, 高效

移動端相關

1. 移動端兼容適配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

rem, em, 百分比

框架的柵格布局

media query媒體查詢

手淘團隊的一套flexible.js, 自動判斷dpr進行整個布局視口的放縮

2. flexible如何實現(xiàn)自動判斷dpr

判斷機型, 找出樣本機型去適配. 比如iphone以6為樣本, 寬度375px, dpr是2

3. 為什么以iPhone6為標準的設計稿的尺寸是以750px寬度來設計的呢呐舔？

iPhone6的滿屏寬度是375px币励，而iPhone6采用的視網(wǎng)膜屏的物理像素是滿屏寬度的2倍，也就是dpr(設備像素比)為2, 并且設計師所用的PS設計軟件分辨率和像素關系是1:1珊拼。所以為了做出的清晰的頁面食呻，設計師一般給出750px的設計圖，我們再根據(jù)需求對元素的尺寸設計和壓縮澎现。

4. 如何處理異形屏iphone X

safe area: 默認放置在安全區(qū)域以避免遮擋, 但會壓縮

在meta中添加viewport-fit=cover: 告訴瀏覽器要講整個頁面渲染到瀏覽器中仅胞，不管設備是圓角與否，這個時候會造成頁面的元素被圓角遮擋

padding: constant(env): 解決遮擋問題

5. 移動端首屏優(yōu)化

采用服務器渲染ssr

按需加載配合webpack分塊打包, 通過entry和commonChunkPlugin

很有必要將script標簽?異步

有輪播圖 最好給個默認 另外要處理圖片懶加載

打包線上也要注意去掉map 文件

組件, 路由懶加載

webpack的一切配置 肯定是必須的

壓縮圖片?https://tinypng.com/

建議還是用webpack的圖片壓縮插件

骨架屏

Loading頁面

6.?PWA全稱Progressive Web App剑辫，即漸進式WEB應用

一個 PWA 應用首先是一個網(wǎng)頁, 可以通過 Web 技術編寫出一個網(wǎng)頁應用. 隨后添加上 App Manifest 和 Service Worker 來實現(xiàn) PWA 的安裝和離線等功能

解決了哪些問題干旧？

可以添加至主屏幕，點擊主屏幕圖標可以實現(xiàn)啟動動畫以及隱藏地址欄

實現(xiàn)離線緩存功能妹蔽，即使用戶手機沒有網(wǎng)絡椎眯，依然可以使用一些離線功能

實現(xiàn)了消息推送

它解決了上述提到的問題，這些特性將使得 Web 應用漸進式接近原生 App胳岂。

7. 離線包方案

現(xiàn)在 web 頁面在移動端的地位越來越高编整，大部分主流 App 采用 native + webview 的 hybrid 模式，加載遠程頁面受限于網(wǎng)絡旦万，本地 webview 引擎闹击，經(jīng)常會出現(xiàn)渲染慢導致的白屏現(xiàn)象，體驗很差成艘，于是離線包方案應運而生。動態(tài)下載的離線包可以使得我們不需要走完整的 App 審核發(fā)布流程就完成了版本的更新

8.?自適應和響應式布局的區(qū)別

自適應布局通過檢測視口分辨率贺归，來判斷當前訪問的設備是：pc端淆两、平板、手機拂酣，從而請求服務層秋冰，返回不同的頁面；響應式布局通過檢測視口分辨率婶熬，針對不同客戶端在客戶端做代碼處理剑勾，來展現(xiàn)不同的布局和內(nèi)容埃撵。

自適應布局需要開發(fā)多套界面，而響應式布局只需要開發(fā)一套界面就可以了虽另。

自適應對頁面做的屏幕適配是在一定范圍：比如pc端一般要大于1024像素暂刘，手機端要小于768像素。而響應式布局是一套頁面全部適應捂刺。

自適應布局如果屏幕太小會發(fā)生內(nèi)容過于擁擠谣拣。而響應式布局正是為了解決這個問題而衍生出的概念，它可以自動識別屏幕寬度并做出相應調整的網(wǎng)頁設計族展。

插件及工具相關

1.?babel和polyfill

Babel: Babel 是一個廣泛使用的 ES6 轉碼器森缠，可以將 ES6 代碼轉為 ES5 代碼。注意：Babel 默認只轉換新的 JavaScript 句法（syntax）仪缸，而不轉換新的 API

Polyfill: Polyfill的準確意思為贵涵，用于實現(xiàn)瀏覽器并不支持的原生API的代碼。

2. jpg, jpeg和png區(qū)別

jpg是jpeg的縮寫, 二者一致

PNG就是為取代GIF而生的, 無損壓縮, 占用內(nèi)存多

jpg犧牲圖片質量, 有損, 占用內(nèi)存小

PNG格式可編輯恰画。如圖片中有字體等独悴，可利用PS再做更改。JPG格式不可編輯

3.?git rebase和merge區(qū)別

git rebase

git merge

前端性能優(yōu)化

減少HTTP請求（合并css锣尉、js刻炒，雪碧圖/base64圖片）

壓縮（css、js自沧、圖片皆可壓縮,使用webpack uglify和 svg）

樣式表放頭部坟奥，腳本放底部

使用CDN（這部分，不少前端都不用考慮拇厢，負責發(fā)布的兄弟可能會負責搞好）

http緩存

bosify圖片壓縮: 根據(jù)具體情況修改圖片后綴或格式 后端根據(jù)格式來判斷存儲原圖還是縮略圖

懶加載, 預加載

替代方案: 骨架屏, SSR

webpack優(yōu)化

原生通信

1.JSBridge通信原理, 有哪幾種實現(xiàn)的方式爱谁？

JsBridge給JavaScript提供了調用Native功能，Native也能夠操控JavaScript孝偎。這樣前端部分就可以方便使用地理位置访敌、攝像頭以及登錄支付等Native能力啦。JSBridge構建 Native和非Native間消息通信的通道衣盾，而且是 雙向通信的通道寺旺。

JS 向 Native 發(fā)送消息 : 調用相關功能、通知 Native 當前 JS 的相關狀態(tài)等势决。

Native 向 JS 發(fā)送消息 : 回溯調用結果阻塑、消息推送、通知 JS 當前 Native 的狀態(tài)等果复。

2.實現(xiàn)一個簡單的 JSBridge陈莽，設計思路？

算法相關

1.?二分查找和冒泡排序

二分查找: 遞歸(分左右, 傳遞start,end參數(shù))和非遞歸(使用while(l < h))

冒泡排序: 兩個for循環(huán)

2.?快速排序

functionquickSort(arr){if(arr.length<2)returnarrvarmiddle=Math.floor(arr.length/2)varflag=arr.splice(middle,1)[0]varleft=[],right=[]for(vari=0;i<arr.length;i++){if(arr[i]<flag){left.push(arr[i])}else{right.push(arr[i])}}returnquickSort(left).concat([flag],quickSort(right))}

3. 最長公共子串

functionfindSubStr(str1,str2){if(str1.length>str2.length){[str1,str2]=[str2,str1]}varresult=''varlen=str1.lengthfor(varj=len;j>0;j--){for(vari=0;i<len-j;i++){result=str1.substr(i,j)if(str2.includes(result))returnresult}}}console.log(findSubStr('aabbcc11','ppooiiuubcc123'))

4.?最長公共子序列(LCS動態(tài)規(guī)劃)

另一篇

// dp[i][j] 計算去最大長度，記住口訣：相等左上角加一走搁，不等取上或左最大值functionLCS(str1,str2){varrows=str1.split("")rows.unshift("")varcols=str2.split("")cols.unshift("")varm=rows.lengthvarn=cols.lengthvardp=[]for(vari=0;i<m;i++){dp[i]=[]for(varj=0;j<n;j++){if(i===0||j===0){dp[i][j]=0continue}if(rows[i]===cols[j]){dp[i][j]=dp[i-1][j-1]+1//對角＋1}else{dp[i][j]=Math.max(dp[i-1][j],dp[i][j-1])//對左邊独柑，上邊取最大}}console.log(dp[i].join(""))//調試}returndp[i-1][j-1]}//!!!如果它來自左上角加一，則是子序列私植，否則向左或上回退忌栅。//findValue過程，其實就是和 就是把T[i][j]的計算反過來兵琳。// 求最長子序列functionfindValue(input1,input2,n1,n2,T){vari=n1-1,j=n2-1;varresult=[];//結果保存在數(shù)組中console.log(i);console.log(j);while(i>0&&j>0){if(input1[i]==input2[j]){result.unshift(input1[i]);i--;j--;}else{//向左或向上回退if(T[i-1][j]>T[i][j-1]){//向上回退i--;}else{//向左回退j--;}}}console.log(result);}

5.?數(shù)組去重狂秘，多種方法

雙for循環(huán), splice剔除并i--回退

indexOf等于index

filter indexOf === index

新數(shù)組indexOf === index

使用空對象等

6. 實現(xiàn)一個函數(shù)功能：sum(1,2,3,4..n)轉化為 sum(1)(2)(3)(4)…(n)

// 使用柯里化 + 遞歸functioncurry(fn){varc=(...arg)=>(fn.length===arg.length)?fn(...arg):(...arg1)=>c(...arg,...arg1)returnc}

7. 反轉二叉樹

varinvertTree=function(root){if(root!==null){[root.left,root.right]=[root.right,root.left]invertTree(root.left)invertTree(root.right)}returnroot}

8. 貪心算法解決背包問題

varitems=['A','B','C','D']varvalues=[50,220,60,60]varweights=[5,20,10,12]varcapacity=32//背包容積greedy(values,weights,capacity)// 320functiongreedy(values,weights,capacity){varresult=0varrest=capacityvarsortArray=[]varnum=0values.forEach((v,i)=>{sortArray.push({value:v,weight:weights[i],ratio:v/weights[i]})})sortArray.sort((a,b)=>b.ratio-a.ratio)sortArray.forEach((v,i)=>{num=parseInt(rest/v.weight)rest-=num*v.weight? ? ? ? ? result+=num*v.value})returnresult}

9. 輸入一個遞增排序的數(shù)組和一個數(shù)字S，在數(shù)組中查找兩個數(shù)躯肌，使得他們的和正好是S者春，如果有多對數(shù)字的和等于S，輸出兩個數(shù)的乘積最小的清女。

functionFindNumbersWithSum(array,sum){varindex=0for(vari=0;i<array.length-1&&array[i]<sum/2;i++){for(varj=i+1;j<array.length;j++){if(array[i]+array[j]===sum)return[array[i],array[j]]}//index = array.indexOf(sum - array[i], i + 1)// if (index !== -1) {//? ? return [array[i], array[index]]//}}return[]

10.?二叉樹各種(層序)遍歷

深度廣度遍歷

// 根據(jù)前序和中序重建二叉樹/* function TreeNode(x) {

? ? this.val = x;

? ? this.left = null;

? ? this.right = null;

} */functionreConstructBinaryTree(pre,vin){varresult=nullif(pre.length===1){result={val:pre[0],left:null,right:null}}elseif(pre.length>1){varroot=pre[0]varvinRootIndex=vin.indexOf(root)varvinLeft=vin.slice(0,vinRootIndex)varvinRight=vin.slice(vinRootIndex+1,vin.length)pre.shift()varpreLeft=pre.slice(0,vinLeft.length)varpreRight=pre.slice(vinLeft.length,pre.length)result={val:root,left:reConstructBinaryTree(preLeft,vinLeft),right:reConstructBinaryTree(preRight,vinRight)}}returnresult}// 遞歸// 前序遍歷functionprevTraverse(node){if(node===null)return;console.log(node.data);prevTraverse(node.left);prevTraverse(node.right);}// 中序遍歷functionmiddleTraverse(node){if(node===null)return;middleTraverse(node.left);console.log(node.data);middleTraverse(node.right);}// 后序遍歷functionlastTraverse(node){if(node===null)return;lastTraverse(node.left);lastTraverse(node.right);console.log(node.data);}// 非遞歸// 前序遍歷functionpreTraverse(tree){vararr=[],node=nullarr.unshift(tree)while(arr.length){node=arr.shift()console.log(node.root)if(node.right)arr.unshift(node.right)if(node.left)arr.unshift(node.left)}}// 中序遍歷functionmiddleTraverseUnRecursion(root){letarr=[],node=root;while(arr.length!==0||node!==null){if(node===null){node=arr.shift();console.log(node.data);node=node.right;}else{arr.unshift(node);node=node.left;}}}// 廣度優(yōu)先-層序遍歷// 遞歸varresult=[]varstack=[tree]varcount=0varbfs=function(){varnode=stack[count]if(node){result.push(node.value)if(node.left)stack.push(node.left)if(node.right)stack.push(node.right)count++bfs()}}bfs()console.log(result)// 非遞歸functionbfs(node){varresult=[]varqueue=[]queue.push(node)while(queue.length){node=queue.shift()result.push(node.value)node.left&&queue.push(node.left)node.right&&queue.push(node.right)}returnresult}

11.?各種排序

// 插入排序functioninsertSort(arr){vartempfor(vari=1;i<arr.length;i++){temp=arr[i]for(varj=i;j>0&&temp<arr[j-1];j--){arr[j]=arr[j-1]}arr[j]=temp}returnarr}console.log(insertSort([3,1,8,2,5]))// 歸并排序functionmergeSort(array){varresult=array.slice(0)functionsort(array){varlength=array.lengthvarmid=Math.floor(length*0.5)varleft=array.slice(0,mid)varright=array.slice(mid,length)if(length===1)returnarrayreturnmerge(sort(left),sort(right))}functionmerge(left,right){varresult=[]while(left.length||right.length){if(left.length&&right.length){if(left[0]<right[0]){result.push(left.shift())}else{result.push(right.shift())}}elseif(left.length){result.push(left.shift())}else{result.push(right.shift())}}returnresult}returnsort(result)}console.log(mergeSort([5,2,8,3,6]))// 二分插入排序functiontwoSort(array){varlen=array.length,i,j,tmp,low,high,mid,result? ? ? ? result=array.slice(0)for(i=1;i<len;i++){tmp=result[i]low=0high=i-1while(low<=high){mid=parseInt((high+low)/2,10)if(tmp<result[mid]){high=mid-1}else{low=mid+1}}for(j=i-1;j>=high+1;j--){result[j+1]=result[j]}result[j+1]=tmp}returnresult}console.log(twoSort([4,1,7,2,5]))

12.?使用尾遞歸對斐波那契優(yōu)化

遞歸非常耗費內(nèi)存钱烟，因為需要同時保存成千上百個調用幀，很容易發(fā)生“棧溢出”錯誤（stack overflow）嫡丙。但對于尾遞歸來說拴袭，由于只存在一個調用幀，所以永遠不會發(fā)生“棧溢出”錯誤曙博。

// 傳統(tǒng)遞歸斐波那契, 會造成超時或溢出functionFibonacci(n){if(n<=1){return1};returnFibonacci(n-1)+Fibonacci(n-2);}Fibonacci(10)// 89Fibonacci(100)// 超時Fibonacci(500)// 超時// 使用尾遞歸優(yōu)化, 可規(guī)避風險functionFibonacci2(n,ac1=1,ac2=1){if(n<=1){returnac2};returnFibonacci2(n-1,ac2,ac1+ac2);}Fibonacci2(100)// 573147844013817200000Fibonacci2(1000)// 7.0330367711422765e+208Fibonacci2(10000)// Infinity

13. 兩個升序數(shù)組合并為一個升序數(shù)組

functionsort(A,B){vari=0,j=0,p=0,m=A.length,n=B.length,C=[]while(i<m||j<n){if(i<m&&j<n){C[p++]=A[i]<B[j]?A[i++]:B[j++]}elseif(i<m){C[p++]=A[i++]}else{C[p++]=B[j++]}}returnC}

node相關

1. node的router是什么

2. 數(shù)據(jù)庫索引是啥

狹義上: 索引是數(shù)據(jù)庫針對每條數(shù)據(jù)自動生成的內(nèi)部唯一id標識, 用以快速搜索定位數(shù)據(jù)

廣義上: 是數(shù)據(jù)庫根據(jù)每條數(shù)據(jù)形成的關鍵字, 將劃分為樹形結構, 便于sql語句對數(shù)據(jù)的查找, 使算法復雜度降低到O(logn)

3. 瀏覽器的事件循環(huán)和node事件循環(huán)有什么區(qū)別拥刻？