前端程序員面試分類真題4

前端程序員面試分類真題4簡(jiǎn)答題1.

iframe元素有哪些缺點(diǎn)?正確答案：iframe元素主要有4個(gè)方面的缺點(diǎn)。

(1)瀏覽器對(duì)同一域名的并發(fā)請(qǐng)求數(shù)是有限制的。iframe中的文檔(即子文檔（江南博哥）)與父文檔會(huì)共享連接，當(dāng)并發(fā)請(qǐng)求數(shù)達(dá)到上限值時(shí)，子文檔中的資源只能等待，直到前面的通信完成。

(2)阻塞父窗口的load事件。

(3)腳本的執(zhí)行是同步和阻塞的，將script元素放置于iframe之前，同樣也會(huì)阻塞iframe中資源的請(qǐng)求。

(4)制造點(diǎn)擊劫持(ClickJacking)，將一個(gè)不可見的iframe或包含用戶感興趣內(nèi)容的iframe覆蓋在文檔的某個(gè)位置上，誘使用戶點(diǎn)擊iframe中的內(nèi)容。[考點(diǎn)]HTML元素iframe

2.

HTML5新增了幾個(gè)多媒體元素，請(qǐng)列舉使用這些元素的優(yōu)勢(shì)。正確答案：使用多媒體元素有以下4個(gè)方面的優(yōu)勢(shì)。

(1)支持移動(dòng)設(shè)備，可為智能手機(jī)、平板電腦或其他移動(dòng)設(shè)備提供豐富的觀看體驗(yàn)。

(2)易于定制效果，使用傳統(tǒng)的CSS就能為多媒體元素設(shè)計(jì)個(gè)性化的視覺體驗(yàn)，例如漸變、陰影、遮罩和動(dòng)畫等。

(3)輕松實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，能在不同媒體(如計(jì)算機(jī)顯示器、移動(dòng)設(shè)備和輔助設(shè)備等)中渲染合適的樣式，呈現(xiàn)最優(yōu)的界面。

(4)語義化的元素，可提供明確的含義，提升文檔的可訪問性，便于閱讀與理解。[考點(diǎn)]多媒體和繪圖

3.

除了video和audio元素，HTML5還支持哪些多媒體元素?正確答案：HTML5還支持embed和track元素。embed元素用于嵌入外部資源，例如SVG矢量圖形、應(yīng)用程序或插件等。track元素是audio和video的子元素，為多媒體文件添加輔助文本信息，例如字幕、屏幕閱讀器說明和主題等。在Chrome瀏覽器中，可用WebVTT(網(wǎng)絡(luò)視頻文本軌道)文件和track元素結(jié)合(如以下代碼所示)，給媒體資源添加可同步顯示的字幕，效果如下圖所示。

＜video＞

＜sourcesrc="video/piano.webm"type="video/webm"/＞

＜trackkind="subtitles"src="video/piano.vtt"label="中文"srclang="zh"default/＞

＜/video＞

帶字幕的視頻[考點(diǎn)]多媒體和繪圖

4.

請(qǐng)簡(jiǎn)單描述一下canvas元素。正確答案：canvas是HTML5新增的元素，該元素能創(chuàng)建一個(gè)固定大小的畫布，在畫布中可以繪制或處理要展示的內(nèi)容(例如圖像、文本等)，以下是它的特征和功能。

(1)只能通過JavaScript腳本來繪制圖形，例如矩形、圓等。

(2)如果要為圖形設(shè)置CSS樣式、文本或動(dòng)畫，那么也得通過JavaScript來實(shí)現(xiàn)。

(3)canvas元素有很強(qiáng)的圖像操作能力，不僅能實(shí)現(xiàn)圖像的合成與裁剪，還能修改圖像的像素?cái)?shù)據(jù)，實(shí)現(xiàn)濾鏡的一些效果(例如浮雕、模糊和黑白等)。

(4)如果在畫布中繪制一個(gè)按鈕，不能直接為這個(gè)按鈕添加DOM事件(例如點(diǎn)擊、聚焦等)。[考點(diǎn)]多媒體和繪圖

5.

什么是SVG?正確答案：SVG(ScalableVectorGraphics)即可伸縮矢量圖形，是一種用XML描述圖形的標(biāo)記語言，早在2003年就已成為W3C標(biāo)準(zhǔn)。與畫布(Canvas)只能用JavaScript繪圖不同，SVG提供了各種類型的元素，包括形狀、文本、漸變、動(dòng)畫和濾鏡等，并且可以為每個(gè)元素附加DOM事件，還能用CSS控制它們的樣式，不過只能使用部分CSS屬性，像border、background就不可用。SVG中也可插入圖像(即插入img元素)，執(zhí)行裁剪、遮罩、旋轉(zhuǎn)等功能。不過，SVG不能像Canvas那樣，將處理過的圖形輸出，canvas元素有個(gè)toDataURL()方法，可以將畫布中的內(nèi)容編碼成字符串形式。[考點(diǎn)]多媒體和繪圖

6.

用canvas元素畫一個(gè)藍(lán)底白字的矩形按鈕，如下圖所示。

按鈕正確答案：在HTML文檔中先定義一個(gè)canvas元素，并且將畫布的寬和高分別設(shè)置為200px和100px，再用腳本繪制按鈕，具體如以下代碼所示。

＜canvasid="btnCanvas"width="200"height="100"＞

＜p＞這是一個(gè)按鈕,用于啟動(dòng)游戲＜/p＞

＜/canvas＞

＜script＞

varcanvas=document.getElementById("btnCanvas"),

ctx=canvas.getContext("2d");

ctx.fillStyle="#007ab9";

//矩形背景色

ctx.fillRect(0,0,canvas.width,canvas.height);

//繪制矩形

ctx.font="40pxserif";

//字體設(shè)置

ctx.fillStyle="#FFF";

//字體顏色

ctx.fillText("游戲開始",20,60);

//繪制文本

＜/script＞[考點(diǎn)]多媒體和繪圖

7.

localStorage和sessionStorage有哪些異同?正確答案：localStorage是指本地存儲(chǔ)，sessionStorage是指會(huì)話存儲(chǔ)。它們都不會(huì)作為請(qǐng)求報(bào)文中的額外信息傳遞給服務(wù)器，并且存儲(chǔ)容量也相同，但在使用的時(shí)候略有不同。本地存儲(chǔ)永遠(yuǎn)不會(huì)過期，即使瀏覽器關(guān)閉，也還會(huì)存在，同源的本地存儲(chǔ)可以共享。而會(huì)話存儲(chǔ)只能應(yīng)用于頁面會(huì)話期間，當(dāng)關(guān)閉頁面或?yàn)g覽器的時(shí)候，會(huì)話存儲(chǔ)中的數(shù)據(jù)將會(huì)被自動(dòng)清除。[考點(diǎn)]數(shù)據(jù)存儲(chǔ)

8.

用什么方法可以防止Cookie被盜取?正確答案：Cookie是先由瀏覽器向服務(wù)器發(fā)起請(qǐng)求，再由服務(wù)器響應(yīng)后回傳Set-Cookie首部(此時(shí)可設(shè)置HttpOnly屬性)并向客戶端瀏覽器寫入Cookie。在給Cookie設(shè)置HttpOnly屬性后，就能夠禁止頁面的JavaScript訪問這個(gè)Cookie，從而避免被盜取。[考點(diǎn)]數(shù)據(jù)存儲(chǔ)

9.

CSS指的是什么?正確答案：CSS(CascadingStyleSheets)即層疊樣式表，它是一種樣式語言，用于控制頁面的表現(xiàn)(外觀和內(nèi)容排版)。它對(duì)HTML來說是一種有效的補(bǔ)充，利用CSS，可以創(chuàng)建各種規(guī)則，應(yīng)用到所有的HTML元素。[考點(diǎn)]CSS與CSS3

10.

什么叫漸進(jìn)增強(qiáng)?它和優(yōu)雅降級(jí)有哪些區(qū)別?正確答案：漸進(jìn)增強(qiáng)(ProgressiveEnhancement)并不是一種技術(shù)，而是一種設(shè)計(jì)思想。各個(gè)瀏覽器的渲染能力各不相同，要做一個(gè)每個(gè)人看到的網(wǎng)頁、感受到的體驗(yàn)都一致的網(wǎng)站是幾乎不可能的。但還是得確保網(wǎng)站的可訪問性，保證用戶在任何環(huán)境下，都能正常訪問核心內(nèi)容或使用基本功能(避免頁面打不開、排版錯(cuò)亂等)，并為他們提供當(dāng)前條件下最好的體驗(yàn)，這是漸進(jìn)增強(qiáng)的核心思想。

優(yōu)雅降級(jí)(GracefulDegradation)也是一種設(shè)計(jì)思想，保證在高版本瀏覽器中提供最好的體驗(yàn)，遇到低版本瀏覽器再降級(jí)進(jìn)行兼容處理，使其能正常瀏覽。兩種思想的區(qū)別如下所列。

(1)漸進(jìn)增強(qiáng)是向上兼容，優(yōu)雅降級(jí)是向下兼容。

(2)漸進(jìn)增強(qiáng)是從簡(jiǎn)單到復(fù)雜，優(yōu)雅降級(jí)是從復(fù)雜到簡(jiǎn)單。

(3)漸進(jìn)增強(qiáng)關(guān)注的是內(nèi)容，優(yōu)雅降級(jí)關(guān)注的是瀏覽體驗(yàn)。[考點(diǎn)]CSS與CSS3

11.

請(qǐng)談?wù)勀銓?duì)CSSHack的理解。正確答案：CSSHack是一種編程技巧，它讓CSS代碼能兼容各個(gè)瀏覽器，盡量讓頁面取得想要的效果，避免出現(xiàn)錯(cuò)誤的布局。不同廠商的瀏覽器(例如Chrome、Firefox等)或相同廠商不同版本的瀏覽器(例如IE6、IE7等)對(duì)CSS的解析能力有差異，并且各自還會(huì)存在特有的BUG，CSSHack就會(huì)利用這些特點(diǎn)來執(zhí)行或忽略相應(yīng)的CSS樣式。雖然CSSHack能提升兼容性，但還是盡量少用，這是因?yàn)槊看味家鄬憥锥晤~外的兼容樣式，這帶來了巨大的維護(hù)成本，并且在瀏覽器升級(jí)后，瀏覽器支持了更多的CSS特性或修正了BUG，原先的寫法可能就會(huì)失效。[考點(diǎn)]CSS與CSS3

12.

什么是盒模型?正確答案：盒模型(boxmodel，也稱為框模型)就是從盒子頂部俯視所得的一張平面圖，用于描述元素所占用的空間。有兩種盒模型，W3C盒模型和IE盒模型(IE6以下，不包含IE6以及怪異模式下的IE5.5+)，兩者不同之處是對(duì)元素尺寸的計(jì)算方式。當(dāng)用CSS給某個(gè)元素定義寬或高的時(shí)候，IE盒模型中內(nèi)容的寬或高將會(huì)包含內(nèi)邊距和邊框，而W3C盒模型并不會(huì)包含。[考點(diǎn)]視覺格式模型

13.

什么是外邊距塌陷?當(dāng)出現(xiàn)外邊距塌陷時(shí)，外邊距之間的計(jì)算方式是怎樣的?正確答案：外邊距塌陷(margincollapsing)也稱為外邊距合并，是指兩個(gè)在正常流中相鄰(兄弟或父子關(guān)系)的塊級(jí)元素的外邊距，組合在一起變成單個(gè)外邊距。不過只有上下外邊距才會(huì)有塌陷，左右外邊距不會(huì)出現(xiàn)這種問題。

元素的外邊距可以用正數(shù)或負(fù)數(shù)來指定，使用不同的組合會(huì)改變外邊距的計(jì)算方式，總共有3種組合方式，如下所列：

(1)兩個(gè)都是正數(shù)，取較大的值。

(2)兩個(gè)都是負(fù)數(shù)，取絕對(duì)值較大的值。

(3)一正一負(fù)，取兩個(gè)值相加的和。[考點(diǎn)]視覺格式模型

14.

為span元素定義下面的CSS樣式后，元素的寬和高是如何計(jì)算的?

span{

border:1pxsolid#000;

margin:10px0;

padding:10px0;

width:300px;

height:100px;

}正確答案：span是一個(gè)行內(nèi)元素，它的盒類型默認(rèn)是inline。行內(nèi)元素不能定義width和height屬性，它的寬度和高度都由其內(nèi)容和邊框決定。行內(nèi)元素也不能定義上下外邊距(margin)和上下內(nèi)邊距(padding)。雖然定義上下padding后，能使得元素變高，但元素占據(jù)的空間并沒有改變。下面用代碼解釋行內(nèi)元素的這個(gè)特點(diǎn)，效果如下圖所示，在設(shè)置上下內(nèi)邊距(padding)后，行內(nèi)元素與相鄰的塊級(jí)元素重疊在了一起。

＜div＞塊級(jí)元素＜/div＞

＜span＞行內(nèi)元素＜/span＞

塊級(jí)元素和行內(nèi)元素[考點(diǎn)]視覺格式模型

15.

將元素的display屬性設(shè)為inline-block后，能把多個(gè)這樣的元素排列在一行中，但元素之間會(huì)有間隙(如下圖所示)，如何才能去除間隙?

行內(nèi)元素之間的間隙正確答案：之所以有間隙是因?yàn)樵诰帉慔TML文檔的時(shí)候，為了便于閱讀，通常會(huì)將結(jié)構(gòu)格式化(如以下代碼所示)，格式化后的文檔不但會(huì)包含換行符，而且還會(huì)包含空白符。瀏覽器會(huì)將這些額外的字符合并成一個(gè)空白符。

＜div＞

＜spanstyle="display:inline-block"＞行內(nèi)塊元素＜/span＞

＜spanstyle="display:inline-block"＞行內(nèi)塊元素＜/span＞

＜spanstyle="display:inline-block"＞行內(nèi)塊元素＜/span＞

＜/div＞

既然間隙是由這個(gè)多余的空白符造成的，那么只要去除了這個(gè)字符，就能解決間隙的問題，解決方法如下所列。

(1)在父元素div中定義CSS屬性font-size為0。

(2)將3個(gè)span元素寫在一行中。

(3)給父元素div定義負(fù)的CSS屬性letter-spacing，減小字符之間的間距，再將span元素中的letter-spacing定義為0，清除間距。[考點(diǎn)]視覺格式模型

16.

display:none與visibility:hidden都可隱藏元素，有什么區(qū)別?正確答案：將CSS屬性display定義為none后，相當(dāng)于元素沒有了后代元素，在正常流中不占用任何空間，元素的真實(shí)尺寸將會(huì)丟失，還會(huì)導(dǎo)致瀏覽器的重排(reflow)和重繪(repaint)。而將CSS屬性visibility定義為hidden后，在正常流中還是會(huì)占用空間，仍具有元素的真實(shí)尺寸，只會(huì)導(dǎo)致瀏覽器重繪。[考點(diǎn)]視覺格式模型

17.

請(qǐng)談?wù)剬?duì)BFC的理解。正確答案：BFC(BlockFormattingContext)即塊格式化上下文，它既不是一個(gè)CSS屬性，也不是一段代碼，而是CSS2.1規(guī)范中的一個(gè)概念，決定元素的內(nèi)容如何渲染以及與其他元素的關(guān)系和交互。BFC有5條規(guī)則，具體如下所列。

(1)BFC有隔離作用，內(nèi)部元素不會(huì)受外部元素的影響(反之亦然)。

(2)一個(gè)元素只能存在于一個(gè)BFC中，如果能同時(shí)存在于兩個(gè)BFC中，那么就違反了BFC的隔離規(guī)則。

(3)BFC內(nèi)的元素按正常流排列，元素之間的間隙由元素的外邊距(margin)控制。

(4)BFC中的內(nèi)容不會(huì)與外面的浮動(dòng)元素重疊。

(5)計(jì)算BFC的高度，需要包括BFC內(nèi)浮動(dòng)子元素的高度。[考點(diǎn)]視覺格式模型

18.

什么是hasLayout?觸發(fā)hasLayout后會(huì)帶來什么樣的后果?正確答案：hasLayout是微軟的一個(gè)私有概念，它類似于BFC，能夠運(yùn)行在早期的IE6和IE7中，但在IE8及之后的IE版本中已經(jīng)被拋棄。在早期的IE瀏覽器中，元素會(huì)被分為擁有布局(haslayout)和沒有布局，擁有布局的元素可以控制自己內(nèi)容的尺寸和位置，而沒有布局的元素需要由最近的擁有布局的祖先元素代勞。IE6中的很多BUG都是由于元素沒有布局所引起的，例如浮動(dòng)元素會(huì)引起雙倍外邊距(即10px的外邊距會(huì)變成20px)?？梢酝ㄟ^定義特定的CSS屬性來觸發(fā)hasLayout，使得這個(gè)元素?fù)碛胁季?。下面所列的是能觸發(fā)hasLayout的情況：

(1)float屬性為left或right。

(2)position屬性為absolute。

(3)值不是auto的width或height屬性。

(4)值不是normal的zoom屬性。

hasLayout除了能修復(fù)IE的BUG，還能像BFC一樣，清除浮動(dòng)、解決外邊距塌陷問題。[考點(diǎn)]視覺格式模型

19.

CSS中類選擇器和ID選擇器有哪些區(qū)別?正確答案：類選擇器和ID選擇器主要有以下4個(gè)方面的區(qū)別：

(1)類選擇器