1、清除浮動(dòng)诵姜，什么時(shí)候需要清除浮動(dòng)棚唆，清除浮動(dòng)都有哪些方法

浮動(dòng)元素脫離文檔流宵凌，不占據(jù)空間止后。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留译株。

a歉糜、使用空標(biāo)簽清除浮動(dòng)现恼。

? ??這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無(wú)意義標(biāo)簽叉袍。

b、使用overflow

? ??給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6

c瞧捌、使用after偽對(duì)象清除浮動(dòng)殿怜。

? ??該方法只適用于非IE瀏覽器曙砂。具體寫法可參照以下示例鸠澈。使用中需注意以下幾點(diǎn)笑陈。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0乖菱，否則該元素會(huì)比實(shí)際高出若干像素窒所；

2拳缠、講一下 prototype 是什么東西窟坐，原型鏈的理解哲鸳，什么時(shí)候用 prototype

?????prototype是函數(shù)對(duì)象上面預(yù)設(shè)的對(duì)象屬性

? ? 原型鏈：實(shí)例對(duì)象的原型__proto__指向new該實(shí)例對(duì)象的構(gòu)造函數(shù)原型prototype盔憨，再指向原始的對(duì)象原型Object.prototype郁岩，再指向null问慎，形成原型鏈。

使用prototype的好處是不會(huì)產(chǎn)生額外的內(nèi)存冰木，所有實(shí)例化后的對(duì)象都會(huì)從原型上繼承這個(gè)屬性或方法踊沸。當(dāng)一個(gè)子類需要擁有父類的某些屬性或方法逼龟，該屬性或方法可以覆蓋评凝，又可以添加自己的屬性和方法肥哎，這個(gè)操作不影響父類篡诽，這個(gè)時(shí)候使用prototype杈女。

3达椰、apply和 call 什么含義啰劲，什么區(qū)別?

apply：傳參的時(shí)候是把參數(shù)作為一個(gè)數(shù)組傳進(jìn)去

call：傳參的時(shí)候是扁平的把每個(gè)參數(shù)傳進(jìn)去

4：什么是閉包蝇裤。

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

閉包的用途:閉包可以用在許多地方栓辜。它的最大用處有兩個(gè)藕甩，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量周荐，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中概作。

5、ajax 跨域有哪些方法辉阶，jsonp 的原理是什么谆甜。

實(shí)現(xiàn)方式一：使用jQuery中的$.getJSON方法獲取數(shù)據(jù)

實(shí)現(xiàn)方式二：使用jQuery中的$.Ajax方法獲取數(shù)據(jù)

實(shí)現(xiàn)方式三：使用原生JS實(shí)現(xiàn)JSONP

Jsonp（json with?padding）是JSON的一種“使用模式”规辱，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題罕袋。

Jsonp是為了解決ajax跨域發(fā)送http請(qǐng)求出現(xiàn)的浴讯，利用Script標(biāo)簽的特性跨域。瀏覽器由于安全考慮仰猖，在編寫ajax程序時(shí)，httprequest/xmlhttp都不能發(fā)送非本域的http請(qǐng)求衣屏，是被瀏覽器所禁止的狼忱。所以ajax本身是無(wú)法跨域的藕赞。而jsonp就是利用了<script>標(biāo)簽可以鏈接到不同源的js腳本斧蜕，來(lái)達(dá)到跨域目的批销。

6均芽、談?wù)勀銓?duì)MVVM開發(fā)模式的理解

MVVM分為Model掀宋、View湃鹊、ViewModel三者镣奋。

Model?代表數(shù)據(jù)模型余赢，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；

View?代表UI視圖妻柒，負(fù)責(zé)數(shù)據(jù)的展示；

ViewModel?負(fù)責(zé)監(jiān)聽?Model?中數(shù)據(jù)的改變并且控制視圖的更新啤贩，處理用戶交互操作痹屹；

Model?和?View?并無(wú)直接關(guān)聯(lián)志衍，而是通過(guò)?ViewModel?來(lái)進(jìn)行聯(lián)系的楼肪，Model?和?ViewModel?之間有著雙向數(shù)據(jù)綁定的聯(lián)系春叫。因此當(dāng)?Model?中的數(shù)據(jù)改變時(shí)會(huì)觸發(fā)?View?層的刷新泣港，View?中由于用戶交互操作而改變的數(shù)據(jù)也會(huì)在?Model?中同步呛每。

這種模式實(shí)現(xiàn)了?Model?和?View?的數(shù)據(jù)自動(dòng)同步晨横，因此開發(fā)者只需要專注對(duì)數(shù)據(jù)的維護(hù)操作即可手形，而不需要自己操作?dom滤灯。

7、v-if 和 v-show 有什么區(qū)別曼玩？

v-show 僅僅控制元素的顯示方式鳞骤，將 display 屬性在 block 和 none 來(lái)回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否黍判。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)豫尽，使用v-show會(huì)更加節(jié)省性能上的開銷；當(dāng)只需要一次顯示或隱藏時(shí)顷帖，使用v-if更加合理美旧。

8、簡(jiǎn)述Vue的響應(yīng)式原理

當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)贬墩，vue會(huì)遍歷data選項(xiàng)的屬性榴嗅，用?Object.defineProperty?將它們轉(zhuǎn)為 getter/setter并且在內(nèi)部追蹤相關(guān)依賴嗽测，在屬性被訪問(wèn)和修改時(shí)通知變化停做。

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗鼤?huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)库北，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新垃你。

9凌摄、Vue中如何監(jiān)控某個(gè)屬性值的變化器予？

10末融、談?wù)勀銓?duì)前端性能優(yōu)化的理解

a巧婶、請(qǐng)求數(shù)量：合并腳本和樣式表湾盒，CSS Sprites吭狡，拆分初始化負(fù)載弛秋，劃分主域

b. 請(qǐng)求帶寬：開啟GZip科乎，精簡(jiǎn)JavaScript太抓，移除重復(fù)腳本掉丽，圖像優(yōu)化项炼，將icon做成字體

c. 緩存利用：使用CDN取胎，使用外部JavaScript和CSS循榆，添加Expires頭泽篮，減少DNS查找亏拉，配置ETag芳肌，使AjaX可緩存

d. 頁(yè)面結(jié)構(gòu)：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出

e. 代碼校驗(yàn)：避免CSS表達(dá)式柿菩，避免重定向

11后众、線程與進(jìn)程的區(qū)別

a. 一個(gè)程序至少有一個(gè)進(jìn)程，一個(gè)進(jìn)程至少有一個(gè)線程

b. 線程的劃分尺度小于進(jìn)程广匙，使得多線程程序的并發(fā)性高

c. 進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元绽乔，而多個(gè)線程共享內(nèi)存去枷，從而極大地提高了程序的運(yùn)行效率

d. 每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口坚弱、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行罪帖，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制

e. 多線程的意義在于一個(gè)應(yīng)用程序中蝶溶，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行每窖。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用污秆，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配

12.請(qǐng)說(shuō)出三種減少頁(yè)面加載時(shí)間的方法

a. 盡量減少頁(yè)面中重復(fù)的HTTP請(qǐng)求數(shù)量

b. 服務(wù)器開啟gzip壓縮

c. css樣式的定義放置在文件頭部

d. Javascript腳本放在文件末尾

e. 壓縮合并Javascript劈猪、CSS代碼

f. 使用多域名負(fù)載網(wǎng)頁(yè)內(nèi)的多個(gè)文件庸推、圖片

13.解釋CSS Sprites, 以及你要如何使用?

用”background-position”來(lái)實(shí)現(xiàn)背景圖片的定位技術(shù),這種技術(shù)可以成為css

sprites技術(shù)蚓庭，又稱為css精靈。

精靈圖其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”棚放，“background- repeat”，“background-position”的組合進(jìn)行背景定位寂纪，background-position可以用數(shù)字能精確的定位出背景圖片的位置席吴。

好處：

1、通過(guò)對(duì)圖片的整合來(lái)減少對(duì)服務(wù)器的請(qǐng)求次數(shù)捞蛋，從而頁(yè)面的加載速度；

3柬姚、通過(guò)圖片整合可以減小圖片的體積

14拟杉、單行文本溢出顯示省略號(hào)的寫法

1、容器寬度：width：value量承；

2搬设、強(qiáng)制文本在一行內(nèi)顯示:white-space：nowrap;

3、溢出內(nèi)容為隱藏：overflow：hidden撕捍；

4拿穴、溢出文本顯示省略號(hào)：text-overflow：ellipsis;

15、src和href的區(qū)別

src

指向外部資源的位置, 用于替換當(dāng)前元素, 比如js腳本, 圖片等元素

href

指向網(wǎng)絡(luò)資源所在的位置, 用于在當(dāng)前文檔和引用資源間確定聯(lián)系,加載css

16忧风、?什么是響應(yīng)式布局:?

響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本默色。

優(yōu)點(diǎn)：靈活性強(qiáng) 能解決多設(shè)備顯示問(wèn)題???

缺點(diǎn)：不兼容所有瀏覽器，一定程度改變布局結(jié)構(gòu)

17狮腿、frame的優(yōu)缺點(diǎn)腿宰？

優(yōu)點(diǎn)：

1.解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問(wèn)題

2.并行加載腳本

3.重載頁(yè)面時(shí)不需要重載整個(gè)頁(yè)面，只需要重載頁(yè)面中的一個(gè)框架頁(yè)(減少了數(shù)據(jù)的傳輸缘厢，增加了網(wǎng)頁(yè)下載速度)

4.方便制作導(dǎo)航欄

缺點(diǎn)：

1.iframe會(huì)阻塞主頁(yè)面的Onload事件

2.即時(shí)內(nèi)容為空吃度，加載也需要時(shí)間

3.沒(méi)有語(yǔ)意

4.會(huì)產(chǎn)生很多頁(yè)面，不容易管理

5.瀏覽器的后退按鈕無(wú)效

6.代碼復(fù)雜,無(wú)法被一些搜索引擎索引到

7.多框架的頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求

18贴硫、原生JS 的window.onload與Jquery的 $(document).ready(function(){})有什么不同 椿每？

window.onload()方法是必須等到頁(yè)面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

$(document).ready()是 DOM 結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢间护。

19亦渗、為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效？

CDN緩存更方便

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

節(jié)約cookie帶寬

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

防止不必要的安全問(wèn)題

20央碟、css中可以通過(guò)哪些屬性定義，使得一個(gè)DOM元素不顯示在瀏覽器可視范圍內(nèi)均函？

設(shè)置display屬性為none亿虽，或者設(shè)置visibility屬性為hidden

設(shè)置寬高為0，設(shè)置透明度為0苞也，設(shè)置z-index位置在-1000

21洛勉、為什么要初始化樣式？

用于瀏覽器默認(rèn)css樣式的存在并且不同瀏覽器對(duì)相同HTML標(biāo)簽的默認(rèn)樣式不同如迟，若不初始化會(huì)造成不同瀏覽器之間的顯示差異收毫。

22、Doctype作用? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式殷勘，區(qū)分它們有何意義?

1此再、<!DOCTYPE>聲明位于文檔中的最前面，處于<html> 標(biāo)簽之前玲销。告知瀏覽器的解析器输拇，用什么文檔類型 規(guī)范來(lái)解析這個(gè)文檔。

2贤斜、嚴(yán)格模式的排版和 JS 運(yùn)作模式是,以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行策吠。

3、在混雜模式中瘩绒，頁(yè)面以寬松的向后兼容的方式顯示猴抹。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

4锁荔、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)蟀给。

23、Css定位方式有哪些堕战？區(qū)別坤溃？

1、static：默認(rèn)值嘱丢，無(wú)特殊定位薪介，對(duì)象遵循HTML原則；

2越驻、absolute：

絕對(duì)定位汁政，將對(duì)象從文檔流中拖離出來(lái)道偷，使用left/right/top/bottom屬性相對(duì)

其最接近的一個(gè)并有定位設(shè)置的父元素進(jìn)行絕對(duì)定位；如果不存在這樣的父

對(duì)象记劈，則依據(jù)html對(duì)象(瀏覽器)勺鸦，而其層疊通過(guò)z-index屬性定義，此屬性

僅僅作用于?position?屬性值為??absolute/relative/fixed?的對(duì)象目木。

3换途、relative：

相對(duì)定位，相對(duì)于標(biāo)簽原來(lái)的位置進(jìn)行定位刽射，對(duì)依據(jù)right军拟，top，left誓禁，bottom

（相對(duì)定位）等屬性在正常文檔流中偏移位置懈息；

4、fixed：固定定位：相對(duì)于瀏覽器定位摹恰，脫離文檔流辫继；

24、post與get區(qū)別?

1俗慈、GET請(qǐng)求姑宽，請(qǐng)求的數(shù)據(jù)會(huì)附加在URL之后，以?分割URL和傳輸數(shù)據(jù)闺阱，多個(gè) 參數(shù)用&連接低千。URL的編碼格式采用的是ASCII編碼，而不是uniclde馏颂，即是說(shuō) 所有的非ASCII字符都要編碼之后再傳輸。 POST請(qǐng)求：POST請(qǐng)求會(huì)把請(qǐng)求的數(shù)據(jù)放置在HTTP請(qǐng)求包的包體中棋傍。上面的 item=bandsaw就是實(shí)際的傳輸數(shù)據(jù)救拉。 因此，GET請(qǐng)求的數(shù)據(jù)會(huì)暴露在地址欄中瘫拣，而POST請(qǐng)求則不會(huì)亿絮。?

2、傳輸數(shù)據(jù)的大小 在HTTP規(guī)范中麸拄，沒(méi)有對(duì)URL的長(zhǎng)度和傳輸?shù)臄?shù)據(jù)大小進(jìn)行限制派昧。但是在實(shí)際開 發(fā)過(guò)程中，對(duì)于GET拢切，特定的瀏覽器和服務(wù)器對(duì)URL的長(zhǎng)度有限制蒂萎。因此，在使 用GET請(qǐng)求時(shí)淮椰，傳輸數(shù)據(jù)會(huì)受到URL長(zhǎng)度的限制五慈。 對(duì)于POST纳寂，由于不是URL傳值，理論上是不會(huì)受限制的泻拦，但是實(shí)際上各個(gè)服務(wù) 器會(huì)規(guī)定對(duì)POST提交數(shù)據(jù)大小進(jìn)行限制毙芜，Apache、IIS都有各自的配置争拐。

?3腋粥、安全性 POST的安全性比GET的高。這里的安全是指真正的安全架曹，而不同于上面GET提 到的安全方法中的安全隘冲，上面提到的安全僅僅是不修改服務(wù)器的數(shù)據(jù)。比如音瓷，在 進(jìn)行登錄操作对嚼，通過(guò)GET請(qǐng)求，用戶名和密碼都會(huì)暴露再URL上绳慎，因?yàn)榈卿涰?yè)面 有可能被瀏覽器緩存以及其他人查看瀏覽器的歷史記錄的原因纵竖，此時(shí)的用戶名和 密碼就很容易被他人拿到了。除此之外杏愤，GET請(qǐng)求提交的數(shù)據(jù)還可能會(huì)造成 Cross-site?request?frogery攻擊靡砌。

?4、HTTP中的GET珊楼，POST通殃，SOAP協(xié)議都是在HTTP上運(yùn)行的