前端面試必知必會的十點，你都知道嗎？
端面試必知必會的十點：
1、常見的瀏覽器內核有哪些?
IE瀏覽器的內核：Trident、
Mozilla的Gecko、
Chrome的Blink(WebKit的分支)、
Opera內核原為Presto，現為Blink
2、行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
3、簡述一下你對HTML語義化的理解?
HTML語義化是指根據內容的結構化(內容語義化)，選擇合適的標簽(代碼語義化)便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
HTML語義化的主要目的是：
1).為了在沒有css的情況下，頁面也能呈現出很好地內容結構、代碼結構
2).有利于用戶體驗
3).有利于SEO和搜索引擎建立良好的溝通。
4).方便其他設備解析以意義的方式來渲染網頁、
5).便于團隊開發和維護，增加可讀性。
4、前端頁面有哪三層構成，分別是什么?作用是什么?
最準確的網頁設計思路是把網頁分成三個層次，即：結構層、表示層、行為層。
網頁的結構層(structural layer)由 HTML 或 XHTML 之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關于如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段?！?/p>
網頁的表示層(presentation layer)由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。
網頁的行為層(behavior layer)負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。
5、HTML5有哪些新特性、移除了哪些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和HTML5?
HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;
sessionStorage 的數據在瀏覽器關閉后自動刪除
語意化更好的內容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes;
支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
6、請描述一下 cookies，sessionStorage 和 localStorage 的區別?
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨立的存儲空間。
7、CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時加載
前者無兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
8、CSS清除浮動的幾種方法(至少兩種)
使用帶clear屬性的空元素
使用CSS的overflow屬性;
使用CSS的:after偽元素;
使用鄰接元素處理。
9、談一談JavaScript作用域鏈
當執行一段JavaScript代碼(全局代碼或函數)時，JavaScript引擎會創建為其創建一個作用域又稱為執行上下文(Execution Context)，在頁面加載后會首先創建一個全局的作用域，然后每執行一個函數，會建立一個對應的作用域，從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈，鏈頭是全局作用域，鏈尾是當前函數作用域。
作用域鏈的作用是用于解析標識符，當函數被創建時(不是執行)，會將this、arguments、命名參數和該函數中的所有局部變量添加到該當前作用域中，當JavaScript需要查找變量X的時候(這個過程稱為變量解析)，它首先會從作用域鏈中的鏈尾也就是當前作用域進行查找是否有X屬性，如果沒有找到就順著作用域鏈繼續查找，直到查找到鏈頭，也就是全局作用域鏈，仍未找到該變量的話，就認為這段代碼的作用域鏈上不存在x變量，并拋出一個引用錯誤(ReferenceError)的異常。
10、如何理解JavaScript原型鏈
JavaScript中的每個對象都有一個prototype屬性，我們稱之為原型，而原型的值也是一個對象，因此它也有自己的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值為null。
原型鏈的作用是用于對象繼承，函數A的原型屬性(prototype property)是一個對象，當這個函數被用作構造函數來創建實例時，該函數的原型屬性將被作為原型賦值給所有對象實例，比如我們新建一個數組，數組的方法便從數組的原型上繼承而來。
當訪問對象的一個屬性時, 首先查找對象本身, 找到則返回; 若未找到, 則繼續查找其原型對象的屬性(如果還找不到實際上還會沿著原型鏈向上查找, 直至到根). 只要沒有被覆蓋的話, 對象原型的屬性就能在所有的實例中找到，若整個原型鏈未找到則返回undefined。
前端需要注意哪些SEO
- 合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可
- 語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁
- 重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取
- 重要內容不要用js輸出：爬蟲不會執行js獲取內容
- 少用iframe：搜索引擎不會抓取iframe中的內容
- 非裝飾性圖片必須加alt
- 提高網站速度：網站速度是搜索引擎排序的一個重要指標
2 <img>的title和alt有什么區別
- 通常當鼠標滑動到元素上的時候顯示
- alt是<img>的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。
3 HTTP的幾種請求方法用途
- GET方法發送一個請求來取得服務器上的某一資源
- POST方法向URL指定的資源提交數據或附加新的數據
- PUT方法跟POST方法很像，也是想服務器提交數據。但是，它們之間有不同。PUT指定了資源在服務器上的位置，而POST沒有
- HEAD方法只請求頁面的首部
- DELETE方法刪除服務器上的某資源
- OPTIONS方法它用于獲取當前URL所支持的方法。如果請求成功，會有一個Allow的頭包含類似“GET,POST”這樣的信息
- TRACE方法TRACE方法被用于激發一個遠程的，應用層的請求消息回路
- CONNECT方法把請求連接轉換到透明的TCP/IP通道
4 從瀏覽器地址欄輸入url到顯示頁面的步驟
基礎版本
- 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
- 服務器交給后臺處理完成后返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
- 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構（如HTML的DOM）；
- 載入解析到的資源文件，渲染頁面，完成。
詳細版
- 在瀏覽器地址欄輸入URL
- 瀏覽器查看緩存，如果請求資源在緩存中并且新鮮，跳轉到轉碼步驟如果資源未緩存，發起新請求如果已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與服務器進行驗證。檢驗新鮮通常有兩個HTTP頭進行控制Expires和Cache-Control：HTTP1.0提供Expires，值為一個絕對時間表示緩存新鮮日期HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最大新鮮時間
- 瀏覽器解析URL獲取協議，主機，端口，path
- 瀏覽器組裝一個HTTP（GET）請求報文
- 瀏覽器獲取主機ip地址，過程如下：瀏覽器緩存本機緩存hosts文件路由器緩存ISP DNS緩存DNS遞歸查詢（可能存在負載均衡導致每次IP不一樣）
- 打開一個socket與目標IP地址，端口建立TCP鏈接，三次握手如下：客戶端發送一個TCP的SYN=1，Seq=X的包到服務器端口服務器發回SYN=1， ACK=X+1， Seq=Y的響應包客戶端發送ACK=Y+1， Seq=Z
- TCP鏈接建立后發送HTTP請求
- 服務器接受請求并解析，將請求轉發到服務程序，如虛擬主機使用HTTP Host頭部判斷請求的服務程序
- 服務器檢查HTTP請求頭是否包含緩存驗證信息如果驗證緩存新鮮，返回304等對應狀態碼
- 處理程序讀取完整請求并準備HTTP響應，可能需要查詢數據庫等操作
- 服務器將響應報文通過TCP連接發送回瀏覽器
- 瀏覽器接收HTTP響應，然后根據情況選擇關閉TCP連接或者保留重用，關閉TCP連接的四次握手如下：主動方發送Fin=1， Ack=Z， Seq=X報文被動方發送ACK=X+1， Seq=Z報文被動方發送Fin=1， ACK=X， Seq=Y報文主動方發送ACK=Y， Seq=X報文
- 瀏覽器檢查響應狀態嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同
- 如果資源可緩存，進行緩存
- 對響應進行解碼（例如gzip壓縮）
- 根據資源類型決定如何處理（假設資源為HTML文檔）
- 解析HTML文檔，構件DOM樹，下載資源，構造CSSOM樹，執行js腳本，這些操作沒有嚴格的先后順序，以下分別解釋
- 構建DOM樹：Tokenizing：根據HTML規范將字符流解析為標記Lexing：詞法分析將標記轉換為對象并定義屬性和規則DOM construction：根據HTML標記關系將對象組成DOM樹
- 解析過程中遇到圖片、樣式表、js文件，啟動下載
- 構建CSSOM樹：Tokenizing：字符流轉換為標記流Node：根據標記創建節點CSSOM：節點創建CSSOM樹
- 根據DOM樹和CSSOM樹構建渲染樹:從DOM樹的根節點遍歷所有可見節點，不可見節點包括：1）script,meta這樣本身不可見的標簽。2)被css隱藏的節點，如display: none對每一個可見節點，找到恰當的CSSOM規則并應用發布可視節點的內容和計算樣式
- js解析如下：瀏覽器創建Document對象并解析HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate為loadingHTML解析器遇到沒有async和defer的script時，將他們添加到文檔中，然后執行行內或外部腳本。這些腳本會同步執行，并且在腳本下載和執行時解析器會暫停。這樣就可以用document.write()把文本插入到輸入流中。同步腳本經常簡單定義函數和注冊事件處理程序，他們可以遍歷和操作script和他們之前的文檔內容當解析器遇到設置了async屬性的script時，開始下載腳本并繼續解析文檔。腳本會在它下載完成后盡快執行，但是解析器不會停下來等它下載。異步腳本禁止使用document.write()，它們可以訪問自己script和之前的文檔元素當文檔完成解析，document.readState變成interactive所有defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用document.write()瀏覽器在Document對象上觸發DOMContentLoaded事件此時文檔完全解析完成，瀏覽器可能還在等待如圖片等內容加載，等這些內容完成載入并且所有異步腳本完成載入和執行，document.readState變為complete，window觸發load事件
- 顯示頁面（HTML解析過程中會逐步顯示頁面）
詳細簡版
- 從瀏覽器接收url到開啟網絡請求線程（這一部分可以展開瀏覽器的機制以及進程與線程之間的關系）
- 開啟網絡線程到發出一個完整的HTTP請求（這一部分涉及到dns查詢，TCP/IP請求，五層因特網協議棧等知識）
- 從服務器接收到請求到對應后臺接收到請求（這一部分可能涉及到負載均衡，安全攔截以及后臺內部的處理等等）
- 后臺和前臺的HTTP交互（這一部分包括HTTP頭部、響應碼、報文結構、cookie等知識，可以提下靜態資源的cookie優化，以及編碼解碼，如gzip壓縮等）
- 單獨拎出來的緩存問題，HTTP的緩存（這部分包括http緩存頭部，ETag，catch-control等）
- 瀏覽器接收到HTTP數據包后的解析流程（解析html-詞法分析然后解析成dom樹、解析css生成css規則樹、合并成render樹，然后layout、painting渲染、復合圖層的合成、GPU繪制、外鏈資源的處理、loaded和DOMContentLoaded等）
- CSS的可視化格式模型（元素的渲染規則，如包含塊，控制框，BFC，IFC等概念）
- JS引擎解析過程（JS的解釋階段，預處理階段，執行階段生成執行上下文，VO，作用域鏈、回收機制等等）
- 其它（可以拓展不同的知識模塊，如跨域，web安全，hybrid模式等等內容）
#5 如何進行網站性能優化
- content方面減少HTTP請求：合并文件、CSS精靈、inline Image減少DNS查詢：DNS緩存、將資源分布到恰當數量的主機名減少DOM元素數量
- Server方面使用CDN配置ETag對組件使用Gzip壓縮
- Cookie方面減小cookie大小
- css方面將樣式表放到頁面頂部不使用CSS表達式使用<link>不使用@import
- Javascript方面將腳本放到頁面底部將javascript和css從外部引入壓縮javascript和css刪除不需要的腳本減少DOM訪問
- 圖片方面優化圖片：根據實際顏色需要選擇色深、壓縮優化css精靈不要在HTML中拉伸圖片
你有用過哪些前端性能優化的方法？
- 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器。
- 前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數
- 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
- 當需要設置的樣式很多時設置className而不是直接操作style
- 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作
- 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)
- 圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳
- 避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢
談談性能優化問題
- 代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器
- 緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減少DNS查找等
- 請求數量：合并樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載
- 請求帶寬：壓縮文件，開啟GZIP
前端性能優化最佳實踐？
- 性能評級工具（PageSpeed 或 YSlow）
- 合理設置 HTTP 緩存：Expires 與 Cache-control
- 靜態資源打包，開啟 Gzip 壓縮（節省響應流量）
- CSS3 模擬圖像，圖標base64（降低請求數）
- 模塊延遲(defer)加載/異步(async)加載
- Cookie 隔離（節省請求流量）
- localStorage（本地存儲）
- 使用 CDN 加速（訪問最近服務器）
- 啟用 HTTP/2（多路復用，并行加載）
- 前端自動化（gulp/webpack）
6 HTTP狀態碼及其含義
- 1XX：信息狀態碼100 Continue 繼續，一般在發送post請求時，已發送了http header之后服務端將返回此信息，表示確認，之后發送具體參數信息
- 2XX：成功狀態碼200 OK 正常返回信息201 Created 請求成功并且服務器創建了新的資源202 Accepted 服務器已接受請求，但尚未處理
- 3XX：重定向301 Moved Permanently 請求的網頁已永久移動到新位置。302 Found 臨時性重定向。303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。304 Not Modified 自從上次請求后，請求的網頁未修改過。
- 4XX：客戶端錯誤400 Bad Request 服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。401 Unauthorized 請求未授權。403 Forbidden 禁止訪問。404 Not Found 找不到如何與 URI 相匹配的資源。
- 5XX: 服務器錯誤500 Internal Server Error 最常見的服務器端錯誤。503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。
7 語義化的理解
- 用正確的標簽做正確的事情！
- HTML語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；
- 在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。
- 搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。
- 使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解
8 介紹一下你對瀏覽器內核的理解？
- 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
- 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核
- JS引擎則：解析和執行javascript來實現網頁的動態效果
- 最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎
常見的瀏覽器內核有哪些
- Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
- Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
- Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
- Webkit內核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]
9 html5有哪些新特性、移除了那些元素？
- HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加新增選擇器 document.querySelector、document.querySelectorAll拖拽釋放(Drag and drop) API媒體播放的 video 和 audio本地存儲 localStorage 和 sessionStorage離線應用 manifest桌面通知 Notifications語意化標簽 article、footer、header、nav、section增強表單控件 calendar、date、time、email、url、search地理位置 Geolocation多任務 webworker全雙工通信協議 websocket歷史管理 history跨域資源共享(CORS) Access-Control-Allow-Origin頁面可見性改變事件 visibilitychange跨窗口通信 PostMessageForm Data 對象繪畫 canvas
- 移除的元素：純表現的元素：basefont、big、center、font、 s、strike、tt、u對可用性產生負面影響的元素：frame、frameset、noframes
- 支持HTML5新標簽：IE8/IE7/IE6支持通過document.createElement方法產生的標簽可以利用這一特性讓這些瀏覽器支持HTML5新標簽瀏覽器支持新標簽后，還需要添加標簽默認的樣式
- 當然也可以直接使用成熟的框架、比如html5shim
如何區分 HTML 和 HTML5
10 HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
- 在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件
- 原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示
- 如何使用：頁面頭部像下面一樣加入一個manifest的屬性；在cache.manifest文件的編寫離線存儲的資源在離線狀態時，操作window.applicationCache進行需求實現
tring
基本方法
charAt():獲取指定位置處字符;
charCodeAt():獲取指定位置處字符的ASCII碼;
str[0]:HTML5，IE8+支持 和charAt()等效;
字符串操作方法
concat():拼接字符串，等效于+，+更常用;
slice():截取數組，從start位置開始，截取到end位置，end取不到;
substring():截取字符串，從start位置開始，截取到end位置， end取不到;
substr():從start位置開始，截取length個字符;
位置方法
indexOf():返回指定內容在元字符串中的位置;
lastIndexOf():從后往前找，只找第一個匹配的;
去除空白
trim():只能去除字符串前后的空白;
大小寫轉換方法
to(Locale)UpperCase():轉換大寫;
to(Locale)LowerCase():轉換小寫;
其它
search():方法執行正則表達式和String 對象之間的一個搜索匹配，如果匹配成功，則 search() 返回正則表達式在字符串中首次匹配項的索引;否則，返回 -1;
replace():字符串替換，支持正則表達式（/模式/gi g全局替換 i忽略大小寫）;
split():字符串切割，支持正則表達式（/模式/gi g全局替換 i忽略大小寫）;
