前端常見問題

1、1. 請你談?wù)凜ookie的弊端cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔了服務(wù)器存儲的負擔，但還是有很多局限性的。第一：每個特定的域名下最多生成20個cookie1.IE6或更低版本最多20個cookie2.IE7和之后的版本最后可以有50個cookie。3.Firefox最多50個cookie4.chrome和Safari沒有做硬性限制IE和Opera 會清理近期最少使用的cookie，F(xiàn)irefox會隨機清理cookie。cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。IE 提供了一種存儲可以持久化用戶數(shù)據(jù)，叫做userData，從IE5.0就開始支

2、持。每個數(shù)據(jù)最多128K，每個域名下最多1M。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會一直存在。優(yōu)點：極高的擴展性和可用性1.通過良好的編程，控制保存在cookie中的session對象的大小。2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。缺點：1.Cookie數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。2.安全性問題。如果cookie被人攔

3、截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達到目的了。3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。2. 簡單說一下瀏覽器本地存儲是怎樣的在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。html5中的Web Storage包括了兩種存儲方式：sessionStorage和loc

4、alStorage。sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。3.web storage和cookie的區(qū)別Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要

5、指定作用域，不可以跨域調(diào)用。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生瀏覽器的支持除了IE及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web服務(wù)器里運行)，值得一提的是IE總是辦好事，例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案。通過簡單的代

6、碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等4.display:none和visibility:hidden的區(qū)別？display:none 隱藏對應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。visibility:hidden 隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間。5.CSS中 link 和import 的區(qū)別是？(1) link屬于HTML標簽，而import是CSS提供的;(2) 頁面被加載的時，l

7、ink會同時被加載，而import引用的CSS會等到頁面被加載完再加載;(3) import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;(4) link方式的樣式的權(quán)重 高于import的權(quán)重.6.position的absolute與fixed共同點與不同點A：共同點：1.改變行內(nèi)元素的呈現(xiàn)方式，display被置為block；2.讓元素脫離普通流，不占據(jù)空間；3.默認會覆蓋到非定位元素上B不同點：absolute的”根元素“是可以設(shè)置的，而fixed的”根元素“固定為瀏覽器窗口。當你滾動網(wǎng)頁，fixed元素與瀏覽器窗口之間的距離是不變的。7.介紹一下CSS的盒子模型？1）盒

8、模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding;8.CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？S 選擇符：1.id選擇器(# myid)2.類選擇器(.myclassname)3.標簽選擇器(div, h1, p)4.相鄰選擇器(h1 + p)5.子選擇器(ul li)6.后代選擇器(li a)7.通配符選擇器( * )8.屬性選擇器(arel = external)9.偽類選擇器

9、(a: hover, li:nth-child)可繼承的樣式：1.font-size2.font-family3.color4.text-indent不可繼承的樣式：1.border2.padding3.margin4.width5.height優(yōu)先級算法：1.優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準;2.載入樣式以最后載入的定位為準;3.!important id class tag 4.important 比 內(nèi)聯(lián)優(yōu)先級高，但內(nèi)聯(lián)比 id 要高CSS3新增偽類舉例：p:first-of-type 選擇屬于其父元素的首個 元素的每個 元素。p:last-of-type 選擇屬于其父元素

10、的最后 元素的每個 元素。p:only-of-type 選擇屬于其父元素唯一的 元素的每個 元素。p:only-child 選擇屬于其父元素的唯一子元素的每個 元素。p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 元素。:enabled :disabled 控制表單控件的禁用狀態(tài)。:checked 單選框或復(fù)選框被選中。9.列出display的值，說明他們的作用。position的值， relative和absolute分別是相對于誰進行定位的？display 的值的作用：1.block 象塊類型元素一樣顯示。2.inline 缺省值。象行內(nèi)元素類型一樣顯示。3.inlin

11、e-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。4.list-item 象塊類型元素一樣顯示，并添加樣式列表標記。position 的值的定位區(qū)別：1.absolute 生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位。2.fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位（老IE不支持）。3.relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。4.static 默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。5.inherit 規(guī)定從父元素繼承 pos

12、ition 屬性的值。10.CSS3有哪些新特性？1. CSS3實現(xiàn)圓角（border-radius），陰影（box-shadow），2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);/ 旋轉(zhuǎn),縮放,定位,傾斜4. 增加了更多的CSS選擇器 多背景 rgba5. 在CSS3中唯一引入的偽元素是 :selection.6. 媒體查詢，多欄布局7. border-image11.為什么

13、要初始化CSS樣式。因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。12.對BFC規(guī)范的理解？BFC，塊級格式化上下文，一個創(chuàng)建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的 margin 會發(fā)生折疊。W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行布局，以及與其他元素的關(guān)系和相互作用。13.解釋下 CSS sprit

14、es，以及你要如何在頁面或網(wǎng)站中使用它。CSS Sprites 其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的background-image，background-repeat，background-position 的組合進行背景定位，background-position 可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因為有了 http2。14.說說你對語義化的理解？1. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)2. 有利于SEO

15、：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；3. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；4. 便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。15.Doctype作用? 嚴格模式與混雜模式如何區(qū)分？它們有何意義?1. 聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。2. 嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。3. 在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為

16、以防止站點無法工作。4. DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。16.你知道多少種Doctype文檔類型？1. 該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。2. HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。3. XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。4. Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式

17、）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁。17.HTML與XHTML二者有什么區(qū)別1. 所有的標記都必須要有一個相應(yīng)的結(jié)束標記2. 所有標簽的元素和屬性的名字都必須使用小寫3. 所有的 XML 標記都必須合理嵌套4. 所有的屬性必須用引號 括起來5. 把所有 和 & 特殊符號用編碼表示6. 給所有屬性賦一個值7. 不要在注釋內(nèi)容中使用 -8. 圖片必須有說明文字18.html常見兼容性問題？1. png24位的圖片在iE6瀏覽器上出現(xiàn)背景解決方案：做成PNG8，也可以引用一段腳本處理.2. 瀏覽器默認的margin和padding不同解決方案：加一個全局的 *margin:0;padding:0;

18、來統(tǒng)一。3. IE6雙邊距bug：在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了margin-left或margin-right，margin值會加倍。1#boxfloat:left;width:10px;margin:0 0 0 10px;這種情況之下IE會產(chǎn)生20px的距離解決方案：在float的標簽樣式控制中加入 _display:inline; 將其轉(zhuǎn)化為行內(nèi)屬性。( _ 這個符號只有ie6會識別)4. 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用 + 將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。1

19、23456.bbbackground-color:#f1ee18;/*所有識別*/.background-color:#00deff9;/*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/5.IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下,只能使用getAttribute()獲取自定義屬性解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性6. IE下，event對象有 x、y 屬性，但是沒

20、有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，但是沒有 x、y 屬性解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。7. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示解決方法：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決8. 超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了解決方法：改變CSS屬性的排列順序 L-V-H-A1234a:link a:visited a:ho

21、ver a:active 9. 怪異模式問題：漏寫 DTD 聲明，F(xiàn)irefox 仍然會按照標準模式來解析網(wǎng)頁，但在 IE 中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫 DTD 聲明的好習慣?，F(xiàn)在可以使用html5(/TR/html5/single-page.html) 推薦的寫法：10. 上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合。解決方法：養(yǎng)成良好的代碼編寫習慣，同時采用margin-top或者

22、同時采用margin-bottom。11. ie6對png圖片格式支持不好.解決方案：引用一段腳本處理19.解釋下浮動和它的工作原理？清除浮動的技巧.浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。1. 使用空標簽清除浮動。這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。2. 使用overflow。給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。3. 使用after偽對象清除浮動。該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注

23、意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實際高出若干像素；20.浮動元素引起的問題和解決辦法？浮動元素引起的問題：1. 父元素的高度無法被撐開，影響與父元素同級的元素2. 與浮動元素同級的非浮動元素會跟隨其后3. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)解決方法：使用 CSS 中的 clear:both; 屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：12.clearfix:aftercontent:.;display:block;height:0;cle

24、ar:both;visibility:hidden;.clearfixdisplay: inline-block;/* for IE/Mac */21.清除浮動的幾種方法：1. 額外標簽法，（缺點：不過這個辦法會增加額外的標簽使HTML結(jié)構(gòu)看起來不夠簡潔。）2. 使用after偽元素1234567#parent:aftercontent:.;height:0;visibility:hidden;display:block;clear:both;3. 浮動外部元素4. 設(shè)置 overflow 為 hidden 或者 auto22.IE 8以下版本的瀏覽器中的盒模型有什么不同IE8以下瀏覽器的盒模

25、型中定義的元素的寬高包括內(nèi)邊距和邊框23.DOM操作怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點。1. 創(chuàng)建新節(jié)點123createDocumentFragment()/ 創(chuàng)建一個DOM片段createElement()/ 創(chuàng)建一個具體的元素createTextNode()/ 創(chuàng)建一個文本節(jié)點2. 添加、移除、替換、插入1234appendChild()removeChild()replaceChild()insertBefore()/ 在已有的子節(jié)點前插入一個新的子節(jié)點3. 查找123getElementsByTagName()/ 通過標簽名稱getElementsByName()/ 通過元素

26、的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的)getElementById()/ 通過元素Id，唯一性24.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？新特性：HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。1. 拖拽釋放(Drag and drop) API2. 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）3. 音頻、視頻API(audio,video)4. 畫布(Canvas)

27、API5. 地理(Geolocation) API6. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；7. sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除8. 表單控件，calendar、date、time、email、url、search 9. 新的技術(shù)webworker, websocket, Geolocation移除的元素：1. 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；2. 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；支持HTML5新標簽：1. IE8/IE

28、7/IE6支持通過 document.createElement 方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：123 src=如何區(qū)分：DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素25.iframe的優(yōu)缺點？優(yōu)點：1. 解決加載緩慢的第三方內(nèi)容如圖標和廣告等的加載問題2. Security sandbox3. 并行加載腳本缺點：1. iframe會阻塞主頁面的Onload事件2. 即時內(nèi)容為空，加載也需要時間3. 沒有語意26.如何實現(xiàn)瀏覽器內(nèi)多個標簽

29、頁之間的通信?調(diào)用 localstorge、cookies 等本地存儲方式27.webSocket 如何兼容低瀏覽器？Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長輪詢的 XHR28.線程與進程的區(qū)別1. 一個程序至少有一個進程,一個進程至少有一個線程2. 線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高3. 另外，進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率4. 線程在執(zhí)行過程中與進程還是有區(qū)別的。每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的

30、出口。但是線程不能夠獨立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制5. 從邏輯角度來看，多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配。這就是進程和線程的重要區(qū)別29.你如何對網(wǎng)站的文件和資源進行優(yōu)化？期待的解決方案包括：1. 文件合并2. 文件最小化/文件壓縮3. 使用 CDN 托管4. 緩存的使用（多個域名來提供緩存）5. 其他30.請說出三種減少頁面加載時間的方法1. 優(yōu)化圖片2. 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）3. 優(yōu)化CSS（壓縮合并

31、css，如 margin-top, margin-left.)4. 網(wǎng)址后加斜杠（如5. 標明高度和寬度（如果瀏覽器沒有找到這兩個參數(shù)，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時間快了，瀏覽體驗也更好了）6. 減少http請求（合并文件，合并圖片）31.你都使用哪些工具來測試代碼的性能？1. Profiler2. JSPerf（3. Dromaeo32.什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？FOUC

32、 - Flash Of Unstyled Content 文檔樣式閃爍import ./fouc.css;而引用CSS文件的import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速，電腦速度都有關(guān)系。解決方法簡單的出奇，只要在之間加入一個或者元素就可以了。33.null和undefined的區(qū)別？null是一個表示無的對象，轉(zhuǎn)為數(shù)值時為0undefined是一個表示無的原始值，轉(zhuǎn)為數(shù)值時為NaN當聲明的變量還未被初始化時，變量的默認值為un

33、definednull用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象undefined表示 “缺少值”，就是此處應(yīng)該有一個值，但是還沒有定義。典型用法是：1. 變量被聲明了，但沒有賦值時，就等于 undefined2. 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于 undefined3. 對象沒有賦值的屬性，該屬性的值為 undefined4. 函數(shù)沒有返回值時，默認返回 undefinednull表示“沒有對象”，即該處不應(yīng)該有值。典型用法是：1. 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象2. 作為對象原型鏈的終點34.new操作符具體干了什么呢?1. 創(chuàng)建一個空對象，并且

34、 this 變量引用該對象，同時還繼承了該函數(shù)的原型2. 屬性和方法被加入到 this 引用的對象中3. 新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this123var obj = ;obj._proto_ = Btotype;Base.call(obj);35.對JSON 的了解？JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小。1age:12,name:back36.js延遲加載的方式有哪些？1. defer和async2. 動態(tài)創(chuàng)建DOM方

35、式（創(chuàng)建script，插入到DOM中，加載完畢后callBack）3. 按需異步載入js37.如何解決跨域問題?1. jsonp（jsonp 的原理是動態(tài)插入 script 標簽）2. document.domain + iframe3. 、window.postMessage4. 服務(wù)器上設(shè)置代理頁面38.documen.write和 innerHTML 的區(qū)別document.write 只能重繪整個頁面innerHTML 可以重繪頁面的一部分39. .call() 和 .apply() 的作用？動態(tài)改變某個類的某個方法的運行環(huán)境40.哪些操作會造成內(nèi)存泄漏？內(nèi)存泄漏

36、指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。1. setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。2. 閉包3. 控制臺日志4. 循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）41.如何判斷當前腳本運行在瀏覽器還是node環(huán)境中？通過判斷 Global 對象是否為window，如果不為window，當前腳本沒有運行在瀏覽器中42.什么叫優(yōu)雅降級和漸進增強？1. 優(yōu)雅降級：Web站點在所

37、有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。2. 漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。43.對Node的優(yōu)點和缺點提出了自己的看法？優(yōu)點：1. 因為Node是基于事件驅(qū)動和無阻塞的，所以非常適合處理并發(fā)請求，因此構(gòu)建在Node上的代理服

38、務(wù)器相比其他技術(shù)實現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。2. 與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的，因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。缺點：1. Node是一個相對新的開源項目，所以不太穩(wěn)定，它總是一直在變。2. 缺少足夠多的第三方庫支持?？雌饋?，就像是Ruby/Rails當年的樣子（第三方庫現(xiàn)在已經(jīng)很豐富了，所以這個缺點可以說不存在了）。44.對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運營、安全都近。1. 實現(xiàn)界面交互2. 提升用戶體驗3. 有了Node.js，前端

39、可以實現(xiàn)服務(wù)端的一些事情前景：1. 前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進化到 100 分，甚至更好2. 參與項目，快速高質(zhì)量完成實現(xiàn)效果圖，精確到1px；3. 與團隊成員，UI設(shè)計，產(chǎn)品經(jīng)理的溝通；4. 做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗；5. 處理hack，兼容、寫出優(yōu)美的代碼格式；6. 針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。45.你有哪些性能優(yōu)化的方法？1. 減少http請求次數(shù)：CSS Sprites, JS、CSS 源碼壓縮、圖片大小控制合適；網(wǎng)頁 Gzip，CDN 托管，data 緩存 ，圖片服務(wù)器2. 前端模板 JS + 數(shù)據(jù)，減少由于HTML標簽導(dǎo)致的帶寬浪

40、費，前端用變量保存 AJAX 請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)3. 用 innerHTML 代替 DOM 操作，減少 DOM 操作次數(shù)，優(yōu)化 javascript 性能4. 當需要設(shè)置的樣式很多時設(shè)置 className 而不是直接操作 style5. 少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少 IO 讀取操作6. 避免使用 CSS Expression（css表達式)又稱 Dynamic properties(動態(tài)屬性)7. 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部，加上時間戳46.http狀態(tài)碼有那些？分別代表是什么意思？1. 100-199 用于指定客戶端應(yīng)相應(yīng)的

41、某些動作2. 200-299 用于表示請求成功3. 300-399 用于已經(jīng)移動的文件并且常被包含在定位頭信息中指定新的地址信息4. 400-499 用于指出客戶端的錯誤 400：語義有誤，當前請求無法被服務(wù)器理解 401：當前請求需要用戶驗證 403：服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它5. 500-599 用于支持服務(wù)器錯誤503：服務(wù)不可用47.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么？分為4個步驟：1. 當發(fā)送一個 URL 請求時，不管這個 URL 是 Web 頁面的 URL 還是 Web 頁面上每個資源的 URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠

42、程 DNS 服務(wù)器上啟動一個 DNS 查詢。這能使瀏覽器獲得請求對應(yīng)的 IP 地址。2. 瀏覽器與遠程 Web 服務(wù)器通過 TCP 三次握手協(xié)商來建立一個 TCP/IP 連接。該握手包括一個同步報文，一個同步-應(yīng)答報文和一個應(yīng)答報文，這三個報文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請求，最后由客戶端發(fā)出該請求已經(jīng)被接受的報文。3. 一旦 TCP/IP 連接建立，瀏覽器會通過該連接向遠程服務(wù)器發(fā)送 HTTP 的 GET 請求。遠程服務(wù)器找到資源并使用 HTTP 響應(yīng)返回該資源，值為 200 的 HTTP 響應(yīng)狀態(tài)表示一個正確的響應(yīng)。4. 此時，

43、Web 服務(wù)器提供資源服務(wù)，客戶端開始下載資源。請求返回后，便進入了我們關(guān)注的前端模塊簡單來說，瀏覽器會解析 HTML 生成 DOM Tree，其次會根據(jù) CSS 生成 CSS Rule Tree，而 javascript 又可以根據(jù) DOM API 操作 DOM48.說說最近最流行的一些東西吧？常去的哪些網(wǎng)站？最流行的一些東西：1. Node.js2. Mongodb3. npm4. MVVM5. MEAN6. three.js7. React常去的網(wǎng)站：1. ?？途W(wǎng)2. Github3. CSDN49.javascript對象的幾種創(chuàng)建方式1. 工廠模式2. 構(gòu)造函數(shù)模式3. 原型模式4.

44、 混合構(gòu)造函數(shù)和原型模式5. 動態(tài)原型模式6. 寄生構(gòu)造函數(shù)模式7. 穩(wěn)妥構(gòu)造函數(shù)模式50.javascript繼承的 6 種方法1. 原型鏈繼承2. 借用構(gòu)造函數(shù)繼承3. 組合繼承(原型+借用構(gòu)造)4. 原型式繼承5. 寄生式繼承6. 寄生組合式繼承51.ajax 的過程是怎樣的1. 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象2. 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息3. 設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)4. 發(fā)送HTTP請求5. 獲取異步調(diào)用返回的數(shù)據(jù)6. 使用JavaScript和DOM實現(xiàn)局部刷新52.異步加載和延遲加載1. 異

45、步加載的方案： 動態(tài)插入 script 標簽2. 通過 ajax 去獲取 js 代碼，然后通過 eval 執(zhí)行3. script 標簽上添加 defer 或者 async 屬性4. 創(chuàng)建并插入 iframe，讓它異步執(zhí)行 js5. 延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的53.前端的安全問題？1. XSS2. sql注入3. CSRF：是跨站請求偽造，很明顯根據(jù)剛剛的解釋，他的核心也就是請求偽造，通過偽造身份提交POST和GET請求來進行跨域的攻擊完成CSRF需要兩個步驟：1. 登陸受信任的網(wǎng)站A，在本地生成 COOKIE2. 在不登出A的情況下，

46、或者本地 COOKIE 沒有過期的情況下，訪問危險網(wǎng)站B。54.IE各版本和 chrome 可以并行下載多少個資源1. IE6 2 個并發(fā)2. iE7 升級之后的 6 個并發(fā)，之后版本也是 6 個3. Firefox，chrome 也是6個55.javascript里面的繼承怎么實現(xiàn)，如何避免原型鏈上面的對象共享用構(gòu)造函數(shù)和原型鏈的混合模式去實現(xiàn)繼承，避免對象共享可以參考經(jīng)典的extend()函數(shù)，很多前端框架都有封裝的，就是用一個空函數(shù)當做中間變量56.grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。grunt：UglifyJS 是基于 N

47、odeJS 的 Javascript 語法解析/壓縮/格式化工具官網(wǎng)： 或者 安裝：1$ npminstall uglify-js -g使用方法見官網(wǎng) demoYUI compressor：YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，采用Java開發(fā)。使用方法：1234/ 壓縮JSjava -jar yuicompressor-2.4.2.jar -type js -charset utf-8 -v src.js packed.js/ 壓縮CSSjava -jar yuicompressor-2.4.2.jar -type css -charset utf-8

48、-v src.css packed.cssGoogle Closure Compiler：官網(wǎng)：使用方法：1. 在命令行下使用一個google編譯好的java程序2. 使用google提供的在線服務(wù)3. 使用google提供的RESTful API57.Flash、Ajax各自的優(yōu)缺點，在使用中如何取舍？Flash：1. Flash適合處理多媒體、矢量圖形、訪問機器2. 對CSS、處理文本上不足，不容易被搜索Ajax：1. Ajax對CSS、文本支持很好，支持搜索2. 多媒體、矢量圖形、機器訪問不足共同點：1. 與服務(wù)器的無刷新傳遞消息2. 可以檢測用戶離線和在線狀態(tài)2. 操作DOM58.請解

49、釋一下 JavaScript 的同源策略。概念：同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。為什么要有同源限制：我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。什么是 use st

50、rict; ? 使用它的好處和壞處分別是什么？ECMAscript 5添加了第二種運行模式：嚴格模式（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。設(shè)立嚴格模式的目的，主要有以下幾個：1. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；3. 提高編譯器效率，增加運行速度；4. 為未來新版本的Javascript做好鋪墊。注：經(jīng)過測試 IE6,7,8,9 均不支持嚴格模式。缺點：現(xiàn)在網(wǎng)站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的文

51、件，被 merge 后，這個串就到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節(jié)。59.GET和POST的區(qū)別，何時使用POST？GET：一般用于信息獲取，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符POST：一般用于修改服務(wù)器上的資源，對所發(fā)送的信息沒有限制GET方式需要使用 Request.QueryString 來取得變量的值POST方式通過 Request.Form 來獲取變量的值也就是說 Get 是通過地址欄來傳值，而 Post 是通過提交表單來傳值。在以下情況中，請使用 POST 請求：1. 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）2. 向

52、服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）3. 發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠60.哪些地方會出現(xiàn)css阻塞，哪些地方會出現(xiàn)js阻塞？js 的阻塞特性：所有瀏覽器在下載 JS 的時候，會阻止一切其他活動，比如其他資源的下載，內(nèi)容的呈現(xiàn)等等。直到 JS 下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內(nèi)容。為了提高用戶體驗，新一代瀏覽器都支持并行下載 JS，但是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。由于瀏覽器為了防止出現(xiàn) JS 修改 DOM 樹，需要重新構(gòu)建 DOM 樹的情況，所以就會阻塞其他的下載和呈現(xiàn)。嵌入 JS 會阻塞所有內(nèi)容的呈現(xiàn)，而外部 JS 只會阻塞其后內(nèi)容的顯示，2 種方式都會阻塞其后資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但