前端面經

時間 2019-11-30

標籤端面简体版

原文原文鏈接

- HTML

1. `<img>`中title和alt的區別

title是鼠標移動到圖片上面時的文本提示；
alt是<img>特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示，使讀屏器能獲取圖片信息。幫助搜索引擎理解圖片信息，增長關鍵詞密度。都有利於SEO

2. 全局屬性

accesskey: 設置用來選擇頁面上元素的快捷鍵
class
id
style
lang: 說明元素內容使用的語言(值：en英文 / zh中文 / zh-CN簡體中文等)
dir: 設置元素的文本方向(ltr: 從左到右 / rtl: 從右到左)
title: 提供元素的額外信息，鼠標移動到上面時顯示提示文本
tabindex: 規定元素的tab鍵次序。按tab鍵能夠在各元素間進行切換
—————————— 如下是html5新增屬性——————————————
contenteditable: 指定是否能夠在瀏覽器中編輯內容(true / false)
data-*: 爲元素增長自定義屬性
draggable: 用戶是否能夠拖動元素(true / false / auto 連接和圖像默承認拖動)
hidden: 顯示或隱藏該元素(與display:none的做用同樣) (hidden="" || hidden= "hidden")
spellcheck: 規定是否對元素進行拼寫和語法檢查,對拼寫錯誤的單詞會在其下方出現紅線(true / false)

3. HTML5新特性和移除的標籤

添加了語義化更好的標籤元素
- 結構元素：article、header、footer
- 多媒體元素：video、audio
- 圖像元素：canvas、svg
增長了離線存儲功能，localStorage長期存儲數據，瀏覽器關閉數據不丟失
input新增類型
- color,選擇顏色
- date 選擇日期
- search 用於搜索
- month 選擇月份
廢除了純表現元素：basefont、s、u等
廢除了部分瀏覽器支持的元素：applet、bgsound
廢除了frameset、frame框架，只支持iframe

4. HTML5的離線存儲

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用。用戶與因特網鏈接時，更新用戶機器上的緩存文件。
原理: 基於一個新建的 mainfest文件，後綴名爲 .appcache 文件的緩存機制（不是存儲技術），經過這個文件上的解析清單離線存儲資源。這些資源就會像 cookie 同樣被存儲下來。以後當網絡處於離線狀態時，瀏覽器會經過被離線存儲的數據進行頁面展現
使用：
- 在文檔的 html 標籤中設置 mainfest 屬性，引用 mainfest 文件。mainfest 能夠指向相對路徑或者絕對網址，絕對網址必須同源。擴展名能夠任意，但推薦 .appcache
```
<!DOCTYPE html><html lang="en" manifest="demo.appcache">
   <head>
       <meta charset="UTF-8">
       <title>demo</title>
   </head>
   <body>
       <img src="img.jpg" height="500" width="900" alt="">
       其它內容...
   </body>
   </html>
複製代碼
```
- 配置 mainfest 文件，編寫離線存儲資源。是簡單的文本文件，分爲三部分。(1). CACHE: 在此標題下列出的文件將在首次下載後進行緩存。(2). NETWORK: 在此標題下列出的文件須要與服務器鏈接，且不會被緩存。可使用 * 表示除了CACHE外全部的資源或文件都須要因特網鏈接。(3). FALLBACK: 此標題下列出的文件規定當頁面沒法訪問時的替代頁面
```
CACHE MANIFEST#version 1.0
CACHE：    img.jpg
NETWORK:    *
FALLBACK:    /demo/ /404.html
複製代碼
```
- 操做 window.applicationCache 進行需求實現。其 status 屬性可用於查看緩存的當前狀態。瀏覽器會對下載進度、應用緩存更新和錯誤狀態等狀況觸發相應事件。
更新緩存
- 用戶清空瀏覽器緩存
- mainfest 文件被修改
- 由程序來更新應用緩存
與瀏覽器緩存的區別
- 離線緩存是針對整個應用，瀏覽器緩存是整個文件
- 離線緩存斷網了仍是能夠打開頁面，但瀏覽器緩存不行
- 離線緩存能夠主動通知瀏覽器更新資源
瀏覽器如何對 html5 的離線存儲資源進行管理和存儲？
- 在線時，瀏覽器發現 html 頭部有 mainfest 屬性，會請求 mainfest 文件。若是是第一次訪問應用，那麼瀏覽器會根據 mainfest 文件的內容下載相應的資源並進行離線存儲。若是已經訪問過應用而且資源已經離線存儲了，那麼瀏覽器會使用離線的資源加載頁面，而後瀏覽器會比較新的 mainfest 文件與舊的文件，若是文件沒有發生改變，不作任何操做。若是改變了，從新下載文件中的資源並進行離線存儲。
優勢
- 用戶能夠實現離線瀏覽
- 已緩存資源加載的更快
- 減小服務器的負載。瀏覽器只從服務器下載更新過或者更改過的資源

5. iframe

iframe 元素會建立包含另一個文檔的內聯框架（即行內框架）,用於設置文本或圖形的浮動圖文框或容器 (frameborder / height / width / name / scrolling / src etc.)

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
    <p>Your browser does not support iframes.</p>
 </iframe>
複製代碼

或者javascript

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
 <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
   console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>
複製代碼

同域狀況下，父頁面能夠操做子頁面的DOM元素，反之也能夠

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
複製代碼

跨域時，只能實現頁面的跳轉
缺點：
- 會阻塞主頁面的 onload 事件。onload事件在全部 iframe及iframe的onload事件加載完畢後纔會被觸發
- iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
解決：若是須要使用 iframe ，最好經過js動態添加 src 屬性值

6. html、xml、xhtml的區別

html：超文本標記語言。用來描述網頁內容，超文本是由於不只能標記文本，還能標記圖片，連接，音頻等。它能夠告訴瀏覽器一個規範以便瀏覽器進行解析。html的標籤都是預約義的，不可自定義。
xml：可擴展標記語言。用來給給文檔加一些標籤，說明每段文字的做用和意義。用於數據存儲和傳輸。可擴展是由於能夠自定義標籤
xhtml：可擴展超文本標記語言。就是以xml的語法寫html。因爲html的語法要求不嚴格，大小寫能夠混用，因而w3c把xml的語法用在了html上用來規範語法
xhtml語法要求
- 必須包含一個文件頭聲明 <!DOCTYPE>
- 元素名必須小寫
- 空標籤必須關閉
- 屬性名必須小寫
- 屬性值必須加引號

7. Doctype做用 | 嚴格模式和兼容模式

<!DOCTYPE>位於HTML文檔中的第一行，處於<html>標籤以前。告知瀏覽器的解析器用什麼文檔標準(DTD)解析這個文檔。可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。css
不一樣瀏覽器，同一瀏覽器的不一樣版本對頁面的渲染不一樣。W3C前，沒有統一規範，即混雜模式。W3C後，有了統一標準，即嚴格模式html
嚴格（標準）模式：瀏覽器按照 W3C 標準解析代碼。前端
混雜（兼容/怪異）模式：瀏覽器用本身的方式解析代碼。不一樣瀏覽器可能顯示的不同。以一種比較寬鬆的向後兼容的方式顯示，保證舊標準的頁面也能夠正常顯示。html5
若是文檔包含嚴格的 DOCTYPE ，那麼它通常以嚴格模式呈現。（嚴格 DTD ——嚴格模式）java
包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最後的地址）會致使頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式）mysql
DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。webpack
HTML5 沒有 DTD ，所以也就沒有嚴格模式與混雜模式的區別，HTML5有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。css3
當一個塊元素div中包含的內容只有圖片時，在標準模式下，無論IE仍是標準，在圖片底部都有3像素的空白。但在混雜模式下，標準瀏覽器（Chrome）中div距圖片底部默認沒有空白。web
混雜模式下盒子模型的高寬包括padding和border，而W3C標準中設置一個元素的高寬指的是content的高寬；
混雜模式下能夠設置行內元素的高度，而標準模式下不生效；
混雜模式下設置圖片padding會失效；Table中的字體屬性不能繼承上層的設置；
標準模式下使用margin:0 auto;可使元素水平居中，可是在混雜模式下會失效；

8. svg和canvas區別

svg: 用xml描繪2D圖形。繪製出來的每個圖形的元素都是獨立的DOM節點，能方便的綁定事件和修改。輸出的圖形是矢量圖形，後期能夠修改參數自由縮放，而且不會失真和出現鋸齒。
canvas經過js繪製2D圖像。自己沒有繪製能力，是一個矩形區域。輸出的是一整副畫布，放大會失真或出現鋸齒

9. src 和 href 的區別

src：用於代替這個元素，將資源嵌入到當前文檔中元素在的位置<script src="script.js"></script>
href: 超文本引用，用來創建當前文檔或元素與目標錨點或資源之間的聯繫<a href="www.xxx.com">\<\img src="1.jpg">\</a>,<link href="style.css" rel="stylesheet" />

10. 行內元素、塊級元素、空元素、區別

行內：a / b / strong / span / img / input / select
塊級：div / ul / ol / li / dl / dt / dd / h1-h6 / p
空： br / hr / img / input / link / meta
區別：行內元素不能設置寬高、行高、內外邊距；不獨佔一行；只能容納行內元素和文本。塊級元素能夠設置而且獨佔一行；能夠容納塊級元素和行內元素

- CSS

1. 清除浮動

浮動元素能夠向左或向右移動，直到碰到另外一個浮動元素。浮動框脫離普通文檔流，浮動在文檔流之上
爲何清除？
- 浮動元素影響後續元素佈局
- 浮動元素的高度高度超過了父元素容器但撐不起父元素容器高度，父容器高度塌陷
- 浮動元素影響了父元素容器中的其餘兄弟元素的排版
clear: 在須要清除浮動的元素的容器中中添加樣式（clear: both / left / right）。也能夠在浮動元素後面添加空白標籤並加入clear屬性。值表示哪一邊不容許有浮動元素。若是浮動元素在非浮動元素後面，不能解決父容器高度塌陷的問題
overflow: hidden: 給父容器添加這個屬性，觸發BFC。其實上沒有清除任何浮動，可是浮動已經不會影響後續元素的佈局。能夠解決父容器高度塌陷的問題。overflow設置爲除visible以外的任何值也均可以達到這個目的，可是其餘值可能會帶來反作用。
給浮動元素的父容器也添加浮動屬性，能撐起父容器高度，但會影響後面元素佈局，不推薦使用
給浮動元素的父容器設置高度，能撐起父容器高度
使用 :after 僞元素：爲浮動元素容器或其父容器添加一個類clearfix，爲這個class添加:after僞元素。爲了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。即添加一個不可見的塊元素在父元素後面（不是父標籤，該塊元素仍在父標籤中），原理和加入空元素相似。是主流方法，推薦使用
```
.clearfix:after{
    content: "020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
    }
    .clearfix {
       zoom: 1; 
    }
複製代碼
```

2. flex佈局

彈性佈局。任何一個容器均可以指定，行內元素也能夠。display: flex;(Webkit 內核的瀏覽器，必須加上-webkit前綴)
設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。
主軸（main axis）、交叉軸（cross axis）、主軸的開始位置main start，結束位置main end；交叉軸的開始位置cross start，結束位置cross end、單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size
容器屬性：
- flex-direction: 主軸方向（row左到右 / row-reverse右到左 / column上到下 / column-reverse下到上）
- flex-wrap: 默認項目在一條線上，若放不開，怎麼排列（nowrap不換行 / warp換行，第一行在上 / wrap-reverse換行，第一行在下）
- justify-content: 主軸對齊方式（flex-start左對齊 / flex-end右對齊 / center居中 / space-between兩端對齊，項目之間的間隔都相等 / space-around每一個項目兩側的間隔相等）
- align-items：交叉軸對齊方式（stretch佔滿整個容器的高度 / flex-start交叉軸的起點對齊 / flex-end交叉軸的終點對齊 /center交叉軸的中點對齊 / baseline項目的第一行文字的基線對齊）
- align-content：多根軸線對齊方式
項目屬性
- order 排列順序。越小越靠前，默認0
- flex-grow：放大比例。默認0
- flex-shrink：縮小比例，默認1。空間不足時等比例縮放
- align-self：爲單個項目設置不一樣的對齊方式，能夠覆蓋 align-items

3. css3新特性

新增了與動畫相關的特性：Transition,Transform和Animation
- Transition：在當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。transition-property 規定設置過渡效果的 CSS 屬性的名稱。transition-duration 規定完成過渡效果須要多少秒或毫秒。transition-timing-function 規定速度效果的速度曲線。transition-delay 定義過渡效果什麼時候開始。
- Transform：向元素應用各類2D和3D轉換，該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜等操做
- Animation：實現動畫效果。相似幀同樣聲明動畫，而後在animation屬性中調用關鍵幀聲明的動畫。
新增了三個邊框屬性，分別是border-radius、box-shadow和border-image。border-radius能夠建立圓角邊框，box-shadow能夠爲元素添加陰影，border-image可使用圖片來繪製邊框。
新增了幾個關於背景的屬性，分別是background-clip、background-origin、background-size和background-break。

4. CSS的盒子模型

盒子模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)
有兩種。標準W3C盒子模型、低版本IE盒子模型
區別：
- IE: width = 內容的寬度+border+padding
- W3C: width = 內容的寬度
盒子的大小不包括margin，margin只佔據位置

5. 元素水平居中

行內元素（a/img/input/span）或文本居中：爲父元素設置 text-align:center
定寬塊級元素居中：左右 margin 設置爲 auto
不定寬塊元素居中：
- 加入 table 標籤，而後設置 table 的左右 margin 爲 auto（不推薦，增長了無語義的html標籤）
- 設置dispaly: inline,變爲行內元素後，再設置 text-align:center
- 父元素設置 float，而後給父元素設置 position:relative和left:50%，子元素設置position:relative 和 left:-50%來實現水平居中。
- 使用css3新增的transform屬性：給子元素設置left:50%``````transform:translate(-50%,0)

6. 元素垂直居中

父元素高度肯定單行文本元素居中：line-height = 父元素高度
父元素高度肯定的多行文本：設置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
父元素和子元素高度都不定：設置父元素position:relative;,子元素設置position: absolute;top: 50%;transform: translateY(-50%);
寬高都固定的圖片居中：父元素設置position: relative;,圖片設置position: absolute;top: 50%;margin: -50px 0 0 0;

7. `display:none` 和 `visibility: hidden`的區別

display: none: 會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間。是非繼承屬性，子節點的消失是因爲元素從渲染樹中消失形成，沒法經過修改字節點的屬性讓其顯示。修改常規流中元素的display屬性會形成文檔重排(Reflow)。讀屏器不會讀取display爲none的元素內容
visibility: hidden:不會讓元素從渲染樹中消失，元素依然佔據空間，只是內容不可見。是繼承屬性，子節點消失時因爲繼承了hidden，經過設置visibility:visible讓子節點顯示。修改visibility只會形成元素的重繪(Repaint)。讀屏器會讀取visibility: hidden的元素內容

8. 有繼承性的屬性

字體系列 font
文本系列 text （文本color能夠繼承，但<a>中的color不能繼承）
元素可見性 visibility
光標屬性 cursor

9. transition和animation的區別

transition: property duration timing-function delay;\
- transition-property: 指定要產生動畫的元素
- transition-duration：動畫持續時間
- transition-timing-function：動畫狀態變化曲線。（ease-in：加速；ease-out：減速）
- transition-delay：動畫開始時間，即須要推遲多久後才執行\
- 須要事件觸發，不能在網頁加載時自動發生
- 是一次性的，不能重複發生，除非再次觸發
- 只能定義開始和結束兩種狀態
- 一個transition只能定義一個屬性的變化
animation：name duration timing-function delay iteration-count direction fill-mode play-state;
- animation-name：要綁定的關鍵幀的名稱
- animation-iteration-count：動畫的播放次數
- animation-direction：是否輪流反向播放
- animation-fill-mode：當動畫完成播放時，應用到元素上的樣式
- keyframes關鍵字用來定義動畫的各個狀態
- animation不須要觸發任何事件的狀況下才會隨時間改變屬性值。
- 能夠設置多個狀態
- IE 10和Firefox（>= 16）支持沒有前綴的animation，而chrome不支持，因此必須使用webkit前綴。

10. 優先級

同一元素同一種選擇器中優先級以下：內聯樣式 > 內部樣式 > 外部樣式（若外部樣式放在內部樣式後面，則外部將覆蓋內部樣式）
同一標籤，每一個選擇器都有一個權值，權值越大優先（權值不能進位，即11個類選擇器也比不過一個id選擇器）
- 內聯樣式：1000
- id選擇器： 100
- class選擇器，屬性選擇器，僞類選擇器： 10
- 元素標籤選擇器，僞元素選擇器： 1
權值相等時，就近原則，以最後出現的樣式爲準
繼承的樣式優先級低於後來指定的樣式
同一屬性後面有 !important 的優先級最高
創做者的規則高於瀏覽者，即網頁編寫者設計的樣式優先級高於網頁瀏覽器的默認樣式

11. CSS Sprite(CSS 精靈), 雪碧圖

將多個小圖片拼接到一個圖片中，而後經過 background-position 和元素寬高來調節要顯示的圖片
優勢：
- 減小 http 請求的係數，提升頁面的加載速度
- 提升壓縮比，減少圖片大小
- 更換風格方便，只須要在一張或幾張上修改樣式風格便可
缺點：
- 圖片合併麻煩
- 維護麻煩，修改一個圖片可能須要重新佈局整個圖片和樣式

12. 脫離文檔流

float
position: absolute
position: fixed

13. CSS單位

px：像素，絕對單位
em：相對於父元素的字體大小
rem：相對於根元素的字體大小
vw、vh：視窗寬度、視窗高度。1vw=視窗寬度的1%
vmin、vmax：vw、vh中較小/大的那個
ex：當前字體的x的高度或者一個em的一半

14. Reflow和Repaint

Reflow: 迴流（重排）。瀏覽器爲了從新渲染部分或所有文檔而從新計算文檔中元素的位置和幾何構造的過程。通常頁面佈局或者幾何屬性改變時須要reflow。（至少在頁面加載時有一次）。迴流時，瀏覽器會將Render Tree中受影響的節點失效，再從新構建Render Tree
Repaint: 重繪。頁面中的元素只須要更新樣式風格而不影響佈局
觸發：
- Reflow: 改變盒模型相關的屬性(width, height, margin, border, display等)；定位屬性或浮動相關的屬性(position, float, top等)；內部文字結構(text-align, overflow, font-size, line-height, vertival-align)等；調整窗口大小；樣式表變更；元素內容變化，尤爲是輸入控件；dom操做；css僞類激活
- Repaint: 應用新的樣式或修改影響元素外觀的屬性(color, background-color等)；visibility: hidden；拖動滾動條等
瀏覽器爲了不每次作一次DOM佈局的改變就引發一次reflow從而形成巨大的資源消耗，使用一個隊列來延遲執行。瀏覽器會把那些可能引發reflow、repaint的操做加入隊列中，等隊列中有必定的元素數量或者到了某一時間間隔後，就flush隊列，從而使得屢次的reflow/repaint成爲一次reflow/repaint。可是，有時候咱們須要獲取一些信息的時候，瀏覽器不得不進行flush，以確保咱們得到的是準確的值，如獲取如下值的時候：offsetTop、offsetLeft、offsetWidth、offetHeight/scrollTop、scrollLeft、scrollWidth、scrollHeight/clientTop、clientLeft、clientWidth、clientHeight/width、height/調用getComputedStyle()或者IE的currentStyle
避免:
- 直接更改classname或cssText，一次性修改多個屬性值
- 將要操做的元素進行離線處理，修改完以後一塊兒更新
  - 使用DocumentFragment進行緩存操做，修改完後一塊兒添加到文檔中。引起一次reflow和repaint
  - display: none。使節點從渲染樹中消失，修改完以後再顯示。引起兩次reflow和repaint
  - 使用cloneNode(true or false) 和 replaceChild 技術。clone一個節點到內存中，所有修改完以後再與在線的交換。引起一次迴流和重繪
- 減小會flush緩存隊列屬性的訪問係數。若是必定要訪問，使用緩存
- 不要把DOM節點的屬性值放在一個循環裏作循環變量
- 儘量修改層級比較低的DOM節點
- 使節點從DOM樹結構中脫離出來，在須要reflow時只須要reflow自身與下級元素。如爲動畫的 HTML 元件使用 fixed 或 absoult 的 position

15. BFC（塊級格式化內容）

觸發：
- float的值不能爲none
- overflow的值不能爲visible
- display的值爲table-cell, table-caption, inline-block中的任何一個
- position的值不爲relative和static
約束規則：
- 內部的Box會在垂直方向上一個接一個的放置
- 垂直方向的距離有margin決定(屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關)
- 每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此
- BFC的區域不會與float的元素區域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。

16. 什麼是FOUC? 爲何出現? 如何避免?

Flash of Unstyled Content:頁面加載解析時，頁面先用默認樣式或者默認樣式層疊部分已加載的樣式渲染。頁面加載解析完成時，忽然以默認樣式疊加所有頁面樣式渲染，形成頁面樣式閃爍
頁面渲染過程
- 邊下載html邊構建DOM樹
- 瀏覽器以默認樣式構建CSSOM Tree
- DOM Tree + CSSOM Tree = Render Tree，頁面渲染
- 解析到內聯或者內置樣式時，刷新CSSOM Tree，CSSOM Tree或DOM Tree發生變化時會引發Render Tree變化
- 解析到外部樣式時，先加載再解析。因爲下載存在掩飾等不肯定性，因此容易形成頁面閃爍
避免：將外部樣式引入放到<head>中，在body渲染前先構建好CSSOM Tree

17. display的值及其做用

block
inline
inline-block
list-item: 元素做爲列表顯示
table: 元素做爲塊級表格顯示
inline-table: 元素做爲行內表格顯示
inherit: 繼承父元素的display值

18. positon的值及其做用

static: 默認值。沒有定位，元素出如今標準文檔流中
absolute: 絕對定位。不爲元素預留空間，脫離文檔流。相對最近的非static定位的父元素進行定位。
relative: 相對定位。相對於其正常位置進行定位。原先的正常位置仍然保留
fixed: 不爲元素預留空間，脫離文檔流。相對於瀏覽器窗口進行定位，滾動屏幕時在屏幕中位置不變。
sticky: 粘性定位。超出閾值前，它的行爲就像 position:relative; 而當頁面滾動超出閾值時，它的表現就像 position:fixed;，它會固定在目標位置。

19. overflow: hidden 做用

對超出尺寸進行裁切，也就是隱藏溢出
觸發BFC。清除浮動。
- 浮動的元素會脫離文檔流，高度塌陷，同時父元素若是沒有主動設置高度，因沒法檢測到浮動元素的高度，也會塌陷，高度爲0
- 元素浮動對排版的影響：致使浮動元素後面的元素向前補位，這個後面的元素分爲兩方面：第一個是子元素同級的後面元素(子元素高度塌陷影響)，第二個是浮動元素父元素後面的同級元素(父元素高度塌陷影響)。
- 清除浮動，指的是讓父元素能夠檢測到浮動元素的高度，從而撐起父元素(解決高度塌陷)，父元素有了本身的高度，從而避免父元素後面的元素向前補位；清除浮動，解決的是對父元素後面同級元素排版的影響，而子元素後面同級元素排版依然向前補位。
解除外邊距坍塌。父級元素內部有子元素，若是給子元素添加margin-top樣式，那麼父級元素也會跟着下來，形成外邊距塌陷（只針對第一個孩子）

20. css hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本，對CSS的支持、解析不同，致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時，咱們爲了得到統一的頁面效果，就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式。叫作成css hack。以下方法：
CSS 屬性前綴法（即類內部 Hack）
- IE6 能識別下劃線" _ "和星號" * "
- IE7 能識別星號" * "，但不能識別下劃線" _ "
- IE6~IE10 都識別" \9 "
- firefox 前述三個都不能識別。
選擇器前綴法（即選擇器 Hack）
- IE6 能識別 *html .class{}
- IE7 能識別 *+html .class{}
IE條件註釋法（即 HTML 頭部引用 if IE Hack）

21. css優化

將首屏重要的css設置爲內聯
首屏關鍵css渲染完成後，剩餘的css樣式可使用js動態建立 link 元素插入到DOM中
對css文件進行壓縮。webpack等軟件支持
去除無用css。好比重複的代碼，或者沒有生效的css
減小使用昂貴的屬性，即那些須要瀏覽器進行操做和計算的屬性，如box-shadow、border-radius
減小回流和重繪
儘可能不要使用 @import。由於這種樣式會在頁面被加載完才加載。而且多個 @import 會致使下載順序紊亂

22. 僞類僞元素

用來修飾不在文檔樹中的部分
僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。
link / visited / hover / active / fist-child
僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式。
first-line / first-letter / before / after
CSS3 規範中的要求使用雙冒號 (::) 表示僞元素，但依然支持單冒號

- JS

1. 閉包

閉包是可以讀取其餘函數內部變量的函數，就是在函數裏面聲明函數，即子函數。本質上是在函數內部和函數外部搭建起一座橋樑，使得子函數能夠訪問父函數中全部的局部變量，可是反之不能夠，這只是閉包的做用之一。
另外一個做用是保護變量不受外界污染，使其一直存在內存中。由於子函數被賦給了一個全局變量，因此子函數會始終在內存中，而子函數的存在依賴於父函數，因此父函數也會一直存在與內存中
應該少使用閉包的好，由於閉包使函數中的變量都保存在內存中，太消耗內存，會形成網頁性能問題。在IE中可能致使內存泄漏。解決方法是，退出函數時，將不使用的局部變量所有刪除。

2. =、==、===

=: 賦值
==: 返回一個布爾值；相等返回true，不相等返回false；容許不一樣數據類型之間的比較；若是是不一樣類型的數據進行，會默認進行數據類型之間的轉換；若是是對象數據類型的比較，比較的是空間地址
===: 只要數據類型不同，就返回false

3. js的原型和原型鏈

每一個構造函數都有 prototype 屬性，該屬性指向一個對象，這個對象就是原型。
每一個對象都有屬性 proto 屬性，指向該對象的原型。每一個對象都從原型繼承屬性
讀取實例屬性時，若找不到該屬性，就會去原型裏面找，若是還找不到，再向上層原型中找，一直到找到或者原型爲null
每一個對象實例也有 constructor 屬性，能夠用來查看該實例是由哪一個構造函數產生的
直接訪問原型屬性，不能修改屬性的值，但能夠修改屬性指向的值（引用屬性）。要想修改原型屬性，能夠經過__proto__,但儘可能不要使用。

4. 做用域鏈

代碼中的變量若是在當前做用域中沒有被定義，該變量成爲自由變量。若是想取自由變量的值，要向父級做用域（準確的說是建立它的父級做用域，而不是調用它）中尋找。若是尚未，就一級一級向上尋找。
做用域鏈的變量只能向上訪問，訪問到window對象終止。
做用域控制函數和變量的可訪問範圍

5. js的數據類型

值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol（ES6 引入了一種新的原始數據類型，表示獨一無二的值）。
引用數據類型：對象(Object)（對象類型包括數組(Array)、函數(Function)。）
基本數據類型直接存儲在棧中，佔據空間小，大小固定，屬於被頻繁引用的數據
引用數據類型在棧中存儲了指針，指針指向堆中的實體。數據佔據空間大，大小不固定。

6. js建立對象的幾種方式

Object構造函數建立

var Person =new Object();
  Person.name = 'Jason';Person.age = 21;
複製代碼

使用對象字面量表示法建立

var Person={};   //等同於var Person =new Object();
  var Person={
      name:"Jason",
      age:21
  }
複製代碼

使用工廠模式建立：把建立對象的方法封裝在一個函數裏，該函數返回一個對象。可是沒法得知對象的具體類型，只能知道是Object

function createPerson(name,age,job)
  { var o = new Object(); 
  o.name = name; 
  o.age = age; 
  o.job = job; 
  o.sayName = function()
  {  alert(this.name);  };
   return o;
   }
  var person1 = createPerson('Nike',29,'teacher');
  var person2 = createPerson('Arvin',20,'student');
複製代碼

使用構造函數建立

function Person(name,age,job)
     { this.name = name; 
     this.age = age; 
     this.job = job; 
     this.sayName = function(){ alert(this.name); }; 
 }
 var person1 = new Person('Nike',29,'teacher');
 var person2 = new Person('Arvin',20,'student');
複製代碼

使用原型對象建立：把實例共有的屬性放在裏面，共有的這些屬性和函數不會在每一個實例建立的時候都分配空間，它們共享空間

function Person(){}
  Person.prototype.name = 'Nike';
  Person.prototype.age = 20;
  Person.prototype.jbo = 'teacher';
  Person.prototype.sayName = function(){ alert(this.name);};
  var person1 = new Person();person1.sayName();
複製代碼

使用構造函數和原型結合：屬性在構造函數中定義，共享的屬性和方法在原型中定義

function Person(name,age,job)
 { this.name =name; 
     this.age = age;
     this.job = job;
     
 }
 Person.prototype = { 
     constructor:Person,
     sayName: function()
         { alert(this.name); };
      }
 var person1 = new Person('Nike',20,'teacher');
複製代碼

7. js內置對象

Object是全部對象的父對象
數據封裝類對象：Object, Array, Boolean, Number, String
其餘對象：Function, Arguments, Math, Date, RegExp, Error

8. 爲何要有同源限制

同源策略：協議、域名、端口相同。是一種安全協議
好比有一個黑客程序，利用ifrme把銀行登錄頁面嵌入到他的頁面中方，當使用真是用戶名密碼登錄時，他的頁面就能夠經過js讀取表單中的input內容，獲得用戶名和密碼。
再好比若是沒有同源策略，那麼一個網站的API能夠被其餘任何來源的的ajax請求訪問，那麼其餘網站很容經過cookies獲取到該網站用戶的信息

9. 事件代理

又叫事件委託。就是把原來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的責任。原理是DOM元素的事件冒泡。能夠提升性能，減小事件註冊。當新增子對象時無需再次註冊

10. js如何實現繼承

原型鏈繼承：將父元素的實例賦值給子元素的原型，即子元素的 prototype 屬性。即子類繼承自父類的構造函數屬性（實例屬性）都在子類的原型中，父類原型中的屬性都在子類的原型的原型中。可是子類實例共享了父類構造函數的引用屬性，改變一個所有改變。並且子元素建立實例時不能傳參
```
Child.prototype = new Parent() 
複製代碼
```
構造函數繼承：等同於複製父類的屬性給子類。可是隻能繼承父類構造函數中的屬性和方法，不能繼承原型中的。並且父類不能複用，子類的方法每次都單首創建，影響性能。實例只是子類的實例，不是父類的。
```
function  SuperType(){
      this.color=["red","green","blue"];
  }
  function  SubType(){
      //繼承自SuperType
      SuperType.call(this);
  }
複製代碼
```
組合繼承：原型鏈繼承和構造函數繼承的組合。經過調用父類構造，繼承父類的構造函數中的屬性並保留傳參的優勢，而後經過將父類實例做爲子類原型繼承全部屬性，實現函數複用。缺點是父類構造函數中的屬性子類中有兩份，一份在子類構造函數中，一份在子類原型中，可是屬性查找時，子類構造函數中的屬性會覆蓋子類原型中的屬性，消耗內存。（子類重寫原型的constructor屬性，使其指向子類的構造函數）
```
function SuperType() {
      this.name = 'parent';
      this.arr = [1, 2, 3];
  }
  
  SuperType.prototype.say = function() { 
      console.log('this is parent')
  }
  
  function SubType() {
      SuperType.call(this) // 第二次調用SuperType
  }
  
  SubType.prototype = new SuperType() // 第一次調用SuperType
複製代碼
```
原型式繼承: 利用一個空對象做爲中介，將某個對象直接賦值給空對象構造函數的原型。object()對傳入其中的對象執行了一次淺複製，將構造函數F的原型直接指向傳入的對象。可是父類引用屬性的修改會被共享，同時子類構建實例時不能傳參。
```
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
  }
  
  var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
  };
  var anotherPerson = object(person);
複製代碼
```

寄生式繼承：使用原型式繼承得到一個目標對象的淺複製，而後在函數中增長屬性，返回子類實例。

function createAnother(original){ 
      var clone=object(original);    //經過調用函數建立一個新對象
      clone.sayHi = function(){      //以某種方式來加強這個對象
          alert("hi");
      };
      return clone;                  //返回這個對象
  }
  
  var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
  };
  var anotherPerson = createAnother(person);
  anotherPerson.sayHi(); //"hi"
複製代碼

寄生組合式繼承：寄生式繼承和組合式繼承的結合。對父類原型進行淺複製，而後將子類原型替換爲剛剛複製的原型，父類構造函數的屬性經過構造函數繼承傳給子類。經過寄生方式，砍掉父類的實例屬性，解決了組合繼承會兩次調用父類的構造函數形成資源浪費。（要重寫子類constrctor屬性，推薦）

function inheritPrototype(subType, superType){
      var prototype = object(superType.prototype); // 建立了父類原型的淺複製
      prototype.constructor = subType;             // 修正原型的構造函數
      subType.prototype = prototype;               // 將子類的原型替換爲這個原型
  }
  
  function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
  }
  
  SuperType.prototype.sayName = function(){
      alert(this.name);
  };
  
  function SubType(name, age){
      SuperType.call(this, name);
      this.age = age;
  }
  // 核心：由於是對父類原型的複製，因此不包含父類的構造函數，也就不會調用兩次父類的構造函數形成浪費
  inheritPrototype(SubType, SuperType);
複製代碼

以上是ES5繼承機制，實質是先創造子類的實例對象this，而後再將父類的方法添加到this上。
ES6繼承：先建立父類的實例對象this，而後再用子類的構造函數修改this。由於子類沒有本身的this對象，因此必須先調用父類的super()方法，返回子類實例。super（）內部this指向子類，此時super（）做爲函數，只能出如今子類的構造函數中。super做爲對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。因爲super指向父類的原型對象，因此定義在父類構造函數上的方法或屬性，是沒法經過super調用的。constructor表示構造函數，一個類中只能有一個構造函數，若是沒有顯式指定構造方法，則會添加默認的 constructor方法。構造函數外定義的方法在原型對象上

11. this指向問題

全局做用域下，this指向window
若是給元素的事件綁定函數，函數中的this指向當前綁定的這個元素
函數中的this，定義時不會指向任何值，只有在調用時纔會指向調用它的對象。即指向 . 前面的對象，若是沒有，就指向window
自調用的函數中 this 永遠指向 window
構造函數中的 this 指向當前實例
箭頭函數中沒有this，若是輸出this，會輸出箭頭函數定義時所在的定義域的 this
call, apply, bind 能夠改變 this 的指向

12. 事件機制

事件捕獲：當用戶點擊或觸發DOM事件時，父級元素先被觸發，子級元素後被觸發
事件冒泡：當用戶點擊或觸發DOM事件時，子級元素先被觸發，父級元素後被觸發
DOM 0級事件：直接在元素上使用 onClick 綁定。可是不能在同一個元素上綁定兩個事件(綁定兩個的話，後面的會覆蓋前面的)。並且不能控制元素的事件流是捕獲仍是冒泡。元素事件只能在冒泡階段觸發
DOM 2級事件流存在三個階段：事件捕獲階段，處於目標階段，事件冒泡階段。首先是事件捕獲階段，從上向下傳播；而後到達點擊事件目標節點；最後是冒泡階段，從下向上傳播。
DOM2中全部的 HTML 元素上都定義了兩個方法： addEventListener() 和 removeEventListener()。第三個參數定義該事件是在冒泡階段仍是捕獲階段被觸發，默認false，表示在冒泡階段被觸發。若事件觸發目標DOM節點爲target，document 往 target節點，捕獲前進，遇到註冊的捕獲事件當即觸發執行（若是該事件綁定多個函數，按註冊順序執行）；到達target節點，觸發事件（對於target節點上，無論是捕獲仍是冒泡，先註冊先執行）；target節點往 document 方向，冒泡前進，遇到註冊的冒泡事件當即觸發

13. new操做具體實現了什麼

建立一個空對象，this指向該對象。同時還繼承了該構造函數的原型
屬性和方法被加入到 this 指向的對象實例中

14. ajax原理

在用戶和服務器之間添加了一箇中間層（ajax引擎），而後經過XmlHttpRequest對象向服務器發送異步請求，從服務器獲取數據，而後經過 js 操做 DOM 來更新頁面。使得用戶操做和服務器響應異步化。

步驟

建立鏈接

var xhr = new XmlHttpRequest;
複製代碼

鏈接服務器

xhr.open('get', url, true);
複製代碼

監聽請求數據。首先檢查XMLHttpRequest的總體狀態而且保證它已經完成（readyStatus=4），即數據已經發送完畢。而後根據服務器的設定詢問請求狀態，若是一切已經就緒（status=200）

xhr = onreadystatechange = function() {
    if(xhr.readystate == 4) {
        if(xhr.status == 200) {
            success(xhr.responseText)
        } else {
            fail && fail (xhr.status)
        }
    }
}
複製代碼

發送請求
```
xhr.send(null);

複製代碼
```

15. XML和JSON的區別

XML: 可擴展標記語言。用來標記文件使其具備結構性。可用來標記數據，定義數據類型。不用來表現或展現數據。格式統一，易於和其餘系統進行交互。但文件大，格式複雜，傳輸佔帶寬，解析起來也耗費資源和時間
JSON: 輕量級的數據格式，是js的一個子集，利用js中的一些模式來表示結構化數據。可在不一樣平臺間進行數據交換。格式簡單，佔用帶寬小。易於解析和維護

16. window.onload()和$(document).ready()的區別

window.onload()：等到網頁中全部的內容（包括圖片和iframe中的內容）所有加載完以後纔會執行
$(document).ready()：在DOM樹繪製完以後就會執行。是 DOMContentLoaded 在 jQuery中的實現

17. 幾種判斷數據類型的方法

typeof: 返回一個表示數據類型的字符串。返回結果有 number、string、boolean、object、undefined、function。對於引用類型，除了function以外返回的都是object。null返回object
instanceof: 判斷左操做數對象的原型鏈上是否有右邊這個構造函數的prototype屬性，也就是說指定對象是不是某個構造函數的實例，最後返回布爾值。
constructor: 返回全部 JavaScript 變量的構造函數,包括自定義對象，即某個實例對象是哪個構造函數產生的。可是，constructor屬性易變，不可信賴，主要體如今自定義對象上，當重寫prototype後，原有的constructor會丟失。所以，爲了規範，在重寫對象原型時通常都須要從新給constructor賦值，以保證明例對象的類型不被改寫。

18. js的幾種設計模式

工廠模式：定義一個建立對象的接口，該接口決定實例化哪個類。至關於把方法封裝起來了。解決了重複實例化的問題，可是沒法檢測具體的對象類型，只知道是Object。
單例模式：一個對象只有一個實例，並提供一個外部函數，該函數中用一個變量標識是否建立過該對象的實例，若是沒有建立過，則經過構造函數建立；若是建立過，返回原先建立的實例
發佈訂閱模式：訂閱者把本身想訂閱的事件註冊到調度中心，當該事件觸發時候，發佈者發佈該事件到調度中心，由調度中心統一調度訂閱者註冊到調度中心的處理代碼。發佈者和訂閱者不知道彼此存在
觀察者模式：一對多。當一個對象狀態發生改變時，依賴他的對象都會獲得通知。實現時須要：定義觀察者，觀察者擁有一個緩存列表。當發佈消息時，遍歷緩存列表，依次觸發裏面存放的目標的回調函數。
代理模式：當不想對一個對象直接操做時，爲一個對象添加一個對象作代理，以便對原對象進行操做。
外觀模式：爲子系統中的一組接口提供一個更高層的接口，方便調用
適配器模式
裝飾器模式
迭代器模式
狀態模式

19. 改變 this 指向

call(): 第一個參數指定this的指向，指定的對象的this指向就是函數運行的做用域。後續參數就是傳入這個函數的實參
apply(): 只有兩個參數。第一個參數和call()相同，第二個參數必須是數組，數組元素就是傳入函數的參數
bind(): 前面兩種方法會直接執行函數。bind()會建立一個函數的實例，其this值會z指向傳給bind()的對象的做用域。須要調用bind()實現函數的執行

20. var let const

var: 用 var 定義的變量是全局做用域。能夠定義名字相同的變量。若是定義變量前沒有關鍵字聲明，默認是全局做用域。存在變量提高。但是先試用後定義。
let: 定義塊級做用域變量。沒有變量的提高，必須先聲明後使用。同個做用域下，不容許有任何關鍵字聲明的重名變量。
const: 定義只讀變量。const聲明變量的同時必須賦值，一旦初始化完畢就不容許修改。const聲明變量也是一個塊級做用域變量。沒有變量提高，必須先聲明後使用。同個做用域下，不容許有任何關鍵字聲明的重名變量。

21. ES6 新特性

有塊級做用域。let定義塊級做用域變量,沒有變量的提高，必須先聲明後使用 let聲明的變量，不能與前面的let，var，conset聲明的變量重名
const 定義只讀變量。const聲明變量的同時必須賦值，一旦初始化完畢就不容許修改。const聲明變量也是一個塊級做用域變量。const聲明的變量沒有「變量的提高」，必須先聲明後使用。const聲明的變量不能與前面的let， var ， const聲明的變量重名。 const定義的對象/數組中的屬性值能夠修改,基礎數據類型不能夠
能夠給形參函數設置默認值
展開運算符(...)。能夠在函數調用時經過展開運算符傳參。或者用來合併數組。還能夠用來解構賦值，可是此時展開運算符只能用在最後。（對象不能用）
解構賦值。按照必定模式，從數組和對象中提取值，對變量進行賦值。相似於模式匹配，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。若是解構不成功，變量賦值爲 undefined。也能夠不徹底解構，即左邊只匹配一部分右邊
箭頭函數。至關於匿名函數，不能做爲構造函數的。箭頭函數沒有本身的this。他的this是繼承當前上下文中的this。箭頭函數沒有函數原型。不能使用call、apply、bind改變箭頭函數中this指向

22. 數組的方法

改變原數組的方法
- splice()：向/從數組中添加/刪除項目，而後返回被刪除的項目。若沒有刪除或只是添加，則返回空數組 array.splice(index,howmany,item1,.....,itemX)
  index：必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置;
  howmany：可選。要刪除的項目數量。若是設置爲 0，則不會刪除項目;
  item1, ..., itemX：可選。向數組添加的新項目。
- sort()：對數組元素進行排序，並返回這個數組。
  不傳參時，默認按字母升序，若是不是元素不是字符串的話，會調用toString()方法將元素轉化爲字符串的Unicode(萬國碼)位點，而後再比較字符。
  默認參數要在函數中接收
- pop() ：刪除一個數組中的最後的一個元素，而且返回這個元素。
- shift()：刪除數組的第一個元素，並返回這個元素。
- push() ：向數組的末尾添加一個或多個元素，並返回新的長度。
- reverse()：顛倒數組中元素的順序。
- ES6:fill() : 使用給定值，填充一個數組。
  第一個元素(必須): 要填充數組的值
  第二個元素(可選): 填充的開始位置,默認值爲0
  第三個元素(可選)：填充的結束位置，默認是爲this.length
不改變原數組的方法
- slice()：返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象，且原數組不會被修改。（字符串也有一個slice() 方法是用來提取字符串的）
- indexOf()：返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。
- cancat(): 合併兩個或多個數組，返回一個新數組。
遍歷數組的方法
- map(): 參數是一個函數，map()建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。
- ES6: find()& findIndex() :
  find()定義：用於找出第一個符合條件的數組成員，並返回該成員，若是沒有符合條件的成員，則返回undefined。
  findIndex()定義：返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

23. Promise 對象

Promise 有三種狀態
- pending：初始狀態。進行中
- fulfilled：已成功
- rejected：已失敗
Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve和reject。new Promise的時候，會把傳遞的函數當即執行
resolve函數的做用是，將Promise對象的狀態從 pending 變爲resolved，在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；
reject函數的做用是，將Promise對象的狀態從 pending 變爲rejecte，在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。
.then() 方法接受兩個回調函數做爲參數。第一個回調函數是Promise對象的狀態變爲resolved時調用，第二個回調函數是Promise對象的狀態變爲rejected時調用。
then方法返回的是一個新的Promise實例。所以能夠採用鏈式寫法。第一個回調函數完成之後，會將返回結果做爲參數，傳入第二個回調函數。
.catch() 方法用於指定發生錯誤時的回調函數。它與.then() 第二個參數不一樣的是，能夠捕獲回調函數中的錯誤。
catch方法返回的仍是一個 Promise 對象，所以後面還能夠接着調用then方法。
resolve函數的參數除了正常的值之外，還多是另外一個 Promise 實例。若是傳入的實例的狀態是pending，那麼原來實例的回調函數就會等待傳入實例的狀態改變；若是傳入實例的狀態已是resolved或者rejected，那麼原來實例的回調函數將會馬上執行。
Promise 在resolve語句後面，再拋出錯誤，不會被捕獲，等於沒有拋出。由於 Promise的狀態一旦改變，就永久保持該狀態，不會再變了。
Promise.resolve()：將現有對象轉爲 Promise 對象
- 若是參數是 Promise 實例，那麼Promise.resolve將不作任何修改、原封不動地返回這個實例。
- 參數是一個thenable對象（具備then方法的對象），會將這個對象轉爲Promise對象，而後就當即執行thenable對象的then方法。
- 若是參數是一個原始值，或者是一個不具備then方法的對象，則Promise.resolve方法返回一個新的 Promise 對象，狀態爲resolved。因此then後面的回調函數會當即執行
- 不帶參數，直接返回一個resolved狀態的 Promise 對象

24. `<script>`中defer和async的區別

沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，不等待後續載入的文檔元素，讀到就加載並執行。
有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。加載完就執行
有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

25. js異步加載的方式

defer
async
動態建立DOM
按需異步載入js

26. use strict

嚴格模式。規範js代碼，減小怪異行爲
規則
- 變量必須聲明後才能使用
- 函數的參數不能有同名屬性，不然報錯
- 不能使用 with 語句

27. attribute 和 property 區別

attribute 是 DOM 元素在文檔中做爲html標籤擁有的屬性。始終保持html中的初始值。
property 是 DOM 元素在js中做爲對象具備的屬性。能夠經過js動態改變。
property可以從attribute中獲得同步；attribute不會同步property上的值

28. 瀏覽器事件循環機制（event loop）

js是單線程。但瀏覽器是事件驅動的，不少行爲是異步的。一個瀏覽器至少有三個常駐線程：js引擎線程、GUI渲染線程、事件觸發線程
js引擎線程：主要有堆和棧構成。堆中分配內存資源。函數的調用會造成一個個棧幀放入棧中
執行棧：每一個函數執行的時候，都會生成新的執行上下文。執行上下文包含當前函數的參數、局部變量之類的信息。它會被壓入棧中。正在執行的上下文會始終處於棧的頂部。函數執行完畢後，會從棧中彈出
程序中通常有兩個線程，一個是主線程，負責程序自己。另外一個負責主線程和其餘進程之間的通訊，被稱爲Event Loop線程（消息線程）。
事件循環:
- 函數入棧，當執行到異步任務時，把異步任務交給webapis，而後繼續執行同步任務，直到棧空
- 在此期間，webapis執行異步任務，並把回調函數放入回調序列中等待
- 當執行棧爲空時，把回調序列中的任務放到執行棧中，而後回到第一步

29. Generator函數

函數名以前要加星號.
Generator 函數就是一個封裝的異步任務，異步操做須要暫停的地方，都用 yield 語句註明。
調用 Generator 函數，會返回一個內部指針（即遍歷器）。調用指針的 next 方法，會移動內部指針（即執行異步任務的第一段），指向第一個遇到的 yield 語句，依次向後
每次調用 next 方法，會返回一個對象，表示當前階段的信息（ value 屬性和 done 屬性）。
value 屬性是 yield 語句後面表達式的值，表示當前階段的值
done 屬性是一個布爾值，表示 Generator 函數是否執行完畢，便是否還有下一個階段。

30. async函數、await

async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await
對Generator的改進體如今：
- async函數的執行，與普通函數如出一轍調用便可。但Generator 函數的執行必須靠執行器（.next()）
- async函數的await命令後面，能夠是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時會自動轉成當即 resolved 的 Promise 對象）。
async函數返回一個 Promise 對象，可使用then方法添加回調函數。當函數執行的時候，一旦遇到await就會先返回，等到異步操做完成，再接着執行函數體內後面的語句。

31. 淺拷貝和深拷貝

淺拷貝：只是拷貝了基本類型的數據，而引用類型數據，複製後也是會發生引用。即只複製了內存地址。若是原地址中對象被改變了，那麼淺複製出來的對象也會相應改變。
深拷貝：建立一個新對象，屬性中引用的其餘對象也會被克隆，再也不指向原有對象地址。

- 其餘

1. 響應式佈局

使同一頁面在不一樣分辨率的設備下有相同的表現
媒體查詢：針對不一樣的媒體類型定義不一樣的樣式，當重置瀏覽器窗口大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。經過 @media 和 min-width、max-width 實現
設置百分比：元素寬和高隨着瀏覽器的高度的變化而變化。子元素的height或width中使用百分比，是相對於子元素的直接父元素的height和width。子元素的top和bottom相對於直接非static定位(默認定位)的父元素的height，left和right相對於width。無論垂直仍是水平方向，padding和margin相對於直接父元素的width。border-radius，backgroung-size相對於自身。
設置rem：css3新特性。rem單位都是相對於根元素html的font-size來決定大小的,因此當前頁面發生變化時，只須要改變根元素font-size大小便可。rem決定了 1rem=？px
css3引用視口單位。vw、vh、vmin、vmax。決定了 1vw = ？px
圖片自適應：圖片隨容器大小進行縮放 display: inline-block;max-width: 100%;height: auto;
height爲auto能夠保證圖片進行等比縮放而不至於失真。

2. 跨域

jsonp跨域(只能解決get）原理：動態建立一個script標籤。利用script標籤的src屬性不受同源策略限制，由於全部的src屬性和href屬性都不受同源策略的限制，能夠請求第三方服務器資源內容。步驟：
- 1).去建立一個script標籤
- 2).script的src屬性設置接口地址
- 3).接口參數，必需要帶一個自定義函數名，要否則後臺沒法返回數據
- 4).經過定義函數名去接受返回的數據

3. HTTP幾種請求（8種）

GET: 發送一個請求獲取服務器上的某個資源。資源經過一組HTTP頭和呈現數據返回給客戶端。GET請求中，永遠不會包含請求數據，不會影響資源的內容
POST: 向URL指定的資源提交數據進行處理請求（提交表單或上傳文件）。數據包含在請求體中。POST請求可能會致使新的資源的創建或已有資源的修改
PUT: 向服務器發送請求，若是URI不存在，則要求服務器根據請求建立資源，若是存在，服務器就接受請求內容，並修改URI的原始版本。(PUT和POST極爲類似，都是向服務器發送數據，但它們之間有一個重要區別，PUT一般指定了資源的存放位置，而POST則沒有，POST的數據存放位置由服務器本身決定。)
HEAD: 和GET本質是同樣的，區別在於HEAD不含有呈現數據，而僅僅是HTTP頭信息。（好比判斷某個資源是否存在時用到）
DELETE: 刪除服務器上的某一資源
OPTIONS: 用於獲取當前URL所支持的方法。若請求成功，則它會在HTTP頭中包含一個名爲「Allow」的頭，值是所支持的方法，如「GET, POST」。
TRACE: 回顯服務器收到的請求，主要用於測試或診斷。
CONNECT: HTTP/1.1協議中預留給可以將鏈接改成管道方式的代理服務器

4. 狀態碼

1XX：信息狀態碼
- 100 Continue：請求者應當繼續提出請求。服務器返回此代碼表示已收到請求的第一部分，正在等待其他部分。（通常在發送post請求時，已經發送了http header以後，服務端將返回此消息表示確認）
- 101 Switching Protocols：請求者已要求服務器切換協議，服務器已確認並準備切換。
2XX: 成功狀態碼
- 200 OK: 服務器已經成功處理了請求。一般表示服務器提供了請求的網頁
- 201 Created: 請求成功而且服務器建立了新的資源
- 202 Accepted: 服務器已經接受請求，可是未處理
- 203 Non-Authoritative Information: 服務器已經成功處理了請求，但返回的信息可能來自於另外一來源
- 204 No Content: 服務器已經成功處理了請求，可是沒有返回任何內容
- 205 Reset Content: 表示沒有新的資源，瀏覽器應顯示原來的資源，但要重置資源的內容
- 206 Partial Content: 服務器成功處理了部分請求
3XX: 重定向
- 301 Move Permanently: 請求的網頁已經永久移動到新位置。服務器返回此響應(對 GET 或 HEAD 請求的響應)時，會自動將請求者轉到新位置。
- 302 Found: 臨時性重定向。服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。
- 303 See Other: 請求者應當對不一樣的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
- 304 Not Modified: 自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容
4XX: 客戶端錯誤
- 400 Bad Request: 服務器不理解請求的格式
- 401 Unauthorized：請求未受權，要求身份驗證。對於須要登錄的網頁，可能返回此狀態碼
- 403 Forbindden: 禁止訪問，服務器拒絕請求
- 404 Not Found: 服務器找不到請求的頁面
5XX: 服務器錯誤
- 500 Internel Server Error: 服務器內部錯誤，沒法完成請求
- 503 Service Unavailable: 服務器端暫時沒法處理請求（多是過載或維護）

5. SEO

設置合理的 title、description、keywords。搜索引擎對這三項的權重逐個減少。title強調重點，description要高度歸納，不要過度堆砌關鍵詞。keywords列出重要關鍵詞
語義化HTML代碼。語義化代碼讓搜索引擎更容易理解網頁
少用iframe。搜索引擎不會抓取iframe裏面的內容
重要內容不要用js輸出
重要內容HTML代碼放在前面

6. cookies, sessionStoreage, localStorage區別

都保存在瀏覽器端，且同源
cookies: cookies數據始終在同源的http請求中攜帶（即便不須要），即cookies在瀏覽器和服務器間來回傳遞。cookies數據還有路徑的概念，能夠限制cookies只屬於某個路徑下。存儲大小不能超過4k。cookies在設置的過時時間以前一直有效，即便窗口或瀏覽器關閉。在全部同源窗口中共享。
sessionStorage: 不會主動把數據發給服務器，數據僅在本地保存。存儲大小能夠達到5M甚至更大。數據在當前瀏覽器窗口關閉後自動刪除，不能在不一樣瀏覽器窗口中共享，即便是同一頁面
localStorage: 不會主動把數據發給服務器，數據僅在本地保存。存儲大小能夠達到5M甚至更大。數據始終有效，瀏覽器或窗口關閉也一直保存，除非主動刪除數據。用做存儲持久數據。數據在全部同源窗口中共享

7. 瀏覽器地址欄輸入url後顯示頁面的原理

瀏覽器查找當前URL是否存在緩存，並檢查緩存是否過時。
瀏覽器將URL交給DNS進行解析，得到真實的IP
根據IP創建TCP連接（三次握手）
瀏覽器向服務器發起請求
服務器處理請求並向瀏覽器返回數據，瀏覽器接受響應，接受文件（html，css，js等）
瀏覽器對接受到的資源進行分析，渲染頁面，構建DOM樹
關閉TCP鏈接（四次揮手）

8. 語義化

使用恰當的html標籤，class類名等，是頁面具備良好的結構和含義，讓人和機器都能更好的理解內容
html語義化是讓頁面的內容結構化，使用html定義好的語義化標籤，儘可能避免大量無語義化標籤的使用。在沒有css的狀況下也能夠理解，有利於SEO。使閱讀源碼的人易於理解
css語義化是使類名和id名易於理解

9. 瀏覽器內核

主要分爲兩部分：渲染引擎、js引擎
渲染引擎負責取得網頁的內容（html、圖片等）、整理訊息（加入css等）、計算網頁的顯示方式。而後輸出到屏幕或者打印機等。不一樣的瀏覽器內核對不一樣網頁的語法解釋不一樣，全部渲染效果也會有所不一樣。大部分應用都須要內核
js引擎負責解析和執行js代碼以實現網頁的動態效果
如今的瀏覽器內核傾向於指渲染引擎
Trident內核：IE6及以上、360、搜狗、百度等
Gecko內核：火狐等
Webkit內核： Safari 瀏覽器、iPhone 和 iPad 等蘋果 iOS 平臺
Chromium/Blink內核：Chrome瀏覽器
Presto內核：Opera 瀏覽器

10. web標準和w3c標準

web標準簡單來講能夠分爲結構、樣式和行爲並將該三部分獨立分開，使其更具備模塊化。HTML標籤構成頁面的結構框架。css完成美化html標籤構成的頁面。js能夠完成頁面和用戶的交互。
W3C對web標準提出了規範化的要求
- 對結構要求：標籤字母小寫，標籤要閉合，標籤不容許隨意嵌套
- 對css和js要求：儘可能使用外鏈css和js，行爲和結構分離，儘可能少用行內樣式表

11. link 和 @import 的區別

link 屬於html標籤，不只能夠加載CSS文件，還能夠定義rel等屬性；@import是css提供的，只能導入樣式表。
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
link最大限度的支持並行下載，@import過多嵌套致使串行下載，出現FOUC
@import只有IE5以上才能識別，而link是html標籤，無兼容問題
link方式的樣式的權重高於@import的權重

12. 優雅降級和漸進加強

優雅降級：一開始就構建完整的功能，而後針對低版本的瀏覽器進行修改使其兼容。好比css3中使用hack（向下兼容）
漸進加強：一開始就針對低版本瀏覽器進行構建，完成基本功能後，再針對高級瀏覽器追加效果達到更好體驗（向上兼容）
二者只是看待事物的兩種觀點。優雅降級關注點在於針對高版本，完善的瀏覽器來設計網站，低版本的瀏覽器中只要實現基本功能就好，除了修復比較大的錯誤外，其餘的差別可能被忽略掉。漸進加強的關注點在於網站的內容。這種設計理念比較合理，也應用的比較普遍

13. HTTP無狀態，登陸有狀態，怎麼保持，cookie，session

HTTP 是無狀態協議，它不能以狀態來區分和管理請求和響應。也就是說，服務器單從網絡鏈接上無從知道客戶身份。
Cookie是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息。是服務器在本地機器上存儲的一小段文本，並隨着每次請求發送到服務器。服務器收到保存請求後，通知客戶端保存cookies。而後客戶端保存cookies，而且客服端再次發起請求時，會自動在請求報文中攜帶cookies。服務器收到後，會檢查是哪一個客戶端發送的請求，而後獲取以前的狀態信息。
session 默認被存在在服務器的一個文件裏（不是內存）。session 的運行依賴 session id，而 session id 是存在 cookie 中的，也就是說，若是瀏覽器禁用了 cookie ，同時 session 也會失效（可是能夠經過其它方式實現，好比在 url 中傳遞 session_id）。用戶驗證這種場合通常會用 session

14. 前端頁面優化

儘可能減小 http 請求的次數
在js中儘可能減小閉包的使用
減小對 DOM 的操做
儘可能使用事件委託來處理和綁定事件
合理設計http緩存
合併CSS圖片，用css精靈
將外部腳本置底

框架的配置（webpack，腳手架）

16. TCP三次握手

第一次握手：客戶端發送一個 SYN 碼和序列號 seq=x（隨機）給服務器，請求創建鏈接
第二次握手：服務器發送一個確認包和本身的 SYN 給客戶端，即 SYN+ACK，並將序列號設置爲 seq=y，確認號設置爲 ack=x+1 ，表示能夠創建鏈接
第三次握手：客戶端再發送一個 ACK 給服務器，並將序列號設置爲 seq=x+1，確認號 ack=y+1。服務器驗證ACK沒有問題，創建起鏈接

17. TCP四次揮手（客服端和服務器都可發起）

第一次揮手：主動方發送 FIN 報文和隨即序列號 seq=u 給被動方，通知被動方數據已經發送完畢，但還能夠接收（主動方進入FIN_WAIT_1 狀態）
第二次揮手：服務器接收到後，發送一個確認包 ACK。表示已經接收到了主動方的請求，但尚未準備好關閉鏈接。而且將序列號設置爲 seq=v，確認號ack=u+1 （被動方端進入 CLOSE_WAIT 狀態，主動方接收到這個確認包以後，進入 FIN_WAIT_2 狀態）
第三次揮手：被動方準備好關閉鏈接時，向主動方發送結束請求，FIN置爲1，序列號設置爲 seq=w, ACK仍置爲1，確認號仍爲 ack=u+1 （被動方端進入 LAST_ACK 狀態，等待來自客戶端的最後一個ACK。）
第四次揮手：主動方接收到被動方的關閉請求，發送一個確認包，即ACK，並將序列號設置爲 seq=u+1，確認號設置爲 ack=w+1 （主動方進入TIME_WAIT狀態，被動方收到這個確認包以後，關閉鏈接，進入 CLOSED 狀態。）

18. 爲何創建鏈接時是三次不是兩次？

若是隻有兩次握手，客戶端發送請求後，服務器回覆一個確認包，請求就能創建。可是客戶端不必定會收到確認包，若是確認包丟失，服務器的資源會一直被佔用。客戶端沒有收到確認包還會再次發起請求，這時以前創建的請求會浪費。還有一種狀況，客戶端再次發起請求後，又收到了上一次的確認包，這時以前的請求仍是會浪費

19. 爲何斷開鏈接時是四次

由於數據是雙向傳遞的，斷開鏈接時須要確保雙方的數據都傳輸完畢

- 數據結構

1. 排序（小->大）

冒泡排序：從後往前，比較兩個相鄰的元素，若後面比前面小，交換。每一遍遍歷後都會將無序部分的最小值交換到最前面（n*n）
簡單選擇排序：設置最小值下標 min ，min 初始值爲最開始爲當前元素（第一個元素）的下標，當前元素逐個與後面的無序部分的元素比較，若後面的元素值小，將 min 值設置爲小的元素的下標值。遍歷完一遍後，比較當前元素下標與 min，若不相等，將兩個座標對應的值交換。而後追個向後遍歷。（n*n）
直接插入排序：從第一個元素開始，該元素認爲已經被排好序。取出下一個元素，賦值給 key 。而後在已經排好序的元素中從後向前掃描，若是該元素大於 key ，將該元素後移。知道掃描到小於或等於 key 的元素，而後將 key 插入到該元素的後面。而後再取出無序的下一個元素，賦值給key 繼續掃描。（n*n）
希爾排序：直接插入的優化。將待排序的數組元素按下標的必定增量分組，分紅多個子序列，而後對各個子序列進行直接插入排序算法排序；而後依次縮減增量再進行排序，直到增量爲1時，進行最後一次直接插入排序，排序結束。
堆排序：將待排序序列構形成一個大頂堆，此時，整個序列的最大值就是堆頂的根節點。將其與末尾元素進行交換，此時末尾就爲最大值。而後將剩餘n-1個元素從新構形成一個堆，這樣會獲得n個元素的次小值。如此反覆執行，便能獲得一個有序序列了
歸併排序：把序列中每兩個相鄰的元素進行歸併操做，若此時序列數不是1，繼續歸併，直到序列書爲1。歸併是把兩個有序序列合併成一個有序序列。經過從頭開始逐個比較兩個小序列元素的值，依次插入到大序列中，直到其中一個小序列所有插入進去，而後將另外一個序列的值直接插入到大序列中。
快速排序：冒泡排序的改進。從序列中選出一個基準值，將全部比基準值小的元素放在左邊，大的放在右邊。而後對左右兩邊的序列再進行這種排序。直到排序數列的長度爲1。首先從數列的右邊開始往左邊找，咱們設這個下標爲 i，也就是進行減減操做（i--），找到第 1 個比基準數小的值，讓它與基準值交換；接着從左邊開始往右邊找，設這個下標爲 j，而後執行加加操做（j++），找到第 1 個比基準數大的值，讓它與基準值交換；而後繼續尋找，直到 i 與 j 相遇時結束，最後基準值所在的位置即 k 的位置

2. 查找

順序查找：從序列中第一個元素開始查找，比較，直到最後一個
折半查找：有序表中，若給定值和序列中間元素相等，則查找成功。若給定值小於中間元素，則在左邊區域查找，反之，去右邊查找。不斷重複，直到查找成功

3. 數組和鏈表的區別

數組在內存中的空間是連續的。而且須要預留空間，在使用前要先申請佔內存的大小，因此可能會浪費內存空間。插入數據和刪除數據效率低。隨機讀取效率很高。由於數組是連續的，知道每個數據的內存地址，能夠直接找到給地址的數據。
在內存中不要求連續，能夠在任何地方。大小不用定義，數據隨意增刪。每個數據都保存了下一個數據的內存地址，經過這個地址找到下一個數據。增長數據和刪除數據很容易。查找數據時效率低，由於不具備隨機訪問性，因此訪問某個位置的數據都要從前一個數據開始訪問，而後根據前一個保存的地址找到下一個。

4. 二叉樹

遍歷
- 層次、先序、中序、後序
- 遞歸實現：當前節點不爲空，遞歸調用函數並將（左/右）節點傳入
- 非遞歸實現：以先序爲例。
  - 先訪問根節點，並把節點入棧。
  - 再把當前節點設置爲左孩子節點，判斷是否爲空，若爲空，棧頂節點出棧，把右孩子設置爲當前節點；不然重複上面步驟
  - 直到當前節點和棧空。（棧中的節點是爲了訪問右孩子才儲存的）

- 數據庫

增刪改查

刪除： delete，drop，truncate

mysql優化

- React

1.虛擬DOM

state數據
JSX模版
數據+模版生成虛擬DOM（虛擬DOM就是一個js對象，用它來描述真實DOM）（損耗性能） eg：['div', {id: 'abc'},['span', {}, 'hello world']]
用虛擬DOM的結構生成真實的DOM來顯示 eg:
hello world
state發生變化
數據+模版生成新的虛擬DOM （極大提高來性能） eg：['div', {id: 'abc'},['span', {}, 'bye bye']]
比較原始虛擬DOM和新的虛擬DOM的區別，找去不一樣不分的內容
直接操做DOM，改變發生變化的內容

2. diff算法

短間隔的屢次setState能夠結合成一次，減小虛擬DOM比對次數，優化性能
虛擬DOM比對時採用【同層比對】，從上至下，逐層比對。當發現有不一樣時，再也不向下比對，直接廢棄掉下層的虛擬DOM，直接用新的替換真實DOM
列表循環時引入key值，提升虛擬DOM比對的性能。key值要保持穩定，儘可能不要用index 作key值

3. 生命週期函數

生命週期函數指某一時刻組件會自動調用執行的函數（如render()函數）
Initialization
- constructor():設置props, state
Mounting
- componentWillMount():組件即將被掛載（組件第一次在頁面上展現）到頁面以前被自動執行
- render():必須存在且自定義
- componentDidMount():組件被掛載到頁面以後被自動執行
Upnation (props, state)
- componentWillReceiveProps: (只針對props)一個組件要從父組件接收參數。只要父組件的render函數被從新執行了，子組件的這個生命週期函數就會被執行（該組件以前存在於父組件中，纔會執行）。- shouldComponentUpdate():組件被更新以前，被自動執行。該函數返回一個bool值，若返回false，組件不會更新；通常返回true，執行下面的更新流程。
- componentWillUpdate():組件被更新以前，它會自動執行。可是在shouldComponentUpdate()以後執行。若shouldComponentUpdate()返回false，它不會執行。
- render()
- componentDidUpdate:組件被更新以後，它會執行
Unmounting
- componentWillUnmount():組件即將被從頁面中移除時自動執行

4. 性能優化

父組件的render函數執行時，子組件的render會被從新執行。損耗性能。使用shouldComponentUpdate函數，比較當前狀態和下一個狀態的須要改變的內容是否相同，不相同時才執行子組件的render函數
diff算法同層比較
setState函數異步，能夠把屢次數據更新合併成一次

5. redux工做流

建立store
建立reducer
組件鏈接store，經過this.state = store.getState();得到store中的數據
定義action，而後使用store.dispatch(action);傳遞給store。store接受到後，自動將當前數據和接收到的action轉發給reducer
reducer對數據進行處理，返回新數據給store （reducer能夠接收state,但毫不能修改state。const newState = JSON.parse(JSON.stringify(state));深拷貝後對數據進行操做）
組件更新。store.subscribe(this.handleStoreChange);store內容發生改變時，自動調用做爲參數的該函數
在該函數中，再次獲取store的值便可

6. ref

構建一個ref引用，函數形式。該函數自動接受參數input（input標籤對應的DOM元素），下面便可直接使用this.input代替e.target
e.target的結果是input對應的DOM元素節點
不推薦使用ref，儘可能不要直接操做DOM元素

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。