? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?前端面試題

?什么是HTTP持久化和管線化

出現(xiàn)背景：?HTTP?最初的版本中囚戚，每進(jìn)行一次?HTTP?通信堕澄，就要斷開一次?TCP?連接（無連接）

為解決上述問題漾唉，HTTP/1.1?增加了持久連接（HTTP Persistent Connections ）的方法蹄衷，其特點(diǎn)是正歼，只要一方未明確提出斷開連接赠尾，則另一方保持?TCP?連接狀態(tài)

管線化是指將多個(gè)?HTTP?請(qǐng)求整批發(fā)送力穗，在發(fā)送過程中不用等待對(duì)方響應(yīng)

管線化是在持久連接的基礎(chǔ)上實(shí)現(xiàn)的，管線化的實(shí)現(xiàn)气嫁，能夠同時(shí)并行發(fā)送多個(gè)請(qǐng)求当窗，而不需要一個(gè)接一個(gè)的等待響應(yīng)

為什么利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效

CDN?緩存更方便

突破瀏覽器并發(fā)限制

節(jié)約?cookie?帶寬

節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度

防止不必要的安全問題

使用XHTML的局限有哪些寸宵？

XHTML 與HTML的區(qū)別為：

XHTML 元素必須被正確地嵌套崖面。

XHTML 元素必須被關(guān)閉。

標(biāo)簽名必須用小寫字母梯影。

XHTML 文檔必須擁有根元素巫员。

局限：

所有的 XHTML 元素都必須被正確地嵌套，XHTML 必須擁有良好的結(jié)構(gòu)甲棍，所有的標(biāo)簽必須小寫简识，并且所有的 XHTML 元素必須被關(guān)閉。所有的 XHTML 文檔必須擁有 DOCTYPE 聲明感猛，并且 html七扰、head、title 和 body 元素必須存在陪白。雖然代碼更加的優(yōu)雅颈走，但缺少容錯(cuò)性，不利于快速開發(fā)咱士。

盒子垂直居中方法

position: absolute;left:50%;top:50%;width:400px;

height:400px;margin-left:-200px;margin-top:-200px;

?浮動(dòng)元素清除浮動(dòng)方法

四種方法：1立由、使用空標(biāo)簽清除浮動(dòng)2轧钓、使用overflow屬性。（overflow:auto锐膜；zoom:1″用于兼容IE6）3毕箍、使用after偽對(duì)象清除浮動(dòng)。 該方法只適用于非IE瀏覽器4枣耀、浮動(dòng)外部元素霉晕，float-in-float庭再。這種方法很簡單捞奕，就是把“#outer”元素也進(jìn)行浮動(dòng)（向左或者向右）。

?閉包的理解拄轻，javascript的作用域

a颅围、閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。b恨搓、在本質(zhì)上院促，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。閉包的用途閉包可以用在許多地方斧抱。它的最大用處有兩個(gè)常拓，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中辉浦。 實(shí)例如下：根據(jù)作用域鏈的規(guī)則弄抬，底層作用域沒有聲明的變量，會(huì)向上一級(jí)找宪郊，找到就返回掂恕，沒找到就一直找，直到window的變量弛槐，沒有就返回undefined懊亡。這里明顯count 是函數(shù)內(nèi)部的flag2 的那個(gè)count 。

varcount=10;//全局作用域 標(biāo)記為flag1

functionadd(){varcount=0;//函數(shù)全局作用域 標(biāo)記為flag2

returnfunction(){? ? ? ? count+=1;//函數(shù)的內(nèi)部作用域alert(count);? ? }? ? }

vars = add()? ? s();//輸出1s();//輸出2

網(wǎng)站性能優(yōu)化的方法

1）將css和js文件放在獨(dú)立外部文件中引用

2) 使用gzip壓縮網(wǎng)頁內(nèi)容

3）將CSS放在頁面頂端乎串，JS文件放在頁面底端

4）使JS文件內(nèi)容最小化

5）盡量減少外部腳本的使用店枣，減少DNS查詢時(shí)間

（ 文件合并

? 文件最小化/文件壓縮

? 使用 CDN 托管

? 緩存的使用（多個(gè)域名來提供緩存））

vuex?原理

vuex?僅僅是作為?vue?的一個(gè)插件而存在，不像?Redux,MobX?等庫可以應(yīng)用于所有框架叹誉，vuex?只能使用在?vue?上艰争，很大的程度是因?yàn)槠涓叨纫蕾囉?vue?的?computed?依賴檢測系統(tǒng)以及其插件系統(tǒng)，

vuex?整體思想誕生于?flux,可其的實(shí)現(xiàn)方式完完全全的使用了?vue?自身的響應(yīng)式設(shè)計(jì)桂对，依賴監(jiān)聽甩卓、依賴收集都屬于?vue?對(duì)對(duì)象?Property?set?get?方法的代理劫持。最后一句話結(jié)束?vuex?工作原理蕉斜，vuex?中的?store?本質(zhì)就是沒有?template?的隱藏著的?vue?組件逾柿；

eval是做什么的

它的功能是把對(duì)應(yīng)的字符串解析稱js代碼運(yùn)行缀棍；

應(yīng)該避免使用eval,不安全，非常耗能.

setState?和?replaceState?的區(qū)別

setState?是修改其中的部分狀態(tài)机错，相當(dāng)于?Object.assign爬范，只是覆蓋，

不會(huì)減少原來的狀態(tài)?replaceState?是完全替換原來的狀態(tài)弱匪，相當(dāng)于賦值青瀑，將原來的?state?替換為另一個(gè)對(duì)象，如果新狀態(tài)屬性減少萧诫，那么?state?中就沒有這個(gè)狀態(tài)了

react?diff?原理

把樹形結(jié)構(gòu)按照層級(jí)分解斥难，只比較同級(jí)元素。

給列表結(jié)構(gòu)的每個(gè)單元添加唯一的?key?屬性帘饶，方便比較哑诊。

React?只會(huì)匹配相同?class?的?component（這里面的?class?指的是組件的名字）?合并操作，調(diào)用?component?的?setState?方法的時(shí)候,?React?將其標(biāo)記為?dirty.

到每一個(gè)事件循環(huán)結(jié)束,?React?檢查所有標(biāo)記?dirty?的?component?重新繪制.?選擇性子樹渲染及刻。開發(fā)人員可以重寫?shouldComponentUpdate?提高?diff?的性能

狀態(tài)(state)和屬性(props)之間有何區(qū)別

State?是一種數(shù)據(jù)結(jié)構(gòu)镀裤，用于組件掛載時(shí)所需數(shù)據(jù)的默認(rèn)值。

State?可能會(huì)隨著時(shí)間的推移而發(fā)生突變缴饭，但多數(shù)時(shí)候是作為用戶事件行為的結(jié)果暑劝。

Props(properties?的簡寫)則是組件的配置。props?由父組件傳遞給子組件颗搂，并且就子組件而言担猛，props?是不可變的(immutable)。

組件不能改變自身的?props峭火，但是可以把其子組件的?props?放在一起(統(tǒng)一管理)毁习。Props?也不僅僅是數(shù)據(jù)--回調(diào)函數(shù)也可以通過?props?傳遞。

.shouldComponentUpdate?是做什么的卖丸？

shouldComponentUpdate?這個(gè)方法用來判斷是否需要調(diào)用?render?方法重新描繪?dom纺且。因?yàn)?dom?的描繪非常消耗性能，如果我們能在?shouldComponentUpdate?方法中能夠?qū)懗龈鼉?yōu)化的?dom?diff?算法稍浆，可以極大的提高性能载碌。

當(dāng)你調(diào)用?setState?的時(shí)候，發(fā)生了什么事衅枫？

將傳遞給?setState?的對(duì)象合并到組件的當(dāng)前狀態(tài)嫁艇，這將啟動(dòng)一個(gè)和解的過程，構(gòu)建一個(gè)新的?react?元素樹弦撩，與上一個(gè)元素樹進(jìn)行對(duì)比（?diff?）步咪，從而進(jìn)行最小化的重渲染。

如果網(wǎng)頁內(nèi)容需要支持多語言益楼，你會(huì)怎么做猾漫？

下面這些問題需要考慮：

應(yīng)用字符集的選擇点晴，選擇UTF-8編碼

語言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)

數(shù)據(jù)庫驅(qū)動(dòng)型網(wǎng)站

React?優(yōu)勢

1、React?速度很快：它并不直接對(duì)?DOM?進(jìn)行操作悯周，引入了一個(gè)叫做虛擬?DOM?的概念粒督，安插在?javascript?邏輯和實(shí)際的?DOM?之間，性能好禽翼。

2屠橄、跨瀏覽器兼容：虛擬?DOM?幫助我們解決了跨瀏覽器問題，它為我們提供了標(biāo)準(zhǔn)化的?API闰挡，甚至在?IE8?中都是沒問題的锐墙。

3、一切都是?component：代碼更加模塊化解总，重用代碼更容易贮匕，可維護(hù)性高姐仅。

4花枫、單向數(shù)據(jù)流：Flux?是一個(gè)用于在?JavaScript?應(yīng)用中創(chuàng)建單向數(shù)據(jù)層的架構(gòu)，它隨著?React?視圖庫的開發(fā)而被?Facebook?概念化掏膏。

5劳翰、同構(gòu)、純粹的?javascript：因?yàn)樗阉饕娴呐老x程序依賴的是服務(wù)端響應(yīng)而不是?JavaScript?的執(zhí)行馒疹，預(yù)渲染你的應(yīng)用有助于搜索引擎優(yōu)化佳簸。

6、兼容性好：比如使用?RequireJS?來加載和打包颖变，而?Browserify?和?Webpack?適用于構(gòu)建大型應(yīng)用生均。它們使得那些艱難的任務(wù)不再讓人望而生畏。

在?React?當(dāng)中?Element?和?Component?有何區(qū)別腥刹？

React?Element?是描述屏幕上所見內(nèi)容的數(shù)據(jù)結(jié)構(gòu)马胧，是對(duì)于?UI?的對(duì)象表述。

典型的?React?Element?就是利用?JSX?構(gòu)建的聲明式代碼片然后被轉(zhuǎn)化為?createElement?的調(diào)用組合衔峰。

React?Component?是一個(gè)函數(shù)或一個(gè)類佩脊，可以接收參數(shù)輸入，并且返回某個(gè)?React?Element

action?執(zhí)行函數(shù)中第一個(gè)參數(shù)?store?從哪里獲取的垫卤？

store?初始化時(shí)威彰，所有配置的?action?和?mutation?以及?getters?均被封裝過。在執(zhí)行如?dispatch('submitOrder',?payload)的時(shí)候穴肘，actions?中?type?為?submitOrder?的所有處理方法都是被封裝后的歇盼，其第一個(gè)參數(shù)為當(dāng)前的?store?對(duì)象，所以能夠獲取到?{?dispatch,?commit,?state,?rootState?}?等數(shù)據(jù)评抚。

Javascript中豹缀，執(zhí)行時(shí)對(duì)象查找時(shí)赵讯，永遠(yuǎn)不會(huì)去查找原型的函數(shù)？

Object.hasOwnProperty(proName)：是用來判斷一個(gè)對(duì)象是否有你給出名稱的屬性耿眉。不過需要注意的是边翼，此方法無法檢查該對(duì)象的原型鏈中是否具有該屬性，該屬性必須是對(duì)象本身的一個(gè)成員鸣剪。

DOM操作

（1）創(chuàng)建新節(jié)點(diǎn)

createDocumentFragment() //創(chuàng)建一個(gè)DOM片段

createElement() //創(chuàng)建一個(gè)具體的元素

createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

（2）添加组底、移除、替換筐骇、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

（3）查找

getElementsByTagName() //通過標(biāo)簽名稱

getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)债鸡，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)

getElementById()?

.css?動(dòng)畫和?js?動(dòng)畫的差異

代碼復(fù)雜度铛纬，js?動(dòng)畫代碼相對(duì)復(fù)雜一些

動(dòng)畫運(yùn)行時(shí)厌均，對(duì)動(dòng)畫的控制程度上，js?能夠讓動(dòng)畫告唆，暫停棺弊，取消，終止擒悬，css?動(dòng)畫不能添加事件

動(dòng)畫性能看模她，js?動(dòng)畫多了一個(gè)?js?解析的過程，性能不如?css?動(dòng)畫好