從前端學習到找一份合適的工作，大大小小的面試必不可少，所以我對初級前端面試題進行了初步整理，也方便自己查閱，也希望對小伙伴們有所幫助！

HTML

——————————————————————————————————————

HTML語義化

HTML語義化就是讓頁面內容結構化，它有如下優點

1、易于用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。

2、有利于SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。

3、方便其他設備解析，如盲人閱讀器根據語義渲染網頁

4、有利于開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧

如：

<header>代表頭部

<nav>代表超鏈接區域

<main>定義文檔主要內容

<article>可以表示文章、博客等內容

<aside>通常表示側邊欄或嵌入內容

<footer>代表尾部

HTML5新標簽

有<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等...復制代碼

CSS

——————————————————————————————————————

盒子模型

盒模型分為標準盒模型和怪異盒模型(IE模型)

box-sizing：content-box //標準盒模型

box-sizing：border-box //怪異盒模型

標準盒模型：元素的寬度等于style里的width+margin+border+padding寬度

如下代碼，整個寬高還是120px

div{

box-sizing: content-box;

margin: 10px;

width: 100px;

height: 100px;

padding: 10px;

}

怪異盒模型：元素寬度等于style里的width寬度

如下代碼，整個寬高還是100px

div{

box-sizing: border-box;

margin: 10px;

width: 100px;

height: 100px;

padding: 10px;

}

注意：如果你在設計頁面中，發現內容區被撐爆了，那么就先檢查一下border-sizing是什么，最好在引用reset.css的時候，就對border-sizing進行統一設置，方便管理

rem與em的區別

rem是根據根的font-size變化，而em是根據父級的font-size變化

rem：相對于根元素html的font-size，假如html為font-size：12px，那么，在其當中的div設置為font-size：2rem,就是當中的div為24px

em：相對于父元素計算，假如某個p元素為font-size:12px,在它內部有個span標簽，設置font-size：2em,那么，這時候的span字體大小為：12*2=24px

CSS選擇器

css常用選擇器

通配符：*

ID選擇器：#ID

類選擇器：.class

元素選擇器：p、a 等

后代選擇器：p span、div a 等

偽類選擇器：a:hover 等

屬性選擇器：input[type="text"] 等

css選擇器權重

!important -> 行內樣式 -> #id -> .class -> 元素和偽元素 -> * -> 繼承 -> 默認

CSS新特性

transition：過渡

transform：旋轉、縮放、移動或者傾斜

animation：動畫

gradient：漸變

shadow：陰影

border-radius：圓角

行內元素和塊級元素

行內元素（display: inline）

寬度和高度是由內容決定，與其他元素共占一行的元素，我們將其叫行內元素，例如：<span> 、 <i> 、 <a>等

塊級元素（display: block)

默認寬度由父容器決定，默認高度由內容決定，獨占一行并且可以設置寬高的元素，我們將其叫做塊級元素，例如：<p> 、<div> 、<ul>等

在平時，我們經常使用CSS的display: inline-block，使它們擁有更多的狀態

絕對定位和相對定位的區別

position: absolute

絕對定位：是相對于元素最近的已定位的祖先元素

position: relative

相對定位：相對定位是相對于元素在文檔中的初始位置

Flex布局

BFC

什么是BFC?

BFC格式化上下文，它是一個獨立的渲染區域，讓處于 BFC 內部的元素和外部的元素相互隔離，使內外元素的定位不會相互影響

如何產生BFC?

display: inline-block

position: absolute/fixed

BFC作用

BFC最大的一個作用就是：在頁面上有一個獨立隔離容器，容器內的元素和容器外的元素布局不會相互影響

解決上外邊距重疊;重疊的兩個box都開啟bfc;

解決浮動引起高度塌陷;容器盒子開啟bfc

解決文字環繞圖片;左邊圖片div,右邊文字容器p,將p容器開啟bfc

水平垂直居中

Flex布局

display: flex //設置Flex模式

flex-direction: column //決定元素是橫排還是豎著排

flex-wrap: wrap //決定元素換行格式

justify-content: space-between //同一排下對齊方式，空格如何隔開各個元素

align-items: center //同一排下元素如何對齊

align-content: space-between //多行對齊方式

水平居中

行內元素：display: inline-block;

塊級元素：margin: 0 auto;

Flex: display: flex; justify-content: center

垂直居中

行高 = 元素高：line-height: height

flex: display: flex; align-item: center

less,sass,styus三者的區別

變量

Sass聲明變量必須是『$』開頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號：分隔開。

Less 聲明變量用『@』開頭，其余等同 Sass。

Stylus 中聲明變量沒有任何限定，結尾的分號可有可無，但變量名和變量值之間必須要有『等號』。

作用域

Sass：三者最差，不存在全局變量的概念

Less：最近的一次更新的變量有效，并且會作用于全部的引用！

Stylus：Sass 的處理方式和 Stylus 相同，變量值輸出時根據之前最近的一次定義計算，每次引用最近的定義有效；

嵌套

三種 css 預編譯器的「選擇器嵌套」在使用上來說沒有任何區別，甚至連引用父級選擇器的標記 & 也相同

繼承

Sass和Stylus的繼承非常像，能把一個選擇器的所有樣式繼承到另一個選擇器上。使用『@extend』開始，后面接被繼承的選擇器。Stylus 的繼承方式來自 Sass，兩者如出一轍。 Less 則又「獨樹一幟」地用偽類來描述繼承關系；

導入@Import

Sass 中只能在使用 url() 表達式引入時進行變量插值

$device: mobile;

@import url(styles.#{$device}.css);

Less 中可以在字符串中進行插值

@device: mobile;

@import "styles.@{device}.css";

Stylus 中在這里插值不管用，但是可以利用其字符串拼接的功能實現

device = "mobile"

@import "styles." + device + ".css"

總結

Sass和Less語法嚴謹、Stylus相對自由。因為Less長得更像 css，所以它可能學習起來更容易。

Sass 和 Compass、Stylus 和 Nib 都是好基友。

Sass 和 Stylus 都具有類語言的邏輯方式處理：條件、循環等，而 Less 需要通過When等關鍵詞模擬這些功能，這方面 Less 比不上 Sass 和 Stylus

Less 在豐富性以及特色上都不及 Sass 和 Stylus，若不是因為 Bootstrap 引入了 Less，可能它不會像現在這樣被廣泛應用（個人愚見）

link與@import區別與選擇

<style type="text/css">

@import url(CSS文件路徑地址);

</style>

<link href="CSSurl路徑" rel="stylesheet" type="text/css" /

link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css；

當解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載；

@import需要 IE5 以上才能使用；

link可以使用 js 動態引入，@import不行

多行元素的文本省略號

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical

JavaScript

——————————————————————————————————————

JS的幾條基本規范

1、不要在同一行聲明多個變量

2、請使用===/！==來比較true/false或者數值

3、使用對象字面量替代new Array這種形式

4、不要使用全局變量

5、Switch語句必須帶有default分支

6、函數不應該有時候有返回值，有時候沒有返回值

7、For循環必須使用大括號

8、IF語句必須使用大括號

9、for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染

JS引用方法

行內引入

<body>

<input type="button" onclick="alert('行內引入')" value="按鈕"/>

<button onclick="alert(123)">點擊我</button>

</body>

內部引入

<script>

window.onload = function() {

alert("js 內部引入！");

}

</script>

外部引入

<body>

<div></div>

<script type="text/javascript" src="./js/index.js"></script>

</body>

注意

1，不推薦寫行內或者HTML中插入<script>,因為瀏覽器解析順序緣故，如果解析到死循環之類的JS代碼，會卡住頁面

2，建議在onload事件之后，即等HTML、CSS渲染完畢再執行代碼

JS的基本數據類型

Undefined、Null、Boolean、Number、String、新增:Symbol

數組操作

在 JavaScript 中，用得較多的之一無疑是數組操作，這里過一遍數組的一些用法

map: 遍歷數組，返回回調返回值組成的新數組forEach: 無法break，可以用try/catch中throw new Error來停止

filter: 過濾

some: 有一項返回true，則整體為true

every: 有一項返回false，則整體為false

join: 通過指定連接符生成字符串

push / pop: 末尾推入和彈出，改變原數組， 返回推入/彈出項【有誤】

unshift / shift: 頭部推入和彈出，改變原數組，返回操作項【有誤】

sort(fn) / reverse: 排序與反轉，改變原數組

concat: 連接數組，不影響原數組， 淺拷貝

slice(start, end): 返回截斷后的新數組，不改變原數組

splice(start, number, value...): 返回刪除元素組成的數組，value 為插入項，改變原數組

indexOf / lastIndexOf(value, fromIndex): 查找數組項，返回對應的下標

reduce / reduceRight(fn(prev, cur)， defaultPrev): 兩兩執行，prev 為上次化簡函數的return值，cur 為當前值(從第二項開始)

JS有哪些內置對象

Object是JavaScript中所有對象的父對象

數據封裝對象：Object、Array、Boolean、Number和String

其他對象：Function、Arguments、Math、Date、RegExp、Error

get請求傳參長度的誤區

誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的

實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web服務器，瀏覽器或web服務器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:

1、HTTP 協議 未規定 GET 和POST的長度限制

2、GET的最大長度顯示是因為 瀏覽器和 web服務器限制了 URI的長度

3、不同的瀏覽器和WEB服務器，限制的最大長度不一樣

4、要支持IE，則最大長度為2083byte，若只支持Chrome，則最大長度 8182byte

補充get和post請求在緩存方面的區別

get請求類似于查找的過程，用戶獲取數據，可以不用每次都與數據庫連接，所以可以使用緩存。

post不同，post做的一般是修改和刪除的工作，所以必須與數據庫交互，所以不能使用緩存。因此get請求適合于請求緩存。

閉包

什么是閉包？

函數A 里面包含了 函數B，而 函數B 里面使用了 函數A 的變量，那么 函數B 被稱為閉包。

又或者：閉包就是能夠讀取其他函數內部變量的函數

function A() {

var a = 1;

function B() {

console.log(a);

}

return B();

}

閉包的特征

函數內再嵌套函數

內部函數可以引用外層的參數和變量

參數和變量不會被垃圾回收制回收

對閉包的理解

使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數才會產生作用域的概念

閉包 的最大用處有兩個，一個是可以讀取函數內部的變量，另一個就是讓這些變量始終保持在內存中

閉包的另一個用處，是封裝對象的私有屬性和私有方法

閉包的好處

能夠實現封裝和緩存等

閉包的壞處

就是消耗內存、不正當使用會造成內存溢出的問題

使用閉包的注意點

由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露

解決方法是：在退出函數之前，將不使用的局部變量全部刪除

閉包的經典問題

for(var i = 0; i < 3; i++) {

setTimeout(function() {

console.log(i);

}, 1000);

}

這段代碼輸出

答案：3個3

解析：首先，for 循環是同步代碼，先執行三遍 for，i 變成了 3；然后，再執行異步代碼 setTimeout，這時候輸出的 i，只能是 3 個 3 了復制代碼

有什么辦法依次輸出0 1 2

第一種方法

使用let

for(let i = 0; i < 3; i++) {

setTimeout(function() {

console.log(i);

}, 1000);

}

在這里，每個 let 和代碼塊結合起來形成塊級作用域，當 setTimeout() 打印時，會尋找最近的塊級作用域中的 i，所以依次打印出 0 1 2

如果這樣不明白，我們可以執行下邊這段代碼

for(let i = 0; i < 3; i++) {

console.log("定時器外部：" + i);

setTimeout(function() {

console.log(i);

}, 1000);

}

此時瀏覽器依次輸出的是：

定時器外部：0

定時器外部：1

定時器外部：2

0

1

2

即代碼還是先執行 for 循環，但是當 for 結束執行到了 setTimeout 的時候，它會做個標記，這樣到了 console.log(i) 中，i 就能找到這個塊中最近的變量定義

第二種方法

使用立即執行函數解決閉包的問題

for(let i = 0; i < 3; i++) {

(function(i){

setTimeout(function() {

console.log(i);

}, 1000);

})(i)

}

JS作用域及作用域鏈

作用域

在JavaScript中，作用域分為 全局作用域 和 函數作用域

全局作用域

代碼在程序的任何地方都能被訪問，window 對象的內置屬性都擁有全局作用域

函數作用域

在固定的代碼片段才能被訪問

例子：

作用域有上下級關系，上下級關系的確定就看函數是在哪個作用域下創建的。如上，fn作用域下創建了bar函數，那么“fn作用域”就是“bar作用域”的上級。

作用域最大的用處就是隔離變量，不同作用域下同名變量不會有沖突。

變量取值：到創建 這個變量 的函數的作用域中取值

作用域鏈

一般情況下，變量取值到 創建 這個變量 的函數的作用域中取值。

但是如果在當前作用域中沒有查到值，就會向上級作用域去查，直到查到全局作用域，這么一個查找過程形成的鏈條就叫做作用域鏈

原型和原型鏈

原型和原型鏈的概念

每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，于是就這樣一直找下去

原型和原型鏈的關系

instance.constructor.prototype = instance.__proto__

原型和原型鏈的特點

JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變

當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的

就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

組件化和模塊化

組件化

為什么要組件化開發

有時候頁面代碼量太大，邏輯太多或者同一個功能組件在許多頁面均有使用，維護起來相當復雜，這個時候，就需要組件化開發來進行功能拆分、組件封裝，已達到組件通用性，增強代碼可讀性，維護成本也能大大降低

組件化開發的優點

很大程度上降低系統各個功能的耦合性，并且提高了功能內部的聚合性。這對前端工程化及降低代碼的維護來說，是有很大的好處的，耦合性的降低，提高了系統的伸展性，降低了開發的復雜度，提升開發效率，降低開發成本

組件化開發的原則

專一

可配置性

標準性

復用性

可維護性

模塊化

為什么要模塊化

早期的javascript版本沒有塊級作用域、沒有類、沒有包、也沒有模塊，這樣會帶來一些問題，如復用、依賴、沖突、代碼組織混亂等，隨著前端的膨脹，模塊化顯得非常迫切

模塊化的好處

避免變量污染，命名沖突

提高代碼復用率

提高了可維護性

方便依賴關系管理

模塊化的幾種方法

函數封裝

var myModule = {

var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}

}

總結：這樣避免了變量污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關系

缺陷：外部可以睡意修改內部成員，這樣就會產生意外的安全問題復制代碼

立即執行函數表達式(IIFE)

var myModule = (function(){

var var1 = 1;

var var2 = 2;

function fn1(){

}

function fn2(){

}

return {

fn1: fn1,

fn2: fn2

};

})();

總結：這樣在模塊外部無法修改我們沒有暴露出來的變量、函數

缺點：功能相對較弱，封裝過程增加了工作量，仍會導致命名空間污染可能、閉包有成本的

圖片的預加載和懶加載

預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染

懶加載：懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數

兩種技術的本質：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。預加載則會增加服務器前端壓力，懶加載對服務器有一定的緩解壓力作用。

mouseover和mouseenter的區別

mouseover：當鼠標移入元素或其子元素都會觸發事件，所以有一個重復觸發，冒泡的過程。對應的移除事件是mouseout

mouseenter：當鼠標移除元素本身（不包含元素的子元素）會觸發事件，也就是不會冒泡，對應的移除事件是mouseleave

解決異步回調地獄

promise、generator、async/await

對This對象的理解

this總是指向函數的直接調用者（而非間接調用者）

如果有new關鍵字，this指向new出來的那個對象

在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window

上一篇

千鋒長沙Java培訓分享之Java算法之選擇排序

下一篇

千鋒長沙前端培訓分享之中級前端面試題整理