說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？ (多次問到)

1.行內元素與塊級函數可以通過修改display屬性值互轉換，行內元素display：inline，塊級元素display：block。
2.行內元素一條水平線上排列；塊級元素會在新的一行排列，各個塊級元素獨占一行，垂直向下排列，可使用左右浮動（float：left/right）讓其水平方向排列。
3.行內元素不可以設置寬高，寬度高度隨文本內容的變化而變化，但是可以設置行高（line-height），同時在設置margin、padding上下無效，左右有效；塊級元素寬高、外邊距，內填充都可隨意控制。
4.塊級元素包含行內元素和塊級元素，還可以容納內聯元素和其他元素；行內元素不能包含塊級元素，只能容納文本或者其他行內元素。
兼容性：display:inline-block;display:inline;zoom:1;

清除浮動有哪些方式？ (多次問到)

1.父級div定義height。
2.結尾處加空div標簽clear:both。
3.父級div定義overflow:hidden。
4.父級div也浮動，需要定義寬度。

Doctype作用？標準模式與兼容模式各有什么區別?

1.告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
2.標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

頁面導入樣式時，使用link和@import有什么區別？

1.link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
2.頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
3.import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

簡述一下你對HTML語義化的理解？

html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

請描述一下 cookies、sessionStorage和localstorage區別? (多次問到)

相同點：都存儲在客戶端

不同點：1.存儲大小， cookie數據大小不能超過4k，sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

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

3. 數據與服務器之間的交互方式，cookie的數據會自動傳遞到服務器，服務器端也可以寫cookie到客戶端，sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

Javascript中的定時器有哪些？他們的區別及用法是什么？

setTimeout 只執行一次
setInterval 會一直重復執行

js有哪些內置對象？ (多次問到)

數據封裝類對象：Object基礎對象、Array數組、Boolean布爾對象、Number數值對象 和 String字符串對象
其他對象：Function函數構造器、Arguments函數參數集合、Math數學對象、Date日期和時間、RegExp正則表達式對象、Error異常對象.

this對象的理解?

this總是指向函數的直接調用者（而非間接調用者）；
如果有new關鍵字，this指向new出來的那個對象；
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。

null和undefined的區別？ (多次問到)

null

• 作為函數的參數，表示該函數的參數不是對象。
• 作為對象原型鏈的終點。
• null轉換為number的結果是0。

undefined

• 變量被聲明了，但沒有賦值時，就等于undefined。
• 調用函數時，應該提供的參數沒有提供，該參數等于undefined。
• 對象沒有賦值的屬性，該屬性的值為undefined。
• 函數沒有返回值時，默認返回undefined。
• undefined轉換為number的結果是NaN。

call()和apply()的區別和作用？

call，apply都屬于Function.prototype的一個方法，每個Function對象實例(就是每個方法)都有call，apply屬性,它們的作用一樣，只是使用方式不同。
作用：call()方法和apply()方法的作用相同：改變this指向。
區別：apply()函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。如果上下文是null，則使用全局對象代替。如：function.apply(this,[1,2,3]);
call()的第一個參數是上下文，后續是實例傳入的參數序列。如：function.call(this,1,2,3);

css選擇器有哪些，選擇器的權重的優先級？

選擇器：標簽名選擇器、類選擇器、ID選擇器、后代選擇器(如divClass span)、群組選擇器(如div,span,img)
選擇器的優先級：直接在標簽中的設置樣式>ID選擇器 >類選擇器>標簽選擇器

http和 https有何區別？如何靈活使用？ (多次問到)

http是HTTP協議運行在TCP之上。所有傳輸的內容都是明文，客戶端和服務器端都無法驗證對方的身份。
https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。所有傳輸的內容都經過加密，加密采用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端可以驗證服務器端的身份，如果配置了客戶端驗證，服務器方也可以驗證客戶端的身份

px和em的區別?

相同點：px和em都是長度單位
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

get與post 通訊的區別? (多次問到)

1. Get 請求能緩存,Post 不能
2. Post 相對 Get 安全一點點,因為Get 請求都包含在 URL 里,且會被瀏覽器保存歷史紀錄,Post 不會,但是在抓包的情況下都是一樣的.
3. Post 可以通過 request body來傳輸比 Get 更多的數據,Get 沒有這個技術
4. URL有長度限制,會影響 Get 請求,但是這個長度限制是瀏覽器規定的,不是 RFC 規定的
5. Post 支持更多的編碼類型且不對數據類型限制

promise 放在try catch里面有什么結果?

1. Promise 對象的錯誤具有冒泡性質,會一直向后傳遞,直到被捕獲為止,也即是說,錯誤總會被下一個catch語句捕獲
2. 當Promise鏈中拋出一個錯誤時,錯誤信息沿著鏈路向后傳遞,直至被捕獲

網站性能優化? (多次問到)

1. 請求數量：合并腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域
2. 請求帶寬：開啟GZip，精簡JavaScript，移除重復腳本，圖像優化，將icon做成字體
3. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存
4. 頁面結構：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出
5. 代碼校驗：避免CSS表達式，避免重定向

跨域問題,誰限制的跨域,怎么解決?

1. 瀏覽器的同源策略導致了跨域
2. 用于隔離潛在惡意文件的重要安全機制
3. jsonp ,允許 script 加載第三方資源
4. nginx 反向代理(nginx 服務內部配置 Access-Control-Allow-Origin *)
5. cors 前后端協作設置請求頭部,Access-Control-Allow-Origin 等頭部信息
6. iframe 嵌套通訊,postmessage

請解釋一下 JavaScript 的同源策略?

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

<img>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為圖像的瀏覽者提供文字說明的。
title屬性為設置該屬性的元素提供建議性的信息。

v-if 和 v-show 有什么區別？

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。

vuex是什么？怎么使用？哪種功能場景使用它？

vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

請詳細說下你對vue生命周期的理解？ (多次問到)

• 創建前（beforeCreated）：vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。
• 創建后（created）：vue實例的數據對象data有了，但$el還是沒有。
• 載入前（beforeMount）：vue實例的$el和data都初始化了，但是還掛載前的虛擬dom節點，data.message沒有被替換。
• 載入后（mounted）：vue實例初始化完成，data.message成功渲染。
• 更新前（beforeUpdate）：當data發生變化時觸發。
• 更新后（updated）：當data發生變化時觸發。
• 銷毀前（beforeDestroy）：組件銷毀時觸發。
• 銷毀后（destroyed）：組件銷毀時觸發，對data的改變不會觸發周期函數。vue實例解除事件監聽和dom節點的綁定。但dom結構依舊存在

第一次頁面加載會觸發哪幾個鉤子？DOM 渲染在 哪個周期中就已經完成？

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
DOM 渲染在 mounted 中就已經完成了

vue-router是什么？它有哪些組件？

vue用來寫路由一個插件。router-link、router-view

如何阻止事件冒泡和默認事件?

阻止冒泡:
現代瀏覽器:e.stopPropagation
低版本瀏覽器:e.cancelBubble=true
阻止默認事件:
現代瀏覽器:e.preventDefult()
低版本瀏覽器:return false