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

前端程序員面試分類真題4簡答題1.

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

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

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

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

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

2.

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

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

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

(3)輕松實(shí)現(xiàn)響應(yīng)式設(shè)計，能在不同媒體(如計算機(jī)顯示器、移動設(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.

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

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

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

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

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

5.

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

6.

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

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

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

＜p＞這是一個按鈕,用于啟動游戲＜/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是指本地存儲，sessionStorage是指會話存儲。它們都不會作為請求報文中的額外信息傳遞給服務(wù)器，并且存儲容量也相同，但在使用的時候略有不同。本地存儲永遠(yuǎn)不會過期，即使瀏覽器關(guān)閉，也還會存在，同源的本地存儲可以共享。而會話存儲只能應(yīng)用于頁面會話期間，當(dāng)關(guān)閉頁面或?yàn)g覽器的時候，會話存儲中的數(shù)據(jù)將會被自動清除。[考點(diǎn)]數(shù)據(jù)存儲

8.

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

9.

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

10.

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

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

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

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

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

11.

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

12.

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

13.

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

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

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

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

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

14.

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

span{

border:1pxsolid#000;

margin:10px0;

padding:10px0;

width:300px;

height:100px;

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

＜div＞塊級元素＜/div＞

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

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

15.

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

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

＜div＞

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

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

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

＜/div＞

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

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

(2)將3個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í)尺寸將會丟失，還會導(dǎo)致瀏覽器的重排(reflow)和重繪(repaint)。而將CSS屬性visibility定義為hidden后，在正常流中還是會占用空間，仍具有元素的真實(shí)尺寸，只會導(dǎo)致瀏覽器重繪。[考點(diǎn)]視覺格式模型

17.

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

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

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

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

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

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

18.

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

(1)float屬性為left或right。

(2)position屬性為absolute。

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

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

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

19.

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

(1)類選擇器