1. label for 的用處？
label是爲input元素服務的標籤，爲其定義標記，for屬性規定label與哪個具體的表單元素綁定，對應input標籤的id屬性
示例：點擊label的時候會聚焦到input上
<!DOCTYPE html> <html lang="en"> <head> <title>Label測試</title> </head> <body> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br/> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> <form> <label for="userName">姓名</label> <input type="text" name="userName" id="userName" /> <br/> <label for="psd">密碼</label> <input type="password" name="psd" id="psd" /> </form> </body> </html>
2. img的data-src屬性及懶加載
圖片懶加載：在訪問頁面的時候，先把img元素或其他元素的背景圖片替換成一張大小爲1*1px的圖片路徑，（只用發送一次請求）當圖片出現在瀏覽器的可視區域內的時候，才設置圖片真正的路徑，讓圖片顯示出來。
創建一個自定義屬性data-src存放真正需要顯示的圖片路徑，src存放一張大小爲1*1px的圖片路徑，當頁面滾動到圖片可視區域的時候用js取該圖片的data-src賦值給src
3. HTML data-*屬性
data-*屬性用於存儲頁面或應用程序的私有自定義數據
data-*屬性賦予我們所在html元素上嵌入自定義data屬性的能力
存儲的自定義數據能夠被頁面的js利用，以創建更好的用戶體驗（不進行ajax調用或服務端數據庫查詢）
4. CSS display: block inline inline-block 區別
（1）block會獨佔一行，多個block元素會各自新起一行，默認情況下，block元素寬度自動填滿父元素寬度，block可以設置寬高屬性和margin、padding屬性
（2）inline不會獨佔一行，多個行內元素會排列在同一行，直到一行排不下才會換新的一行，寬度隨元素內容的變化而變化。設置寬高無效，可以在水平方向產生邊距效果，豎直方向不會
（3）inline-block呈現效果類似於inline但是可以設置寬高屬性
5. 三欄縱列布局，寬度一樣，怎麼實現
（1）flex實現
<!DOCTYPE html> <html lang="en"> <head> <title>三欄佈局寬度一樣</title> </head> <body> <style> body { display: flex; } div { height: 100px; } .a { flex: 1; background-color: red; } .b { flex: 1; background-color: blue; } .c { flex: 1; background-color: green; } </style> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
（2）grid實現
<!DOCTYPE html> <html lang="en"> <head> <title>三欄佈局寬度一樣</title> </head> <body> <style> body { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; } div { height: 100px; } .a { background-color: red; } .b { background-color: blue; } .c { background-color: green; } </style> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
6. JS的輸出順序
考察js的單線程特性，setTimeout屬於異步操作，for循環執行完畢前，每次遍歷產生一個setTimeout操作，被放在隊列中等待執行，直到同步過程執行結束，才執行依次setTimeout，此時i變成4了
for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //輸出：4,4,4 },0) }
如何產生1、2、3的輸出結果
（1）使用ES6的let
//將var變爲let for(let i=1; i<=3; i++){ setTimeOut(function(){ console.log(i); //輸出的結果爲1，2，3 },0); }
（2）使用立即執行函數
for(var i=1; i<=3; i++){ !function(i){ setTimeOut(function(){ console.log(i); //輸出的結果爲1，2，3 },0); }(i) }
7. 爲什麼要有虛擬DOM節點，直接操作DOM節點的問題在哪裏？
虛擬DOM：對複雜的DOM結構提供便捷的工具，最小化的進行DOM操作。
虛擬DOM不會進行重繪和迴流，在虛擬DOM中進行頻繁修改，然後一次性比較並修改真實DOM中需要修改的部分，最後在真實DOM中進行重繪和迴流，見着過多的DOM節點重繪和迴流的損耗。
真實DOM的重繪和迴流效率相當低，虛擬DOM有效地降低了大面積的對真實DOM進行重繪和迴流，因爲通過比較差異，只渲染局部。
8. Vue 的插件怎麼註冊，插件接口該怎麼設計？【X】
https://www.cnblogs.com/adouwt/p/9211003.html
9. 設計一個v-dom和渲染函數【X】
10. 輸入一個url到顯示頁面會發生什麼？
11. 怎麼使用CDN緩存加速？
12. 瀏覽器怎麼渲染html、css、js哪個會先渲染？
13. js同步代碼要loop很久，會不會阻塞後面代碼的執行？
14. d3.js和vue怎麼一起用？ 【X】
https://www.cnblogs.com/wuvkcyan/p/8975105.html