最新前端知識點匯總_第1頁
最新前端知識點匯總_第2頁
最新前端知識點匯總_第3頁
免費預(yù)覽已結(jié)束，剩余52頁可下載查看

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、前端開發(fā)面試題2016-7-10、八 、，刖言本文由我收集總結(jié)了一些前端面試題，初學(xué)者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識鏈。萬不可 投機取巧，臨時抱佛腳只求面試僥幸混過關(guān)是錯誤的！也是不可能的！ 不可能的！不可能的！前端還是一個年輕的行業(yè)，新的行業(yè)標(biāo)準(zhǔn)，框架，庫都不斷在更新和新增，正如赫門在2015深JS大會上的前端服務(wù)化之路主題演講 中說的一句話：每18至24個月，前端都會難一倍”，這些變化使前端 的能力更加豐富、創(chuàng)造的應(yīng)用也會更加完美。所以關(guān)注各種前端技術(shù)， 跟上快速變化的節(jié)奏，也是身為一個前端程序員必備的技能之一。希望前端er達(dá)到既能使用也會表達(dá)，

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

3、前端開發(fā)能把absolute和relative弄混，這樣的人不要也 罷，因為團(tuán)隊需要的是：你這個人具有可以依靠的才能 （靠譜）。前端開發(fā)知識點：HTML&CSS對Web標(biāo)準(zhǔn)的理解、瀏覽器內(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)建、HT

4、TP、離線存儲、WEB安全、優(yōu)化、重構(gòu)、團(tuán)隊協(xié)作、可維護(hù)、易用性、SEO UED架構(gòu)、職業(yè)生涯、快速學(xué)習(xí)能力作為一名前端工程師，無論工作年頭長短都應(yīng)該掌握的知識點：1、 DOM結(jié)構(gòu)個節(jié)點之間可能存在哪些關(guān)系以及如何在節(jié)點之間任意移動。2、DOM操作一-M可添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點等。3、事件 一一M可使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。4、XMLHttpRequest是什么、怎樣完整地執(zhí)行一次 GET請求、怎樣檢測錯誤。5、嚴(yán)格模式與混雜模式 一-M可觸發(fā)這兩種模式，區(qū)分它們有何意義。6、 盒模型 一一卜邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器 中

5、的盒模型7、塊級元素與行內(nèi)元素一一么用CSS控制它們、以及如何合理的使用它們8、浮動元素一一么使用它們、它們有什么問題以及怎么解決這些問題。9、HTML與 XHTML 者有什么區(qū)別，你覺得應(yīng)該使用哪一個并說出理由。10、JSON 乍用、用途、設(shè)計結(jié)構(gòu)。備注：根據(jù)自己需要選擇性閱讀，面試題是對理論知識的總結(jié)，讓自己學(xué)會應(yīng)該如何表達(dá)。資料答案不夠正確和全面，歡迎歡迎 Star和提交issues 。格式不斷修改更新中。HTML* Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別？ ( 1)、<!DOCTYPE：聲明位于位于 HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告

6、知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYP環(huán)存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。 (2)、標(biāo)準(zhǔn)模式的排版 和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。v/html> HTML5為什么只需要寫 ？ HTML5不基于SGML因此不需要對DTD進(jìn)行引用，但是需要doctype來 規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運行)； 而HTML401基于SGML所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔 所使用的文檔類型。行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？首先

7、：CSS規(guī)范規(guī)定，每個元素都有display 屬性，確定該元素的類型，每 個元素都有默認(rèn)的display 值，女口 div的display 默認(rèn)值為“block ”，則 為 塊級”元素；span默認(rèn)display 屬性值為“inline ”，是 行內(nèi)”元素。 ( 1) 行內(nèi)元素有： a b spa n img in put select strong(強調(diào)的語氣) (2)塊級元素有：div ul ol li dl dt dd hl h2 h3 h4p (3)常見的空元素：<br> <hr> <img> <input> <link>&l

8、t;meta>鮮為人知的是：<area> <base> <col> vcommand> <embed> <keygen> vparam><source> <track> <wbr>頁面導(dǎo)入樣式時，使用link和import有什么區(qū)別？（1）link屬于XHTML標(biāo)簽，除了加載 CSS外，還能用于定義 RSS定義 rel連接屬性等作用；而mport是CSS提供的，只能用于加載 CSS（2）頁面被加載的時，link 會同時被加載，而mport引用的CSS會等到 頁面被加載完再加載；（3

9、）import是CSS21 提出的，只在IE5以上才能被識別，而link 是XHTML 標(biāo)簽，無兼容問題；介紹一下你對瀏覽器內(nèi)核的理解？主要分成兩部分：渲染引擎 （layout engineer或Rendering Engine）禾口JS引擎。渲染引擎：負(fù)責(zé)取得網(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í)行javascript來實現(xiàn)網(wǎng)頁的

10、動態(tài)效果。*最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立,內(nèi)核就傾向于只指渲染引擎。-常見的瀏覽器內(nèi)核有哪些？* Tride nt 內(nèi)核：IE,MaxTho n, TT,The World,360,搜狗瀏覽器等。又稱MSHTML« Gecko 內(nèi)核：Netscape6 及以上版本，F(xiàn)F, MozillaSuite / SeaMonkey 等« Presto 內(nèi)核：Opera7及以上。 Opera 內(nèi)核原為：Presto，現(xiàn)為：Bli nk;« Webkit 內(nèi)核：Safari , Chrome 等。 Chrome 的：Blink （WebKi

11、t 的分 支）詳細(xì)文章：瀏覽器內(nèi)核的解析和對比html5有哪些新特性、移除了那些元素？如何處理 HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5 ？移除的元素：* 純表現(xiàn)的元素： basefont ，big ，center ，font, s，strike ，tt ，u;* 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset ， no frames ；* HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲，多 任務(wù)等功能的增加。* 繪畫 can vas;* 用于媒介回放的video 和audio 元素；* 本地離線存儲localStorage 長期存儲數(shù)據(jù)，瀏覽

12、器關(guān)閉后數(shù)據(jù)不 丟失；* sessio nStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除；* 語意化更好的內(nèi)容元素，比如 article 、footer 、header、nav、 secti on;* 表單控件， calendar 、date、time、email、url 、search;* 新的技術(shù) webworker, websocket, Geolocation;*支持HTML5新標(biāo)簽：IE8/IE7/IE6支持通過 document .createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用

13、成熟的框架、比如html5shim;v!-if lt IE 9><script>src二" n/tru nk/html5.js"v/script><!e ndif->*如何區(qū)分HTML5 DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素簡述一下你對HTML語義化的理解？用正確的標(biāo)簽做正確的事情。html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析；即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；搜索引擎的爬蟲也依賴于 HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利 于 SEO;使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)

14、站分塊，便于閱讀維護(hù)理解。HTML5的離線儲存怎么使用，工作原理能不能解釋一下？在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連 接時，更新用戶機器上的緩存文件。原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制（不 是存儲技術(shù)），通過這個文件上的解析清單離線存儲資源，這些資源就會像 cookie 一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通 過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。4如何使用：«1、頁面頭部像下面一樣加入一個 man ifest的屬性；« 2、在cache.manifest文件的編寫離線存儲的資源； CACH

15、EMANIFEST #v0.11 CACHE« js/app.js« css/style.css NETWORK:« resourse/logo.p ng FALLBACK:«/ /offli ne.html* 3、在離線狀態(tài)時，操作 wi ndow.applicatio nCache進(jìn)行需求實現(xiàn)。詳細(xì)的使用請參考：有趣的HTML5 :離線存儲瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢？*在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest 屬性，它會請求manifest 文件，如果是第一次訪問app，那么瀏覽器就會根據(jù) ma nifes

16、t文件的內(nèi)容 下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的 manifest文件與舊的manifest 文件，如果文件沒有發(fā)生改變，就不做任 何操作，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。詳細(xì)的使用請參考：有趣的HTML5 :離線存儲請描述一下 cookies , sessi on Storage 禾口 localstorage 的區(qū)cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side ） 上的數(shù)據(jù)（通常經(jīng)過加密

17、）。cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器 和服務(wù)器間來回傳遞。sessionStorage禾口 local Storage 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。存儲大?。篶ookie數(shù)據(jù)大小不能超過4k。sessionStorage禾口 local Storage 雖然也有存儲大小的限制，但比有期時間：local Storage刪除數(shù)據(jù)；sessi on Storagecookie瀏覽器關(guān)閉cookie大得多，可以達(dá)到5M或更大。存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。設(shè)置的cookie過期時間之前一直有效，即使

18、窗口或iframe有那些缺點？*iframe 會阻塞主頁面的Onload事件；*搜索引擎的檢索程序無法解讀這種頁面，不利于 SEO;*iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影 響頁面的并行加載。«使用iframe之前需要考慮這兩個缺點。如果需要使用iframe ,最好是通過 javascript«動態(tài)給iframe 添加src屬性值，這樣可以繞開以上兩個問題。* Label的作用是什么？是怎么用的？* label標(biāo)簽來定義表單控制間的關(guān)系，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動 將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。« vlabel for

19、二"Name" >Number: v/label>« vinput type二"“text “name二name""="" >« <label> Date: <input type ="text" ></label>* HTML5的form如何關(guān)閉自動完成功能？* 給不想要提示的 form 或某個in put 設(shè)置為 autocomplete二off。如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信？（阿里）* WebSocket、Shared

20、Worker ；* 也可以調(diào)用localstorge 、cookies 等本地存儲方式；* localstorge 另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個 事件，我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；* 注意quirks : Safari 在無痕模式下設(shè)置localstorge值時會拋出QuotaExceededError的異常；webSocket如何兼容低瀏覽器？（阿里）* Adobe Flash Socket 、* ActiveX HTMLFile （IE） 、* 基于multipart 編碼發(fā)送XHR、基于長輪詢的XHR頁面可見性(Page Visibility

21、 API )可以有哪些用途？通過visibilitystate的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等；在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放；如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？1、map+area 或者 svg2、border-radius3、純js實現(xiàn)需要求一個點在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等實現(xiàn)不使用border畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。<divstyle 二"height:1px;overflow:hidden;background:red"></div>網(wǎng)頁驗

22、證碼是干嘛的，是為了解決什么安全問題。區(qū)分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的 登陸嘗試。title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？title屬性沒有明確意義只表示是個標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；strong是標(biāo)明重點內(nèi)容，有語氣加強的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時： vstrong>會重讀，而<b>是展示強調(diào)內(nèi)容。i內(nèi)容展示為斜體，em表示強調(diào)的文本；« Physical Style Eleme nts -自

23、然樣式標(biāo)簽« b, i, u, s, pre« Sema ntic Style Eleme nts -語義樣式標(biāo)簽« stro ng, em, ins, del, code應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽,但不能濫用，如果不能確定時首選使用自然樣式標(biāo)簽。v/b>v/stro ng>CSS.介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？(1)有兩種，IE 盒子模型、W3C盒子模型；* (2)盒模型： 內(nèi)容(co ntent )、填充(padd ing )、邊界(margin )、 邊框(border )；* (3)區(qū) 另ij: IE的cont

24、ent 部分把border禾口 padding 計算了進(jìn)去；* CSS選擇符有哪些？哪些屬性可以繼承？* * 1.id 選擇器(# myid )* 2. 類選擇器(.myclassname )* 3. 標(biāo)簽選擇器(div , h1, p)* 4.相鄰選擇器(h1 + p)* 5. 子選擇器(ul > li )* 6.后代選擇器(li a)* 7.通配符選擇器(* )* 8. 屬性選擇器(arel = "external")* 9.偽類選擇器(a:hover, li :nth-child ) *可繼承的樣式：font-sizefont-familycolor , UL

25、LI DL DD DT; * 不可繼承的樣式:borderpadd ing marginwidth height ; CSS優(yōu)先級算法如何計算？ * 優(yōu)先級就近原則,同權(quán)重情況下樣式疋義取近者為準(zhǔn)；* *載入樣式以取后載入的疋位為準(zhǔn)；優(yōu)先級為:*!importa nt > id >class > tagimporta nt比內(nèi)聯(lián)優(yōu)先級高 CSS3新增偽類有那些？*舉例：*p:first-of-typev/pxp> 兀素。選擇屬于其父元素的首個<p>元素的每個*p:last-of-type</p>vp> 兀素。選擇屬于其父兀素的取后</

26、p>vp> 兀素的每個*p:o nly-of-type</p>vp> 兀素。選擇屬于其父元素唯一的v/p>vp> 兀素的每個*p:o nly-child</p>vp> 兀素。選擇屬于其父元素的唯-一子元素的每個*p:n th-child(2)丿元糸。選擇屬于其父元素的第二個子元素的每個v/p>vp>*:after在元素之前添加內(nèi)容，也可以用來做清除浮動。*:before在元素之后添加內(nèi)容*:en abled:disabled:checkedv/p>控制表單控件的禁用狀態(tài)單選框或復(fù)選框被選中。div居如何居中div ?

27、如何居中一個浮動元素？如何讓絕對定位的中？o給div設(shè)置一個寬度，然后添加margin:0 auto屬性o div owidth : 200px ;omargin : 0 auto;o o居中一個浮動元素o確定容器的寬高 寬500高300的層o設(shè)置層的外邊距oo .div owidth : 500px ; height : 300px ; / 高度可以不設(shè)omargin : - 150px 0 0 - 250px ;oposition :relative;/相對定位obackground-color :pink;/方便看效果oleft : 50%otop : 50%o o讓絕對定位的div居中

28、opositi on: absolute;owidth :1200px;obackground : none;omargin : 0 auto;otop :0;oleft:0;obottom:0;oright:0;display有哪些值？說明他們的作用。block象塊類型元素一樣顯示。none缺省值。象行內(nèi)元素類型一樣顯示。inline-b lock象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。table此元素會作為塊級表格來顯示in herit規(guī)定應(yīng)該從父元素繼承 display屬性的值position 的值 relative

29、和 absolute 定位原點是？absolute生成絕對定位的元素，相對于值不為static的第一個父元素進(jìn)行定位。fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。relative生成相對定位的元素，相對于其正常位置進(jìn)行定位。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略top , bottom , left rightz-i ndex聲明）。in herit規(guī)定從父元素繼承 positi on屬性的值。CSS3有哪些新特性？新增各種CSS選擇器(：not (.input):所有class 不是input的節(jié)點)圓角(border-radius :8px)

30、多列布局(multi-column layout )陰影和反射(Shadow Reflect )文字特效(text-shadow 、)文字渲染(Text-decorati on)線性漸變(gradie nt )旋轉(zhuǎn)(tran sform )增加了旋轉(zhuǎn)，縮放,定位，傾斜,動畫，多背景transform scale (0.85 , 0.90 ) translate ( 0px,- 30px )skew(- 9deg , 0deg Animation請解釋一下CSS3的Flexbox (彈性盒布局模型)，以及適用場景?用純CSS創(chuàng)建一個三角形的原理是什么？把上、左、右三條邊隱藏掉(顏色設(shè)為tran

31、spare nt )#demo width : 0;height : 0;border-width:20px;border-style:solid;border-color:tran spare nt tran spare nt red tran spare nt;一個滿屏品字布局如何設(shè)計？簡單的方式：上面的div寬100%下面的兩個div分別寬50%然后用float 或者inline使其不換行即可經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.*瀏覽器默認(rèn)的margin和padding不同。解決

32、方案是加一個全局的* margin : 0; padding : 0;來統(tǒng)一。* IE6 雙邊距bug:塊屬性標(biāo)簽float 后，又有橫行的margin情況下，在 ie6顯示margin比設(shè)置的大。浮動 ie 產(chǎn)生的雙倍距離 #box float:left;width :10px; margin : 00 0 100px;這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式 控制中加入一display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。（_這個符號只有ie6會識別） 漸進(jìn)識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。*

33、接著，再次使用“ +將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識 另嘰css.bbbackgro un d-color:#f1ee18 ; /* 所有識別 */.backgro un d-color:#00deff9; /*IE6、7、8 識別*/backgro un d-color:#a200ff;/*IE6 、7 識別*/_backgro und-color:#1e0bd1;/*IE6 識別*/* IE 下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；Firefox 下，只能使用getAttribute()獲取自定義屬性。解決

34、方法:統(tǒng)一通過getAttribute()獲取自定義屬性。* IE下,even對象有x,y屬性，但是沒有pageX,pageY屬性；Firefox 下,event 對象有pageX,pageY 屬性，但是沒有x,y屬性。*解決方法：(條件注釋)缺點是在 IE瀏覽器下可能會增加額外的 HTTP 請求數(shù)。* Chrome中文界面下默認(rèn)會將小于12px的文本強制按照12px顯示,可通過加入 CSS 屬性-webkit-text-size-adjust: none;解決。超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具 有hover和active了解決方法是改變 CSS屬性的排列

35、順序:a:L-V-H-A : a:li.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？行框的排列會受到中間空白（回車 空格）等的影響，因為空格也屬于字符， 這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為o,就沒有空格了。為什么要初始化CSS樣式。-因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果 沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。-當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求 影響最小的情況下初始化。*最簡單的初始化方法：淘寶的樣式初始化代碼：* body,hl, h2,h3, h4,h5,h6,hr,

36、 p,blockquote, dl ,dt , dd,ul , ol, li , pre, form,fieldset ,lege nd, butt on,in put,textareath , td margin : 0;padding:0; «body,butt on ,in put,select, textarea font: 12px/1.5 tahoma,54f53; * h1, h2,h3, h4, h5,h6font-size : 100% * address, cite , dfn ,emvar font-style:normal;* code , kbd, pre

37、, samp fon t-family:courier new, courier,mono space; * small font-size: 12px; * ul , ol list-style:none; * a text-decorati on:non e; * a:hover text-decorati on:un derli ne; padding : 0; margin : 0;（強烈不建議）« sup vertical-alig n:text-top; « sub vertical-align:text-bottom; « lege nd color

38、 : #000;« fieldset , img border : 0; * butt on,in put , select, textarea fon t-size : 100% «tableborder-collapse :collapse; border-spacing : 0;« absolute的con tai ning block（容器塊）計算方式跟正常流有什么不同？*無論屬于哪種，都要先找到其祖先元素中最近的position值不為static的元素，然后再判斷：« 1、若此元素為inline元素，則containing block為能夠包含

39、這個元素生成的第一個和最后一個in li nebox 的padd ing box （ 除 margi n,border外的區(qū)域）的最小矩形；* 2、否則，則由這個祖先元素的padding box 構(gòu)成。* 如果都找不到，則為 in itial c on tai ning block。*補充：* 1. static （默認(rèn)的"relative:簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分）* 2. absolute:向上找最近的定位為 absolute/relative 的元素* 3. fixed:它的 con tai ning block一律為根元素（html/body）

40、，根元素也是 initial containing block* CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？* position 跟 display、margin collapse、overflow、float 這些特性相互疊加后會怎么樣? 對BFC規(guī)范（塊級格式化上下文：block formatti ng con text）的理解？ （W3CCSS2.1 規(guī)范中的一個概念，它是一個獨立容器，決定了元素如何對 其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。）«一個頁面是由很多個 Box組成的，元素的類型和display 屬性

41、,決定了這個Box的類型。« 不同類型的Box,會參與不同的 FormattingContext （決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染，也就是說BFC內(nèi)部的元 素和外部的元素不會互相影響。* css定義的權(quán)重«以下是權(quán)重的規(guī)則：標(biāo)簽的權(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 div * * /* 權(quán)重為 10+1=11

42、*/* .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ū)別，只因為團(tuán)隊前端都是用的SASS）* CSS優(yōu)化、提高性能的方法有哪些？瀏覽器是怎樣解析CSS選擇器的？在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？* margin和padding分別適合什么場景使用？-抽離樣式模塊怎么寫，說

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

44、k） 怎么讓Chrome支持小于12px的文字？讓頁面里的字體變清晰，變細(xì)用 CSS怎么做？（-webkit-fo nt-smoothi ng: an tialiased;）* font-style屬性可以讓它賦值為“oblique ” oblic是什么意思？ positi on:fixed;在 an droid 下無效怎么處理？如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？（阿 里）多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60* 1000ms = 16.7msdisplay:inline-block 什么時候會顯示間隙？（攜程）« 移除空格、

45、使用 margin 負(fù)值、使用 font-size: 0、letter-spacing、word-spaci ngoverflow: scroll時不能平滑滾動的問題怎么處理？有一個高度自適應(yīng)的div，里面有兩個div，一個高度100px，希 望另一個填滿剩下的高度。 png、jpg、gif這些圖片格式解釋一下，分別什么時候用。有沒有 了解過webp ？什么是Cookie隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請求的時候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費流量，所以不如隔離開。因為cookie有域的限制，因此不能跨域

46、提交請求，故使用非主要域名的時 候，請求頭中就不會帶有cookie數(shù)據(jù)，這樣可以降低請求頭的大小，降低請求時間，從而達(dá)到降低整體請求延時的 目的。同時這種方式不會將 cookie 傳入 Web Server，也減少了 Web Server對 cookie的處理分析環(huán)節(jié)，提高了 webserver的http請求的解析速度。style標(biāo)簽寫在body后與body前有什么區(qū)別？什么是CSS預(yù)處理器/后處理器？-預(yù)處理器例如：LESS Sass、Stylus，用來預(yù)編譯 Sass或less，增強 了 css代碼的復(fù)用性，還有層級、mix in、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極

47、大的提高工作效率。-后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù) CSS規(guī)范處 理CSS,讓其更有效；目前最常做的是給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說幾條寫JavaScrip

48、t的基本規(guī)范？1. 不要在同一行聲明多個變量。2請使用=/!= 來比較true / false 或者數(shù)值3. 使用對象字面量替代new Array這種形式4. 不要使用全局函數(shù)。5. Switch語句必須帶有default 分支6. 函數(shù)不應(yīng)該有時候有返回值，有時候沒有返回值。7. For循環(huán)必須使用大括號8. If語句必須使用大括號9. for -in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作 用域污染。JavaScript原型，原型鏈 ？有什么特點？每個對象都會在其內(nèi)部初始化一個屬性，就是prototype（ 原型），當(dāng)我們訪問一個對象的屬性時，如果這個對象內(nèi)部不存在這個

49、屬性，那么他就會去prototype 里找這個屬性,這個 prototype 又會有自己的 prototype ，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。關(guān)系：totype = instanee._proto_特點：« JavaScript 對象是通過引用來傳遞的，我們創(chuàng)建的每個新對象實體中并沒 有一份屬于自己的原型副本。當(dāng)我們修改原型時，與之相關(guān)的對象也會繼承 這一改變。當(dāng)我們需要一個屬性的時，Javascript引擎會先看當(dāng)前對象中是否有這個屬性，如果沒有的話，就會查找他的Prototype對象是否有這個屬性，如此遞

50、推下去，一直檢索到Object內(nèi)建對象。fun cti onFun c()F ="Sean"Fun totype.get Info =function () return this .name;var person 二 new Func();/現(xiàn)在可以參考var person =Object.create(oldObject);con sole .log(perso n.getl nfo();/ 它擁有了 Fu nc 的屬性和方法/"Sea n"con soleo g(F un totype);/

51、Func n ame二"Sea n", get Info二fun cti on()JavaScript有幾種類型的值？，你能畫一下他們的內(nèi)存圖嗎？棧：原始數(shù)據(jù)類型(Undefined ， Null ， Boolean，Number、String )堆：引用數(shù)據(jù)類型(對象、數(shù)組和函數(shù))兩種類型的區(qū)別是：存儲位置不同；原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小、大小固 定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲；引用數(shù)據(jù)類型存儲在堆（heap）中的對象，占據(jù)空間大、大小不固定，如果存儲 在棧中，將會影響程序運行的性能；引用數(shù)據(jù)類型在棧中存儲了指針，該指 針指

52、向堆中該實體的起始地址。當(dāng)解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體Javascript如何實現(xiàn)繼承？1、構(gòu)造繼承2、原型繼承3、實例繼承4、拷貝繼承方法去實現(xiàn)較簡單，建議使用構(gòu)造函原型 prototype 機制或 apply 禾口 call 數(shù)與原型混合方式。fun ctio nPare nt ()this .name = 'wang'* «functionChild ()«this .age =28; « Ctotype =new Pare nt();/ 繼承了 Pare nt，通過原型«

53、var demo = new Child();«alert(demo.age);«alert();/得到被繼承的屬性 « JavaScript繼承的幾種實現(xiàn)方式？o參考：構(gòu)造函數(shù)的繼承，非構(gòu)造函數(shù)的繼承；javascript創(chuàng)建對象的幾種方式？javascript創(chuàng)建對象簡單的說，無非就是使用內(nèi)置對象或各種自定義對象，當(dāng)然還可以用JSON;但寫法有很多種，也能混合使用。1、對象子面量的方式person二firstname:"Mark" ,lastname:"Yun" ,age: 25,eyecolor: &

54、quot;black" ;*2、用function來模擬無參的構(gòu)造函數(shù)fun cti onPers on ()var person二 new Person。；/ 定義一個 function，如果使用 new"實例化"，該function可以看作是一個C="Mark"pers on .age二"25"pers on. work=fun ctio n()alert(pers on.n ame+" hello." );pers on. work();3、 用function來模擬參

55、構(gòu)造函數(shù)來實現(xiàn)(用this關(guān)鍵字定義構(gòu)造的上下 文屬性)functionPet (name,age,hobby)this .name二name; /this 作用域：當(dāng)前對象this .age=age;this .hobby二hobby;this .eat= function()alert("我叫"+this .name+",我喜歡"+this .hobby+ ",是個程序員");var maidou = new Pet("麥兜",25, "coding" ); / 實例化、創(chuàng)建對象maidou

56、.eat(); / 調(diào)用 eat 方法4、用工廠方式來創(chuàng)建(內(nèi)置對象)var wcDog = new Object ();wcDog .name="旺財"；wcDog.age二3;wcDog.work二fun cti on()alert( "我是"+wcD+",汪汪汪”); wcDog.work();5、用原型方式來創(chuàng)建fun cti on Dog()D="旺財"二fun cti on ()alert( this .name+"是個吃貨”)；var wangcai = new Dog();wan gcai.eat();5、用混合方式來創(chuàng)建fun cti on Car( name,price)this .

溫馨提示

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

評論

0/150

提交評論