前言

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

HTML

1、HTML語義化的理解

1、用正確的標簽做正確的事情！

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

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

4、搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。

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

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

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

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

移除的元素：

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

支持HTML5新標簽：

• IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽
• 可以利用這一特性讓這些瀏覽器支持HTML5新標簽
• 瀏覽器支持新標簽后，還需要添加標簽默認的樣式
• 當然也可以直接使用成熟的框架、比如html5shim

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

存儲大?。?/p>

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

localStorage 存儲持久數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關閉后自動刪除
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

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)元素不可以設置寬高，不獨占一行
• 塊級元素可以設置寬高，獨占一行

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

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

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

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

12、渲染優(yōu)化

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

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

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

4、當需要設置的樣式很多時設置className而不是直接操作style

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

6、圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳

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

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

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

3、不使用CSS表達式

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

5、將腳本放到頁面底部

6、將javascript和css從外部引入

7、壓縮javascript和css

CSS

1、盒子模型

盒模型分為兩類: IE盒模型和標準盒模型。 兩者的區(qū)別在于:

• IE盒模型的width/height = content + border + padding
• 標準盒模型的width/height = content

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

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

3、CSS3有哪些新特性

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

CSS3新增偽類有那些？

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

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過多嵌套導致串行下載，出現(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格式化上下文，它是一個獨立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素和外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響

如何產(chǎn)生BFC?

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

BFC作用

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

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

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

position: absolute

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

position: relative

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

8、display:inline-block 什么時候不會顯示間隙？

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

9、清除浮動的幾種方式，各自的優(yōu)缺點

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

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

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

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

11、自適應布局

思路：

• 左側浮動或者絕對定位，然后右側margin撐開
• 使<div>包含，然后靠負margin形成bfc
• 使用flex

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

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

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

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

14、水平居中的方法

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

15、Flex布局

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

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

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

20、知道css有個content屬性嗎？有什么作用？有什么應用？

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

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

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

22、CSS3動畫（簡單動畫的實現(xiàn)，如旋轉等）

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

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

最新評論