前端面試常問的一些筆記

-童夢發表於2020-10-22

一、HTML+CSS

1、img的清除預設邊框

當img中間無圖片時顯示預設邊框，在firefox中是沒有的，但是Chrome中顯示，嘗試用border:0無效

可以使用屬性選擇器設定opacity為空
img[src=""],img:not([src]){
    opacity:0;
}

2、常用的佈局方式

1.固定佈局

寬度，高度固定，頁面被一個固定網頁包裹，容器不能移動，頁面的寬高不隨頁面的變化而變化，這種佈局大家比較熟悉，這種方式一度成為頁面佈局的主流方式，這樣佈局設計簡單，更容易定義，但是由於螢幕尺寸的不同，特別是移動端各個裝置的不同，這種佈局在靈活性方式可用度不高。

2.流式佈局

以百分比為主要形式，讓螢幕自適應，這種佈局方式定義靈活，能夠根據螢幕的情況變化，但是這種方式設計的效果不太容易控制，一般移動端結合rem用的比較多，pc端用的不是非常多

3.彈性佈局

浮動部分和清楚浮動部分主要是相容新增的一些程式碼，重點看彈性佈局的部分，彈性佈局相對前兩種出現的比較晚些，但是彈性佈局功能還是很強大的，佈局也非常方便，但是此佈局形式在pc端並不推薦使用，ie9以下瀏覽器均不支援，另外火狐等一些瀏覽器也需要做相容，移動端目前絕大部分瀏覽器都已經支援彈性佈局，在移動端大家可以嘗試使用。

4.浮動佈局

浮動佈局關鍵詞，float，可以設定left或者right，他使元素脫離文件流進而達到佈局的目的，也是目前一個比較主流的佈局方式，但是使用浮動的結束以後，別忘記清除浮動哦。

5.定位佈局

定位佈局也是目前比較常用的一種佈局方式，關鍵詞： position: fixed;固定佈局，將元素固定在一個位置，不隨頁面移動而移動，position: relative;相對定位，相對於元素自身定位，不脫離文件流，相當於定義一個參照物，一般和絕對定位結合使用，position: absolute;絕對定位，脫離文件流，一般和相對定位結合使用，如果不定義相對定義，將會相對於整個瀏覽器定位，所以定位佈局，一般情況下都是相對定位和絕對定位結合著來，相當定位相當於劃定一個勢力範圍，制定一個封閉的容器塊，然後絕對定位就行對於相對定位來定位，從而達到有效的佈局。

3、實現居中的幾種方法

1、水平居中：給 div 設定一個寬度，然後新增 margin:0auto 屬性
div {
width: 200px;
margin: 0auto;
}
2、水平居中，利用 text-align:center 實現
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
3、讓絕對定位的 div 居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
4、水平垂直居中
//水平垂直居中一
/*確定容器的寬高寬500高300的層設定層的外邊距
div{*/
    position:absolute;/*絕對定位*/
    width:500px;
    height:300px;
    top:50%;
    left:50%;
    margin:-150px00-250px;/*外邊距為自身寬高的一半*/
    background-color:pink;/*方便看效果*/
}
 
//水平垂直居中二
/*未知容器的寬高，利用`transform`屬性*/
 
div {
    position: absolute; /*相對定位或絕對定位均可*/
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: pink; /*方便看效果*/
}
 
//水平垂直居中三
/*利用flex佈局實際使用時應考慮相容性*/
 
.container {
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
}
.containerdiv {
    width: 100px;
    height: 100px;
    background-color: pink; /*方便看效果*/
}
 
//水平垂直居中四
/*利用text-align:center和vertical-align:middle屬性*/
 
.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}
.container::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.box {
    display: inline-block;
    width: 500px;
    height: 400px;
    background-color: pink;
    white-space: normal;
    vertical-align: middle;
}
總結：一般常見的幾種居中的方法有：
對於寬高固定的元素
（1）我們可以利用margin:0auto來實現元素的水平居中。
（2）利用絕對定位，設定四個方向的值都為0，並將margin設定為auto，由於寬高固定，因此對應方向實現平分，可以實現水平和垂直方向上的居中。

（3）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然後再通過margin負值來調整元素的中心點到頁面的中心。
（4）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然後再通過translate來調整元素的中心點到頁面的中心。
（5）使用flex佈局，通過align-items:center和justify-content:center設定容器的垂直和水平方向上為居中對齊，然後它的子元素也可以實現垂直和水平的居中。

4、css的幾種選擇器及優先順序

不同級別
在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
作為style屬性寫在元素內的樣式
id選擇器
類選擇器
元素選擇器
萬用字元選擇器
瀏覽器自定義或繼承
總結排序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 元素 > 萬用字元 > 繼承 > 瀏覽器預設屬性。

同一級別

(1) 同一級別中後寫的會覆蓋先寫的樣式

(2) 同一級別css引入方式不同，優先順序不同
總結排序：內聯(行內)樣式 > 內部樣式表 > 外部樣式表 > 匯入樣式(@import)。

對於選擇器優先順序，還可以通過計算權重值來比較。

5、清除浮動有幾種方法

父級div定義height
結尾處加空div標籤clear:both
父級div定義偽類:after和zoom
父級div定義overflow:hidden
父級div也浮動，需要定義寬度
結尾處加br標籤clear:both
比較好的是第3種方式，好多網站都這麼用

6、對 BFC 規範（塊級格式化上下文：blockformattingcontext）的理解？

塊格式化上下文（BlockFormattingContext，BFC）是Web頁面的視覺化CSS渲染的一部分，是佈局過程中生成塊級盒
子的區域，也是浮動元素與其他元素的互動限定區域。
通俗來講：
•BFC是一個獨立的佈局環境，可以理解為一個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其它環境中的物品。
•如果一個元素符合觸發BFC的條件，則BFC中的元素佈局不受外部影響。
建立BFC
（1）根元素或包含根元素的元素
（2）浮動元素float＝left|right或inherit（≠none）
（3）絕對定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)

回答：

BFC指的是塊級格式化上下文，一個元素形成了BFC之後，那麼它內部元素產生的佈局不會影響到外部元素，外部元素的佈局也不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域，和其他區域互不影響。
一般來說根元素是一個BFC區域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline- block、flex這些
屬性時也會建立BFC。還有就是元素的overflow的值不為visible時都會建立BFC。

7、position的值， relative和absolute定位原點是

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位
relative：生成相對定位的元素，相對於其正常位置進行定位
static 預設值。沒有定位，元素出現在正常的流中
inherit 規定從父元素繼承 position 屬性的值

8、PNG,GIF,JPG的區別及如何選

GIF

8位畫素，256色
無失真壓縮
支援簡單動畫
支援boolean透明
適合簡單動畫

JPEG

顏色限於256
有失真壓縮
可控制壓縮質量
不支援透明
適合照片

PNG

有PNG8和truecolor PNG
PNG8類似GIF顏色上限為256，檔案小，支援alpha透明度，無動畫
適合圖示、背景、按鈕

9、CSS3動畫（簡單動畫的實現，如旋轉等）

依靠CSS3中提出的三個屬性：transition、transform、animation
transition：定義了元素在變化過程中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定義元素的變化結果，包含rotate、scale、skew、translate。
animation：動畫定義了動作的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

10、base64的原理及優缺點

優點可以加密，減少了http請求
缺點是需要消耗CPU進行編解碼

11、css盒子模型

有兩種， IE盒子模型、W3C盒子模型；
盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
區別： IE的content部分把 border 和 padding計算了進去;

12、stylus/sass/less區別

均具有“變數”、“混合”、“巢狀”、“繼承”、“顏色混合”五大基本特性
Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮排表示層次與巢狀關係
Scss無全域性變數的概念，LESS和Stylus有類似於其它語言的作用域概念
Sass是基於Ruby語言的，而LESS和Stylus可以基於NodeJS NPM下載相應庫後進行編譯

13、CSS 優化、提高效能的方法有哪些？

載入效能：

（1）css壓縮：將寫好的css進行打包壓縮，可以減少很多的體積。
（2）css單一樣式：當需要下邊距和左邊距的時候，很多時候選擇:margin:top0bottom0;但margin- bottom:bot tom;margin-left:left;執行的效率更高。
（3）減少使用@import,而建議使用link，因為後者在頁面載入時一起載入，前者是等待頁面載入完成之後再進行載入。

選擇器效能：

（1）關鍵選擇器（keyselector）。選擇器的最後面的部分為關鍵選擇器（即用來匹配目標元素的部分）。 CSS選擇符是從右到左進行匹配的。當使用後代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；
（2）如果規則擁有ID選擇器作為其關鍵選擇器，則不要為規則增加標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。
（3）避免使用通配規則，如*{}計算次數驚人！只對需要用到的元素進行選擇。
（4）儘量少的去對標籤進行選擇，而是用class。
（5）儘量少的去使用後代選擇器，降低選擇器的權重值。後代選擇器的開銷是最高的，儘量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標籤元素。
（6）瞭解哪些屬性是可以通過繼承而來的，然後避免對這些屬性重複指定規則。
渲染效能：
（1）慎重使用高效能屬性：浮動、定位。
（2）儘量減少頁面重排、重繪。
（3）去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文件體積。
（4）屬性值為0時，不加單位。
（5）屬性值為浮動小數0.**，可以省略小數點之前的0。
（6）標準化各種瀏覽器字首：帶瀏覽器字首的在前。標準屬性在後。
（7）不使用@import字首，它會影響css的載入速度。
（8）選擇器優化巢狀，儘量避免層級過深。
（9）css雪碧圖，同一頁面相近部分的小圖示，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清楚，再使用。
（10）正確使用display的屬性，由於display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析效能。
（11）不濫用web字型。對於中文網站來說WebFonts可能很陌生，國外卻很流行。webfonts通常體積龐大，而且一些瀏
覽器在下載webfonts時會阻塞頁面渲染損傷效能。
可維護性、健壯性：
（1）將具有相同屬性的樣式抽離出來，整合並通過class在頁面中進行使用，提高css的可維護性。
（2）樣式與內容分離：將css程式碼定義到外部css中。

14、在網頁中應該使用奇數還是偶數的字型？為什麼呢

（1）偶數字號相對更容易和web設計的其他部分構成比例關係。比如：當我用了14px的正文字號，我可能會在一些地方用14 ×0.5=7px的margin，在另一些地方用14×1.5=21px的標題字號。
（2）瀏覽器緣故，低版本的瀏覽器ie6會把奇數字體強制轉化為偶數，即13px渲染為14px。
（3）系統差別，早期的Windows裡，中易宋體點陣只有12和14、15、16px，唯獨缺少13px。

15、怎麼讓 Chrome 支援小於 12px 的文字？

在谷歌下css設定字型大小為12px及以下時，顯示都是一樣大小，都是預設12px。
（1）可以使用Webkit的核心的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit- text-size -adjust:none;字型大小就不受限制了。但是chrome更新到27版本之後就不可以用了。所以高版本chrome 谷歌瀏覽器已經不再支援-webkit-text-size-adjust樣式，所以要使用時候慎用。
（2）還可以使用css3的transform縮放屬性-webkit-transform:scale(0.5);
注意-webkit- transform:scale(0. 75);收縮的是整個元素的大小，這時候，如果是內聯元素，必須要將內聯元素轉換成塊元素，可以使用 display：block/ inline-block/...；
（3）使用圖片：如果是內容固定不變情況下，使用將小於12px文字內容切出做圖片，這樣不影響相容也不影響美觀。

16、闡述一下 CSS Sprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然後利用CSS的background-image，background- repeat，background -position的組合進行背景定位。利用CSSSprites能很好地減少網頁的http請求，從而很好的提高頁面的效能；CSSSprites 能減少圖片的位元組。
優點：
減少HTTP請求數，極大地提高頁面載入速度
增加圖片資訊重複度，提高壓縮比，減少圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現
缺點：
圖片合併麻煩
維護麻煩，修改一個圖片可能需要重新佈局整個圖片

17、常見的元素隱藏方式？

（1）使用 display:none;隱藏元素，渲染樹不會包含該渲染物件，因此該元素不會在頁面中佔據位置，也不會響應繫結的監聽事件。
（2）使用 visibility:hidden;隱藏元素。元素在頁面中仍佔據空間，但是不會響應繫結的監聽事件。
（3）使用 opacity:0;將元素的透明度設定為 0，以此來實現元素的隱藏。元素在頁面中仍然佔據空間，並且能夠響應元素繫結的監聽事件。
（4）通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。
（5）通過 z-index 負值，來使其他元素遮蓋住該元素，以此來實現隱藏。
（6）通過 clip/clip-path 元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中佔據位置，但是不會響應繫結的監聽事件。
（7）通過 transform:scale(0,0)來將元素縮放為 0，以此來實現元素的隱藏。這種方法下，元素仍在頁面中佔據位置，但是不會響應繫結的監聽事件

18、css3新增了那些屬性

css3新增邊框屬性

1、css3新增屬性之border-color：為邊框設定多種顏色

2、css3新增屬性之border-image：圖片邊框

3、css3新增屬性之border-radius：圓角邊框

4、css3新增屬性之box-shadow：陰影效果

css3新增背景屬性

1、css3新增屬性之background-size：指定背景圖片尺寸

在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重複使用背景圖片。您能夠以畫素或百分比規定尺寸。如果以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。

2、css3新增屬性之background-origin：指定背景圖片從哪裡開始顯示

背景圖片可以放置於 content-box、padding-box 或 border-box 區域。

css3新增文字效果

1、css3新增屬性之text-shadow：文字陰影

2、css3新增屬性之word-wrap：自動換行

單詞太長的話就可能無法超出某個區域，允許對長單詞進行拆分，並換行到下一行

css3新增動畫效果

1、transform變換效果：

css3提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。

屬性值：（1）transform ；（2）transform-origin：transform-origin 屬性可以設定變換的起點。預設情況下，使用元素的中心作為起點。

2、animation動畫效果

CSS3 提供了類似 Flash 關鍵幀控制的動畫效果，通過 animation 屬性實現。那麼之前的 transition 屬性只能通過指定屬性的初始狀態和結束狀態來實現動畫效果，有一定的侷限性。

animation 實現動畫效果主要由兩個部分組成：1、通過類似 Flash 動畫中的關鍵幀宣告一個動畫；2、在 animation 屬性中呼叫關鍵幀宣告的動畫。

css3新增過渡效果

1、transition過渡效果

過渡效果一般是通過一些簡單的 CSS 動作觸發平滑過渡功能，比如：:hover、:focus、:active、:checked 等。CSS3 提供了 transition 屬性來實現這個過渡功能。

20、Html5新增特性

1. 語義化標籤

2. 增強型表單（1）新的表單輸入型別（2）新表單元素（3）新表單屬性

3. 視訊和音訊

4. Canvas繪圖（圖形、路徑、文字、漸變、影像）

5. SVG繪圖（與Canvas的區別）

6. 地理定位

7. 拖放API

8. Web Worker

完整的Web Worker例項

9. Web Storage

10. Web Socket

11.其他

<a>標籤.html5的a標籤增加了download屬性,可利用此屬性實現圖片下載.

詳細內容：https://www.cnblogs.com/sarah-wen/p/10767178.html

二、javascript

1、閉包

閉包就是能夠讀取其他函式內部變數的函式。即實現一個暴露內部變數，而且外部可以訪問修改的函式

閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見的方式就是在一個函式內建立另一個函式，通過另一個函式訪問這個函式的區域性變數,利用閉包可以突破作用鏈域

閉包的特性：

函式內再巢狀函式
內部函式可以引用外層的引數和變數
引數和變數不會被垃圾回收機制回收

說說你對閉包的理解

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

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

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

好處：能夠實現封裝和快取等；

壞處：就是消耗記憶體、不正當使用會造成記憶體溢位的問題

使用閉包的注意點

由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體洩露
解決方法是，在退出函式之前，將不使用的區域性變數全部刪除

2、說說你對作用域鏈的理解

作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到window物件即被終止，作用域鏈向下訪問變數是不被允許的
簡單的說，作用域就是變數與函式的可訪問範圍，即作用域控制著變數與函式的可見性和生命週期

3、JavaScript原型，原型鏈 ? 有什麼特點？

每個物件都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，那麼他就會去prototype裡找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。

關係：instance.constructor.prototype = instance.__proto__

特點;

JavaScript物件是通過引用來傳遞的，我們建立的每個新物件實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的物件也會繼承這一改變，當我們需要一個屬性的時，Javascript引擎會先看當前物件中是否有這個屬性，如果沒有的，就會查詢他的Prototype物件是否有這個屬性，如此遞推下去，一直檢索到 Object 內建物件。

圖解：

4、請解釋什麼是事件代理

事件代理（Event Delegation），又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高效能
可以大量節省記憶體佔用，減少事件註冊，比如在table上代理所有td的click事件就非常棒
可以實現當新增子物件時無需再次對其繫結

5、Javascript如何實現繼承？

1.原型鏈

基本思想：利用原型讓一個引用型別繼承另外一個引用型別的屬性和方法。

建構函式，原型，例項之間的關係：每個建構函式都有一個原型物件，原型物件包含一個指向建構函式的指標，而例項都包含一個指向原型物件的內部指標。

2.借用建構函式

基本思想：在子型別建構函式的內部呼叫超類建構函式，通過使用call()和apply()方法可以在新建立的物件上執行建構函式。

3.組合繼承

基本思想：將原型鏈和借用建構函式的技術組合在一塊，從而發揮兩者之長的一種繼承模式。

4.原型式繼承

基本想法：藉助原型可以基於已有的物件建立新物件，同時還不必須因此建立自定義的型別。

5.寄生式繼承

基本思想：建立一個僅用於封裝繼承過程的函式，該函式在內部以某種方式來增強物件，最後再像真正是它做了所有工作一樣返回物件。

6.寄生組合式繼承

基本思想：通過借用函式來繼承屬性，通過原型鏈的混成形式來繼承方法

詳細類容：https://www.jb51.net/article/81766.htm

6、談談This物件的理解

this總是指向函式的直接呼叫者（而非間接呼叫者）
如果有new關鍵字，this指向new出來的那個物件
在事件中，this指向觸發這個事件的物件，特殊的是，IE中的attachEvent中的this總是指向全域性物件Window

7、改變This指向有哪些方法

1.call()和apply()

　　　　兩中方法都能改變this指向，很類似，區別主要是第二個以後引數，

　　　　　　call()：第一個參數列示要把this指向的新目標，第二個之後的引數其實相當於傳參，引數以，隔開（效能較apply略好）

　　　　　　　　用法：a.call(b,1,2); 表示要把a函式的this指向修改為b的this指向，並且執行a函式，傳進去的引數是（1，2）

　　　　　　apply(): 第一個引數同上，第二個引數接受一個陣列，裡面也是傳參，只是以陣列的方式，相當於arguments

　　　　　　　　用法：a.apply(b,[1,2]); 表示要把a函式的this指向修改為b的this指向，並且執行a函式，傳進去的引數是（1，2）注意：即使只有一個引數的話，也要是陣列的形式
//call 的傳參和apply的傳參
function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.call(obj,'one','two');//tom one two
say.spply(obj,['one','two']);//tom one two  效果一樣
2.bind()

　　　　作用：bind()方法會建立一個新函式，稱為繫結函式，當呼叫這個繫結函式時，繫結函式會以建立它時傳入 bind()方法的第一個引數作為 this，傳入 bind() 方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式。

　　　用法：
var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));//這裡的this是eventBind的this，即指向的是foo
    }
}
　注意：多次bind無效，按第一次算

總結一下

　　apply 、 call 、bind 三者都是用來改變函式的this物件的指向的；
　　apply 、 call 、bind 三者第一個引數都是this要指向的物件，也就是想指定的上下文；
　　apply 、 call 兩者都可以利用後續引數傳參；但是傳參的方式不一樣，apply是陣列，call是正常傳參形式
　　bind 是返回對應函式，便於稍後呼叫；apply 、call 則是立即呼叫。

3、new 和return改變指向。。。誰呼叫指向誰

8、new操作符具體幹了什麼呢?

建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型
屬性和方法被加入到 this 引用的物件中
新建立的物件由 this 所引用，並且最後隱式的返回 this

9、Ajax原理

Ajax的原理簡單來說是在使用者和伺服器之間加了—箇中間層(AJAX引擎)，通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。使使用者操作與伺服器響應非同步化。這其中最關鍵的一步就是從伺服器獲得請求資料
Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制
// 1. 建立連線
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 連線伺服器
    xhr.open('get', url, true)
    // 3. 傳送請求
    xhr.send(null);
    // 4. 接受請求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
ajax 有那些優缺點?

優點：
通過非同步模式，提升了使用者體驗.
優化了瀏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了頻寬佔用.
Ajax在客戶端執行，承擔了一部分本來由伺服器承擔的工作，減少了大使用者量下的伺服器負載。
Ajax可以實現動態不重新整理（區域性重新整理）
缺點：
安全問題 AJAX暴露了與伺服器互動的細節。
對搜尋引擎的支援比較弱。
不容易除錯。

10、如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、伺服器上設定代理頁面

11、用過哪些設計模式？

工廠模式：

工廠模式解決了重複例項化的問題，但還有一個問題,那就是識別問題，因為根本無法
主要好處就是可以消除物件間的耦合，通過使用工程方法而不是new關鍵字

建構函式模式

使用建構函式的方法，即解決了重複例項化的問題，又解決了物件識別的問題，該模式與工廠模式的不同之處在於
直接將屬性和方法賦值給 this物件;

12、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，如果有滾動條，也不包含滾動條
scrollWidth/scrollHeight返回值包含content + padding + 溢位內容的尺寸

13、說說你對promise的瞭解

1、Promise是什麼？

Promise是最早由社群提出和實現的一種解決非同步程式設計的方案，比其他傳統的解決方案（回撥函式和事件）更合理和更強大。

ES6 將其寫進了語言標準，統一了用法，原生提供了Promise物件。
ES6 規定，Promise物件是一個建構函式，用來生成Promise例項。

2、Promise是為解決什麼問題而產生的？

promise是為解決非同步處理回撥金字塔問題而產生的

3、Promise的兩個特點

1、Promise物件的狀態不受外界影響

1）pending 初始狀態

2）fulfilled 成功狀態

3）rejected 失敗狀態

Promise 有以上三種狀態，只有非同步操作的結果可以決定當前是哪一種狀態，其他任何操作都無法改變這個狀態

2、Promise的狀態一旦改變，就不會再變，任何時候都可以得到這個結果，狀態不可以逆，只能由 pending變成fulfilled或者由pending變成rejected

4、Promise的三個缺點

1）無法取消Promise,一旦新建它就會立即執行，無法中途取消
2）如果不設定回撥函式，Promise內部丟擲的錯誤，不會反映到外部
3）當處於pending狀態時，無法得知目前進展到哪一個階段，是剛剛開始還是即將完成

5、Promise的幾種方法

1）Promise.catch

Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回撥函式。

2） Promise.all

引數：接受一個陣列，陣列內都是Promise例項
返回值：返回一個Promise例項，這個Promise例項的狀態轉移取決於引數的Promise例項的狀態變化。當引數中所有的例項都處於resolve狀態時，返回的Promise例項會變為 resolve狀態。如果引數中任意一個例項處於reject狀態，返回的Promise例項變為reject狀態

3）Promise.resolve

返回一個Promise例項，這個例項處於resolve狀態。
根據傳入的引數不同有不同的功能：

值(物件、陣列、字串等)：作為resolve傳遞出去的值
Promise例項：原封不動返回

4）Promise.reject

返回一個Promise例項，這個例項處於reject狀態。

引數一般就是丟擲的錯誤資訊。

5） Promise.race

引數：接受一個陣列，陣列內都是Promise例項
返回值：返回一個Promise例項，這個Promise例項的狀態轉移取決於引數的Promise例項的狀態變化。當引數中任何一個例項處於resolve狀態時，返回的Promise例項會變為 resolve狀態。如果引數中任意一個例項處於reject狀態，返回的Promise例項變為reject狀態。

詳細類容：https://www.jianshu.com/p/002003a38e89

14、談談你對AMD、CMD的理解

CommonJS是伺服器端模組的規範，Node.js採用了這個規範。CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回撥函式
AMD推薦的風格通過返回一個物件做為模組物件，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模組物件的目的

es6模組 CommonJS、AMD、CMD

CommonJS 的規範中，每個 JavaScript 檔案就是一個獨立的模組上下文（module context），在這個上下文中預設建立的屬性都是私有的。也就是說，在一個檔案定義的變數（還包括函式和類），都是私有的，對其他檔案是不可見的。
CommonJS是同步載入模組,在瀏覽器中會出現堵塞情況，所以不適用
AMD 非同步，需要定義回撥define方式
es6 一個模組就是一個獨立的檔案，該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數，就必須使用export關鍵字輸出該變數 es6還可以匯出類、方法，自動適用嚴格模式

15、那些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在
setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏
閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）

16、介紹js的基本資料型別

Undefined、Null、Boolean、Number、String

17、介紹js有哪些內建物件？

Object 是 JavaScript 中所有物件的父物件
資料封裝類物件：Object、Array、Boolean、Number 和 String
其他物件：Function、Arguments、Math、Date、RegExp、Error

18、說幾條寫JavaScript的基本規範？

不要在同一行宣告多個變數
請使用===/!==來比較true/false或者數值
使用物件字面量替代new Array這種形式
不要使用全域性函式
Switch語句必須帶有default分支
If語句必須使用大括號
for-in迴圈中的變數應該使用var關鍵字明確限定作用域，從而避免作用域汙

19、JavaScript有幾種型別的值？，你能畫一下他們的記憶體圖嗎？

棧：原始資料型別（Undefined，Null，Boolean，Number、String）
堆：引用資料型別（物件、陣列和函式）
兩種型別的區別是：儲存位置不同；
原始資料型別直接儲存在棧(stack)中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料，所以放入棧中儲存；
引用資料型別儲存在堆(heap)中的物件,佔據空間大、大小不固定,如果儲存在棧中，將會影響程式執行的效能；引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。當直譯器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中獲得實體

20、javascript建立物件的幾種方式？

javascript建立物件簡單的說,無非就是使用內建物件或各種自定義物件，當然還可以用

JSON；但寫法有很多種，也能混合使用

物件字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用function來模擬無參的建構函式

 function Person(){}
    var person=new Person();//定義一個function，如果使用new"例項化",該function可以看作是一個Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

用function來模擬參建構函式來實現（用this關鍵字定義構造的上下文屬性）

function Pet(name,age,hobby){
       this.name=name;//this作用域：當前物件
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程式設計師");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//例項化、建立物件
    maidou.eat();//呼叫eat方法

用工廠方式來建立（內建物件）

var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

用原型方式來建立

function Dog(){

     }
     Dog.prototype.name="旺財";
     Dog.prototype.eat=function(){
     alert(this.name+"是個吃貨");
     }
     var wangcai =new Dog();
     wangcai.eat();

用混合方式來建立

 function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我現在賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell();

21、eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並執行
應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）
由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')')

22、null，undefined 的區別？

undefined 表示不存在這個值。

undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined

例如變數被宣告瞭，但沒有賦值時，就等於undefined

null 表示一個物件被定義了，值為“空值”

null : 是一個物件(空物件, 沒有任何屬性和方法)

例如作為函式的引數，表示該函式的引數不是物件；

在驗證null時，一定要使用　=== ，因為 ==無法分別null 和　undefined

三、HTTP

1、從瀏覽器位址列輸入url到顯示頁面的步驟

瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求；
伺服器交給後臺處理完成後返回資料，瀏覽器接收檔案（HTML、JS、CSS、圖象等）；
瀏覽器對載入到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部資料結構（如HTML的DOM）；
載入解析到的資原始檔，渲染頁面，完成。四、jQuery

五、Node

六、web綜合問題

：新手上路，多關照，有不足請指出

明天繼續跟新

前端面試常問問題
2019-11-14
前端面試
前端面試筆記 – 效能
2019-02-16
前端面試筆記
前端面試筆記 – css
2019-02-16
前端面試筆記CSS
前端面試之webpack面試常見問題
2018-10-27
前端面試Web
前端面試之道筆記(一)
2019-03-22
前端面試筆記
前端面試筆記 – 網路
2019-02-16
前端面試筆記
前端面試整理筆記一
2018-03-26
前端面試筆記
詳解高階前端面試常問的EventLoop
2018-05-27
前端面試OOP
前端面試常見問題有哪些？
2021-11-10
前端面試
熱乎的前端筆試/面試/跳坑筆記（指南)
2018-07-22
前端筆試面試筆記
iOS面試筆記常見概念(一)
2016-10-19
iOS面試筆記
前端面試筆記 – js相關
2019-02-16
前端面試筆記JS
前端筆試題面試題記錄
2018-03-22
前端筆試面試題
《前端面試江湖》讀書筆記
2017-12-04
前端面試筆記
python異常的一些程式碼筆記
2024-05-10
Python筆記
記錄一些日常的小問題（前端）
2018-11-28
前端
前端面試中的常見的演算法問題
2016-10-29
前端面試演算法
前端筆試題面試題記錄（下）
2019-03-04
前端筆試面試題
常見的前端面試題
2019-03-26
前端面試題
前端常見的部分面試題
2018-03-10
前端面試題
記錄一些常見問題的不同解法
2024-06-06
前端常見面試題
2019-06-20
前端面試題
2018——前端面試常見問答
2018-09-25
前端面試
前端開發最容易出錯的基礎知識，面試常問！
2019-05-27
前端面試
前端實習面試的一些建議
2019-04-17
前端面試
【面試】面試常見問題整理
2018-03-13
面試
Java面試中，一些常見的有關多執行緒問題！
2021-05-17
Java面試執行緒
常見的Java面試問題
2019-05-16
Java面試
Java面試常問的幾個問題
2010-02-23
Java面試
前端常見面試題(js部分)
2019-01-31
前端面試題JS
前端筆記
2018-01-25
前端筆記
Spring 常見的一些面試題整理
2018-03-21
Spring面試題
面試常問的http的缺點
2018-12-21
面試HTTP
前端常見問題
2018-06-13
前端
Mysql中的筆試和麵試---常見面試題問與答
2019-05-07
MySql筆試面試題
一些前端新人面試的小技巧分享！
2021-08-26
前端面試
整理總結的一些前端面試題
2016-09-22
前端面試題
08年出的一些前端面試題
2013-05-06
前端面試題

前端面試常問的一些筆記

一、HTML+CSS

1、img的清除預設邊框

2、常用的佈局方式

3、實現居中的幾種方法

4、css的幾種選擇器及優先順序

5、清除浮動有幾種方法

6、對 BFC 規範（塊級格式化上下文：blockformattingcontext）的理解？

7、position的值， relative和absolute定位原點是

8、PNG,GIF,JPG的區別及如何選

9、CSS3動畫（簡單動畫的實現，如旋轉等）

10、base64的原理及優缺點

11、css盒子模型

12、stylus/sass/less區別

13、CSS 優化、提高效能的方法有哪些？

14、在網頁中應該使用奇數還是偶數的字型？為什麼呢

15、怎麼讓 Chrome 支援小於 12px 的文字？

16、闡述一下 CSS Sprites

17、常見的元素隱藏方式？

18、css3新增了那些屬性

二、javascript

1、閉包

2、說說你對作用域鏈的理解

3、JavaScript原型，原型鏈 ? 有什麼特點？

4、請解釋什麼是事件代理

5、Javascript如何實現繼承？

6、談談This物件的理解

7、改變This指向有哪些方法

8、new操作符具體幹了什麼呢?

9、Ajax原理

10、如何解決跨域問題?

11、用過哪些設計模式？

12、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

13、說說你對promise的瞭解

14、談談你對AMD、CMD的理解

15、那些操作會造成記憶體洩漏？

16、介紹js的基本資料型別

17、介紹js有哪些內建物件？

18、說幾條寫JavaScript的基本規範？

19、JavaScript有幾種型別的值？，你能畫一下他們的記憶體圖嗎？

20、javascript建立物件的幾種方式？

21、eval是做什麼的？

22、null，undefined 的區別？

三、HTTP

1、從瀏覽器位址列輸入url到顯示頁面的步驟

五、Node

六、web綜合問題

相關文章