2019前端經(jīng)典面習(xí)題

2019前端經(jīng)典面習(xí)題2019前端經(jīng)典面習(xí)題21/212019前端經(jīng)典面習(xí)題1，html和xml有什么差異html是超文本標(biāo)記語言xml是可擴(kuò)展標(biāo)記語言html語法寬松，xml語法慎重html使用固有標(biāo)記，xml沒有固有標(biāo)記html標(biāo)簽預(yù)定義，xml標(biāo)簽可擴(kuò)展，可定義html是用來顯示數(shù)據(jù)的，xml是用來描述和儲(chǔ)藏?cái)?shù)據(jù)的2，css有哪幾種選擇器權(quán)重的優(yōu)先級(jí)第一種為屬性選擇器第二種為id選擇器第三種為class選擇器第四種為偽類選擇器第五種是后代選擇器第六種是標(biāo)簽選擇器第七種是通用選擇器第八種是偽元素選擇器第一等：代表內(nèi)聯(lián)樣式，如:style=””，權(quán)值為1000。第二等：代表ID選擇器，如：#content，權(quán)值為0100。第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。4.第四等：代表種類選擇器和偽元素選擇器，如divp，權(quán)值為0001。5.通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。繼承的樣式?jīng)]有權(quán)值。3，網(wǎng)頁有哪幾部分組成結(jié)構(gòu)層：html表示層：css行為層：js和dom4，一個(gè)200*200的div在不一樣分辨率屏幕上下左右居中，用css實(shí)現(xiàn)Div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}5，闡述清楚浮動(dòng)的幾種方式第一種父級(jí)div定義高度height合適高度固定的布局第二種父級(jí)div定義overflow：hidden第三種結(jié)尾處加空標(biāo)簽clear：both讓父級(jí)自動(dòng)獲取高度第四種父級(jí)div定義偽類:after和zoom6，講解csssprites，怎樣使用CSSSprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position能夠用數(shù)字能精準(zhǔn)的定位出背景圖片的地址。CSSSprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要加載更多的圖片7，怎樣用原生js給一個(gè)按鈕綁定兩個(gè)onclick事件Varbtn1=document.getElementsById(“btn”);(“click”,”hello1);(“click”,”hello2);functionhello1(){alert(“hello1”);}functionhello2(){alert(“hello2”);}8,拖曳會(huì)用到哪些事件DragstartDragenterDragoverDragleaveDragDropDragend9,請(qǐng)列舉jQuery中選擇器1，基本選擇器ID，class，元素之類的2，層級(jí)選擇器返回的是jQuery對(duì)象才能夠進(jìn)行的鏈?zhǔn)讲僮魅绾蟠?，子元素，兄弟元素，相鄰元?，過濾選擇器基本過濾,內(nèi)容過濾,可見性過濾,屬性過濾,子元素過濾和表單對(duì)象屬性過濾選擇器10，JavaScript中有哪些準(zhǔn)時(shí)器，他們的差異和用法是什么SetTimeout只會(huì)執(zhí)行一次SetInterval會(huì)素來重復(fù)執(zhí)行方式都為：settimeout（函數(shù)，時(shí)間）11，請(qǐng)描述一下cookiessessionstorage和localstorage差異相同點(diǎn)：都儲(chǔ)蓄在客戶端上不一樣點(diǎn)：

1儲(chǔ)蓄大小Cookies數(shù)據(jù)大小不能夠高出4kSessionstorage和Localstorage

比

cookies

大，能夠達(dá)到

5m或更多2有效時(shí)間Localstorage儲(chǔ)蓄長(zhǎng)遠(yuǎn)數(shù)據(jù)，閱讀器關(guān)閉后也不會(huì)扔掉，除非主動(dòng)刪除數(shù)據(jù)Sessionstorage數(shù)據(jù)在關(guān)閉旅游器此后自動(dòng)刪除Cookies設(shè)置的cookies過期時(shí)間從前素來有效，即使窗口和旅游器關(guān)閉。3數(shù)據(jù)與服務(wù)器之間的交互方式Cookies

的數(shù)據(jù)會(huì)自動(dòng)的傳達(dá)到服務(wù)器，服務(wù)器端也能夠?qū)?/p>

cookies

到客戶端Sessionstorage

和

localstorage

不會(huì)上傳到服務(wù)器，僅在當(dāng)?shù)乇Ａ?2，計(jì)算一個(gè)數(shù)組arr全部元素的和alue;來獲取輸入框中的值functionsum2(){vararr1=[1,2,3,4,5,6,7,8,9];varsum1=0;for(vari=0;i<=;i++){if(typeofarr1[i]=="number"){sum1+=arr1[i];}}(sum1);}13，編寫一個(gè)方法去掉數(shù)組里的重復(fù)內(nèi)容vararr=[1,2,3,4,5,1,2,3]functionarr1(){vararr2=[1,2,3,4,5,1,2,3];vars=[];for(i=0;i<;i++){if(arr2[i])==-1){(arr2[i]);}}(s);}14，和innerHTML的差異是什么是直接寫入到頁面的內(nèi)容流，若是從前沒有調(diào)用。那么閱讀器會(huì)自動(dòng)調(diào)用open，頁面被重寫innerHTML將內(nèi)容寫入某個(gè)DOM節(jié)點(diǎn)，不會(huì)以致頁面全部重繪。精準(zhǔn)。15，ajax的步驟Ajax

異步

JavaScript

和

xml

能夠局部刷新網(wǎng)頁數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁第一步，創(chuàng)辦

xmlhttprequest

對(duì)象，

varxmlhttp=newXmlHTTPrequest

（）；Xmlhttprequest對(duì)象用來和服務(wù)器交換數(shù)據(jù)Varxhttp；If{esize(function(){$(".myblock").css({position:"absolute",left:($(window).width()-$(".myblock").outerWidth())/2,top:$(".myblock").outerHeight())/2

($(window).height()});

-});其他在頁面載入時(shí)，就需要調(diào)用resize()方法$(function(){$(window).resize();});19，三個(gè)盒子，左右定寬，中間自適應(yīng)的方法有幾個(gè)第一種方法：左右采用浮動(dòng)中間采用margin-left和margin-right的方法代碼：<divstyle="width:100%;margin:0auto;"><divstyle="width:200px;float:right;background-color:#000000;">11</div><divstyle="width:200px;float:left;background-color:red;">33</div><divstyle="margin-left:200px;margin-right:200px;background-color:green;">22</div></div>第二種方法：左右采用絕對(duì)定位，中間采用margin-left和margin-right代碼：<divstyle="width:100%;margin:0auto;"><divstyle="width:200px;position:absolute;left:0px;background-color:#000000;">11</div><divstyle="width:200px;position:absolute;right:0px;background-color:red;">33</div><divstyle="margin-left:200px;margin-right:200px;background-color:green;">22</div></div>第三種方法負(fù)margin值<divid="main"><divid="mainContainer">maincontent</div></div><divid="left"><divid="leftContainer"class="inner">leftcontent</div></div><divid="right"><divid="rightContainer"class="inner">right</div></div>#main{float:left;width:100%;}#mainContainer{margin:0230px;height:200px;background:green;}#left{float:left;margin-left:-100%;width:230px}#right{float:left;margin-left:-230px;width:230px;}#left.inner,#right.inner{background:orange;margin:010px;height:200px;}20，js有幾種數(shù)據(jù)種類其中基本數(shù)據(jù)種類有哪些基本數(shù)據(jù)種類有Boolean，undefined，null，number，string應(yīng)用種類有object，array，function21，undefined和null的差異Null代表空值，代表一個(gè)空對(duì)象指針，一個(gè)特其他對(duì)象值Undefined是不決義，種類也是undefined22，http和https有什么差異怎樣靈便運(yùn)用Http是http運(yùn)行在TCP之上，傳輸內(nèi)容是明文，客戶端和服務(wù)器無法考據(jù)對(duì)方身份。HTTPS是http運(yùn)行在SSL/tls之上，SSL/tls運(yùn)行在TCP上，全部?jī)?nèi)容都是經(jīng)過加密。加密采用對(duì)稱加密，但是秘鑰用服務(wù)器證書進(jìn)行非對(duì)稱加密。服務(wù)器和客戶端都是能夠互相考據(jù)身份。23，常有的Http狀態(tài)碼開頭，央求成功，表示成功辦理了央求的狀態(tài)代碼開頭，央求重定向，表示完成央求，需要進(jìn)一步操作，一般是重定向開頭，央求錯(cuò)誤，表示央求出錯(cuò)，阻擋了服務(wù)器的辦理開頭，這些狀態(tài)碼表示服務(wù)器在試一試辦理央求時(shí)發(fā)生內(nèi)部錯(cuò)誤，服務(wù)器自己出錯(cuò)而不是請(qǐng)求出錯(cuò)24，怎樣進(jìn)行網(wǎng)站性能的優(yōu)化原因：用戶角度加載速度提高，更好的交互體驗(yàn)服務(wù)商角度減少頁面央求，降低帶寬，節(jié)約資源方法：1，JavaScript優(yōu)化和打包2，按需加載資源3，在使用DOM操作庫時(shí)用上array-ids4，緩存5，啟用HTTP/26，應(yīng)用性能解析7，使用負(fù)載均衡方案8，同構(gòu)9，使用索引加快數(shù)據(jù)庫盤問10，使用更快的轉(zhuǎn)譯方案11，防備因JavaScript和css的使用而擁塞襯著12，圖片編碼優(yōu)化25，react和vue有哪些不一樣，說說你對(duì)這兩個(gè)框架的看法相同點(diǎn)：都支持服務(wù)器襯著都有virtualDOM，組件化開發(fā)，經(jīng)過props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳達(dá)，都實(shí)現(xiàn)了webComponent規(guī)范數(shù)據(jù)驅(qū)動(dòng)視圖都支持native方案，react的reactnative和vue的weex不一樣點(diǎn)：react嚴(yán)格上只針對(duì)MVC的view層，vue則是mvvm模式VirtualDOM不一樣樣，vue會(huì)追蹤每一個(gè)組件的依賴關(guān)系，不需要重新襯著整個(gè)組件樹，而關(guān)于react來說，每次應(yīng)用狀態(tài)被改變，全部組件都會(huì)被重新襯著，因此react需要shouldComponentUPdate這個(gè)生命周期函數(shù)來進(jìn)行控制。組件的寫法不一樣樣。。。數(shù)據(jù)綁定，vue是雙向的，react是單向的State對(duì)象在react應(yīng)用中不能夠變的，需要使用setstate方法更新狀態(tài)，在vue中state對(duì)象對(duì)象不是必定的，數(shù)據(jù)由data屬性在vue對(duì)象中管理26，什么是mvvmmvc有什么差異，原理1，MVC（model-view-controller）MVC是比較直觀的架構(gòu)模式，用戶模式->view(負(fù)責(zé)接收用戶的操作輸入)->controller(業(yè)務(wù)邏輯辦理)->view(將結(jié)果反響給view)2，MVVM（model-view-viewmodel）將”數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心，因此model和view沒有什么關(guān)系，之后痛過viewmodel進(jìn)行交互，而model和viewmodel之間的交互是雙向的，因此數(shù)據(jù)的視圖的變化會(huì)同時(shí)更正數(shù)據(jù)源，而數(shù)據(jù)源的數(shù)據(jù)變化也會(huì)立刻反響view。27，px和em的差異Px表示像素，是一個(gè)絕對(duì)單位，不會(huì)由于其他元素而改變Em表示有關(guān)于父元素的字體大小，em是相對(duì)單位，會(huì)碰到其他元素的影響28，優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)（向上兼容）：一開始就針對(duì)低版本閱讀器進(jìn)行修筑界面，完成基本功能，爾后在針對(duì)高級(jí)閱讀器進(jìn)行收效，交互，追加功能達(dá)到更好的體驗(yàn)優(yōu)雅降級(jí)（向下兼容）：一開始就成立站點(diǎn)的完滿功能，爾后針對(duì)閱讀器測(cè)試和修復(fù)。29，eval()的作用把字符串參數(shù)解析成JS代碼并運(yùn)行，并返回執(zhí)行的結(jié)果；比方：eval(“2+3”);varul=('parentUl');2.=function(event){3.vare=event||,4.source=||;if=="li"){alert;7.}8.stopPropagation(e);};10.functionaddElement(){11.varli=('li');12.="我是新孩子";13.(li);14.}34，css樣式覆蓋規(guī)則規(guī)則一：由于繼承而發(fā)生樣式矛盾時(shí)，近來祖先獲勝（就近原則）；規(guī)則二：繼承樣式和直接指定的樣式矛盾時(shí)，直接指定的樣式獲勝規(guī)則三：直接指定樣式發(fā)生矛盾時(shí)，樣式權(quán)值高的獲勝；規(guī)則四：樣式權(quán)值相等時(shí)，后者獲勝。規(guī)則五：！important的樣式不被覆蓋。35，請(qǐng)簡(jiǎn)要描述margin重合問題以及解決方式1，同向margin重疊這時(shí)候重疊此后的margin值由發(fā)生重疊兩片的最大值決定；若是其中一個(gè)出現(xiàn)負(fù)值，則由最大的正邊距減去絕對(duì)值最大的負(fù)邊距，若是沒有最大正邊距，則由0減去絕對(duì)值最大的負(fù)邊距。解決方法：（1）在最外層的div中加入overflow：hidden；zoom：1；（zoom這個(gè)屬性是ie專有屬性，除了設(shè)置也許檢索對(duì)象的縮放比率之外，它還有能夠觸發(fā)ie的haslayout屬性，除去浮動(dòng)，除去margin重疊等作用。）（2）在最外層加入padding：1px；（3）在最外層加入：border：1pxsolid#000000;2,異向重疊問題：Float：left（ie6專屬，或解決ie8+等閱讀器的同向重疊問題）36，position的值,relative\absolute\fixed分別有關(guān)于進(jìn)行誰定位Absolute：絕對(duì)定位有關(guān)于近來一級(jí)Fixed：絕對(duì)定位有關(guān)于閱讀器窗口或frame進(jìn)行定位Relative：相對(duì)定位有關(guān)于其在一般流的地址Static：默認(rèn)值沒有定位Sticky：粘性定位文檔地址依照正常文檔流計(jì)算得出37，什么是閉包，怎樣使用，為什么使用閉包就是在函數(shù)內(nèi)定義一個(gè)函數(shù)。優(yōu)點(diǎn)：能夠讀取函數(shù)內(nèi)部的變量這些變量的值向來保留在內(nèi)存中缺點(diǎn)：內(nèi)存耗資大且簡(jiǎn)單造成內(nèi)存泄漏閉包會(huì)在父函數(shù)外面，改變父函數(shù)內(nèi)部變量的值38，請(qǐng)講解一下jsonp的工作原理，以及它為什么不是真切的ajax。Jsonp是一個(gè)簡(jiǎn)單的跨域方式；HTML中的script標(biāo)簽?zāi)軌蚣虞d并執(zhí)行其他域的javascript，于是我們能夠經(jīng)過script標(biāo)記來動(dòng)向加載其他域的資源JSONP易于實(shí)現(xiàn)，但是也會(huì)存在一些安全隱患，若是第三方的腳本隨意地執(zhí)行，那么它即可以篡改頁面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受相信的雙方傳達(dá)數(shù)據(jù)，JSONP是特別合適的選擇。AJAX是不跨域的，而JSONP是一個(gè)是跨域的，還有就是二者接收參數(shù)形式不一樣樣39，請(qǐng)講解一下JavaScript的同源政策。同源政策規(guī)定跨域之間的腳本是隔斷的，一個(gè)域的腳本不能夠接見和操作其他一個(gè)域的絕大部分屬性和方法。當(dāng)兩個(gè)域擁有相同的協(xié)議，相同的端口，相同的host，那么我們就可以認(rèn)為是相同的域。40，怎樣增加，移除，搬動(dòng)，復(fù)制，創(chuàng)辦和查找節(jié)點(diǎn)1，創(chuàng)辦新節(jié)點(diǎn)Createdocumentfragment（）ind("click",function(e){});2），live定義和用法：主要用于給選擇到的元素上綁定特定事件種類的監(jiān)聽函數(shù)；語法：live(type,[data],fn);特點(diǎn)：(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了上了。(2)、live正是利用了事件委托體系來完成事件的監(jiān)聽辦理，把節(jié)點(diǎn)的辦理委托給了document，新增加的元素不用再綁定一次監(jiān)聽器。(3)、使用live（）方法但卻只能放在直接選擇的元素后邊，不能夠在層級(jí)比較深，連綴的DOM遍歷方法后邊使用，即$(“ul”").live...能夠，但$("body").find("ul").live...不能夠；實(shí)比以下：$(document).on("click","#memberslia",function(e){});3），delegate定義和用法：將監(jiān)聽事件綁定在就近的父級(jí)元素上語法：delegate(selector,type,[data],fn)特點(diǎn)：、選擇就近的父級(jí)元素，由于事件能夠更快的冒泡上去，能夠在第一時(shí)間進(jìn)行辦理。(2)、更精準(zhǔn)的小范圍使用事件代理，性能優(yōu)于

.live()

。能夠用在動(dòng)向增加的元素上。實(shí)比以下：$("#info_table").delegate("td","click",function(){/*$("table").find("#info").delegate("td","click",function(){/*

顯示更多信息*/});顯示更多信息

*/});（4），on定義和用法：將監(jiān)聽事件綁定到指定元素上。語法：

on(type,[selector],[data],fn)實(shí)比以下：地址寫法與

$("#info_table").on("click","td",function(){/*delegate不一樣樣。

顯示更多信息

*/});

參數(shù)的說明：on方法是當(dāng)前JQuery介紹使用的事件綁定方法，附加只運(yùn)行一次就刪除函數(shù)的方法是one()?？偨Y(jié)：.bind(),.live(),.delegate(),.on()分別對(duì)應(yīng)的相反事件為：.unbind(),.die(),.undelegate(),.off()43，閱讀器的內(nèi)核分別是什么IE：trident內(nèi)核Firefox：gecko內(nèi)核Safari：webkit內(nèi)核Opera：現(xiàn)在blink內(nèi)核Chrome：blink內(nèi)核44，閱讀器是怎樣襯著畫面的襯著的流程以下：1，解析HTML文件，創(chuàng)辦dom樹自上而下，碰到任何樣式和腳本都會(huì)擁塞2，解析css。優(yōu)先級(jí)：閱讀器默認(rèn)設(shè)置<用戶設(shè)置<外面樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；3，將css和DOM合并，成立襯著樹4，布局和繪制，重繪和重排45，css3新增了好多屬性，一起解析一下新增的屬性：邊框：·border-radius：CSS3圓角邊框。在CSS2中增加圓角矩形需要技巧，我們必定為每個(gè)圓角使用不一樣的圖片，在CSS3中，創(chuàng)辦圓角是特別簡(jiǎn)單的，在CSS3中，border-radius屬性用于創(chuàng)辦圓角。border：2pxsolid;box-shadow：CSS3邊框陰影。在CSS3中，box-shadow用于向方框增加陰影。box-shadow:10px10px5px#888888;·border-image：CSS3邊框圖片。經(jīng)過CSS3的border-image屬性，您能夠使用圖片來創(chuàng)辦邊框。border-image：url3030round;背景：·background-size：屬性規(guī)定背景圖片的尺寸。在CSS3從前，背景圖片的尺寸是由圖片的實(shí)質(zhì)尺寸決定的。在CSS3中，能夠規(guī)定背景圖片的尺寸，這就贊同我們?cè)诓灰粯拥沫h(huán)境中重復(fù)使用背景圖片。您能夠以像素或百分比規(guī)定尺寸。若是以百分比規(guī)定尺寸，那么尺寸有關(guān)于父元素的寬度和高度。background-origin：屬性規(guī)定背景圖片的定位地區(qū)。背景圖片能夠擱置于content-box、padding-box或border-box地域。文字收效：·text-shadow：在CSS3中，text-shadow可向文本應(yīng)用陰影。text-shadow:5px5px5px#FFFFFF;word-wrap:單詞太長(zhǎng)的話即可能無法高出某個(gè)地域，贊同對(duì)長(zhǎng)單詞進(jìn)行拆分，并換行到下一行：p{word-wrap:break-word;}2D變換：transform：經(jīng)過CSS3變換，我們能夠?qū)υ剡M(jìn)行搬動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸?！ranslate()：元素從其當(dāng)前地址搬動(dòng)，依照給定的left（x坐標(biāo)）和top（y坐標(biāo)）地址參數(shù)：transform：translate（50px,100px）;值translate(50px,100px)把元素從左側(cè)搬動(dòng)50像素，從頂端搬動(dòng)100像素。rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。贊同負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。transform:rotate(30deg);值rotate(30deg)把元素順時(shí)針旋轉(zhuǎn)30度?！cale():元素的尺寸會(huì)增加或減少，依照給定的寬度（X軸）和高度（Y軸）參數(shù)：transform:scale(2,4);值scale(2,4)把寬度變換為原始尺寸的2倍，把高度變換為原始高x()3D變換：·rotateX()：元素圍繞其X軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform：rotateX(120deg);·rotateY()：元素圍繞其Y軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform：rotateY(120deg);過渡：當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素增加收效。動(dòng)畫：經(jīng)過CSS3，我們能夠創(chuàng)辦動(dòng)畫，這能夠在好多網(wǎng)頁中取代動(dòng)畫圖片、Flash動(dòng)畫以及JavaScript。多列：·column-count：屬性規(guī)定元素應(yīng)該被分開的列數(shù)?！olumn-gap：屬性規(guī)定列之間的間隔。·column-rule：屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。用戶界面：resize：屬性規(guī)定可否可由用戶調(diào)整元素尺寸。box-sizing：屬性贊同您以確實(shí)的方式定義適應(yīng)某個(gè)地域的詳盡內(nèi)容。outline-offset：屬性對(duì)輪廓進(jìn)行偏移，并在高出邊框邊緣的地址繪制輪廓。46，從輸入url到顯示頁面，都經(jīng)歷了什么1、第一，在閱讀器地址欄中輸入url2、閱讀器先查察閱讀器緩存-系統(tǒng)緩存-路由器緩存，若是緩存中有，會(huì)直接在屏幕中顯示頁面內(nèi)容。若沒有，則跳到第三步操作。3、在發(fā)送http央求前，需要域名解析(DNS解析)(DNS（域名系統(tǒng)，DomainNameSystem）是互聯(lián)網(wǎng)的一項(xiàng)核心服務(wù)，它作為能夠?qū)⒂蛎虸P地址互相照射的一個(gè)分布式數(shù)據(jù)庫，能夠令人更方便的接見互聯(lián)網(wǎng)，而不用去記住IP地址。)，解析獲取