前言

前端的面試和學(xué)習(xí)都是不可或缺的事情，在這里收集一些高頻面試題，供自己現(xiàn)在和以后查閱和查缺補(bǔ)漏的同時(shí)，也希望對小伙伴有所幫助。

HTML

1、HTML語義化的理解

1、用正確的標(biāo)簽做正確的事情！

2、HTML語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；

3、在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。

4、搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。

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

2、HTML5有哪些新特性、移除了那些元素？

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

• 繪畫 canvas
• 用于媒介回放的 video和audio 元素
• 本地離線存儲(chǔ)localStorage長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
• <sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
• 語意化更好的內(nèi)容元素，比如article、footer、header、nav、section
• 表單控件，calendar、date、time、email、url、search
• 新的技術(shù)<webworker、 websocket、 Geolocation

移除的元素：

• 純表現(xiàn)的元素：basefont、big、center、font、 s、strike、tt、u
• 對可用性產(chǎn)生負(fù)面影響的元素：frame、frameset、noframes

支持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)然也可以直接使用成熟的框架、比如html5shim

3、<img>的title和alt有什么區(qū)別

• alt 是圖片加載失敗時(shí)，顯示在網(wǎng)頁上的替代文字；
• title 是鼠標(biāo)放上面時(shí)顯示的文字。
• alt是img必要的屬性，而title不是。

4、從瀏覽器地址欄輸入url到顯示頁面的步驟

• 瀏覽器根據(jù)請求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請求；
• 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

5、HTML全局屬性(global attribute)有哪些

• class:為元素設(shè)置類標(biāo)識(shí)
• data-*: 為元素增加自定義屬性
• draggable: 設(shè)置元素是否可拖拽
• id: 元素id，文檔內(nèi)唯一
• lang: 元素內(nèi)容的的語言
• style: 行內(nèi)css樣式
• title: 元素相關(guān)的建議信息

6、介紹一下你對瀏覽器內(nèi)核的理解？

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

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

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

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

7、請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）

cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會(huì)在瀏覽器和服務(wù)器間來回傳遞

sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

存儲(chǔ)大小：

cookie數(shù)據(jù)大小不能超過4k
sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大
有期時(shí)間：

localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除
cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

8、行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有那些？行內(nèi)元素和塊級元素有什么區(qū)別？

• 行內(nèi)元素有：a b span img input select strong
• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行內(nèi)元素不可以設(shè)置寬高，不獨(dú)占一行
• 塊級元素可以設(shè)置寬高，獨(dú)占一行

9、如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

• svg
• border-radius
• 純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
• 10、HTTP狀態(tài)碼及其含義
  
• 1XX：信息狀態(tài)碼
• 2XX：成功狀態(tài)碼
• 3XX：重定向
• 4XX：客戶端錯(cuò)誤
• 5XX: 服務(wù)器錯(cuò)誤

11、你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同嗎

• 漸進(jìn)增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
• 優(yōu)雅降級：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。

12、渲染優(yōu)化

1、使用CSS3代碼代替JS動(dòng)畫（盡可能避免重繪重排以及回流）

2、頁面中空的 href 和 src 會(huì)阻塞頁面其他資源的加載 (阻塞下載進(jìn)程)

3、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能

4、當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style

5、少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作

6、圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳

13、如何進(jìn)行網(wǎng)站性能優(yōu)化

1、減少HTTP請求：合并文件、CSS精靈、inline Image

2、將樣式表放到頁面頂部

3、不使用CSS表達(dá)式

4、使用<link>不使用@import

5、將腳本放到頁面底部

6、將javascript和css從外部引入

7、壓縮javascript和css

CSS

1、盒子模型

盒模型分為兩類: IE盒模型和標(biāo)準(zhǔn)盒模型。 兩者的區(qū)別在于:

• IE盒模型的width/height = content + border + padding
• 標(biāo)準(zhǔn)盒模型的width/height = content

2、CSS優(yōu)先級算法如何計(jì)算？

• 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)
• 載入樣式以最后載入的定位為準(zhǔn)
• 優(yōu)先級為: !important > id > class > tag; !important 比 內(nèi)聯(lián)優(yōu)先級高

3、CSS3有哪些新特性

• 新增各種css選擇器
• 圓角 border-radius
• 多列布局
• 陰影和反射
• 文字特效text-shadow
• 線性漸變
• 旋轉(zhuǎn)transform

CSS3新增偽類有那些？

1. :after 在元素之前添加內(nèi)容,也可以用來做清除浮動(dòng)。
2. :before 在元素之后添加內(nèi)容。
3. :enabled 已啟用的表單元素。
4. :disabled 已禁用的表單元素。
5. :checked 單選框或復(fù)選框被選中。

4、CSS常用選擇器

• 通配符：*
• ID選擇器：#ID
• 類選擇器：.class
• 元素選擇器：p、a    等
• 后代選擇器：p span、div a   等
• 偽類選擇器：a:hover 等
• 屬性選擇器：input[type="text"]  等

5、link與@import的區(qū)別

• link是HTML方式， @import是CSS方式
• link最大限度支持并行下載，@import過多嵌套導(dǎo)致串行下載，出現(xiàn)FOUC(文檔樣式短暫失效)
• link可以通過rel="alternate stylesheet"指定候選樣式
• 瀏覽器對link支持早于@import，可以使用@import對老瀏覽器隱藏樣式
• @import必須在樣式規(guī)則之前，可以在css文件中引用其他文件
• 總體來說：link優(yōu)于@import

6、如何創(chuàng)建塊級格式化上下文(block formatting context),BFC有什么用

什么是BFC?

BFC格式化上下文，它是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素和外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響

如何產(chǎn)生BFC?

• display: inline-block
• position: absolute/fixed

BFC作用

BFC最大的一個(gè)作用就是：在頁面上有一個(gè)獨(dú)立隔離容器，容器內(nèi)的元素和容器外的元素布局不會(huì)相互影響

解決上外邊距重疊;重疊的兩個(gè)box都開啟bfc;
解決浮動(dòng)引起高度塌陷;容器盒子開啟bfc
解決文字環(huán)繞圖片;左邊圖片div,右邊文字容器p,將p容器開啟bfc

7、絕對定位和相對定位的區(qū)別

position: absolute

絕對定位：是相對于元素最近的已定位的祖先元素

position: relative

相對定位：相對定位是相對于元素在文檔中的初始位置

8、display:inline-block 什么時(shí)候不會(huì)顯示間隙？

• 移除空格
• 使用margin負(fù)值
• 使用font-size:0
• letter-spacing
• word-spacing

9、清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)

• 父級div定義height
• 結(jié)尾處加空div標(biāo)簽clear:both
• 父級div定義偽類:after和zoom
• 父級div定義overflow:hidden
• 父級div也浮動(dòng)，需要定義寬度
• 結(jié)尾處加br標(biāo)簽clear:both
• 比較好的是第3種方式，好多網(wǎng)站都這么用

10、為什么要初始化CSS樣式?

因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。

當(dāng)然，初始化樣式會(huì)對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

11、自適應(yīng)布局

思路：

• 左側(cè)浮動(dòng)或者絕對定位，然后右側(cè)margin撐開
• 使<div>包含，然后靠負(fù)margin形成bfc
• 使用flex

12、position有哪些值？有什么作用？

• static。默認(rèn)值，不脫離文檔流，top，right，bottom，left等屬性不生效。
• relative。不脫離文檔流，依據(jù)自身位置進(jìn)行偏離，當(dāng)子元素設(shè)置absolute，將依據(jù)它進(jìn)行偏離。
• absolute。脫離文檔流，依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。
• fixed。通過瀏覽器窗口進(jìn)行定位，出現(xiàn)滾動(dòng)條的時(shí)候，不會(huì)隨之滾動(dòng)。

13、垂直居中有哪些方法？

• 單行文本的話可以使用height和line-height設(shè)置同一高度。
• position+margin：設(shè)置父元素:position: relative;，子元素height: 100px;
• position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
• position+transform：設(shè)置父元素position:relative,子元素：position: *
• absolute;top: 50%;transform: translate(0, -50%);（不定高）
• 百搭flex布局(ie10+)，設(shè)置父元素display:flex;align-items: center;（不定高）

14、水平居中的方法

• 元素為行內(nèi)元素，設(shè)置父元素text-align:center
• 如果元素寬度固定，可以設(shè)置左右margin為auto;
• 如果元素為絕對定位，設(shè)置父元素position為relative，元素設(shè)left:0;right:0;margin:auto;
• 使用flex-box布局，指定justify-content屬性為center
• display設(shè)置為tabel-ceil

15、Flex布局

display: flex  //設(shè)置Flex模式
flex-direction: column  //決定元素是橫排還是豎著排
flex-wrap: wrap     //決定元素?fù)Q行格式
justify-content: space-between  //同一排下對齊方式，空格如何隔開各個(gè)元素
align-items: center     //同一排下元素如何對齊
align-content: space-between    //多行對齊方式

16、stylus/sass/less區(qū)別

• 均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性
• Scss和LESS語法較為嚴(yán)謹(jǐn)，LESS要求一定要使用大括號(hào)“{}”，Scss和Stylus可以通過縮進(jìn)表示層次與嵌套關(guān)系
• Scss無全局變量的概念，LESS和Stylus有類似于其它語言的作用域概念
• Sass是基于Ruby語言的，而LESS和Stylus可以基于NodeJS NPM下載相應(yīng)庫后進(jìn)行編譯；

20、知道css有個(gè)content屬性嗎？有什么作用？有什么應(yīng)用？

css的content屬性專門應(yīng)用在 before/after偽元素上，用于來插入生成內(nèi)容。最常見的應(yīng)用是利用偽類清除浮動(dòng)。

21、CSS在性能優(yōu)化方面的實(shí)踐

• css壓縮與合并、Gzip壓縮
• css文件放在head里、不要用@import
• 盡量用縮寫、避免用濾鏡、合理使用選擇器

22、CSS3動(dòng)畫（簡單動(dòng)畫的實(shí)現(xiàn)，如旋轉(zhuǎn)等）

• 依靠CSS3中提出的三個(gè)屬性：transition、transform、animation
• transition：定義了元素在變化過程中是怎么樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定義元素的變化結(jié)果，包含rotate、scale、skew、translate。
• animation：動(dòng)畫定義了動(dòng)作的每一幀（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論