菜鳥教程里的面試題_第1頁
菜鳥教程里的面試題_第2頁
菜鳥教程里的面試題_第3頁
菜鳥教程里的面試題_第4頁
菜鳥教程里的面試題_第5頁
已閱讀5頁，還剩55頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、前端開發面試題分類 編程技術本文收集總結了一些前端面試題，初學者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥幸混過關是錯誤的！也是不可能的！不可能的！不可能的！前端還是一個年輕的行業，新的行業標準， 框架， 庫都不斷在更新和新增，正如赫門在2015深JS大會上的前端服務化之路主題演講中說的一句話："每18至24個月，前端都會難一倍"，這些變化使前端的能力更加豐富、創造的應用也會更加完美。所以關注各種前端技術，跟上快速變化的節奏，也是身為一個前端程序員必備的技能之一。最近也收到許多微博私信的鼓勵和

2、更正題目信息，后面會經常更新題目和答案到github博客。希望前端er達到既能使用也會表達，對理論知識有自己的理解。可根據下面的知識點一個一個去進階學習，形成自己的職業技能鏈。面試有幾點需注意：(來源寒冬winter 老師，github:wintercn)1.面試題目： 根據你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增加。2.3.題目類型： 理論知識、算法、項目細節、技術視野、開放性題、工作案例。4.5.細節追問： 可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因為這種知識關聯是長時期的學習，臨時抱佛腳絕對是記不住的。

3、6.7.回答問題再棒，面試官（可能是你面試職位的直接領導），會考慮我要不要這個人做我的同事？所以態度很重要、除了能做事，還要會做人。（感覺更像是相親( )）8.9.資深的前端開發能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的是：你這個人具有可以依靠的才能（靠譜）。10.前端開發知識點：HTML&CSS： 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先級、 HTML5、CSS3、FlexboxJavaScript： 數據類型、運算、對象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON

4、、Ajax、 DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs其他： 移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協作、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力作為一名前端工程師，無論工作年頭長短都應該掌握的知識點：此條由 王子墨 發表在 攻城師的實驗室 1、DOM結構 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。 2、DOM操作 如何添加、移除、移動、復制、創建和查找節點等。 3、事件 如何使用事件，以及IE和標準DOM事件模型之間存在的

5、差別。 4、XMLHttpRequest 這是什么、怎樣完整地執行一次GET請求、怎樣檢測錯誤。 5、嚴格模式與混雜模式 如何觸發這兩種模式，區分它們有何意義。 6、盒模型 外邊距、內邊距和邊框之間的關系，及IE8以下版本的瀏覽器中的盒模型 7、塊級元素與行內元素 怎么用CSS控制它們、以及如何合理的使用它們 8、浮動元素 怎么使用它們、它們有什么問題以及怎么解決這些問題。 9、HTML與XHTML 二者有什么區別，你覺得應該使用哪一個并說出理由。 10、JSON 作用、用途、設計結構。備注：根據自己需要選擇性閱讀，面試題是對理論知識的總結，讓自己學會應該如何表達。資料答案不夠正確和全面，歡迎

6、歡迎Star和提交issues。格式不斷修改更新中。更新記錄：2016年3月25日：新增ECMAScript6 相關問題更新時間: 2016-3-25HTML·Doctype作用？標準模式與兼容模式各有什么區別?·（1）、<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。（2）、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止

7、站點無法工作。··HTML5 為什么只需要寫 <!DOCTYPE HTML>？·HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）； 而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。··行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？·首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“bloc

8、k”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。（1）行內元素有：a b span img input select strong（強調的語氣）（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4p（3）常見的空元素： <br> <hr> <img> <input> <link> <meta> 鮮為人知的是： <area> <base> <col> <command> <embed> &l

9、t;keygen> <param> <source> <track> <wbr>··頁面導入樣式時，使用link和import有什么區別？·（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而import是CSS提供的，只能用于加載CSS;（2）頁面被加載的時，link會同時被加載，而import引用的CSS會等到頁面被加載完再加載;（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;··

10、;介紹一下你對瀏覽器內核的理解？·主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。JS引擎則：解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

11、··常見的瀏覽器內核有哪些？·Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。又稱MSHTMLGecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto內核：Opera7及以上。 Opera內核原為：Presto，現為：Blink;Webkit內核：Safari,Chrome等。 Chrome的：Blink（WebKit的分支）·詳細文章：瀏覽器內核的解析和對比··html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問

12、題？如何區分 HTML 和 HTML5？·* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。 繪畫 canvas; 用于媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失; sessionStorage 的數據在瀏覽器關閉后自動刪除; 語意化更好的內容元素，比如 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、search; 新的技術webworker, websocket,

13、Geolocation; 移除的元素： 純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes；* 支持HTML5新標簽： IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式。 當然也可以直接使用成熟的框架、比如html5shim; <!-if lt IE 9> <script> src=" <!endi

14、f->* 如何區分HTML5： DOCTYPE聲明新增的結構元素功能元素··簡述一下你對HTML語義化的理解？·用正確的標簽做正確的事情。html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。··HTML5的離線儲存怎么使用，工作原理能不能解釋一下？·在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因

15、特網連接時，更新用戶機器上的緩存文件。原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。如何使用：1、頁面頭部像下面一樣加入一個manifest的屬性；2、在cache.manifest文件的編寫離線存儲的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /of

16、fline.html3、在離線狀態時，操作window.applicationCache進行需求實現。·詳細的使用請參考：有趣的HTML5：離線存儲··瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？·在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件

17、沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。·詳細的使用請參考：有趣的HTML5：離線存儲··請描述一下 cookies，sessionStorage 和 localStorage 的區別？·cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會自動把數據發給服務

18、器，僅在本地保存。存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。有期時間： localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。 cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉··iframe有那些缺點？·*iframe會阻塞主頁面的Onload事件；*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;*iframe和

19、主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。··Label的作用是什么？是怎么用的？·label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。<label for="Name">Number:</label><input type=“text“name="Name"

20、; id="Name"/><label>Date:<input type="text" name="B"/></label>··HTML5的form如何關閉自動完成功能？·給不想要提示的 form 或某個 input 設置為 autocomplete=off。··如何實現瀏覽器內多個標簽頁之間的通信? (阿里)·WebSocket、SharedWorker；也可以調用localstorge、cookies等本地存儲方式；localst

21、orge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信；注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；··webSocket如何兼容低瀏覽器？(阿里)·Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 編碼發送 XHR 、基于長輪詢的 XHR··頁面可見性（Page Visibility API） 可以有哪些用途？·通過 visibi

22、lityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放；··如何在頁面上實現一個圓形的可點擊區域？·1、map+area或者svg2、border-radius3、純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等··實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。·<div style="height:1px;overflow:hidden;background:red">

23、;</div>··網頁驗證碼是干嘛的，是為了解決什么安全問題。·區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。··title與h1的區別、b與strong的區別、i與em的區別？·title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。

24、i內容展示為斜體，em表示強調的文本；Physical Style Elements - 自然樣式標簽b, i, u, s, preSemantic Style Elements - 語義樣式標簽strong, em, ins, del, code應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。·CSS·介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？·（1）有兩種， IE 盒子模型、W3C 盒子模型；（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；（3）

25、區 別： 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

26、color, UL LI DL DD DT;* 不可繼承的樣式：border padding margin width height ;··CSS優先級算法如何計算？·* 優先級就近原則，同權重情況下樣式定義最近者為準;* 載入樣式以最后載入的定位為準;優先級為: !important > id > class > tag important 比 內聯優先級高··CSS3新增偽類有那些？·舉例： p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。 p:l

27、ast-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。 p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。 p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。 :after 在元素之前添加內容,也可以用來做清除浮動。 :before 在元素之后添加內容 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或復選框被

28、選中。··如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？··給div設置一個寬度，然后添加margin:0 auto屬性·div width:200px; margin:0 auto; ··居中一個浮動元素· 確定容器的寬高 寬500 高 300 的層 設置層的外邊距 .div width:500px ; height:300px;/高度可以不設 margin: -150px 0 0 -250px; position:relative; /相對定位 background-color:pink;

29、/方便看效果 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 缺省值。象行內元素類型一樣顯示。 inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示

30、，并添加樣式列表標記。 table 此元素會作為塊級表格來顯示 inherit 規定應該從父元素繼承 display 屬性的值··position的值relative和absolute定位原點是？· absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。 fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對于其正常位置進行定位。 static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。

31、inherit 規定從父元素繼承 position 屬性的值。··CSS3有哪些新特性？· 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點） 圓角 （border-radius:8px） 多列布局 （multi-column layout） 陰影和反射 （ShadowReflect） 文字特效 （text-shadow、） 文字渲染 （Text-decoration） 線性漸變 （gradient） 旋轉 （transform） 增加了旋轉,縮放,定位,傾斜,動畫，多背景 transform:scale(0.85,0

32、.90) translate(0px,-30px) skew(-9deg,0deg)Animation:··請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？· .··用純CSS創建一個三角形的原理是什么？·把上、左、右三條邊隱藏掉（顏色設為 transparent）#demo width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent;·

33、;·一個滿屏 品 字布局 如何設計?·簡單的方式： 上面的div寬100%， 下面的兩個div分別寬50%， 然后用float或者inline使其不換行即可··經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？·* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*margin:0;padding:0;來統一。* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。 浮動

34、ie產生的雙倍距離 #box float:left; width:10px; margin:0 0 0 100px; 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 _display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別) 漸進識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。 css .bb background-color:#f1ee18;/*所有識別*/ .background-color:#00d

35、eff9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ * IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。 解決方法:統一通過getAttribute()獲取自定義屬性。* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。* 解

36、決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。* Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link a:visited a:hover a:active ··li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？·行框的排列會受到中間空

37、白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。··為什么要初始化CSS樣式。·- 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。- 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法： * padding: 0; margin: 0; （強烈不建議）淘寶的樣式初始化代碼：body, h1, h2, h3, h4, h5, h6, hr, p, blockquot

38、e, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, 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-fam

39、ily:couriernew, courier, monospace; small font-size:12px; ul, ol list-style:none; 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 b

40、order-collapse:collapse; border-spacing:0; ··absolute的containing block(容器塊)計算方式跟正常流有什么不同？·無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；2、否則,則由這個祖先元素的 padding box 構成。

41、如果都找不到，則為 initial containing block。補充：1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）2. absolute: 向上找最近的定位為absolute/relative的元素3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block··CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？··position跟display、m

42、argin collapse、overflow、float這些特性相互疊加后會怎么樣？··對BFC規范(塊級格式化上下文：block formatting context)的理解？·（W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。） 一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。 不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的

43、元素和外部的元素不會互相影響。··css定義的權重·以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：/*權重為1*/div/*權重為10*/.class1/*權重為100*/#id1/*權重為100+1=101*/#id1 div/*權重為10+1=11*/.class1 div/*權重為10+10+1=21*/.class1 .class2 div如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現··請解釋一下為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式&#

44、183;·移動端的布局用過媒體查詢嗎？··使用 CSS 預處理器嗎？喜歡那個？·SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)··CSS優化、提高性能的方法有哪些？··瀏覽器是怎樣解析CSS選擇器的？··在網頁中的應該使用奇數還是偶數的字體？為什么呢？··margin和padding分別適合什么場景使用？··抽離樣式模塊怎么寫，說出思路，有無實踐經驗？阿里航旅的面試題··元素豎向的百分比設定是相對于容器的高

45、度嗎？··全屏滾動的原理是什么？用到了CSS的那些屬性？··什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？··視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）··:before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。··如何修改chrome記住密碼后自動填充表單的黃色背景 ？··你對line-height是如何理解的？··設置元素浮動后，該元素的dis

46、play值是多少？（自動變成display:block）··怎么讓Chrome支持小于12px 的文字？··讓頁面里的字體變清晰，變細用CSS怎么做？（-webkit-font-smoothing: antialiased;）··font-style屬性可以讓它賦值為"oblique" oblique是什么意思？··position:fixed;在android下無效怎么處理？··如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）·多數顯示器默認頻率是6

47、0Hz，即1秒刷新60次，所以理論上最小間隔為1/601000ms 16.7ms··display:inline-block 什么時候會顯示間隙？(攜程)·移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing··overflow: scroll時不能平滑滾動的問題怎么處理？··有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。··png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過w

48、ebp？··什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）·如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，所以不如隔離開。因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，提高了webserver的http請求的解析速度。&#

49、183;·style標簽寫在body后與body前有什么區別？··什么是CSS 預處理器 / 后處理器？·- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性， 還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。- 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規范處理CSS，讓其更有效；目前最常做的 是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。·JavaScript·介紹js的基本數據類型。

50、83; Undefined、Null、Boolean、Number、String··介紹js有哪些內置對象？·Object 是 JavaScript 中所有對象的父對象數據封裝類對象：Object、Array、Boolean、Number 和 String其他對象：Function、Arguments、Math、Date、RegExp、Error··說幾條寫JavaScript的基本規范？·1.不要在同一行聲明多個變量。2.請使用 =/!=來比較true/false或者數值3.使用對象字面量替代new Array這種形式4.不要使用全

51、局函數。5.Switch語句必須帶有default分支6.函數不應該有時候有返回值，有時候沒有返回值。7.For循環必須使用大括號8.If語句必須使用大括號9.for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。··JavaScript原型，原型鏈 ? 有什么特點？·每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，于是就這樣一直找下去，也就是我們平時所說的原型

52、鏈的概念。關系：totype = instance._proto_特點：JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。 當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話， 就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。 function Func() F = "Sean" Ft

53、otype.getInfo = function() return ; var person = new Func();/現在可以參考var person = Object.create(oldObject); console.log(person.getInfo();/它擁有了Func的屬性和方法 /"Sean" console.log(Ftotype); / Func name="Sean", getInfo=function()··JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？&

54、#183;棧：原始數據類型（Undefined，Null，Boolean，Number、String） 堆：引用數據類型（對象、數組和函數）兩種類型的區別是：存儲位置不同；原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬于被頻繁使用數據，所以放入棧中存儲；引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體···Javascript如何實現繼承？&#

55、183;1、構造繼承2、原型繼承3、實例繼承4、拷貝繼承原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。 function Parent() = 'wang' function Child() this.age = 28; Ctotype = new Parent();/繼承了Parent，通過原型 var demo = new Child(); alert(demo.age); alert();/得到被繼承的屬性 ··JavaScript繼承的幾種實現方

56、式？·· 參考：構造函數的繼承，非構造函數的繼承；·javascript創建對象的幾種方式？·javascript創建對象簡單的說,無非就是使用內置對象或各種自定義對象，當然還可以用JSON；但寫法有很多種，也能混合使用。1、對象字面量的方式 person=firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"2、用function來模擬無參的構造函數 function Person() var person=new Person();/定

57、義一個function，如果使用new"實例化",該function可以看作是一個Class ="Mark" person.age="25" person.work=function() alert(+" hello."); person.work();3、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性） function Pet(name,age,hobby) =name;/this作用域：當前對象 this.age=age; this.hobby=hobby; this.eat=function() alert("我叫"++",我喜歡"+this.hobby+",是個程序員"); var maidou =new Pet("麥兜",25,"coding");/實例化、創建對

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論