前端常見問題整理

時間 2019-11-07

標籤前端常見問題整理简体版

原文原文鏈接

1.前端性能優化css

　a.請求數量：合併腳本和樣式表，CSS Sprites;html

　b.請求帶寬：精簡壓縮JavaScript文件，移出重複腳本，圖片優化；前端

　c.使用CDN，使用外部JavaScript和CSS，添加Expires頭，減小DNS查找，配置ETag，使AjaX可緩存；html5

　d. 頁面結構：將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出；web

　e. 代碼校驗：避免CSS表達式，避免重定向跨域

2.在瀏覽器中輸入一個網址以後瀏覽器都作了什麼？數組

　① 瀏覽器查找該域名的 IP 地址瀏覽器

　② 瀏覽器根據解析獲得的IP地址向 web 服務器發送一個 HTTP 請求緩存

　③ 服務器收到請求並進行處理性能優化

　④ 服務器返回一個響應

　⑤ 瀏覽器對該響應進行解碼，渲染顯示

　⑥ 頁面顯示完成後，瀏覽器發送異步請求。

3.簡述盒模型

　文檔中的每一個元素被描繪爲矩形盒子。

　盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。　

4.瀏覽器本地存儲　

　在HTML5中提供了sessionStorage和localStorage.

　sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬，是會話級別的存儲。

　localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

5.減小頁面加載時間的方法

　a. 儘可能減小頁面中重複的HTTP請求數量

　b. 服務器開啓gzip壓縮

　c. css樣式的定義放置在文件頭部

　d. Javascript腳本放在文件末尾

　e. 壓縮合並Javascript、CSS代碼

　f. 使用多域名負載網頁內的多個文件、圖片

6.瀏覽器的內核有哪些？

　IE瀏覽器的內核Trident，

　Mozilla的Gecko，

　Chrome的Blink（WebKit的分支），

　Opera內核原爲Presto，現爲Blink；

7.前端的三層結構和做用

　a. 結構層：由 HTML 或 XHTML 之類的標記語言負責建立，僅負責語義的表達。解決了頁面「內容是什麼」的問題。

　b. 表示層：由CSS負責建立，解決了頁面「如何顯示內容」的問題。

　c. 行爲層：由腳本負責。解決了頁面上「內容應該如何對事件做出反應」的問題。

8.一個頁面有大量的圖片，如何提升加載速度，提升用戶體驗。

　a. 圖片懶加載，滾動到相應位置才加載圖片。

　b. 圖片預加載，若是爲幻燈片、相冊等，將當前展現圖片的前一張和後一張優先下載。

　c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，若是圖片爲css圖片的話。

　d. 若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的縮略圖，以提升用戶體驗。

9.從前端角度作好SEO

　　// SEO全稱：Search English Optimization，搜索引擎優化。自從有了搜索引擎，SEO便誕生了。

　　// 存在的意義：爲了提高網頁在搜索引擎天然搜索結果中的收錄數量以及排序位置而作的優化行爲。簡言之，就是但願百度等搜索引擎能多多咱們收錄精心製做後的網站，而且在別人訪問時網站能排在前面。

　　a.網站結構佈局優化；

　　b.代碼優化，如：　

　　<title>標題：只強調重點便可，儘可能把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘可能作到每一個頁面的<title>標題中不要設置相同的內容。

　　<meta keywords>標籤：關鍵詞，列舉出幾個頁面的重要關鍵字便可，切記過度堆砌。

　　<meta description>標籤：網頁描述，須要高度歸納網頁內容，切記不能太長，過度堆砌關鍵詞，每一個頁面也要有所不一樣。

　　<body>中的標籤：儘可能讓代碼語義化，在適當的位置使用適當的標籤，用正確的標籤作正確的事。讓閱讀源碼者和「蜘蛛」都一目瞭然。好比：h1-h6 是用於標題類的，<nav>標籤是用來設置頁面主導航的等。

　　<a>標籤：頁內連接，要加「title」屬性加以說明，讓訪客和「蜘蛛」知道。而外部連接，連接到其餘網站的，則須要加上 el="nofollow" 屬性, 告訴「蜘蛛」不要爬，由於一旦「蜘蛛」爬了外部連接以後，就不會再回來了。

10.<img>標籤上title屬性與alt屬性的區別

　alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。

　這包括那些使用原本就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

　title屬性爲設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。

11.標籤語義化的理解

　a. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

　b. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

　c. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

　d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

12.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

　<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。

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

　在混雜模式中頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

　DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

13.Doctype文檔類型

　標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

　HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

　XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

　Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，

　Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

14.HTML與XHTML的區別

　a. XHTML 元素必須被正確地嵌套。

　b. XHTML 元素必須被關閉。

　c. 標籤名必須用小寫字母。

　d. XHTML 文檔必須擁有根元素。

15.html5有哪些新特性、移除了那些元素？

　a. HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

　b. 拖拽釋放(Drag and drop) API

　c. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

　d. 音頻、視頻API(audio,video)

　e. 畫布(Canvas) API

　f. 地理(Geolocation) API

　g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失

　h. sessionStorage 的數據在頁面會話結束時會被清除

　i. 表單控件，calendar、date、time、email、url、search

　j. 新的技術webworker, websocket等

　移除的元素：

　a. 純表現的元素：basefont，big，center, s，strike，tt，u；

　b. 對可用性產生負面影響的元素：frame，frameset，noframes；

16.iframe的優缺點？

優勢：

　a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

　b. iframe無刷新文件上傳

　c. iframe跨域通訊

缺點：

　a. iframe會阻塞主頁面的Onload事件

　b. 沒法被一些搜索引擎索引到

　c. 頁面會增長服務器的http請求

　d. 會產生不少頁面，不容易管理。

17.簡述一下src與href的區別

　src用於替換當前元素；href用於在當前文檔和引用資源之間確立聯繫。

　src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置

　href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接

18.DOM操做 - 添加、移除、移動、複製、建立和查找節點

（1）建立新節點

　　createDocumentFragment() //建立一個DOM片斷

　　createElement() //建立一個具體的元素

　　createTextNode() //建立一個文本節點

（2）添加、移除、替換、插入

　　appendChild()

　　removeChild()

　　replaceChild()

　　insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

　　getElementsByTagName() //經過標籤名稱

　　getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)

　　getElementById() //經過元素Id，惟一性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。