7、HTML全域性屬性（global attribute）有哪些

html屬性賦予元素意義和語境，可以用於任何的html元素

1、class：為元素設定類標識

2、data-*：為元素增加自定義屬性

3、id：元素id，文件內唯一

4、lang：元素內容的語言

5、style：行內css樣式

6、title：元素相關的建議資訊

7、dir：規定元素中內容的文字方向（ltr：從左到右， rtl：從右到左）

8、contenteditable：html新增屬性，設定true後可編輯元素

9、hidden：隱藏一個html元素

8、Canvas和SVG有什麼區別？

Canvas

1、可伸縮向量圖形

2、放大縮小不會失真

SVG

1、HTML5新加的元素

2、使用XML描述2D圖形的語言

9、HTML5 為什麼只需要寫 <！DOCTYPE HTML>？

<！DOCTYPE HTML> 是文件型別宣告，它聲明瞭文件型別為html5，告訴瀏覽器和其他開發者，該文件使用的是html5標準

二、CSS

1、實現一個div在不同解析度下的水平垂直居中

。box {

position： absolute；

top： 50%；

left： 50%；

transform： translate（-50%， -50%）；

border： 1px solid pink；

width： 100px；

height： 100px；

}

2、左右固定，中間自適應樣式

3、闡述清楚浮動的幾種方式（常見問題）

1、浮動的產生

float： left/right（設定後產生浮動）

初衷：浮動原先的設計初衷是為了實現文字環繞效果

結果：父元素高度塌陷，理解起來就是元素浮動飄起來了，失去高度，下面的元素會頂上來，就造成了原有的元素背景不見了，margin/padding也不能正常顯示

2、解決浮動的方法

（1）clear： both，在元素最後下加一個元素設定clear：both屬性，缺點是會增加多餘無用的html元素

（2）使用after偽元素

。box 父元素

。box：：after {

content： ‘ ’；

display： block；

clear： both；

}

（3）給父元素設定明確的高度，缺點是並不是所有元素的高度都是固定

（4）給父級元素設定overflow：hidden， 缺點：不能和position配合使用

4、解釋css sprites ，如何使用？

1、什麼是精靈圖

將一些小圖示放在一張圖上

2、精靈圖的優點

減少圖片的總大小

減少下載圖片資源請求，減小建立連線的消耗

3、精靈圖的使用方式

。icon1 {

background-image： url（css/img/sidebar。png）；

background-repeat： no-repeat；

background-position： 20px 20px；

}

// 第一個數是x軸， 第二個數是y軸

5、box-sizing常用的屬性有哪些？分別有什麼作用？

（1）content-box

寬高是元素本身的寬高 不包含border+padding

（2）border-box

元素的寬高已經包含了border+padding

（3）inherit

從父元素繼承box-sizing屬性

6、CSS樣式覆蓋規則

！important > 內聯樣式 > id選擇 > （class選擇 = 偽類選擇） > （標籤選擇 = 偽元素選擇）

7、請簡要描述margin重合問題，及解決方式

問題：相鄰兩個盒子垂直方向上的margin會發生重疊，只會取比較大的margin

解決：（1）設定padding代替margin

（2）設定float

（3）設定overflow

（4）設定position：absolute 絕對定位

（5）設定display： inline-block

8、display：none； visibility：hidden區別？

1、dispaly：none 設定後該元素在dom元素中消失，不在佔用空間

2、visibity：hidden 設定後該元素還存在只是不可見，還佔用空間，影響佈局，具有繼承性

9、重繪和迴流

1、重繪

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。則就叫稱為重繪。

2、迴流

當render tree中的一部分（或全部）因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建。這就稱為迴流（reflow）。每個頁面至少需要一次迴流，就是在頁面第一次載入的時候，這時候是一定會發生迴流的，因為要構建render tree。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成迴流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。

3、重繪與迴流區別

迴流必將引起重繪，而重繪不一定會引起迴流。比如：只有顏色改變的時候就只會發生重繪而不會引起迴流

當頁面佈局和幾何屬性改變時就需要回流

比如：新增或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

10、說說你對語義化的理解

根據內容的結構選擇合適的標籤

1、樣式丟失後，頁面依然展示清晰的結構

2、有利於seo便於爬蟲去爬取更多有用的資訊

3、方便其他裝置渲染頁面

4、更具有可讀性，便於開發團隊維護

11、為什麼要初始化css樣式？

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值不同，如果不初始化css，會導致不同瀏覽器頁面間的顯示差異。

12、移動端適配1px問題

1、在ios8+中當devicePixelRatio=2的時候使用0。5px

2、偽元素 + transform 實現

對於老專案偽元素+transform是比較完美的方法了。

原理是把原先元素的 border 去掉，然後利用 ：before 或者 ：after 重做 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新做的 border 絕對定位。

3、viewport + rem 實現

這種相容方案相對比較完美，適合新的專案，老的專案修改成本過大。

在devicePixelRatio = 2 時，輸出viewport：

在devicePixelRatio = 3 時，輸出viewport：

4、使用box-shadow模擬邊框

利用css 對陰影處理的方式實現0。5px的效果

13居中為什麼要使用transform（為什麼不使用marginLeft/Top）

1、transform 屬於合成屬性，不會引起整個頁面的迴流重繪，節省效能消耗，但是佔用記憶體會大些

2、top/left屬於佈局屬性，會引起頁面layout迴流和repaint重繪。

14、介紹css3中position

1、position： static

static（沒有定位）是position的預設值，元素處於正常的文件流中，會忽略left、top、right、bottom和z-index屬性。

2、position： relative

relative（相對定位）是指給元素設定相對於原本位置的定位，元素並不脫離文件流，因此元素原本的位置會被保留，其他的元素位置不會受到影響。

3、position： absolute

absolute（絕對定位）是指給元素設定絕對的定位，相對定位的物件可以分為兩種情況：

1） 設定了absolute的元素如果存在有祖先元素設定了position屬性為relative或者absolute，則這時元素的定位物件為此已設定position屬性的祖先元素。

2） 如果並沒有設定了position屬性的祖先元素，則此時相對於body進行定位。

4、position： fixed

可以簡單說fixed是特殊版的absolute，fixed元素總是相對於body定位的。

5、inherit

繼承父元素的position屬性，但需要注意的是IE8以及往前的版本都不支援inherit屬性。

6、sticky

position屬性中最有意思的就是sticky了，設定了sticky的元素，在螢幕範圍（viewport）時該元素的位置並不受到定位影響（設定是top、left等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設定的left、top等屬性成固定位置的效果。

可以知道sticky屬性有以下幾個特點：

- 該元素並不脫離文件流，仍然保留元素原本在文件流中的位置。

- 當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設定了top： 50px，那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定，不再向上移動。

- 元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那麼是相對於viewport來計算元素的偏移量

15、上下固定，中間滾動佈局如何實現

<！DOCTYPE html>

<

html

lang

=

“en”

>

<

head

>

<

meta

charset

=

“UTF-8”

>

<

meta

name

=

“viewport”

content

=

“width=device-width， initial-scale=1。0”

>

<

meta

http-equiv

=

“X-UA-Compatible”

content

=

“ie=edge”

>

<

title

>

Document

title

>

<

style

>

*

{

margin

：

0

；

padding

：

0

；

box-sizing

：

border-box

；

}

#

app

{

display

：

flex

；

flex-direction

：

column

；

height

：

100

vh

；

}

。

header

{

width

：

100

%

；

/* height： 100px； */

/* position： absolute；

top： 0； */

background-color

：

#000

；

}

。

footer

{

width

：

100

%

；

/* height： 100px；

position： absolute；

bottom： 0； */

background-color

：

#000

；

}

。

main

{

width

：

100

%

；

/* position： absolute；

top： 100px；

bottom： 100px；

height： auto； */

flex

：

1

；

overflow

：

auto

；

background-color

：

brown

；

}

style

>

head

>

<

body

>

<

div

id

=

“app”

>

<

div

class

=

“header”

>

header

div

>

<

div

class

=

“main”

>

main

<

div

style

=

“height： 2000px；”

>

div

>

div

>

<

div

class

=

“footer”

>

footer

div

>

div

>

<

script

>

script

>

body

>

html

>

16、css實現border漸變

<！DOCTYPE html>

<

html

lang

=

“en”

>

<

head

>

<

meta

charset

=

“UTF-8”

>

<

meta

name

=

“viewport”

content

=

“width=device-width， initial-scale=1。0”

>

<

meta

http-equiv

=

“X-UA-Compatible”

content

=

“ie=edge”

>

<

meta

http-equiv

=

“X-UA-Compatible”

content

=

“ie=edge”

>

<

title

>

border漸變

title

>

<

style

>

button

{

color

：

#23b7cb

；

font-size

：

15

px

；

padding

：

5

px

15

px

；

background

：

#fff

；

border

：

1

px

transparent

solid

；

border-radius

：

30

px

；

position

：

relative

；

}

button

：

after

{

content

：

‘’

；

position

：

absolute

；

top

：

-3

px

；

bottom

：

-3

px

；

left

：

-3

px

；

right

：

-3

px

；

background

：

linear-gradient

（

135

deg

，

#000781

，

#23b7cb

）；

border-radius

：

30

px

；

content

：

‘’

；

z-index

：

-1

；

}

style

>

head

>

<

body

>

<

button

>

進入平臺

button

>

body

>

html

>

19、 css實現一個旋轉的圓

<！DOCTYPE html>

<

html

lang

=

“en”

>

<

head

>

<

meta

charset

=

“UTF-8”

>

<

title

>

旋轉

title

>

head

>

<

style

>

。

wrapper

{

width

：

600

px

；

height

：

600

px

；

background

：

#F8F8F8

；

display

：

flex

；

justify-content

：

center

；

align-items

：

center

；

}

。

z

{

display

：

inline

-

block

；

height

：

40

px

；

width

：

40

px

；

text-align

：

center

；

background

：

red

；

background

：

#F8F8F8

；

color

：

#FFF

；

border-radius

：

100

%

；

margin

：

6

px

；

border

：

2

px

solid

#666

；

border-bottom-color

：

transparent

；

vertical-align

：

middle

；

-webkit-

animation

：

rotate

0。75

s

linear

infinite

；

animation

：

rotate

0。75

s

linear

infinite

；

}

@

-webkit-keyframes

rotate

{

0

%

{

-webkit-

transform

：

rotate

（

0

deg

）；

}

50

%

{

-webkit-

transform

：

rotate

（

180

deg

）；

}

100

%

{

-webkit-

transform

：

rotate

（

360

deg

）；

}

}

@

keyframes

rotate

{

0

%

{

transform

：

rotate

（

0

deg

）；

}

50

%

{

transform

：

rotate

（

180

deg

）；

}

100

%

{

transform

：

rotate

（

360

deg

）；

}

}

style

>

<

body

>

<

div

class

=

“wrapper”

>

<

div

class

=

“z”

>

zou

div

>

div

>

body

>

html

>

20、css——BFC，IFC，GFC，FFC的區別

1、FC：Formatting Contexts，是W3C CSS2。1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

2、BFC：“塊級格式化上下文”。Block Formatting Contexts就是頁面上的一個隔離的渲染區域，容器裡面的子元素不會在佈局上影響到外面的元素，反之也是如此。如何產生BFC？

float的值不為none。

overflow的值不為visible。

position的值不為relative和static。

display的值為table-cell， table-caption， inline-block中的任何一個。

作用：結合塊級別元素浮動，裡面的元素則是在一個相對隔離的環境裡執行。

3、IFC：“內聯格式化上下文”，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響）

IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。float元素會位於IFC與與line box之間，使得line box寬度縮短。 同個ifc下的多個line box高度會不同。 IFC中時不可能有塊級元素的，當插入塊級元素時（如p中插入div）會產生兩個匿名塊與div分隔開，即產生兩個IFC，每個IFC對外表現為塊級元素，與div垂直排列。

作用：

水平居中：當一個塊要在環境中水平居中時，設定其為inline-block則會在外層產生IFC，透過text-align則可以使其水平居中。

垂直居中：建立一個IFC，用其中一個元素撐開父元素的高度，然後設定其vertical-align：middle，其他行內元素則可以在此父元素下垂直居中。

4、GFC：“網格佈局格式化上下文”，當為一個元素設定display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以透過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格專案（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格專案（grid item）定義位置和空間。

那麼GFC有什麼用呢，和table又有什麼區別呢？

首先同樣是一個二維的表格，但GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染語義和控制。

5、FFC：“自適應格式化上下文”，display值為flex或者inline-flex的元素將會生成自適應容器（flex container）。

Flex Box 由伸縮容器和伸縮專案組成。透過設定元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個塊級元素，而設定為 inline-flex 的容器則渲染為一個行內元素。

伸縮容器中的每一個子元素都是一個伸縮專案。伸縮專案可以是任意數量的。伸縮容器外和伸縮專案內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮專案該如何佈局。

21、css3有哪些新特性

新增選擇器 p：nth-child（n）{color： rgba（255， 0， 0， 0。75）}

彈性盒模型 display： flex；

多列布局 column-count： 5；

媒體查詢 @media （max-width： 480px） {。box： {column-count： 1；}}

個性化字型 @font-face{font-family：BorderWeb；src：url（BORDERW0。eot）；}

顏色透明度 color： rgba（255， 0， 0， 0。75）；

圓角 border-radius： 5px；

漸變 background：linear-gradient（red， green， blue）；

陰影 box-shadow：3px 3px 3px rgba（0， 64， 128， 0。3）；

倒影 box-reflect： below 2px；

文字裝飾 text-stroke-color： red；

文字溢位 text-overflow：ellipsis；

背景效果 background-size： 100px 100px；

邊框效果 border-image：url（bt_blue。png） 0 10；

轉換

旋轉 transform： rotate（20deg）；

傾斜 transform： skew（150deg， -10deg）；

位移 transform：translate（20px， 20px）；

縮放 transform： scale（。5）；

平滑過渡 transition： all 。3s ease-in 。1s；

動畫 @keyframes anim-1 {50% {border-radius： 50%；}} animation： anim-1 1s；

22、CSS3新增偽類有那些？

：root 選擇文件的根元素，等同於 html 元素

：empty 選擇沒有子元素的元素

：target 選取當前活動的目標元素

：not（selector） 選擇除 selector 元素意外的元素

：enabled 選擇可用的表單元素

：disabled 選擇禁用的表單元素

：checked 選擇被選中的表單元素

：after 在元素內部最前新增內容

：before 在元素內部最後新增內容

：nth-child（n） 匹配父元素下指定子元素，在所有子元素中排序第n

：nth-last-child（n） 匹配父元素下指定子元素，在所有子元素中排序第n，從後向前數

：nth-child（odd）

：nth-child（even）

：nth-child（3n+1）

：first-child

：last-child

：only-child

：nth-of-type（n） 匹配父元素下指定子元素，在同類子元素中排序第n

：nth-last-of-type（n） 匹配父元素下指定子元素，在同類子元素中排序第n，從後向前數

：nth-of-type（odd）

：nth-of-type（even）

：nth-of-type（3n+1）

：first-of-type

：last-of-type

：only-of-type

：：selection 選擇被使用者選取的元素部分

：first-line 選擇元素中的第一行

：first-letter 選擇元素中的第一個字元

23、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型（IE盒模型、怪異盒模型）有什麼不同的？

1、CSS盒子模型： 外邊距（margin） 內邊距（padding） 邊框（border） 內容區（width、height）

2、CSS盒子模型與低版本IE的盒子模型的區別主要在於：寬和高不一樣

3、標準的CSS的盒子模型的寬高：內容區的寬高

4、低版本IE的盒子模型的寬高：內容區+內邊距+邊框

24、行內元素float：left後是否變為塊級元素？

1、行內塊級元素，設定成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不同是它的預設寬度不是100%，行內元素預設100%寬度佔據一行

2、這時候給行內元素設定 padding-top 和 padding-bottom 或者 width、height 都是有效果的

25、：：before 和 ：after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用

- 在 CSS 中偽類一直用 ： 表示，如 ：hover， ：active 等

- 偽元素在CSS1中已存在，當時語法是用 ： 表示，如 ：before 和 ：after

- 後來在CSS3中修訂，偽元素用 ：： 表示，如 ：：before 和 ：：after，以此區分偽元素和偽類

- 由於低版本IE對雙冒號不相容，開發者為了相容性各瀏覽器，繼續使使用 ：after 這種老語法表示偽元素

- 單冒號（：）用於css3的偽類

- 雙冒號（：：）用於css3的偽元素

- 想讓插入的內容出現在其它內容前，使用：：before，否者，使用：：after；

- 在程式碼順序上，：：after生成的內容也比：：before生成的內容靠後。

- 如果按堆疊視角，：：after生成的內容會在：：before生成的內容之上

- ：：before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。並不存在於dom之中，只存在在頁面之中。：before 和 ：after 這兩個偽元素，是在CSS2。1裡新出現的。起初，偽元素的字首使用的是單冒號語法，但隨著Web的進化，在CSS3的規範裡，偽元素的語法被修改成使用雙冒號，成為：：before ：：after

26、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16。7ms。

27、垂直塌陷及解決方法

詳見

三、js

1、es6的新特性

const let

模板字串

箭頭函式

函式的引數預設值

物件和陣列解構

for。。。of 和 for。。。in

2、promise的使用，怎麼用es5實現promise

詳見

3、if有作用域嗎

只有函式有作用域，if是沒有作用域的。

但是有一種情況會讓if看上去有作用域，就是在if {}語句中，使用const、let，他們會有塊級作用域。

4、原型鏈和作用域鏈的區別

（1）原型鏈

當訪問一個物件的某個屬性時，會先在這個物件本身的屬性上找，如果沒有找到，會去這個屬性的__proto__屬性上找，即這個建構函式的prototype，如果還沒找到，就會繼續在__proto__上查詢，

直到最頂層，找不到即為undefined。這樣一層一層往上找，彷佛是一條鏈子串起來，所以叫做原型鏈。

（2）作用域鏈

變數取值會到建立這個變數的函式的作用域中取值，如果找不到，就會向上級作用域去查，直到查到全域性作用域，這麼一個查詢過程形成的鏈條就叫做作用域鏈。

（3）區別

作用域是對變數而言，原型鏈是對於物件的屬性而言

作用域鏈的頂層是window，原型鏈的頂層是Object

5、js判斷型別

1、typeof

檢測不出null 和 陣列，結果都為object，所以typeof常用於檢測基本型別

2、instanceof

不能檢測出number、boolean、string、undefined、null、symbol型別，所以instancof常用於檢測複雜型別以及級成關係

3、constructor

null、undefined沒有construstor方法，因此constructor不能判斷undefined和null。

但是contructor的指向是可以被改變，所以不安全

4、Object。prototype。toString。call

全型別都可以判斷

6、資料型別怎麼檢測

1、typeof

例：console。log（typeof true） // boolean

2、instanceof

例：console。log（［1，2］ instanceof Array） // true

3、constructor

例： console。log（［1， 2］。constructor === Array） // ture

4、Object。prototype。toString。call

例：Object。prototype。toString。call（［1， 2］） // ［object Array］

7、普通函式和箭頭函式的區別

1、普通函式

可以透過bind、call、apply改變this指向

可以使用new

2、箭頭函式

本身沒有this指向，

它的this在定義的時候繼承自外層第一個普通函式的this

被繼承的普通函式的this指向改變，箭頭函式的this指向會跟著改變

箭頭函式外層沒有普通函式時，this指向window

不能透過bind、call、apply改變this指向

使用new呼叫箭頭函式會報錯，因為箭頭函式沒有constructor

8、如何用原生js給一個按鈕繫結兩個onclick事件？

var btn = document。getElementById（‘btn’）

btn。addEventListener（‘click’， fn1）

btn。addEventListener（‘click’， fn2）

function fn1 （） {

console。log（‘我是方法1’）

}

function fn2 （） {

console。log（‘我是方法2’）

}

9、document。write和innerHTML的區別

document。write 將內容寫入頁面，清空替換掉原來的內容，會導致重繪

document。innerHTML 將內容寫入某個Dom節點，不會重繪

10、棧和堆的區別

1、堆

動態分配記憶體，記憶體大小不一，也不會自動釋放

2、棧

自動分配相對固定大小的記憶體空間，並由系統自動釋放

3、基本型別都是儲存在棧中，每種型別的資料佔用的空間的大小是確定的，並由系統自動分配和釋放。記憶體可以及時回收。

4、引用型別的資料都是儲存在堆中。準確說是棧中會儲存這些資料的地址指標，並指向堆中的具體資料。

11、undefined 和 null 區別

1、null

什麼都沒有，表示一個空物件引用（主動釋放一個變數引用的兌現那個，表示一個變數不再指向任何引用地址）

2、undefined

沒有設定值的變數，會自動賦值undefined

3、區別

typeof undefined // undefined

typeof null // object

null === undefined // false

null == undefined // true

12、eval（）的作用

eval（string） 函式計算 JavaScript 字串，並把它作為指令碼程式碼來執行

如果引數是一個表示式，eval（） 函式將執行表示式；

如果引數是Javascript語句，eval（）將執行 Javascript 語句；

如果執行結果是一個值就返回，不是就返回undefined，如果引數不是一個字串，則直接返回該引數。

特殊：eval（“{b：2}”） // 宣告一個物件

eval（“（{b：2}）”） // 返回物件{b：2}

13、JS哪些操作會造成記憶體洩露

這個文章講的通俗易懂，可以參考具體案例 https：//www。jianshu。com/p/763ba9562864

記憶體洩漏是指一塊被分配的記憶體既不能使用，也不能回收，直到瀏覽器程序結束。

1、意外的全域性變數

2、閉包

3、沒有清理的dom元素

dom元素賦值給變數，又透過removeChild移除dom元素。但是dom元素的引用還在記憶體中

4、被遺忘的定時器或者回調

14、談談垃圾回收機制方式及記憶體管理

JavaScript 在定義變數時就完成了記憶體分配。當不在使用變量了就會被回收，因為其開銷比較大，垃圾收集器會定期（週期性）找出那些不在繼續使用的變數，然後釋放其記憶體。

（1）垃圾回收

標記清除法

當變數進入環境時，將這個變數標記為‘進入環境’。當標記離開環境時，標記為‘離開環境’。離開環境的變數會被回收

引用技計數法

跟蹤記錄每個值被引用的次數，如果沒有被引用，就會回收

（2）記憶體管理

記憶體分配=》記憶體使用=》記憶體回收

15、什麼是閉包，如何使用它，為什麼要使用它？

（1）閉包就是能夠讀取其它函式內部變數的函式

（2）使用方法：在一個函式內部建立另一個函式

（3）最大用處有兩個：讀取其他函式的變數值，讓這些變數始終儲存在記憶體中

（4）缺點：會引起記憶體洩漏（引用無法被銷燬，一直存在）

16、請解釋JSONP的工作原理，以及它為什麼不是真正的AJAX

JSONP 是一種非正式傳輸協議，允許使用者傳遞一個callback給服務端，然後服務端返回資料時會將這個callback 引數作為函式名來包裹住 JSON 資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

當GET請求從後臺頁面返回時，可以返回一段JavaScript程式碼，這段程式碼會自動執行，可以用來負責呼叫後臺頁面中的一個callback函式。

它們的實質不同

ajax的核心是透過xmlHttpRequest獲取非本頁內容

jsonp的核心是動態新增script標籤呼叫伺服器提供的js指令碼

jsonp只支援get請求，ajax支援get和post請求

17、請解釋一下JavaScript的同源策略

同源指協議，域名，埠相同，

同源策略是一種安全協議，指一段指令碼只能讀取來自同一來源的視窗和文件的屬性。

18、關於JS事件冒泡與JS事件代理（事件委託）

（1）事件冒泡

當一個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window，過程就像冒泡泡 。如果在某一層想要中止冒泡，使用 event。stopPropagation（） 。

但是當大量標籤大量事件的時候先然不可能為每個元素都加上事件，（事件繫結佔用事件，瀏覽器要跟蹤每個事件，佔用更多記憶體。而且並不是所有事件都會被使用者使用到）。所以需要事件委託來解決這個問題。

（2）事件委託

將事件給最外層的元素，自己不實現邏輯，由最外層元素來代理。（判斷事件源，做不同處理）

19、new運算子到底到了什麼

//（1）

var

obj

=

new

Fun

（）

做了三件事

var

obj

=

{}

// 建立一個空物件

obj

。

__proto__

=

Fun

。

prototype

//空物件的__proto__指向建構函式的原型物件

Fun

。

call

（

obj

）

// 建構函式this指向替換成obj

//（2）實現一個new

function

_new

（

fn

，

。。。

arg

）

{

const

obj

=

Object

。

create

（

fn

。

prototype

）；

const

ret

=

fn

。

apply

（

obj

，

arg

）；

// 根據規範，返回 null 和 undefined 不處理，依然返回obj，不能使用

// typeof result === ‘object’ ？ result ： obj

return

ret

instanceof

Object

？

ret

：

obj

；

}

20、js延遲載入的方式有哪些？

（1）defer屬性

立即下載，但是會等到整個頁面都解析完成之後再執行

（2）async屬性

不讓頁面等待指令碼下載和執行（非同步下載），但是無法控制載入的順序

（3）動態建立script標籤

（4）使用定時器延遲

（5）讓js最後載入

21、promise、async有什麼區別

1、什麼是Async/Await

async/await是寫非同步程式碼的新方式，使用的方式看起來像同步

async/await是基於Promise實現的，它不能用於普通的回撥函式。

2、什麼是promise

為了解決非同步巢狀而產生，讓程式碼更易於理解

區別，async/await讓程式碼更像同步，進一步優化了程式碼

22、== 和 ===的區別，什麼情況下用相等==

”==” 是判斷轉換後的值是否相等，

”===” 是判斷值及型別是否完全相等

不需要判斷型別時可以使用==

23、bind、call、apply的區別

var

a

=

{

user

：

“良人”

，

fn

：

function

（

arg1

，

arg2

）

{

console

。

log

（

this

。

user

）

// 良人

console

。

log

（

arg1

+

arg2

）

// 2

}

}

var

b

=

a

。

fn

//1、bind

var

c

=

b

。

bind

（

a

）

// 返回一個已經切換this指向的新函式

c

（

1

，

1

）

//2、apply

b

。

apply

（

a

，

［

1

，

1

］）

// 將b新增到a環境中

//第一個引數是this指向的新環境

//第二個引數是要傳遞給新環境的引數

//注意： 第一個引數為null時表示指向window

//3、call

b

。

call

（

a

，

1

，

1

）

// 將b新增到a環境中

//第一個引數是this指向的新環境

//第二、三。。。個引數是傳遞給新環境的引數

//注意： 第一個引數為null時表示指向window

//小結： bind方法可以讓函式想什麼時候呼叫就什麼時候呼叫。apply、call方法只是臨時改變了this指向。

24、介紹暫時性死區

在程式碼塊內，使用let、const命令宣告變數之前，該變數都是不可用的。這在語法上，稱為“暫時性死區”。

25、兩個物件如何比較

有思路即可，步驟：

（1）判斷兩個型別是否物件

（2）判斷兩個物件key的長度是否一致

（3）判斷屬性value值的資料型別，根據不同資料型別做比較

a、是物件，重複這個步驟

b、是陣列，轉字串比較

c、是基本型別，直接判斷

26、介紹各種非同步方案

（1）回撥函式

（2）promise

（3）async/await

27、Promise和Async處理失敗的時候有什麼區別

（1）Promise錯誤可以在構造體裡面被捕獲，而async/await返回的是promise，可以透過catch直接捕獲錯誤。

（2）await 後接的Promise。reject都必須被捕獲，否則會中斷執行

28、JS為什麼要區分微任務和宏任務

（1）js是單執行緒的，但是分同步非同步

（2）微任務和宏任務皆為非同步任務，它們都屬於一個佇列

（3）宏任務一般是：script，setTimeout，setInterval、setImmediate

（4）微任務：原生Promise

（5）遇到微任務，先執行微任務，執行完後如果沒有微任務，就執行下一個宏任務，如果有微任務，就按順序一個一個執行微任務

29、Promise和setTimeout執行先後的區別

Promise是微任務，setTimeout是宏任務，先執行微任務，如有還有微任務執行完微任務再執行下一個宏任務

30、 setTimeout（0）和setTimeout（2）之間的區別

定時器表面意思是過指定時間後執行，但是真正的含義是每過指定時間後，會有fn進入事件佇列

（1）setTimeout（fn，0）的含義是，指定某個任務在主執行緒最早可得的空閒時間執行，意思就是不用再等多少秒了，只要主執行緒執行棧內的同步任務全部執行完成，棧為空就馬上執行

（2）setTimeout（fn，1） 1毫秒後執行，但是因為要先執行前面的宏任務，所以不一定就是在一毫秒後執行，取決於佇列裡任務執行的速度

31、for。。in 和 object。keys的區別

Object。keys不會遍歷繼承的原型屬性

for。。。in 會遍歷繼承的原型屬性

32、XML和JSON的區別？

1，xml是重量級的，json是輕量級的。

2，xml在傳輸過程中比較佔頻寬，json佔頻寬少，易於壓縮。

3，xml和json都用在專案互動下，xml多用於做配置檔案，json用於資料互動。

33、說說你對AMD和Commonjs的理解

兩者都是為了實現模組化程式設計而出現的

（1）commonjs

通常被應用於伺服器，在伺服器端，模組的載入和執行都在本地完成，因此，CommonJS並不要求模組載入的非同步化。

核心思想：

一個單獨檔案就是一個模組，透過require方法來同步載入要依賴的模組，然後透過extports或則module。exports來匯出需要暴露的介面。

（2）AMD

可以實現非同步載入依賴模組，預載入，在並行載入js檔案同時，還會解析執行該模組。雖然可以並行載入，非同步處理，但是載入順序不一定

（3）CMD

懶載入，雖然會一開始就並行載入js檔案，但是不會執行，而是在需要的時候才執行。

34、js的涉及模式

單例模式、策略模式、代理模式、迭代器模式。。。等等

這篇文章覺得很好，簡介明瞭能讓人大致懂得這些模式，具體還是要自己去學習 https：//www。cnblogs。com/imwtr/p/9451129。html

35、［“1”， “2”， “3”］。map（parseInt） 答案是多少？

這題看到的時候都懵逼了，還是太菜了 = =。。。

（1）map用法：

arr。map（function（el， index， arr） {

return el

}）

map方法接收一個函式引數，並且這個函式可以接收三個引數

el：遍歷過程中的當前項，

index：遍歷過程中的當前下標

arr： 原陣列

（2）parseInt用法：

parseInt（str， num）

根據num解析str，並返回一個整數。

str： 要解析的字串，如果字元第一個數不能被轉換，返回NaN。

num： 基數，介於 2 ~ 36 之間，如果傳0，則預設用10計算。num不在區間內，返回NaN

（3）所以這道題，關鍵點就在num

el和index 相當於 str 和 num 帶入一下

parseInt（‘1’， 0） // ‘1’ 用基數10算 為1

parseInt（‘2’， 1） // NaN

parseInt（‘3’， 2） // NaN

36、常見相容性問題？

（1）事件物件相容

e = e || window。event；

（2）阻止事件冒泡相容

event。stopPropagation？ event。stopPropagation（）：event。cancelBubble=true；

（3）阻止預設行為相容

evt。preventDefault？evt。preventDefault（）：evt。returnValue=false；

（4）事件監聽相容

addEventListener ？ addEventListener ： attachEvent（）

removeEventListener（） ？ removeEventListener（） ： detachEvent（）

（5）事件目標物件相容

var src = event。target || event。srcElement；

37、說說你對promise的瞭解

（1）promise是為解決非同步處理回撥金字塔問題而產生的 （2）有三種狀態，pengding、resolve、reject，狀態一旦決定就不會改變 （3）then接收resolve（），catch接收reject（）

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

String物件、Array物件、Object物件、Number物件

Math物件、Date物件、Boolean物件

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

1、不要在同一行宣告多個變數

2、使用 === 和 ！== 來比較

3、不要使用全域性函式

4、變數在使用之前的位置宣告（減少變數提升干擾）

5、if用花括號包起來即使只有一行

6、寫註釋

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

棧：原始資料型別（Undefined Null Boolean Number String）

堆：引用資料型別（物件、陣列、函式）

41、href=“#”與href=“javascript：void（0）的區別”？

1、# 包含了一個位置資訊，預設的錨是#top 也就是網頁的上端。在頁面很長的時候會使用 # 來定位頁面的具體位置，格式為：# + id。

2、javascript：void（0）， 僅僅表示一個死連結。

如果你要定義一個死連結請使用 javascript：void（0）

42、對this的理解

1、單獨使用，this表示全域性物件

2、在函式中，this表示全域性物件

3、在物件的一個函式方法中，this表示這個物件

4、可以透過apply、bind來更改this的指向

ps： this永遠指向的是最後呼叫它的物件，僅當它在物件的一個函式方法中時會有差異

43、promise。all 返回什麼

如果沒有報錯，返回執行結果［res1， res2，。。。］

如果報錯，則返回第一個報錯的promise的結果

44、多個await的執行順序，如果要同步執行如何實現？

使用Promise。all

promise。all是等所有非同步操作都完成之後返回結果，相當於讓這些非同步同步了