你不可錯過的前端面試題(二)

時間 2019-11-07

標籤不可錯過端面試題简体版

原文原文鏈接

1、前端須要注意的SEO

（1）合理的 title、description 和 keywords，他們的搜索權重逐個減少
title 強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面 title 要有所不一樣；description 把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面 description 有所不一樣；keywords 列舉出重要關鍵詞便可。javascript

（2）語義化的 HTML 代碼，符合 W3C 規範
語義化代碼讓搜索引擎容易理解網頁。css

（3）重要內容 HTML 代碼放在最前
搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取。html

（4）重要內容不要用JavaScript輸出
爬蟲不會執行JavaScript獲取內容。前端

（5）少用iframe
搜索引擎不會抓取 <iframe>（內聯框架）中的內容。java

（6）非裝飾性圖片必須加 altgit

（7）提升網站速度
網站速度是搜索引擎排序的一個重要指標。github

2、網頁驗證碼的做用

（1）區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水。web

（2）有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。canvas

3、網頁中使用字體

在網頁中應該使用偶數字體，偶數字號相對奇數字號更容易和 web 設計的其餘部分構成比例關係。

4、瀏覽器內核

1. 兩部分

渲染引擎(layout engineer或Rendering Engine)和JS引擎。

2. 渲染引擎

負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。segmentfault

3. JS引擎

解析和執行JavaScript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

5、瀏覽器標準模式和怪異模式的區別

（1）「標準模式」(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染。

（2）「怪異模式」(Quirks Mode)瀏覽器爲兼容很早以前針對舊版本瀏覽器設計、並未嚴格遵循 W3C 標準的網頁而產生的一種頁面渲染模式。

（3）標準模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。

（4）怪異模式，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 <!doctype>不存在或格式不正確會致使文檔以怪異模式呈現。

6、漸進加強

1. 概念

漸進加強是指在WEB設計時強調可訪問性、語義化HTML標籤、外部樣式表和腳本。保證全部人都能訪問頁面的基本內容和功能同時爲高級瀏覽器和高帶寬用戶提供更好的用戶體驗。

2. 原則

（1）全部瀏覽器都必須能訪問基本內容

（2）全部瀏覽器都必須能使用基本功能

（3）全部內容都包含在語義化標籤中

（4）經過外部CSS提供加強的佈局

（5）經過非侵入式、外部JavaScript提供加強功能

7、link和@import的區別

（1）link是XHTML標籤，無兼容問題；而@import只在 IE5 以上才能識別。

（2）頁面被加載的時，link會同時被加載；而@import引用的CSS會等到頁面被加載完再加載。

（3）link方式的樣式的權重高於 @import的權重。

（4）link能夠經過rel="alternate stylesheet"指定候選樣式。

（5）@import必須在樣式規則以前，能夠在CSS文件中引用其餘文件。

總結

link優於@import

8、PNG、JPG和GIF區別

PNG	JPG	GIF
PNG8和truecolor PNG，PNG8顏色上限爲256	顏色上限爲256	8位像素，256色
文件小	有損壓縮，可控制壓縮質量	無損壓縮
支持alpha透明度	不支持透明	支持boolean透明
無動畫		支持簡單動畫
適合背景、圖標、按鈕	適合照片

9、Canvas和SVG的區別

（1）canvas輸出的是一整幅畫布。

（2）svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。

（3）canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒。

（4）svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。

10、ssessionStorage、localStorage和cookie

1. 概念

（1）sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據。

（2）sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

（3）sessionStorage 的概念很特別，引入了一個「瀏覽器窗口」的概念。sessionStorage 是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage 即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage 對象也是不一樣的。

（4）cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密），cookie數據始終在同源的http請求中攜帶（即便不須要），也會在瀏覽器和服務器間來回傳遞。

2. 數據發送

（1）sessionStorage和localStorage不會自動把數據發送到服務器端，僅在本地保存。

（2）cookies會把數據發送到服務器端。

3. 存儲大小

（1）cookie數據大小不能超過4k。

（2）sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

4. 有期時間

（1）cookie 設置的過時時間以前一直有效，即便窗口或瀏覽器關閉。

（2）sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

（3）localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據。

11、XHTML和HTML的對比

1. XHTML

（1） xhtml 語法要求嚴格，區分大小寫。

（2）元素必須被正確嵌套，必須有根元素。

（3）每一個 DOM 必需要閉合；空標籤也必須閉合,例如<img />, <br/>, <input />等。

（4）屬性值使用雙引號。一旦遇到錯誤，馬上中止解析，並顯示錯誤信息。

2. HTML

可兼容各大瀏覽器、手機以及 PDA，而且瀏覽器也能快速正確地編譯網頁。

12、<!doctype>的特色

（1）<!doctype>聲明必須處於HTML文檔的頭部，在<html>標籤以前，HTML5中不區分大小寫。

（2）<!doctype>聲明不是一個HTML標籤，是一個用於告訴瀏覽器當前HTMl版本的指令。

（3）現代瀏覽器的html佈局引擎經過檢查doctype決定使用兼容模式仍是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。

十3、HTML5 <!DOCTYPE HTML>標籤

（1）在HTML4.01中<!doctype>聲明指向一個DTD，因爲HTML4.01基於SGML，因此DTD指定了標記規則以保證瀏覽器正確渲染內容。

（2）HTML5不基於SGML，因此不用指定DTD，可是須要<!doctype>來規範瀏覽器的行爲。

十4、HTML5的新特性

1. 增長的元素

（1）繪畫 canvas

（2）用於媒介回放的 video 和 audio 元素

（3）本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage 的數據在瀏覽器關閉後自動刪除

（4）語意化更好的內容元素，好比 article、footer、header、nav、section

（5）表單控件，calendar、date、time、email、url、search

（6）新技術，webworker, websocket, Geolocation

2. 移除的元素

（1）純表現的元素，basefont，big，center，font, s，strike，tt，u

（2）對可用性產生負面影響的元素，frame，frameset，noframes

十5、HTML全局屬性(global attribute)

全局屬性是全部HTML元素共有的屬性; 它們能夠用於全部元素，即便屬性可能對某些元素不起做用。

屬性	描述
accesskey	提供了一種使用快捷鍵訪問當前元素的途徑
class	爲元素設置類標識，多個類名用空格分開，class容許css和javascript經過class選擇器或者相似下面的DOM方法來選擇和訪問element
contenteditable	指定元素內容是否可編輯
contextmenu	自定義鼠標右鍵彈出菜單內容
data-*	爲元素增長自定義屬性
dir	設置元素文本方向
draggable	設置元素是否可拖拽
dropzone	設置元素拖放類型： copy, move, link
hidden	這個布爾（Boolean）屬性表示element尚未或是再也不存在。樣式上會致使元素不顯示，可是不能用這個屬性實現樣式效果
id	惟一的標識，它在整個document裏應該是惟一的。當須要連接（使用片斷標識符，錨點），執行腳本，控制樣式時，能夠用它來定位識別元素。
lang	元素內容的的語言
spellcheck	是否啓動拼寫和語法檢查
style	行內css樣式
tabindex	設置元素能夠得到焦點，經過tab能夠導航
title	元素相關的建議信息
translate	元素和子孫節點內容是否須要本地化

參考文章全局屬性-HTML（超文本標記語言）| MDN

十6、<img>的title和alt區別

（1）title 是 global attributes（全局屬性）之一，用於爲元素提供附加的 advisory information。一般當鼠標滑動到元素上的時候顯示。

（2）alt 是 <img> 的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提升圖片可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

十7、初始化CSS樣式

（1）瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

（2）初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，力求影響最小的狀況下初始化CSS樣式。

十8、CSS合併方法

（1）避免使用@import引入多個CSS文件。

（2）可使用CSS工具將CSS合併爲一個CSS文件，例如使用 Sass、Compass 等。

十9、CSS Sprite

1. 概念

將多個小圖片拼接到一個圖片中。經過 background-position 和元素尺寸調節須要顯示的背景圖案。

2. 優勢

（1）減小HTTP請求數，極大地提升頁面加載速度

（2）增長圖片信息重複度，提升壓縮比，減小圖片大小

（3）更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

3. 缺點

（1）圖片合併麻煩

（2）維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式。

二10、display: none;和visibility: hidden;

1. 聯繫

他們都能讓元素不可見。

2. 區別

display:none;	visibility: hidden;
會讓元素徹底從渲染樹消失，渲染時不佔據任何空間	不會讓元素從渲染樹消失，渲染時元素繼續佔據空間，只是內容不可見
非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；	繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
修改常規流中元素的display一般會形成文檔重排。	修改visibility屬性只會形成本元素的重繪。
讀屏器不會讀取display: none;元素內容；	會讀取visibility: hidden;元素內容

二11、行內元素、塊級元素和空元素

行內元素	塊級元素	空元素
a	div	meta
span	h1-h6	link
img	p	img
b	ul-li	input
strong	dl-dt-dd	br
input		hr
select

二12、行內元素浮動

（1）行內元素浮動後，不會成爲塊級元素，可是能夠設置寬和高。

（1）行內元素轉換爲塊級元素，佔一行，直接設置 display:block; 但若元素設置浮動後，再設置 display:block;則就不會佔一行。

二十3、盒模型

（1）在怪異模式下，盒模型爲IE盒模型而非標準模式下的W3C 盒模型，在 IE 盒模型中

box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom

（2）而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。