前端知識點匯總

1、前端開發(fā)面試題-7-10前言本文由我收集總結(jié)了某些前端面試題，初學(xué)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習、透徹學(xué)習，形成自己的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥幸混過關(guān)是錯誤的！也是不也許的！不也許的！不也許的！前端還是一種年輕的行業(yè)，新的行業(yè)原則， 框架， 庫都不斷在更新和新增，正如赫門在深JS大會上的前端服務(wù)化之路主題演講中說的一句話：“每18至24個月，前端都會難一倍”，這些變化使前端的能力更加豐富、發(fā)明的應(yīng)用也會更加完美。因此關(guān)注多種前端技術(shù)，跟上迅速變化的節(jié)奏，也是身為一種前端程序員必備的技能之一。但愿前端er達到既能使用也會體現(xiàn)，對理論知識有自己的理解。可根據(jù)

2、下面的知識點一種一種去進階學(xué)習，形成自己的職業(yè)技能鏈。面試有幾點需注意：面試題目： 根據(jù)你的級別和職位的變化，入門級到專家級，廣度和深度都會有所增長。題目類型： 理論知識、算法、項目細節(jié)、技術(shù)視野、開放性題、工作案例。細節(jié)追問： 可以保證問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的辨別度和深度，懂得你的實際能力。由于這種知識關(guān)聯(lián)是長時期的學(xué)習，臨時抱佛腳絕對是記不住的。回答問題再棒，面試官（也許是你面試職位的直接領(lǐng)導(dǎo)），會考慮我要不要這個人做我的同事？因此態(tài)度很重要、除了能做事，還要會做人。（感覺更像是相親( )）資深的前端開發(fā)能把absolute和relative弄混，這樣的人

3、不要也罷，由于團隊需要的是：你這個人具有可以依托的才干（靠譜）。前端開發(fā)知識點：HTML&CSS： 對Web原則的理解、瀏覽器內(nèi)核差別、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級、 HTML5、CSS3、FlexboxJavaScript： 數(shù)據(jù)類型、運算、對象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、 DOM、BOM、內(nèi)存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs其她： 移動端、響應(yīng)式、自動化構(gòu)建、HTTP、離線存儲、WEB安全、優(yōu)化、重構(gòu)、團隊協(xié)作、可維護、易

4、用性、SEO、UED、架構(gòu)、職業(yè)生涯、迅速學(xué)習能力作為一名前端工程師，無論工作年頭長短都應(yīng)當掌握的知識點： 1、DOM構(gòu)造 兩個節(jié)點之間也許存在哪些關(guān)系以及如何在節(jié)點之間任意移動。 2、DOM操作 如何添加、移除、移動、復(fù)制、創(chuàng)立和查找節(jié)點等。 3、事件 如何使用事件，以及IE和原則DOM事件模型之間存在的差別。 4、XMLHttpRequest 這是什么、如何完整地執(zhí)行一次GET祈求、如何檢測錯誤。 5、嚴格模式與混雜模式 如何觸發(fā)這兩種模式，辨別它們有何意義。 6、盒模型 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8如下版本的瀏覽器中的盒模型 7、塊級元素與行內(nèi)元素 怎么用CSS控制它們、以及

5、如何合理的使用它們 8、浮動元素 怎么使用它們、它們有什么問題以及怎么解決這些問題。 9、HTML與XHTML 兩者有什么區(qū)別，你覺得應(yīng)當使用哪一種并說出理由。 10、JSON 作用、用途、設(shè)計構(gòu)造。備注：根據(jù)自己需要選擇性閱讀，面試題是對理論知識的總結(jié)，讓自己學(xué)會應(yīng)當如何體現(xiàn)。資料答案不夠?qū)Φ暮腿妫瑲g迎歡迎Star和提交issues。格式不斷修改更新中。HTMLDoctype作用？原則模式與兼容模式各有什么區(qū)別?（1）、聲明位于位于HTML文檔中的第一行，處在 標簽之前。告知瀏覽器的解析器用什么文檔原則解析這個文檔。DOCTYPE不存在或格式不對的會導(dǎo)致文檔以兼容模式呈現(xiàn)。（2）、原則模式

6、的排版 和JS運作模式都是以該瀏覽器支持的最高原則運營。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以避免站點無法工作。HTML5 為什么只需要寫 ？ HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)當?shù)姆绞絹磉\營）； 而HTML4.01基于SGML,因此需要對DTD進行引用，才干告知瀏覽器文檔所使用的文檔類型。行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？一方面：CSS規(guī)范規(guī)定，每個元素均有display屬性，擬定該元素的類型，每個元素均有默認的display值，如div的display

7、默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內(nèi)”元素。（1）行內(nèi)元素有：a b span img input select strong（強調(diào)的語調(diào)）（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4p（3）常用的空元素： 鮮為人知的是： 頁面導(dǎo)入樣式時，使用link和import有什么區(qū)別？（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而import是CSS提供的，只能用于加載CSS;（2）頁面被加載的時，link會同步被加載，而import引用的C

8、SS會等到頁面被加載完再加載;（3）import是CSS2.1 提出的，只在IE5以上才干被辨認，而link是XHTML標簽，無兼容問題;簡介一下你對瀏覽器內(nèi)核的理解？重要提成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：負責獲得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整頓訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示屏或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，因此渲染的效果也不相似。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其他需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javasc

9、ript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有辨別的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。常用的瀏覽器內(nèi)核有哪些？Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。又稱MSHTMLGecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等Presto內(nèi)核：Opera7及以上。 Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;Webkit內(nèi)核：Safari,Chrome等。 Chrome的：Blink（WebKit的分支）具體文章： HYPERLINK 瀏覽器內(nèi)核的解析和對比ht

10、ml5有哪些新特性、移除了那些元素？如何解決HTML5新標簽的瀏覽器兼容問題？如何辨別 HTML 和HTML5？* HTML5 目前已經(jīng)不是 SGML 的子集，重要是有關(guān)圖像，位置，存儲，多任務(wù)等功能的增長。 繪畫 canvas; 用于媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失; sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除; 語意化更好的內(nèi)容元素，例如 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、sear

11、ch; 新的技術(shù)webworker, websocket, Geolocation; 移除的元素： 純體現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；* 支持HTML5新標簽： IE8/IE7/IE6支持通過document.createElement措施產(chǎn)生的標簽， 可以運用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。 固然也可以直接使用成熟的框架、例如html5shim; src= * 如何辨別HTML5： DOCTYPE聲

12、明新增的構(gòu)造元素功能元素簡述一下你對HTML語義化的理解？用對的的標簽做對的的事情。html語義化讓頁面的內(nèi)容構(gòu)造化，構(gòu)造更清晰，便于對瀏覽器、搜索引擎解析;雖然在沒有樣式CSS狀況下也以一種文檔格式顯示，并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標記來擬定上下文和各個核心字的權(quán)重，利于SEO;使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。HTML5的離線儲存怎么使用，工作原理能不能解釋一下？在顧客沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在顧客與因特網(wǎng)連接時，更新顧客機器上的緩存文獻。原理：HTML5的離線存儲是基于一種新建的.appcache文獻的緩存機制(不是存儲技術(shù)

13、)，通過這個文獻上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。之后當網(wǎng)絡(luò)在處在離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。如何使用：1、頁面頭部像下面同樣加入一種manifest的屬性；2、在cache.manifest文獻的編寫離線存儲的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html3、在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。具體的使用請參照： HY

14、PERLINK 有趣的HTML5：離線存儲瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？在線的狀況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會祈求manifest文獻，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文獻的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文獻與舊的manifest文獻，如果文獻沒有發(fā)生變化，就不做任何操作，如果文獻變化了，那么就會重新下載文獻中的資源并進行離線存儲。離線的狀況下，瀏覽器就直接使用離線存儲的資源。具體的使用請參照

15、： HYPERLINK 有趣的HTML5：離線存儲請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？cookie是網(wǎng)站為了標示顧客身份而儲存在顧客本地終端（Client Side）上的數(shù)據(jù)（一般通過加密）。cookie數(shù)據(jù)始終在同源的http祈求中攜帶（雖然不需要），記會在瀏覽器和服務(wù)器間來回傳遞。sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。存儲大?。?cookie數(shù)據(jù)大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到

16、5M或更大。有期時間： localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非積極刪除數(shù)據(jù)； sessionStorage 數(shù)據(jù)在目前瀏覽器窗口關(guān)閉后自動刪除。 cookie 設(shè)立的cookie過期時間之前始終有效，雖然窗口或瀏覽器關(guān)閉iframe有那些缺陷？*iframe會阻塞主頁面的Onload事件；*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;*iframe和主頁面共享連接池，而瀏覽器對相似域的連接有限制，因此會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺陷。如果需要使用iframe，最佳是通過javascript動態(tài)給iframe添加src屬性值，這樣可以

17、繞開以上兩個問題。Label的作用是什么？是怎么用的？label標簽來定義表單控制間的關(guān)系,當顧客選擇該標簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標簽有關(guān)的表單控件上。Number:Date:HTML5的form如何關(guān)閉自動完畢功能？給不想要提示的 form 或某個 input 設(shè)立為 autocomplete=off。如何實現(xiàn)瀏覽器內(nèi)多種標簽頁之間的通信? (阿里)WebSocket、SharedWorker；也可以調(diào)用localstorge、cookies等本地存儲方式；localstorge另一種瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一種事件，我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信；

18、注意quirks：Safari 在無痕模式下設(shè)立localstorge值時會拋出 QuotaExceededError 的異常；webSocket如何兼容低瀏覽器？(阿里)Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 編碼發(fā)送 XHR 、基于長輪詢的 XHR頁面可見性（Page Visibility API） 可以有哪些用途？通過 visibilityState 的值檢測頁面目前與否可見，以及打開網(wǎng)頁的時間等;在頁面被切換到其她后臺進程的時候，自動暫停音樂或視頻的播放；如何在頁面上實現(xiàn)一種圓形的可點擊區(qū)域？1、map+area或

19、者svg2、border-radius3、純js實現(xiàn) 需規(guī)定一種點在不在圓上簡樸算法、獲取鼠標坐標等等實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的原則模式與怪異模式下都能保持一致的效果。網(wǎng)頁驗證碼是干嘛的，是為理解決什么安全問題。辨別顧客是計算機還是人的公共全自動程序。可以避免歹意破解密碼、刷票、論壇灌水；有效避免黑客對某一種特定注冊顧客用特定程序暴力破解方式進行不斷的登陸嘗試。title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？title屬性沒有明確意義只表達是個標題，H1則表達層次明確的標題，對頁面信息的抓取也有很大的影響；strong是標明重點內(nèi)容，有語調(diào)加強的

20、含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：會重讀，而是展示強調(diào)內(nèi)容。i內(nèi)容展示為斜體，em表達強調(diào)的文本；Physical Style Elements - 自然樣式標簽b, i, u, s, preSemantic Style Elements - 語義樣式標簽strong, em, ins, del, code應(yīng)當精確使用語義樣式標簽, 但不能濫用, 如果不能擬定期首選使用自然樣式標簽。CSS簡介一下原則的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有兩種， IE 盒子模型、W3C 盒子模型；（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(b

21、order)；（3）區(qū) 別： IE的content部分把 border 和 padding計算了進去;CSS選擇符有哪些？哪些屬性可以繼承？* 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標簽選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul li） 6.后裔選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（arel = external） 9.偽類選擇器（a:hover, li:nth-child）* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;* 不

22、可繼承的樣式：border padding margin width height ;CSS優(yōu)先級算法如何計算？* 優(yōu)先級就近原則，同權(quán)重狀況下樣式定義近來者為準;* 載入樣式以最后載入的定位為準;優(yōu)先級為: !important id class tag important 比 內(nèi)聯(lián)優(yōu)先級高CSS3新增偽類有那些？ 舉例： p:first-of-type 選擇屬于其父元素的首個 元素的每個 元素。 p:last-of-type 選擇屬于其父元素的最后 元素的每個 元素。 p:only-of-type 選擇屬于其父元素唯一的 元素的每個 元素。 p:only-child 選擇屬于其父元素的唯一

23、子元素的每個 元素。 p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 元素。 :after 在元素之前添加內(nèi)容,也可以用來做清除浮動。 :before 在元素之后添加內(nèi)容 :enabled :disabled 控制表單控件的禁用狀態(tài)。 :checked 單選框或復(fù)選框被選中。如何居中div？如何居中一種浮動元素？如何讓絕對定位的div居中？給div設(shè)立一種寬度，然后添加margin:0 auto屬性div width:200px; margin:0 auto; 居中一種浮動元素 擬定容器的寬高 寬500 高 300 的層 設(shè)立層的外邊距 .div width:500px ;

24、 height:300px;/高度可以不設(shè) margin: -150px 0 0 -250px; position:relative; /相對定位 background-color:pink; /以便看效果 left:50%; top:50%; 讓絕對定位的div居中 position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;display有哪些值？闡明她們的作用。 block 象塊類型元素同樣顯示。 none 缺省值。象行內(nèi)元素類型同樣顯示

25、。 inline-block 象行內(nèi)元素同樣顯示，但其內(nèi)容象塊類型元素同樣顯示。 list-item 象塊類型元素同樣顯示，并添加樣式列表標記。 table 此元素會作為塊級表格來顯示 inherit 規(guī)定應(yīng)當從父元素繼承 display 屬性的值position的值relative和absolute定位原點是？ absolute 生成絕對定位的元素，相對于值不為 static的第一種父元素進行定位。 fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對于其正常位置進行定位。 static 默認值。沒有定位，元素出目前正常的流

26、中（忽視 top, bottom, left, right z-index 聲明）。 inherit 規(guī)定從父元素繼承 position 屬性的值。CSS3有哪些新特性？ 新增多種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點） 圓角 （border-radius:8px） 多列布局 （multi-column layout） 陰影和反射 （ShadowReflect） 文字特效 （text-shadow、） 文字渲染 （Text-decoration） 線性漸變 （gradient） 旋轉(zhuǎn) （transform） 增長了旋轉(zhuǎn),縮放,定位,傾斜,動畫，多

27、背景 transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及合用場景？ .用純CSS創(chuàng)立一種三角形的原理是什么？把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）#demo width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent;一種滿屏 品 字布局 如何設(shè)計?

28、簡樸的方式： 上面的div寬100%， 下面的兩個div分別寬50%， 然后用float或者inline使其不換行即可常常遇到的瀏覽器的兼容性有哪些？因素，解決措施是什么，常用hack的技巧 ？* png24位的圖片在iE6瀏覽器上浮現(xiàn)背景，解決方案是做成PNG8.* 瀏覽器默認的margin和padding不同。解決方案是加一種全局的*margin:0;padding:0;來統(tǒng)一。* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin狀況下，在ie6顯示margin比設(shè)立的大。 浮動ie產(chǎn)生的雙倍距離 #box float:left; width:10px; margin:0

29、 0 0 100px; 這種狀況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入 _display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會辨認) 漸進辨認的方式，從總體中逐漸排除局部。 一方面，巧妙的使用“9”這一標記，將IE游覽器從所有狀況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立辨認。 css .bb background-color:#f1ee18;/*所有辨認*/ .background-color:#00deff9; /*IE6、7、8辨認*/ +background-color:#a200ff;

30、/*IE6、7辨認*/ _background-color:#1e0bd1;/*IE6辨認*/ * IE下,可以使用獲取常規(guī)屬性的措施來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。 解決措施:統(tǒng)一通過getAttribute()獲取自定義屬性。* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。* 解決措施：（條件注釋）缺陷是在IE瀏覽器下也許會增長額外的HTTP祈求數(shù)。* Chrome 中

31、文界面下默認會將不不小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。超鏈接訪問過后hover樣式就不浮現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active理解決措施是變化CSS屬性的排列順序:L-V-H-A : a:link a:visited a:hover a:active li與li之間有看不見的空白間隔是什么因素引起的？有什么解決措施？行框的排列會受到中間空白（回車空格）等的影響，由于空格也屬于字符,這些空白也會被應(yīng)用樣式，占據(jù)空間，因此會有間隔，把字符大小設(shè)為0，就沒有空格了。

32、為什么要初始化CSS樣式。- 由于瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會浮現(xiàn)瀏覽器之間的頁面顯示差別。- 固然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。最簡樸的初始化措施： * padding: 0; margin: 0; （強烈不建議）淘寶的樣式初始化代碼：body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea,

33、 th, td margin:0; padding:0; body, button, input, select, textarea font:12px/1.5tahoma, arial, 5b8b4f53; h1, h2, h3, h4, h5, h6 font-size:100%; address, cite, dfn, em, var font-style:normal; code, kbd, pre, samp font-family:couriernew, courier, monospace; small font-size:12px; ul, ol list-style:none

34、; a text-decoration:none; a:hover text-decoration:underline; sup vertical-align:text-top; sub vertical-align:text-bottom; legend color:#000; fieldset, img border:0; button, input, select, textarea font-size:100%; table border-collapse:collapse; border-spacing:0; absolute的containing block(容器塊)計算方式跟正常

35、流有什么不同？無論屬于哪種，都要先找到其祖先元素中近來的 position 值不為 static 的元素，然后再判斷：1、若此元素為 inline 元素，則 containing block 為可以涉及這個元素生成的第一種和最后一種 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形；2、否則,則由這個祖先元素的 padding box 構(gòu)成。如果都找不到，則為 initial containing block。補充：1. static(默認的)/relative：簡樸說就是它的父元素的內(nèi)容框（即去掉padding的部分）2. abso

36、lute: 向上找近來的定位為absolute/relative的元素3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing blockCSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下后來什么區(qū)別？position跟display、margin collapse、overflow、float這些特性互相疊加后會怎么樣？對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？（W3C CSS 2.1 規(guī)范中的一種概念,它是一種獨立容器，決定了

37、元素如何對其內(nèi)容進行定位,以及與其她元素的關(guān)系和互相作用。） 一種頁面是由諸多種 Box 構(gòu)成的,元素的類型和 display 屬性,決定了這個 Box 的類型。 不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會以不同的方式渲染,也就是說BFC內(nèi)部的元素和外部的元素不會互相影響。css定義的權(quán)重如下是權(quán)重的規(guī)則：標簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，如下例子是演示多種定義的權(quán)重值：/*權(quán)重為1*/div/*權(quán)重為10*/.class1/*權(quán)重為100*/#id1/*權(quán)重為100+1=101*/#id1

38、div/*權(quán)重為10+1=11*/.class1 div/*權(quán)重為10+10+1=21*/.class1 .class2 div如果權(quán)重相似，則最后定義的樣式會起作用，但是應(yīng)當避免這種狀況浮現(xiàn)請解釋一下為什么會浮現(xiàn)浮動和什么時候需要清除浮動？清除浮動的方式移動端的布局用過媒體查詢嗎？使用 CSS 預(yù)解決器嗎？喜歡那個？SASS (SASS、LESS沒有本質(zhì)區(qū)別，只由于團隊前端都是用的SASS)CSS優(yōu)化、提高性能的措施有哪些？瀏覽器是如何解析CSS選擇器的？在網(wǎng)頁中的應(yīng)當使用奇數(shù)還是偶數(shù)的字體？為什么呢？margin和padding分別適合什么場景使用？抽離樣式模塊怎么寫，說出思路，有無實踐經(jīng)

39、驗？阿里航旅的面試題元素豎向的比例設(shè)定是相對于容器的高度嗎？全屏滾動的原理是什么？用到了CSS的那些屬性？什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？如何兼容低版本的IE？視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次浮現(xiàn)，和只浮現(xiàn)一次分別怎么做？）:before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素的作用。如何修改chrome記住密碼后自動填充表單的黃色背景 ？你對line-height是如何理解的？設(shè)立元素浮動后，該元素的display值是多少？（自動變成display:block）怎么讓Chrome支持不不小于12px 的文字？讓頁面里的

40、字體變清晰，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）font-style屬性可以讓它賦值為“oblique” oblique是什么意思？position:fixed;在android下無效怎么解決？如果需要手動寫動畫，你覺得最小時間間隔是多久，為什么？（阿里）多數(shù)顯示屏默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔為1/601000ms 16.7msdisplay:inline-block 什么時候會顯示間隙？(攜程)移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacin

41、goverflow: scroll時不能平滑滾動的問題怎么解決？有一種高度自適應(yīng)的div，里面有兩個div，一種高度100px，但愿另一種填滿剩余的高度。png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有無理解過webp？什么是Cookie 隔離？（或者說：祈求資源的時候不要讓它帶cookie怎么做）如果靜態(tài)文獻都放在主域名下，那靜態(tài)文獻祈求的時候都帶有的cookie的數(shù)據(jù)提交給server的，非常揮霍流量，因此不如隔離開。由于cookie有域的限制，因此不能跨域提交祈求，故使用非重要域名的時候，祈求頭中就不會帶有cookie數(shù)據(jù)，這樣可以減少祈求頭的大小，減少祈求時間，從而達到

42、減少整體祈求延時的目的。同步這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的解決分析環(huán)節(jié)，提高了webserver的http祈求的解析速度。style標簽寫在body后與body前有什么區(qū)別？什么是CSS 預(yù)解決器 / 后解決器？- 預(yù)解決器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強了css代碼的復(fù)用性， 尚有層級、mixin、變量、循環(huán)、函數(shù)等，具有很以便的UI組件模塊化開發(fā)能力，極大的提高工作效率。- 后解決器例如：PostCSS，一般被視為在完畢的樣式表中根據(jù)CSS規(guī)范解決CSS，讓其更有效；目前最常做的 是

43、給CSS屬性添加瀏覽器私有前綴，實現(xiàn)跨瀏覽器兼容性的問題。JavaScript簡介js的基本數(shù)據(jù)類型。 Undefined、Null、Boolean、Number、String簡介js有哪些內(nèi)置對象？Object 是 JavaScript 中所有對象的父對象數(shù)據(jù)封裝類對象：Object、Array、Boolean、Number 和 String其她對象：Function、Arguments、Math、Date、RegExp、Error說幾條寫JavaScript的基本規(guī)范？1.不要在同一行聲明多種變量。2.請使用 =/!=來比較true/false或者數(shù)值3.使用對象字面量替代new Arra

44、y這種形式4.不要使用全局函數(shù)。5.Switch語句必須帶有default分支6.函數(shù)不應(yīng)當有時候有返回值，有時候沒有返回值。7.For循環(huán)必須使用大括號8.If語句必須使用大括號9.for-in循環(huán)中的變量 應(yīng)當使用var核心字明確限定作用域，從而避免作用域污染。JavaScript原型，原型鏈 ? 有什么特點？每個對象都會在其內(nèi)部初始化一種屬性，就是prototype(原型)，當我們訪問一種對象的屬性時，如果這個對象內(nèi)部不存在這個屬性，那么她就會去prototype里找這個屬性，這個prototype又會有自己的prototype，于是就這樣始終找下去，也就是我們平時所說的原型鏈的概念。關(guān)

45、系：totype = instance._proto_特點：JavaScript對象是通過引用來傳遞的，我們創(chuàng)立的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之有關(guān)的對象也會繼承這一變化。 當我們需要一種屬性的時，Javascript引擎會先看目前對象中與否有這個屬性， 如果沒有的話， 就會查找她的Prototype對象與否有這個屬性，如此遞推下去，始終檢索到 Object 內(nèi)建對象。 function Func() F = Sean; Ftotype.getInfo = function() return ; var person = new Func();/目前可以參

46、照var person = Object.create(oldObject); console.log(person.getInfo();/它擁有了Func的屬性和措施 /Sean console.log(Ftotype); / Func name=Sean, getInfo=function()JavaScript有幾種類型的值？，你能畫一下她們的內(nèi)存圖嗎？棧：原始數(shù)據(jù)類型（Undefined，Null，Boolean，Number、String） 堆：引用數(shù)據(jù)類型（對象、數(shù)組和函數(shù)）兩種類型的區(qū)別是：存儲位置不同；原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡樸數(shù)據(jù)段，占據(jù)空間小、大小固定，

47、屬于被頻繁使用數(shù)據(jù)，因此放入棧中存儲；引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大、大小不固定,如果存儲在棧中，將會影響程序運營的性能；引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會一方面檢索其在棧中的地址，獲得地址后從堆中獲得實體Javascript如何實現(xiàn)繼承？1、構(gòu)造繼承2、原型繼承3、實例繼承4、拷貝繼承原型prototype機制或apply和call措施去實現(xiàn)較簡樸，建議使用構(gòu)造函數(shù)與原型混合方式。 function Parent() = wang; function Child() this.age = 28; Ctotype = n

48、ew Parent();/繼承了Parent，通過原型 var demo = new Child(); alert(demo.age); alert();/得到被繼承的屬性 JavaScript繼承的幾種實現(xiàn)方式？參照： HYPERLINK 構(gòu)造函數(shù)的繼承， HYPERLINK 非構(gòu)造函數(shù)的繼承；javascript創(chuàng)立對象的幾種方式？javascript創(chuàng)立對象簡樸的說,無非就是使用內(nèi)置對象或多種自定義對象，固然還可以用JSON；但寫法有諸多種，也能混合使用。1、對象字面量的方式 person=firstname:Mark,lastname:Yun,age:25,eyecolor:black

49、;2、用function來模擬無參的構(gòu)造函數(shù) function Person() var person=new Person();/定義一種function，如果使用new實例化,該function可以看作是一種Class =Mark; person.age=25; person.work=function() alert(+ hello.); person.work();3、用function來模擬參構(gòu)造函數(shù)來實現(xiàn)（用this核心字定義構(gòu)造的上下文屬性） function Pet(name,age,hobby) =name;/this作用域：目前對象 this.age=age; this.h

50、obby=hobby; this.eat=function() alert(我叫+,我喜歡+this.hobby+,是個程序員); var maidou =new Pet(麥兜,25,coding);/實例化、創(chuàng)立對象 maidou.eat();/調(diào)用eat措施4、用工廠方式來創(chuàng)立（內(nèi)置對象） var wcDog =new Object(); wcD=旺財; wcDog.age=3; wcDog.work=function() alert(我是+wcD+,汪汪汪); wcDog.work();5、用原型方式來創(chuàng)立 function Dog() D=旺財; Dtotype.eat=functio

51、n() alert(+是個吃貨); var wangcai =new Dog(); wangcai.eat();5、用混合方式來創(chuàng)立 function Car(name,price) =name; this.price=price; Ctotype.sell=function() alert(我是+，我目前賣+this.price+萬元); var camry =new Car(凱美瑞,27); camry.sell(); Javascript作用鏈域?全局函數(shù)無法查看局部函數(shù)的內(nèi)部細節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細節(jié)，直至全局細節(jié)。當需要從局部函數(shù)查找某一屬性或措施時，如果目前作用域沒有

52、找到，就會上溯到上層作用域查找，直至全局函數(shù)，這種組織形式就是作用域鏈。談?wù)凾his對象的理解。this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；如果有new核心字，this指向new出來的那個對象；在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；eval是做什么的？它的功能是把相應(yīng)的字符串解析成JS代碼并運營；應(yīng)當避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj =eval(+ str +);什么是window對象?

53、什么是document對象?null，undefined 的區(qū)別？null 表達一種對象被定義了，值為“空值”；undefined 表達不存在這個值。typeof undefined /undefined undefined :是一種表達無的原始值或者說表達缺少值，就是此處應(yīng)當有一種值，但是還沒有定義。當嘗試讀取時會返回 undefined； 例如變量被聲明了，但沒有賦值時，就等于undefinedtypeof null /object null : 是一種對象(空對象, 沒有任何屬性和措施)； 例如作為函數(shù)的參數(shù)，表達該函數(shù)的參數(shù)不是對象；注意： 在驗證null時，一定要使用= ，由于 =

54、無法分別 null 和undefined再來一種例子： null Q：有張三這個人么？ A：有！ Q：張三有房子么？ A：沒有！ undefined Q：有張三這個人么？ A：沒有！參照閱讀： HYPERLINK undefined與null的區(qū)別寫一種通用的事件偵聽器函數(shù)。 / event(事件)工具集，來源：/markyun markyun.Event = / 頁面加載完畢后 readyEvent : function(fn) if (fn=null) fn=document; var oldonload = window.onload; if (typeof window.onload

55、!= function) window.onload = fn; else window.onload = function() oldonload(); fn(); ; , / 視能力分別使用dom0|dom2|IE方式 來綁定事件 / 參數(shù)： 操作的元素,事件名稱 ,事件解決程序 addEvent : function(element, type, handler) if (element.addEventListener) /事件類型、需要執(zhí)行的函數(shù)、與否捕獲 element.addEventListener(type, handler, false); else if (element

56、.attachEvent) element.attachEvent(on + type, function() handler.call(element); ); else elementon + type = handler; , / 移除事件 removeEvent : function(element, type, handler) if (element.removeEventListener) element.removeEventListener(type, handler, false); else if (element.datachEvent) element.detachE

57、vent(on + type, handler); else elementon + type = null; , / 制止事件 (重要是事件冒泡，由于IE不支持事件捕獲) stopPropagation : function(ev) if (ev.stopPropagation) ev.stopPropagation(); else ev.cancelBubble = true; , / 取消事件的默認行為 preventDefault : function(event) if (event.preventDefault) event.preventDefault(); else event

58、.returnValue = false; , / 獲取事件目的 getTarget : function(event) return event.target | event.srcElement; , / 獲取event對象的引用，取到事件的所有信息，保證隨時能使用event； getEvent : function(e) var ev = e | window.event; if (!ev) var c = this.getEvent.caller; while (c) ev = c.arguments0; if (ev & Event = ev.constructor) break;

59、c = c.caller; return ev; ;1, 2, 3.map(parseInt) 答案是多少？ 1, NaN, NaN 由于 parseInt 需要兩個參數(shù) (val, radix)， 其中 radix 表達解析時用的基數(shù)。 map 傳了 3 個 (element, index, array)，相應(yīng)的 radix 不合法導(dǎo)致解析失敗。事件是？IE與火狐的事件機制有什么區(qū)別？ 如何制止冒泡？ 1. 我們在網(wǎng)頁中的某個操作（有的操作相應(yīng)多種事件）。例如：當我們點擊一種按鈕就會產(chǎn)生一種事件。是可以被 JavaScript 偵測到的行為。 2. 事件解決機制：IE是事件冒泡、Firefo

60、x同步支持兩種事件模型，也就是：捕獲型事件和冒泡型事件； 3. ev.stopPropagation();（舊ie的措施 ev.cancelBubble = true;）什么是閉包（closure），為什么要用它？閉包是指有權(quán)訪問另一種函數(shù)作用域中變量的函數(shù)，創(chuàng)立閉包的最常用的方式就是在一種函數(shù)內(nèi)創(chuàng)立另一種函數(shù)，通過另一種函數(shù)訪問這個函數(shù)的局部變量,運用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和措施傳遞到外部。閉包的特性：1.函數(shù)內(nèi)再嵌套函數(shù)2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量3.參數(shù)和變量不會被垃圾回收機制回收/li節(jié)點的onclick事件都能對的的彈出目前被點擊的li索引 index = 0