中文国产日韩欧美视频,午夜精品999,色综合天天综合网国产成人网,色综合视频一区二区观看,国产高清在线精品,伊人色播,色综合久久天天综合观看

前端開(kāi)發(fā)面試題

時(shí)間:2024-07-02 00:50:56 學(xué)人智庫(kù) 我要投稿
  • 相關(guān)推薦

前端開(kāi)發(fā)面試題

  前言

前端開(kāi)發(fā)面試題

  本文由我收集總結(jié)了一些優(yōu)質(zhì)的前端面試題,初學(xué)者閱后也要用心鉆研其中的原理,重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí),形成自己的知識(shí)鏈。萬(wàn)不可投機(jī)取巧,只求面試過(guò)關(guān)是錯(cuò)誤的!

  前端還是一個(gè)年輕的行業(yè),新的行業(yè)標(biāo)準(zhǔn), 框架, 庫(kù)都不斷在更新和新增,正如赫門(mén)在2015深JS大會(huì)上的《前端服務(wù)化之路》主題演講中說(shuō)的一句話:“每18至24個(gè)月,前端都會(huì)難一倍”,這些變化使前端的能力更加豐富、創(chuàng)造的應(yīng)用也會(huì)更加完美。所以關(guān)注各種前端技術(shù), 跟上快速變化的節(jié)奏, 也是身為一個(gè)前端程序員必備的技能之一。

  最近也收到許多微博私信的鼓勵(lì)和更正題目信息,后面會(huì)經(jīng)常更新題目和答案到github博客,但其他舊版本的分支和其他網(wǎng)站出現(xiàn)的拷貝版本上面的錯(cuò)誤回答我也管不了嘞。希望更多的前端開(kāi)發(fā)可以達(dá)到既能使用也會(huì)表達(dá),對(duì)理論知識(shí)有自己的理解,也可根據(jù)下面的知識(shí)點(diǎn)一個(gè)一個(gè)去進(jìn)階學(xué)習(xí),形成自己的職業(yè)技能鏈。

  面試有幾點(diǎn)需注意:

  1、面試題目:根據(jù)你的等級(jí)和職位的變化,入門(mén)級(jí)到專家級(jí),廣度和深度都會(huì)有所增加。

  2、題目類型:理論知識(shí),算法,項(xiàng)目細(xì)節(jié)、技術(shù)視野、開(kāi)放性題,工作案例。

  3、細(xì)節(jié)追問(wèn):可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止,這樣可以大大延展題目的區(qū)分度和深度,知道你的實(shí)際能力。因?yàn)檫@種知識(shí)關(guān)聯(lián)是長(zhǎng)時(shí)期的學(xué)習(xí),臨時(shí)抱佛腳絕對(duì)是記不住的。

  4、回答問(wèn)題再棒,面試官(可能是你面試職位的直接領(lǐng)導(dǎo)),會(huì)考慮我要不要這個(gè)人做我的同事?所以態(tài)度很重要、除了能做事,還要會(huì)做人。(感覺(jué)更像是相親( ))

  5、資深的前端開(kāi)發(fā)能把a(bǔ)bsolute和relative弄混,這樣的人不要也罷,因?yàn)閳F(tuán)隊(duì)需要的是:你這個(gè)人具有可以依靠的才能(靠譜)。

  前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱:

  作為一名前端工程師,無(wú)論工作年頭長(zhǎng)短都應(yīng)該必須掌握的知識(shí)點(diǎn):

  HTML

  Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

  HTML5 為什么只需要寫(xiě) ?

  行內(nèi)元素有哪些?塊級(jí)元素有哪些? 空(void)元素有那些?

  首先:CSS規(guī)范規(guī)定,每個(gè)元素都有display屬性,確定該元素的類型,每個(gè)元素都有默認(rèn)的display值,如div的display默認(rèn)值為“block”,則為“塊級(jí)”元素;span默認(rèn)display屬性值為“inline”,是“行內(nèi)”元素。

  (1)行內(nèi)元素有:a b span img input select strong(強(qiáng)調(diào)的語(yǔ)氣)

  (2)塊級(jí)元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

  (3)常見(jiàn)的空元素:

  鮮為人知的是:

  頁(yè)面導(dǎo)入樣式時(shí),使用link和@import有什么區(qū)別?

  (1)link屬于XHTML標(biāo)簽,除了加載CSS外,還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用于加載CSS;

  (2)頁(yè)面被加載的時(shí),link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

  (3)import是CSS2.1 提出的,只在IE5以上才能被識(shí)別,而link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題;

  介紹一下你對(duì)瀏覽器內(nèi)核的理解?

  主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

  渲染引擎:負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計(jì)算網(wǎng)頁(yè)的顯示方式,然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同,所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。

  JS引擎則:解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

  最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確,后來(lái)JS引擎越來(lái)越獨(dú)立,內(nèi)核就傾向于只指渲染引擎。

  常見(jiàn)的瀏覽器內(nèi)核有哪些?

  Trident內(nèi)核:IE,MaxThon,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)為:Blink;]

  Webkit內(nèi)核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

  詳細(xì)文章:瀏覽器內(nèi)核的解析和對(duì)比 - 依水間

  html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?

  * HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲(chǔ),多任務(wù)等功能的增加。

  繪畫(huà) canvas;

  用于媒介回放的 video 和 audio 元素;

  本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

  sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;

  語(yǔ)意化更好的內(nèi)容元素,比如 article、footer、header、nav、section;

  表單控件,calendar、date、time、email、url、search;

  新的技術(shù)webworker, websockt, Geolocation;

  移除的元素:

  純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;

  對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes;

  * 支持HTML5新標(biāo)簽:

  IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽,

  可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,

  瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

  當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  * 如何區(qū)分: DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

  簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解?

  用正確的標(biāo)簽做正確的事情。

  html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化,結(jié)構(gòu)更清晰,便于對(duì)瀏覽器、搜索引擎解析;

  及時(shí)在沒(méi)有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的;

  搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于SEO;

  使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解。

  HTML5的離線儲(chǔ)存怎么使用,工作原理能不能解釋一下?

  在用戶沒(méi)有與因特網(wǎng)連接時(shí),可以正常訪問(wèn)站點(diǎn)或應(yīng)用,在用戶與因特網(wǎng)連接時(shí),更新用戶機(jī)器上的緩存文件。

  原理:HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù)),通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源,這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí),瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。

  如何使用:

  1、頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性;

  2、在cache.manifest文件的編寫(xiě)離線存儲(chǔ)的資源;

  CACHE MANIFEST

  #v0.11

  CACHE:

  js/app.js

  css/style.css

  NETWORK:

  resourse/logo.png

  FALLBACK:

  / /offline.html

  3、在離線狀態(tài)時(shí),操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。

  詳細(xì)的使用請(qǐng)參考:有趣的HTML5:離線存儲(chǔ)

  瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢?

  在線的情況下,瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,它會(huì)請(qǐng)求manifest文件,如果是第一次訪問(wèn)app,那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了,那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面,然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件,如果文件沒(méi)有發(fā)生改變,就不做任何操作,如果文件改變了,那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。

  離線的情況下,瀏覽器就直接使用離線存儲(chǔ)的資源。

  詳細(xì)的使用請(qǐng)參考:有趣的HTML5:離線存儲(chǔ)

  請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?

  localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

  sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。

  iframe有那些缺點(diǎn)?

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

  *iframe和主頁(yè)面共享連接池,而瀏覽器對(duì)相同域的連接有限制,所以會(huì)影響頁(yè)面的并行加載。

  使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe,最好是通過(guò)javascript

  動(dòng)態(tài)給iframe添加src屬性值,這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。

  Label的作用是什么?是怎么用的?

  label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。

  Number:

  Date:

  HTML5的form如何關(guān)閉自動(dòng)完成功能?

  給不想要提示的 form 或下某個(gè)input 設(shè)置為autocomplete=off。

  請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?

  cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)

  sessionStorage和localStorage的存儲(chǔ)空間更大;

  sessionStorage和localStorage有更多豐富易用的接口;

  sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間;

  如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)

  調(diào)用localstorge、cookies等本地存儲(chǔ)方式

  webSocket如何兼容低瀏覽器?(阿里)

  Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長(zhǎng)輪詢的 XHR

  CSS

  介紹一下CSS的盒子模型?

  (1)有兩種, IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE的content部分包含了 border 和 pading;

  (2)盒模型: 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

  CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算? CSS3新增偽類有那些?

  * 1.id選擇器( # myid)

  2.類選擇器(.myclassname)

  3.標(biāo)簽選擇器(div, h1, p)

  4.相鄰選擇器(h1 + p)

  5.子選擇器(ul > li)

  6.后代選擇器(li a)

  7.通配符選擇器( * )

  8.屬性選擇器(a[rel = "external"])

  9.偽類選擇器(a: hover, li: nth - child)

  * 可繼承的樣式: font-size font-family color, UL LI DL DD DT;

  * 不可繼承的樣式:border padding margin width height ;

  * 優(yōu)先級(jí)就近原則,同權(quán)重情況下樣式定義最近者為準(zhǔn);

  * 載入樣式以最后載入的定位為準(zhǔn);

  優(yōu)先級(jí)為:

  !important > id > class > tag

  important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

  CSS3新增偽類舉例:

  p:first-of-type 選擇屬于其父元素的首個(gè)

  元素的每個(gè)

  元素。

  p:last-of-type 選擇屬于其父元素的最后

  元素的每個(gè)

  元素。

  p:only-of-type 選擇屬于其父元素唯一的

  元素的每個(gè)

  元素。

  p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)

  元素。

  p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)

  元素。

  :enabled :disabled 控制表單控件的禁用狀態(tài)。

  :checked 單選框或復(fù)選框被選中。

  如何居中div?如何居中一個(gè)浮動(dòng)元素?

  給div設(shè)置一個(gè)寬度,然后添加margin:0 auto屬性

  div{

  width:200px;

  margin:0 auto;

  }

  居中一個(gè)浮動(dòng)元素

  確定容器的寬高 寬500 高 300 的層

  設(shè)置層的外邊距

  .div {

  Width:500px ; height:300px;//高度可以不設(shè)

  Margin: -150px 0 0 -250px;

  position:relative;相對(duì)定位

  background-color:pink;//方便看效果

  left:50%;

  top:50%;

  }

  列出display的值,說(shuō)明他們的作用。position的值, relative和absolute定位原點(diǎn)是?

  1、block 象塊類型元素一樣顯示。

  none 缺省值。象行內(nèi)元素類型一樣顯示。

  inline-block 象行內(nèi)元素一樣顯示,但其內(nèi)容象塊類型元素一樣顯示。list-item 象塊類型元素一樣顯示,并添加樣式列表標(biāo)記。

  2、*absolute

  生成絕對(duì)定位的元素,相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

  *fixed (老IE不支持)

  生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位。

【前端開(kāi)發(fā)面試題】相關(guān)文章:

前端工程師面試題10-20

Web前端面試題目及答案06-30

iOS開(kāi)發(fā)、設(shè)計(jì)面試題08-16

iPhone軟件開(kāi)發(fā)面試題10-23

Microsoft面試題09-04

iOS面試題07-10

公司面試題09-12

hibernate面試題10-18

英語(yǔ)面試題精選06-13

小升初面試題06-10