【黃子涵】全網最全前端面試題

阿新 • • 發佈：2021-12-05

【黃子涵】全網最全Web前端題目

HTML

HTML基礎

HTML元素和高階功能

HTML元素基礎

應用CSS樣式

嵌入JavaScript

meta元素

1. HTML英文全寫是什麼？

2. HTML文件中註釋的寫法？

3. <!DOCTYPE>這個元素告訴瀏覽器哪兩件事或者doctype(文件型別) 的作用是什麼？

瀏覽器標準模式（standards mode）、幾乎標準模式（almost standards mode）和怪異模式（quirks mode）之間的區別是什麼？
HTML 、XML 和 XHTML 有什麼區別？
如果頁面使用 ‘application/xhtml+xml’ 會有什麼問題嗎？
如果網頁內容需要支援多語言，你會怎麼做？
在設計和開發多語言網站時，有哪些問題你必須要考慮？
使用 data- 屬性的好處是什麼？
如果把 HTML5 看作做一個開放平臺，那它的構建模組有哪些？
請描述 cookies、sessionStorage 和 localStorage 的區別。
請解釋 <script>、<script async> 和 <script defer> 的區別。
為什麼通常推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script>

放置在 </body> 之前？你知道有哪些例外嗎？
什麼是漸進式渲染 (progressive rendering)？
你用過哪些不同的 HTML 模板語言？
網頁抽象成三部分（HTML、CSS和JavaScript）後的優點有哪些？
HTML5不再支援哪些HTML元素？
HTML5的DTD是怎麼樣的？
哪個語義化的元素最適合定義標題？
哪個語義化的元素比較適合表示側邊欄？
字元“>”的HTML實體是怎樣的？
HTML元素的布林屬性有哪些？
虛元素有哪些？
替換元素有哪些？
什麼是內聯樣式？有哪些優缺點？
meta元素中的name屬性可以取哪些值？
某個頁面被嵌在iframe元素中，並且頁面中有個a元素。將a元素的target屬性設為哪個關鍵字後，可在新視窗中顯示連結的資源？
哪種影象格式支援alpha透明？
在input元素的type屬性值中，哪些是HTML5新增的？
HTML5為input元素新增了多個提交相關的屬性，是哪幾個？
表格中的哪個單元格屬性用來關聯表頭的？
iframe元素的哪個屬性表示設定嵌入文件的安全規則？
專門用於播放音訊的元素是哪個？
什麼是點陣圖影象？
什麼是向量圖形？
IE獨有的資料儲存技術是什麼？
Cookie的缺陷有哪些？
什麼是Web儲存？
請談談你對網頁的理解。
標準的HTML文件必須包含哪幾個元素？
怪異模式中的怪癖行為是指什麼？
語義化有哪些優勢？
什麼是HTML實體？
全域性屬性有哪些？
全域性屬性title有什麼作用？
defer和async兩個屬性各有什麼作用？
通過元素的事件屬性嵌入的指令碼有哪些缺點？
為meta元素的name屬性定義為viewport後，在content屬性中定義的內容可以是哪些關鍵字？
meta元素的http-equiv屬性所擁有的功能有哪些？
a元素的屬性有哪些？
HTML5去除了img元素的一些過時屬性，包括哪些？
每張表格都需要包含3個元素，是哪3個？
iframe的用途有哪些？
多媒體元素video專門用於播放視訊，它有哪些屬性？
table元素的colspan屬性和rowspan屬性各有什麼作用？
HTML的含義是什麼？
請闡述你對W3C的理解與認識。
請簡單介紹一下HTML5。
HTML和HTML5的區別有哪些？
你怎麼看待Web App 、Hybrid App和Native App？
HTML文件中的DOCTYPE有什麼作用？
請簡單介紹一下瀏覽器的2種渲染模式：怪異模式和接近標準模式。
什麼是XHTML？
HTML和XHTML有哪些區別？
簡述一下你對HTML5語義化的理解？
什麼是微格式？
HTML實體的應用場景有哪些？
什麼是Shadow DOM（影子中的DOM）？
元素屬性src和href有何區別？
img元素中的title和alt屬性有何區別？
外部樣式可用link元素引用，其中rel屬性的作用是什麼？
CSS有幾種引入方式？它們有哪些區別？
JavaScript有幾種引入方式？它們有哪些區別？
meta元素可以定義文件的哪些元資料？
什麼是錨點？
a元素除了可以用於導航外，還有什麼其它的功能？
什麼是分割槽響應圖？
請列舉幾個HTML5新增的影象相關的語義化元素。
嵌入在HTML文件中的影象格式有哪些，都有些什麼特點？
input元素中的form屬性有什麼作用？
請列舉幾個HTML5新增的input元素的type型別（即type屬性的值）。
元素的布林屬性disabled和readonly有何區別？
HTML5已廢棄控制樣式的屬性，請列舉幾個這樣的table元素的屬性，並用合適的CSS屬性替代。
請列舉表格佈局的弊端。
iframe元素有哪些缺點？
請列舉幾個HTML5新增的多媒體元素，並說明它們的功能。
HTML5新增了幾個多媒體元素，請列舉使用這些元素的優勢。
除了video和audio元素，HTML5還支援哪些其它的多媒體元素？
請簡單描述一下canvas元素。
什麼是SVG？
用什麼方法可以防止Cookie被盜取？
用meta元素的兩種宣告方式，把當前HTML文件中的內容用UTF-8進行編碼。
如何用iframe元素實現無重新整理檔案上傳。
用canvas元素畫一個藍底白字的矩形按鈕。

CSS

CSS基礎

CSS屬性

CSS應用

1. 在CSS選擇器中，星號*的含義是什麼？

CSS 中類 (classes) 和 ID 的區別。
請問 “resetting” 和 “normalizing” CSS 之間的區別？你會如何選擇，為什麼？
請解釋浮動 (Floats) 及其工作原理。
描述z-index和疊加上下文是如何形成的。
請描述 BFC(Block Formatting Context) 及其如何工作。
列舉不同的清除浮動的技巧，並指出它們各自適用的使用場景。
請解釋 CSS sprites，以及你要如何在頁面或網站中實現它。
你最喜歡的圖片替換方法是什麼，你如何選擇使用。
你會如何解決特定瀏覽器的樣式問題？
如何為有功能限制的瀏覽器提供網頁？
- 你會使用哪些技術和處理方法？
有哪些的隱藏內容的方法 (如果同時還要保證螢幕閱讀器可用呢)？
你用過柵格系統 (grid system) 嗎？如果使用過，你最喜歡哪種？
你用過媒體查詢，或針對移動端的佈局/CSS 嗎？
你熟悉 SVG 樣式的書寫嗎？
如何優化網頁的列印樣式？
在書寫高效 CSS 時會有哪些問題需要考慮？
使用 CSS 前處理器的優缺點有哪些？
- 請描述你曾經使用過的 CSS 前處理器的優缺點。
如果設計中使用了非標準的字型，你該如何去實現？
請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
請描述偽元素 (pseudo-elements) 及其用途。
請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局。
請解釋 * { box-sizing: border-box; } 的作用, 並且說明使用它有什麼好處？
請羅列出你所知道的 display 屬性的全部值
請解釋 inline 和 inline-block 的區別？
請解釋 relative、fixed、absolute 和 static 元素的區別
CSS 中字母 ‘C’ 的意思是疊層 (Cascading)。請問在確定樣式的過程中優先順序是如何決定的 (請舉例)？如何有效使用此係統？
你在開發或生產環境中使用過哪些 CSS 框架？你覺得應該如何改善他們？
請問你有嘗試過 CSS Flexbox 或者 Grid 標準規格嗎？
為什麼響應式設計 (responsive design) 和自適應設計 (adaptive design) 不同？
你有相容 retina 螢幕的經歷嗎？如果有，在什麼地方使用了何種技術？
請問為何要使用 translate() 而非 absolute positioning，或反之的理由？為什麼？
哪個屬效能夠控制元素的盒模型？
關係選擇器中，哪個是相鄰選擇器，能匹配相鄰的兄弟元素？
不能被子元素繼承的屬性有哪些？
與角度相關的單位有哪些？
請談談你對CSS定位的理解。
z-index屬性有什麼作用？
如何用CSS讓文字強制換行？
為元素設定哪個屬性，能在文字下面新增一條紅色的波浪線？
使用CSS屬性white-space的哪個關鍵字可以保留HTML文件中的空格、換行和Tab製表符？
vertical-align屬性的預設值是什麼關鍵字？
CSS的哪個屬效能夠縮放背景影象？
把CSS3新增的background-size屬性設為哪一個值，能在保持原影象的寬高比的前提下，縮放到能放進背景區的尺寸。
把CSS屬性background-attachment設為哪一個值，能把背景影象附著到內容上，使得影象會隨著內容一起滾動。
如何讓CSS3動畫實現無數次迴圈？
transform屬性包含哪些變形函式？
IE支援哪些CSS屬性級字首？
在多列布局中，使用哪個屬性可讓元素跨列？
哪個屬效能讓伸縮容器中的子元素主軸對齊？
請描述一下Bootstrap。
Bootstrap中的類字首.col-xs-適用於哪種螢幕？
CSS3中全新的特性有哪些？
CSS3新增的屬性有哪些？
請談談你對偽元素::before和::after中的content屬性的理解。
如何用多種顏色設定方式把p元素中的文字設定為紅色？
元素浮動的缺陷有哪些？
清除浮動的方法有哪些？
使用定位（position）屬性的哪幾個關鍵字可以讓元素脫離正常流？
如何用多種方式CSS把一個寬和高都為100px的正方形變成圓形？
border:none和border:0有哪些區別？
CSS中的通用字體系列有哪些？
過渡（transition）的子屬性有哪些？
媒體查詢中的媒體特性有哪些？
在一條媒體查詢中，可能包含的操作符有哪些？
在CSS中使用哪3個內容屬效能夠在元素前面自動插入遞增的序號？
CSS中的特殊性是指什麼？
!important有什麼作用？
請說明相對長度單位vm、vh、vmax和vmin的作用。
CSS中的屬性值如果設為百分數，那麼是如何計算的？
如果要用JavaScript中的setTimeout()函式來實現動畫，那麼執行函式的時間間隔設為幾ms會比較合理？
將ul元素的預設樣式設成無，可以改變哪三個屬性？
如果要設定伸縮容器中子元素的顯示順序，可以用哪個屬性實現？
CSS指的是什麼？
什麼叫漸進增強？和優雅降級有哪些區別？
什麼是CSS前處理器？
CSS前處理器有哪些優缺點？
什麼是盒模型？
什麼是外邊距塌陷？
當出現外邊距塌陷時，外邊距之間的計算方式是怎樣的？
將元素的display屬性設為inline-block後，能把多個元素排列在一行中，但元素之間會間隙，如何才能去除間隙？
display:none與visibility:hidden都可隱藏元素，有何區別？
請羅列出你所知道的display屬性的全部值，並簡單說明一下它們的作用。
請談談你對BFC的理解？
什麼是hasLayout，觸發hasLayout後會帶來什麼樣的後果？
CSS中類選擇器和ID選擇器有哪些區別？
偽元素::before和:before有什麼區別？
偽類:first-child與:first-of-type有什麼區別？
連結有4種狀態，包括未訪問（:link）、已訪問（:visited）、啟用（:active）和懸停（:hover），宣告的順序是怎麼樣的？
用過calc()函式嗎？它是什麼，有什麼作用？
在移動端，經常會做一屏的專題頁面。如何設定元素的高度，使得頁面的背景能鋪滿整個螢幕？
什麼叫Web安全色？
在CSS中使用background:transparent與opacity:0有什麼區別？
請說說你對元素浮動（float）的理解。
絕對定位（absolute）和浮動（float）有哪些異同？
CSS中的@font-face有什麼作用？
字型風格（font-style）有兩個關鍵字，分別是italic和oblique，它們有什麼區別？
請說下你對CSS中行高（line-height）的理解。
預設情況下，當img元素（即影象）和span元素（即文字）混排時，影象下方會留出幾畫素的空隙，這是為什麼？
在CSS中，可以將line-height設定為純數字或百分數，這兩種賦值方式有何異同？
背景影象可以用Data URI描述，那什麼是Data URI？
什麼是CSS Sprite，它有何利弊？
設定了元素的過渡後，不能立刻看到效果，需要有觸發條件。請列舉可用的觸發條件。
CSS中的過渡與動畫有哪些區別？
什麼是裝置畫素比？
什麼是響應式設計？
請談談你對CSS Hack的理解。
請談談你對定位佈局的理解。
在移動端通常會用彈性佈局，請簡單介紹一下彈性佈局。
為什麼要重置瀏覽器中的HTML元素預設的CSS樣式？
請談談你對Normalize.css的理解。
Eric Meyer的Reset.css和現在流行的Normalize.css有什麼區別？
Sass和SCSS有哪些區別？
有沒有想過製作一套自己的UI庫？
如果要製作UI庫需要考慮哪些方面？
Bootstrap有哪些優勢？
什麼是前端框架？
除了Bootstrap，還聽過或用過哪些其它前端框架？
用純CSS實現一個三角形。
不使用CSS屬性border，使用其它屬性模擬邊框。
如何用純CSS的方式讓超出容器寬度的文字自動替換為省略號？
請為div元素設計一個水平位移60px的動畫（animation），要求持續時間為2s、迴圈無限次、有連貫性；在動畫執行到一半時，水平位移30px。
如何用CSS3的媒體查詢實現視口寬度大於360px而小於640px時，div元素的寬度變成30%？
請用多種方法實現等高佈局，讓頁面中每列的高度相等。
如何實現一個聖盃佈局？
在移動端使用伸縮盒，怎樣才能實現伸縮容器內只顯示一行文字，溢位的內容用省略號替換？
用CSS中的定位實現元素的水平居中。
用CSS中的表格盒型別（即把display屬性設為表格相關的盒型別）實現元素的垂直居中。
用伸縮盒實現子元素的水平和垂直居中。
如何讓一個浮動中的元素水平居中？
如何實現一個自適應的正方形？
CSS3動畫如何實現暫停？

JavaScript

請解釋事件代理 (event delegation)。
請解釋 JavaScript 中 this 是如何工作的。
請解釋原型繼承 (prototypal inheritance) 的原理。
你怎麼看 AMD vs. CommonJS？
請解釋為什麼接下來這段程式碼不是 IIFE (立即呼叫的函式表示式)：
```
function foo(){ }();
```
- 要做哪些改動使它變成 IIFE?
描述以下變數的區別：
```
null
```
，
```
undefined
```
或
```
undeclared
```
？
- 該如何檢測它們？
什麼是閉包（closure），如何使用它，為什麼要使用它？
請舉出一個匿名函式的典型用例？
你是如何組織自己的程式碼？是使用模組模式，還是使用經典繼承的方法？
請指出 JavaScript 宿主物件 (host objects) 和原生物件 (native objects) 的區別？
請指出以下程式碼的區別：function Person(){}、var person = Person()、var person = new Person()？
.call 和 .apply 的區別是什麼？
請解釋 Function.prototype.bind？
在什麼時候你會使用 document.write()？
請指出瀏覽器特性檢測，特性推斷和瀏覽器 UA 字串嗅探的區別？
請儘可能詳盡的解釋 Ajax 的工作原理。
使用 Ajax 都有哪些優劣？
請解釋 JSONP 的工作原理，以及它為什麼不是真正的 Ajax。
你使用過 JavaScript 模板系統嗎？
- 如有使用過，請談談你都使用過哪些庫？
請解釋變數宣告提升 (hoisting)。
請描述事件冒泡機制 (event bubbling)。
“attribute” 和 “property” 的區別是什麼？
為什麼擴充套件 JavaScript 內建物件不是好的做法？
請指出 document load 和 document DOMContentLoaded 兩個事件的區別。
== 和 === 有什麼不同？
請解釋 JavaScript 的同源策略 (same-origin policy)。
如何實現下列程式碼：

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

什麼是三元表示式 (Ternary expression)？“三元 (Ternary)” 表示什麼意思？
什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？
請實現一個遍歷至 100 的 for loop 迴圈，在能被 3 整除時輸出 “fizz”，在能被 5 整除時輸出 “buzz”，在能同時被 3 和 5 整除時輸出 “fizzbuzz”。
為何通常會認為保留網站現有的全域性作用域 (global scope) 不去改變它，是較好的選擇？
為何你會使用 load 之類的事件 (event)？此事件有缺點嗎？你是否知道其他替代品，以及為何使用它們？
請解釋什麼是單頁應用 (single page app), 以及如何使其對搜尋引擎友好 (SEO-friendly)。
你使用過 Promises 及其 polyfills 嗎? 請寫出 Promise 的基本用法（ES6）。
使用 Promises 而非回撥 (callbacks) 優缺點是什麼？
使用一種可以編譯成 JavaScript 的語言來寫 JavaScript 程式碼有哪些優缺點？
你使用哪些工具和技術來除錯 JavaScript 程式碼？
你會使用怎樣的語言結構來遍歷物件屬性 (object properties) 和陣列內容？
請解釋可變 (mutable) 和不變 (immutable) 物件的區別。
- 請舉出 JavaScript 中一個不變性物件 (immutable object) 的例子？
- 不變性 (immutability) 有哪些優缺點？
- 如何用你自己的程式碼來實現不變性 (immutability)？
請解釋同步 (synchronous) 和非同步 (asynchronous) 函式的區別。
什麼是事件迴圈 (event loop)？
- 請問呼叫棧 (call stack) 和任務佇列 (task queue) 的區別是什麼？
解釋 function foo() {} 與 var foo = function() {} 用法的區別
JavaScript的變數名在定義時需要遵守哪些規則？
不能被encodeURIComponent()函式編碼的字元有哪些？
如何獲得Select元素（選擇框）中選中項的索引？
JavaScript的內建物件有哪些。
如何為一個<p>元素新增CSS類primary？
與滑鼠相關的事件有哪些？
如何通過jQuery的方式獲得程式碼中單選框的選中值。
執行下面的程式碼，在控制檯輸出的x為__________，y為__________。

var x = 0, y = 0;
x
++
y
console.log(x, y);

呼叫下面程式碼中的函式，最終返回的結果為__________。

function isArray() {
  return
  true;
}
isArray();

執行下面的程式碼後，在控制檯輸出的y為__________。

var y,
  x = 1;
y = x+++x;

2+true等於__________，'6'+9等於__________。
4+3+2+"1"等於__________，"1"+2+4等於__________。
(1, 5 - 1) * 2等於__________。
執行下面的程式碼後，在控制檯輸出的y為__________。

var x = "1", y;
switch (x) {
  case 1:
    y = 1;
    break;
  case 2:
    y = 2;
    break;
  default:
    y = 0;
}
console.log(y);

!function(){}的返回值是__________。
7 - "a"等於__________，7 / 0等於__________。
3..toFixed(2)得到的結果為__________。
parseFloat('12.3.4')返回的結果為__________。
Number(012)返回的結果為__________，Number("0xA")返回的結果為__________。
在下面的程式碼中，Number()函式的引數是一個物件，最終的結果為__________。

var numberObj = {
  valueOf: function() {
    return {};
  },
  toString: function() {
    return "10";
  }
};
Number(numberObj);

~{}等於__________，~1.25等於__________。
以下程式碼最終在控制檯輸出的結果為__________。

var a = {},
  b = { name: "ping" },
  c = { name: "wen" };
a[b] = 10;
a[c] = 20;
console.log(a[b]);

[] == ![]得到的結果為__________。
[] + {}得到的結果為__________，{} + []得到的結果為__________。
Array.prototype.isPrototypeOf([1, 2])的結果為__________。
下面程式碼最終的列印結果是__________。

var obj1 = {
  names: []
};
var obj2 = obj1.names;
obj2.push("strick");
console.log(obj1.names);

在下面的程式碼中，呼叫了三次test()方法，得到的結果分別是__________、__________ 和__________。

var str = "pw1",
  pattern1 = /\d/,
  pattern2 = /\d/g;
pattern1.test(str);
pattern2.test(str);
pattern2.test(str);

執行下面的程式碼後，arr1.length為__________。

var arr1 = "ping".split(""),
  arr2 = arr1.reverse(),
  arr3 = "pw".split("");
arr2.push(arr3);

執行下面的程式碼後，arr陣列的值為__________。

var arr = [4, 1, 5, 2, 3];
arr.sort(function(a, b) {
  return a > b;
});

[1, 2, 3, 4, 5].splice(-2)的值為__________。
[1, 2, 3, 4, 5].slice(NaN, 1)的值為__________。
下面程式碼執行後，在控制檯會輸出b變數，得到的結果是__________。

(function() {
  var a = b = 5;
})();
console.log(b);

1 instanceof Number的返回值是__________，2 in [1,2]的返回值是__________。
typeof undefined的返回值是__________，typeof null的返回值是__________。
將Object的toString()方法分別應用於null和undefined（如下所示），得到的結果為__________和__________。

var toString = Object.prototype.toString;
toString.call(null);
toString.call(undefined);

執行下面的程式碼，結果的輸出順序是__________、__________、 __________。

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
console.log(3);

請簡單描述一下你對JavaScript的理解。
JavaScript有哪些優勢和劣勢？
相等（==）和全等（===）運算子有哪些區別？
在JavaScript中，字面量是指什麼？
分號會在什麼時候自動補全？自動補全有什麼弊端？
什麼是嚴格模式？嚴格模式有哪些限制？
undefined和null的有哪些異同？
請說明JavaScript中的原生物件（native objects）和宿主物件（host objects）。
全域性函式eval()有什麼作用？
請簡單描述一下你所理解的原型鏈。
用new運算子建立物件時，例如new Fn()，具體的建立過程有哪幾步？
JSON格式的資料與XML格式的資料相比，有哪些優勢？
函式宣告和函式表示式有哪些區別？
Function構造器有哪些功能？
執行下面的程式碼，為何輸出的都是3？

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 0);
}

請談談你對閉包的理解。
什麼是事件迴圈？
如果一個全域性變數沒有事先宣告，那麼在控制檯能否輸出它的值？
如何用指令碼獲取當前顯示器的解析度？
document.write()和innerHTML有哪些區別？
請介紹一下DocumentFragment型別的節點。
HTML元素的特性和屬性是怎麼定義的？
jQuery有哪些特色？
在jQuery中有哪些方法可以刪除元素。
jQuery UI是什麼？
請用JavaScript實現氣泡排序。
請實現一個遍歷至100的迴圈，在能被3整除時輸出“three”，在能被5整除時輸出 “five”，在能同時被3和5整除時輸出“all”。
封裝一個isInteger()函式，用於檢測傳入的值是整數。
請重新封裝一個isNaN2()函式，此函式彌補了全域性函式isNaN()的不足。
編寫一個函式，能讓兩個並不大的小數正確相乘。
統計字串“xxxxyyydda”中每個字母出現的次數。
執行a == 1 && a == 2 && a == 3，返回的結果是true，那麼a的值是什麼？
如何判斷物件中的某個屬性是繼承而來的？
如何用JavaScript實現物件繼承？
怎麼實現深拷貝？
在網頁中實現一個倒計時，能夠動態顯示“××天××時××分××秒” 。
請用多種方式獲取當前時間的毫秒數。
如何判斷某一年是閏年？
如何計算兩個日期相隔的天數？
請編寫一個格式化字串的函式，例如傳入“我的名字叫{0}”和“strick”，返回“我的名字叫strick”。
用JavaScript封裝一個函式，可實現整數的千分位逗號分隔符（不用考慮小數），例如12345用12,345表示。
編寫一個函式，用於清除字串前後的空格。
如何將字串“get-element-by-id”轉化成駝峰表示法的“getElementById”？
用陣列方法把陣列中的元素（假設元素值都是數字）加起來，得到的和賦給result變數。
不用迴圈語句（for、while等）建立一個長度為50的陣列，每個元素的值等於它的索引。
設計一個函式能夠補全整數的前置零，例如為3補全兩個前置零，得到的結果為“003”。
有一個數組，其值為[1,[2,[3,4,2],2],5,[6]]，如何才能輸出[1,2,3,4,2,2,5,6]？
請封裝一個函式，用於判斷某個數是否是質數。
請封裝一個函式，可序列化URL中的查詢字串，也就是把字串轉換為一個包含所有引數的物件。
設計一個函式，用於判斷一個HTML元素是另一個HTML元素的後代。
建立一個<dd>元素，設定該元素的內容為4，並插入到id屬性為“third”的<dd>元素之前。要求用DOM方法實現。
如何動態的新增外部指令碼？
用多種方式為一個元素設定一個名為ui-border的CSS類。
請封裝一個函式，模擬getBoundingClientRect()方法，但只要返回元素到視口頂部（top）和左邊（left）的距離。
如何禁用HTML文件中的提交按鈕？
用JavaScript為HTML元素設定兩個CSS屬性：字型大小和寬度，把字型大小設為18px，寬度設為100px，請用多種方式實現。
有一個div元素，其寬度設為了百分數，如何用JavaScript獲得經過計算後的真正寬度？
如何用JavaScript隱藏一個按鈕？
假設有一個按鈕，如何在點選型別的事件處理程式中阻止事件傳播。
請封裝一個註冊事件的函式，要求能夠跨瀏覽器執行。
什麼是事件委託？請用一個例子來描述委託？
不使用第三方類庫，用DOM方法讀取複選框中選中的值。
用多種方式移除選擇框（Select元素）中的選項（Option元素）。
如何用<iframe>元素實現無重新整理檔案上傳。
HTML5新增了FileReader物件，如何利用這個物件來讀取上傳按鈕中選擇的檔案？
不借助第三方類庫，請實現一次簡單的Ajax請求。
請解釋JSONP的工作原理，並用程式碼描述其過程。
如何用jQuery來建立外掛？
兩次輸出各是什麼？

     for (var i = 0; i < 3; i++) {
       setTimeout(() => console.log(i), 1)
     }
     
     for (let i = 0; i < 3; i++) {
       setTimeout(() => console.log(i), 1)
     }

下面程式碼的輸出是什麼？

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");

console.log(lydia);
console.log(sarah);

當我們這樣做時會發生什麼？

function bark() {
  console.log("Woof!");
}
bark.animal = "dog";

事件傳播的三個階段是什麼？
所有物件都有原型，這句描述是否正確？
下面程式碼的輸出是什麼？

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

下面程式碼的輸出是什麼？

function checkAge(data) {
  if (data === { age: 18 }) {
    console.log("You are an adult!");
  } else if (data == { age: 18 }) {
    console.log("You are still an adult.");
  } else {
    console.log(`Hmm.. You don't have an age I guess`);
  }
}
checkAge({ age: 18 });

下面程式碼的輸出是什麼？

function getAge() {
  "use strict";
  age = 21;
  console.log(age);
}
getAge();

cool_secret可以訪問多長時間？

sessionStorage.setItem("cool_secret", 123);

JavaScript全域性執行上下文為你建立了全域性物件和this關鍵字，這句話是否正確？
單擊按鈕時event.target指向的是哪個元素？

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>

單擊下面的html片段列印的內容是什麼？

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!
  </p>
</div>

下面這些值哪些是假值？

0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;

前端的requestAnimationFrame瞭解嗎？有使用過嗎？請說一下使用場景。
對前後端跨域可以說一下嗎？有碰到過跨域問題嗎？如何解決跨域的？
閉包為什麼會造成記憶體洩漏？
請講一下JavaScript的垃圾回收機制。
求一個物件的層級數，用遞迴和迴圈分別實現。
實現下面這道題中的machine函式。

function machine() {
    
}
machine('ygy').execute() 
// start ygy
machine('ygy').do('eat').execute(); 
// start ygy
// ygy eat
machine('ygy').wait(5).do('eat').execute();
// start ygy
// wait 5s（這裡等待了5s）
// ygy eat
machine('ygy').waitFirst(5).do('eat').execute();
// wait 5s
// start ygy
// ygy eat

lodash和ramda的區別是什麼？
字串和new String出來的字串有啥區別？
JS如何判斷網頁中圖片載入成功或者失敗？
遞迴和迭代的區別是什麼，各有什麼優缺點？
實現一個型別判斷函式，需要鑑別出基本型別、function、null、NaN、陣列、物件？
什麼是節流和抖動？
深拷貝和淺拷貝有什麼區別？
如何實現對一個DOM元素的深拷貝，包括元素的繫結事件？
用程式碼模擬出apply()、call()和bind()三個函式。
用程式碼模擬instanceof運算子。
實現一個簡單的路由。
封裝滑鼠拖拽的功能。
如何讓兩個非常大的數字相加？
巨集任務和微任務是指什麼？
實現預載入和懶載入。
如何用Ajax實現大檔案上傳？
如何用JavaScript實現兩個大數的相加？
ES6的模組和CommonJS模組的對比
模擬Object.create()方法。
實現JSON.parse()方法。
setTimeout背後的原理是怎麼樣的？
如何實現前端截圖？
setTimeOut 和 setInterval 底層有哪些區別？
在CORS跨域請求時，什麼情況下會發兩次請求？
在CORS跨域請求時，需要攜帶cookie，得做哪些配置？
如何實現併發請求？

Vue

網路

為什麼傳統上利用多個域名來提供網站資源會更有效？
請儘可能完整得描述從輸入 URL 到整個網頁載入完畢及顯示在螢幕上的整個流程。
Long-Polling、Websockets 和 Server-Sent Event 之間有什麼區別？
請描述以下 request 和 response headers：
- Diff. between Expires, Date, Age and If-Modified-…
- Do Not Track
- Cache-Control
- Transfer-Encoding
- ETag
- X-Frame-Options
什麼是 HTTP method？請羅列出你所知道的所有 HTTP method，並給出解釋。
請解釋 HTTP status 301 與 302 的區別？