揣包自用的前端小冊

慢慢整理、修改、豐富。更多內容請關注 GitHub

HTML相關

1.HTML5的優缺點

優勢：

• 網絡標準統1、HTML5自己是由W3C推薦出來的。
• 多設備、跨平臺
• 即時更新。
• 提升可用性和改進用戶的友好體驗；
• 有幾個新的標籤，這將有助於開發人員定義重要的內容；
• 能夠給站點帶來更多的多媒體元素(視頻和音頻)；
• 能夠很好的替代Flash和Silverlight；
• 涉及到網站的抓取和索引的時候，對於SEO很友好；
• 被大量應用於移動應用程序和遊戲。

缺點：

• 安全：像以前Firefox4的web socket和透明代理的實現存在嚴重的安全問題，同時web storage、web socket 這樣的功能很容易被黑客利用，來盜取用戶的信息和資料。
• 完善性：許多特性各瀏覽器的支持程度也不同。
• 技術門檻：HTML5簡化開發者工做的同時表明了有許多新的屬性和API須要開發者學習，像web worker、web socket、web storage 等新特性，後臺甚至瀏覽器原理的知識，機遇的同時也是巨大的挑戰
• 性能：某些平臺上的引擎問題致使HTML5性能低下。
• 瀏覽器兼容性：最大缺點，IE9如下瀏覽器幾乎全軍覆沒

2.HTML5的新特性

HTML5新增了 27 個元素，廢棄了 16 個元素

新特性：

• 語義：可以讓你更恰當地描述你的內容是什麼
• 連通性：可以讓你和服務器之間經過創新的新技術方法進行通訊
• 離線 & 存儲：可以讓網頁在客戶端本地存儲數據以及更高效地離線運行
• 多媒體：使 video 和 audio 成爲了在全部 Web 中的一等公民
• 2D/3D 繪圖 & 效果：提供了一個更加分化範圍的呈現選擇
• 性能 & 集成：提供了很是顯著的性能優化和更有效的計算機硬件使用
• 設備訪問 Device Access：可以處理各類輸入和輸出設備
• 樣式設計: 讓做者們來創做更加複雜的主題

3.HTML5元素

根據現有的標準規範，把 HTML5的元素按優先級定義爲結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。

結構性元素主要負責web上下文結構的定義

結構性元素	用途
section	在 web 頁面應用中，該元素也能夠用於區域的章節描述。
header	頁面主體上的頭部， header 元素每每在一對 body 元素中。
footer	頁面的底部（頁腳），一般會標出網站的相關信息。
nav	專門用於菜單導航、連接導航的元素，是 navigator 的縮寫。
article	用於表現一篇文章的主體內容，通常爲文字集中顯示的區域。

塊性元素主要完成web頁面區域的劃分，確保內容的有效分割

塊級元素	用途
aside	用於表達註記、貼士、側欄、摘要、插入的引用等做爲補充主體的內容。
figure	是對多個元素進行組合並展現的元素，一般與 ficaption 聯合使用。
code	表示一段代碼塊。
dialog	用於表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用於表示說話者，而 dd 用來表示說話內容。

行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展現的基礎

行內語義元素	用途
meter	表示特定範圍內的數值，可用於工資、數量、百分比等。
time	表示時間值。
progress	用來表示進度條，可經過對其 max 、 min 、 step 等屬性進行控制，完成對進度的表示和監事。
video	視頻元素，用於支持和實現視頻文件的直接播放，支持緩衝預載和多種視頻媒體格式。
audio	音頻元素，用於支持和實現音頻文件的直接播放，支持緩衝預載和多種音頻媒體格式。

交互性元素主要用於功能性的內容表達，會有必定的內容和數據的關聯，是各類事件的基礎。

交互性元素	用途
details	用來表示一段具體的內容，可是內容默承認能不顯示，經過某種手段（如單擊）與 legend 交互纔會顯示出來。
datagrid	用來控制客戶端數據與顯示，能夠由動態腳本及時更新。
menu	主要用於交互菜單（曾被廢棄又被從新啓用的元素）。
command	用來處理命令按鈕。

4.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、Doctype聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。

（2）嚴格模式的排版和JS 運做模式是以該瀏覽器支持的最高標準運行。

（3）在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

5.對WEB標準以及W3C的理解與認識?

• web標準

  • 什麼是web標準：一系列標準的集合，包括結構化標準語言（html等）、表現標準語言（css）、行爲標準語言（EMCAScript等）。這些標準大部分由萬維網聯盟起草和發佈
  • 爲何使用web標準：爲了解決因瀏覽器版本不一樣、軟硬件設備不一樣致使的需多版本開發的問題
• W3C：萬維網聯盟，是一個web開發的國際性聯盟

標準認識：

• 標籤閉合、標籤小寫、不亂嵌套
• 結構行爲表現分離：提升搜索機器人搜索概率、使用外鏈css和 js 腳本
• 文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問
• 容易維護、改版方便
• 提升網站易用性。

6.src和href的區別

• src指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求 src 資源時會將其指向的資源下載並應用到文檔內，用於替換當前元素,當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢
• href 指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接,用於在當前文檔和引用資源之間確立聯繫。

CSS相關

1.link和@import的區別

• link 是 XHTML 標籤，除了加載 CSS 外，還能夠定義 RSS 等其餘事務； @import 屬於 CSS 範疇，只能加載 CSS 。
• link 引用 CSS 時，在頁面載入時同時加載； @import 須要頁面網頁徹底載入之後加載。
• link 是 XHTML 標籤，無兼容問題； @import低版本的瀏覽器不支持。
• link 支持使用 Javascript 控制 DOM 去改變樣式；而 @import 不支持。

2.CSS盒模型

盒子模型有兩種，分別是IE盒子和標準W3C盒子模型。

W3C盒子模型包括margin、border、padding、content，而且content部分不包含其餘部分。

IE盒子模型包括margin、border、padding、content，和標準W3C盒子模型不一樣的是，IE盒子模型的content部分包含了borde和padding
標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊框的寬度
IE盒模型：width = content+padding-Left+padding-right+border-left + border-right

3.CSS選擇器類型有哪些以及優先級

• 通配符：*
• ID選擇器：#id
• 類選擇器：.class
• 元素選擇器：div p等
• 後代選擇器：a img div p 等
• 僞類選擇器：a:hover等
• 屬性選擇器：input[type="text"]等
• 子元素選擇器：li:firth-child等
• 相鄰兄弟選擇器：p + span
• 羣組選擇器：h1, h2, h3,...,h6

選擇器優先級順序：!important> 內聯樣式 > ID選擇器 > 類選擇器 > 元素和僞元素 > 通配符 > 繼承 > 默認

4.列出display的值並說明他們的做用

• block：指定對象爲塊級元素/顯示
• inline：指定對象爲行內元素
• inline-block：指定對象爲行內塊級元素
• none：取消樣式
• normal：指定對象爲默認樣式
• flex：指定對象爲彈性盒模型
• table：指定對象爲塊元素級的表格

5.如何居中元素

水平居中

(1)行內元素水平居中

• 利用 text-align: center 能夠實如今塊級元素內部的行內元素水平居中。此方法對inline、inline-block、inline-table和inline-flex元素水平居中都有效。

（2）塊級元素的水平居中

• 將該塊級元素左右外邊距margin-left和margin-right設置爲auto
• 使用table + margin：先將子元素設置爲塊級表格來顯示（相似），再將其設置水平居中，display:table在表現上相似block元素，可是寬度爲內容寬。
• 使用absolute + transform:先將父元素設置爲相對定位，再將子元素設置爲絕對定位，向右移動子元素，移動距離爲父容器的一半，最後經過向左移動子元素的一半寬度以達到水平居中.不過transform屬於css3內容，兼容性存在必定問題，高版本瀏覽器須要添加一些前綴。
• 使用flex+justify-content
• 使用flex+margin：經過flex將父容器設置爲爲Flex佈局，再設置子元素居中

(3)多塊級元素水平居中

• 利用flex佈局:其中justify-content 用於設置彈性盒子元素在主軸（默認橫軸）方向上的對齊方式
• 利用inline-block:將要水平排列的塊狀元素設爲display:inline-block，而後在父級元素上設置text-align:center，達到與上面的行內元素的水平居中同樣的效果。

(4)浮動元素水平居中

• 對於定寬的浮動元素，經過子元素設置relative + 負margin
• 對於不定寬的浮動元素，父子容器都用相對定位
• 通用方法(無論是定寬仍是不定寬)：利用彈性佈局(flex)的justify-content屬性，實現水平居中,子元素有無定寬不影響

(5)絕對定位元素水平居中

• 經過子元素絕對定位，外加margin: 0 auto來實現

垂直居中

(1)單行內聯元素垂直居中

• 利用行高line-height設置爲height的高度

(2)多行內聯元素垂直居中

• 利用flex佈局（flex）：利用flex佈局實現垂直居中，其中flex-direction: column`定義主軸方向爲縱向。這種方式在較老的瀏覽器存在兼容性問題
• 利用表佈局（table）:利用表佈局的vertical-align: middle能夠實現子元素的垂直居中

(3)塊級元素垂直居中

• 使用absolute+負margin(已知高度寬度);經過絕對定位元素距離頂部50%，並設margin-top向上偏移元素高度的一半，就能夠實現了
• 使用absolute+transform:當垂直居中的元素的高度和寬度未知時，能夠藉助CSS3中transform屬性向Y軸反向偏移50%的方法實現垂直居中。可是部分瀏覽器存在兼容性的問題。
• 使用flex+align-items:經過設置flex佈局中的屬性align-items，使子元素垂直居中
• 使用table-cell+vertical-align:經過將父元素轉化爲一個表格單元格顯示（相似 <td> 和 <th>），再經過設置 vertical-align屬性，使表格單元格內容垂直居中。

水平垂直居中

(1)絕對定位與負邊距（已知高度寬度）

• 須要知道被垂直居中元素的高和寬，才能計算出margin值，兼容全部瀏覽器

(2)絕對定位與margin:auto（已知高度寬度）

• 這種方式無需知道被垂直居中元素的高和寬，但不能兼容低版本的IE瀏覽器

(3)絕對定位+CSS3(未知元素的高寬)

• 利用Css3的transform，能夠輕鬆的在未知元素的高寬的狀況下實現元素的垂直居中。CSS3的transform當然好用，但在項目的實際運用中必須考慮兼容問題，大量的hack代碼可能會致使得不償失。

(4)flex佈局

• 利用flex佈局，其中justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。不能兼容低版本的IE瀏覽器。

(5)flex/grig和margin:0 auto

• 容器元素設爲 flex 佈局或是grid佈局，子元素只要寫 margin: auto 便可,不能兼容低版本的IE瀏覽器

詳見元素水平居中+垂直居中+水平垂直居中

6.優雅降級和漸進加強

優雅降級： Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.

漸進加強： 從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

7.CSS單位對比

單位	描述
%	百分比
px	像素
em	相對單位。相對於父元素計算，該元素的1em = 父元素px * 2
rem	相對單位。相對於根元素html，該元素的1rem = html的px * 2
rpx	微信小程序的相對單位，1rpx = 屏幕寬度/750px

8.對邊距摺疊的理解

外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）

相鄰： 沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係

垂直方向外邊距合併計算:

a、參加摺疊的margin都是正值：取其中 margin 較大的值爲最終 margin 值。

b、參與摺疊的 margin 都是負值：取的是其中絕對值較大的，而後，從 0 位置，負向位移。

c、參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。

9.CSS佈局中position的理解

position：static | relative | absolute | fixed | center | page | sticky

默認值：static，center、page、sticky是CSS3中新增長的值。

(1)、static

能夠認爲靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

(2)、relative

相對定位，對象遵循常規流，而且參照自身在常規流中的位置經過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

(3)、absolute

a、絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，若是沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。

b、元素定位參考的是離自身最近的定位祖先元素，要知足兩個條件，第一個是本身的祖先元素，能夠是父元素也能夠是父元素的父元素，一直找，若是沒有則選擇body爲對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值爲非static都行。

(4)、fixed

固定定位，與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。

(5)、center

與absolute一致，但偏移定位是以定位祖先元素的中心點爲參考。盒子在其包含容器垂直水平居中。（CSS3）

(6)、page

與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，不然取決於每一個absolute模式。（CSS3）

(7)、sticky

對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當捲動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

10.爲何要初始化CSS樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

• 最簡單的初始化方法就是（不建議）：{padding: 0; margin: 0;}
• 樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

11.SVG理解

SVG可縮放矢量圖形（ Scalable Vector Graphics ）是基於可擴展標記語言（ XML ），用於描述二維矢量圖形的一種圖形格式。

SVG 嚴格聽從 XML 語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。

特色：

• 任意放縮，破壞圖像的清晰度、細節等。
• 文本獨立，保留可編輯和可搜尋的狀態，無字體限制
• 體積小
• 超強顯示效果，適合任何屏幕分辨率和打印分辨率。
• 超級顏色控制
• 交互 X 和智能化

瀏覽器支持：

• Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支持 SVG 。
• IE8和早期版本都須要一個插件 - 如 Adobe SVG 瀏覽器，這是免費提供的。

JavaScript相關

1.經常使用DOM操做

• 1.建立節點

createDocumentFragment() // 建立一個DOM片斷
createElement() // 建立一個具體的元素
createTextNode() // 建立一個文本節點

• 2.添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() // 在已有的子節點前插入一個新的子節點

• 3.查找

getElementsByTagName() // 經過標籤名稱
getElementsByName() // 經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById() // 經過元素Id，惟一性

2.iframe的優缺點

優勢：

1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
2. Security sandbox
3. 並行加載腳本

缺點：

1. iframe會阻塞主頁面的Onload事件
2. 即時內容爲空，加載也須要時間
3. 沒有語意

3.null和undefined的區別

null是一個表示"無"的對象，轉爲數值時爲0

undefined是一個表示"無"的原始值，轉爲數值時爲NaN

當聲明的變量還未被初始化時，變量的默認值爲undefined

null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象

undefined表示 「缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

1. 變量被聲明瞭，但沒有賦值時，就等於 undefined
2. 調用函數時，應該提供的參數沒有提供，該參數等於 undefined
3. 對象沒有賦值的屬性，該屬性的值爲 `undefined
4. 函數沒有返回值時，默認返回 undefined

null表示「沒有對象」，即該處不該該有值。典型用法是：

1. 做爲函數的參數，表示該函數的參數不是對象
2. 做爲對象原型鏈的終點

4.new操做符具體幹了什麼

1. 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
2. 屬性和方法被加入到 this 引用的對象中
3. 新建立的對象由 this 所引用，而且最後隱式的返回 this

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

5.對JSON 的瞭解

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

6.js延遲加載的方式有哪些

1. defer和async
2. 動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）
3. 按需異步載入js

7..call() 和 .apply() 的做用

動態改變某個類的某個方法的運行環境

8.javascript對象的幾種建立方式

1. 工廠模式
2. 構造函數模式
3. 原型模式
4. 混合構造函數和原型模式
5. 動態原型模式
6. 寄生構造函數模式
7. 穩妥構造函數模式

9.javascript繼承的 6 種方法

1. 原型鏈繼承
2. 借用構造函數繼承
3. 組合繼承(原型+借用構造)
4. 原型式繼承
5. 寄生式繼承
6. 寄生組合式繼承

10.ajax 的過程是怎樣的

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象
2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新

Vue相關

vue

1.MVVM(Model-View-ViewModel)模型

MVVM分爲Model、View、ViewModel三部分。

• Model表明數據模型，定義數據和業務邏輯，訪問數據層
• View表明視圖，展現頁面結構、佈局和外觀（UI）
• ViewModel表明視圖模型，負責監聽Model數據變化並更新視圖，處理用戶交互

Model和View是經過ViewModel，Model的數據變化會觸發View的更新，View的交互操做也會使Model的數據發生改變。只須要針對數據進行維護操做，數據的自動同部不須要經過操做dom實現。

2.Vue指令

內置指令
指令的本質就是語法糖或者標誌位。

指令	做用	指望數值類型
v-text	更新元素文本內容	string
v-html	更新元素的innerHTML，不推薦使用	string
v-show	條件渲染。根據表達式的真假值，控制元素的顯示或隱藏	any
v-if	條件渲染。根據表達式的值的真假條件選擇是否渲染元素這個節點	any
v-else	條件渲染。根據v-if的相反條件進行元素渲染	any
v-else-if	條件渲染。作v-if的鏈式調用	any
v-for	列表渲染。對數據進行遍歷渲染，最好提供key值	Array / Object / number / string
v-on	事件處理。綁定事件監聽器，事件類型由參數指定，表達式能夠是方法名或內聯語句。	Function / Inline Statement / Object
v-bind	動態綁定。動態綁定一個或多個特性，或一個組件prop到表達式	any (with argument) / Object (without argument)
v-model	表單綁定。在表單或組件是上建立雙向綁定	隨表單控件類型變化
v-pre	跳過該元素和它的子元素的編譯過程，直接輸出模板字符串
v-slot	做用域插槽
v-cloak	設置 [v-cloak] { display: none }能夠在渲染時延後加載Vue實例，避免閃現
v-once	元素和組件只渲染一次，從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過

自定義指令
不是剛需，和生命週期有很大關係，可見五個生命週期鉤子。

• bind
• inserted
• update
• componentUpdated
• unbind

3.Vue響應式原理

Vue實例化時，遍歷訪問data裏的全部屬性，使用 Object.defineProperty 將其屬性所有轉換爲getter/setter進行依賴追蹤以便修改屬性時進行變動通知，就是一個代理層，無論是獲取數據仍是什麼，都是在代理層裏進行，當組件渲染時，會從代理層進行代理映射，組件渲染須要什麼就會放在watcher中，由於每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新，沒有與之關聯的組件就不會更新。

4.Vue雙向數據綁定和單項數據流

（1）什麼是雙向數據綁定

model的更新會觸發view的更新，view的更新也會觸發model的更新

（2）什麼是單向數據流

model的更新會觸發view的更新，可是view的更新不會觸發model的更新

（3）雙向綁定 or 單向數據流

• Vue是單向數據流，不是雙向綁定
• Vue的雙向綁定不過是語法糖
• Object.defineProperty是用來作響應式更新的，和雙向綁定不要緊

（4）簡單實現一個響應式雙向數據綁定

簡單實現，有一個子組件輸入框，一個按鈕，父組件經過props傳值給子組件，當按鈕增長時，子組件經過$emit通知父組件修改相應的props值。

<div id="app">
        <parent></parent>
    </div>
    <script>
        var childNode = {
            template:`
                <div class = "child">
                    <div>
                        <span>子組件數據</span>
                        <input v-model="childMsg">
                        <button @click=add>+1</button>
                    </div>
                </div>
            `,
            data(){
                return{
                    childMsg:0
                }
            },
            methods: {
                add(){
                    this.childMsg++;
                    this.$emit('update:foo',this.childMsg)
                }
            }
        };
        var parentNode = {
            template:`
                <div class="parent">
                    <div>
                        <span>父組件數據:{{msg}}</span>
                        <child :foo.sync="msg"></child>
                    </div>
                </div>
            `,
            components:{
                'child':childNode
            },
            data(){
                return{
                    'msg':0
                }
            }
        };
        let vm = new Vue({
            el:'#app',
            components:{
                'parent':parentNode
            }
        })

5.合理應用計算屬性和偵聽器

（1）計算屬性（computed）的應用

• 處理數據計算，減小模板中計算邏輯
• 數據緩存。當計算的數據比較多的時候，放在計算屬性中，不會在每次渲染界面的從新計算，提升頁面性能
• 它必須依賴固定的數據類型（響應式數據），而不是全局數據

（2）偵聽器watch

• 更加靈活、通用,能夠觸發一系列的操做
• watch提供一個底層API,能夠執行任何邏輯，如函數節流、Ajax異步獲取數據，操做DOM，可是不推薦

（3）計算屬性和偵聽器的應用場景

• 計算屬性computed能作的,偵聽器watch都能作，反之不行
• 能用計算屬性computed的儘可能不用偵聽器watch

6.Vue的生命週期鉤子

生命週期一共分爲三個階段，建立階段（執行一次）、更新階段（執行屢次）、銷燬階段

返回頂部
### （1）生命週期的應用場景

鉤子	調用	類型	是否在服務端渲染期間調用
beforeCreate	Vue實例初始化以後，數據觀察和事件配置以前	Function	Yes
create	實例建立完成（數據觀察/屬性和方法運算/偵聽器配置/事件回調）以後，掛載以前	Function	Yes
beforeMount	掛載開始以前，模板render函數首次調用	Function	Yes
mounted	實例掛載完成以後，異步請求/操做DOM/定時器	Function	No
beforeUpdate	DOM被patch以前調用進行數據修改，能夠移除已添加的事件監聽器等，不可更改依賴數據	Function	No
updated	組件 DOM 更新完成，避免在此期間更改狀態（依賴數據）	Function	No
actived	keep-alive 組件激活時	Function	No
deactived	keep-alive 組件停用時	Function	No
beforeDestroy	實例銷燬以前，能夠移除已添加的事件監聽器等	Function	No
destroyed	實例銷燬	Function	No
errorCaptured	當任何一個來自後代組件的錯誤時被捕獲時 收到三個參數：錯誤對象、發生錯誤的組件實例，和一個包含錯誤在何處被捕獲信息的字符串 返回 false，以阻止該錯誤繼續向上冒泡	Function	No

（2）函數式掛件

通常用於作展現用。

• functional:true

• 無狀態、無實例、沒有this上下文、無生命週期

  7.Vue組件

Vue組件 = Vue實例 = new Vue(options)，每一個組件就是一個Vue實例
組件能夠是頁面中每個區域板塊，也能夠是某一個複用業務邏輯，也能夠是每個單頁面。
### （1）組件的構成
就以上面的雙向數據綁定實現爲例：

• 屬性：

  • 自定義屬性props：組件props中聲明的屬性，父組件使用props定義數據屬性，向子組件傳遞數據
  • 原生屬性attrs：沒有聲明的屬性，默認自動掛載到組件根元素上，設置inheritAttrs爲false能夠關閉自動掛載
  • 特殊屬性class、style：掛載在組件根元素上，支持字符串、對象、數組等多種語法

• 事件event：

  • 普通事件：@click 、@input、@change、@xxx等事件，經過this.$emit('xxx',...)觸發自定義事件event向父組件發送消息
  • 修飾符事件：@input.trim、@click.stop、@submit.prevent等，通常用於原生HTML元素，自定義組件須要自行開發支持

• 插槽slot：

  • 普通插槽：slot進行組件內容分發，插入子組件內容，簡單點就是傳遞內容的 <template slot="xxx">...</template>、<template v-slot="xxx">...</template>
  • 做用域插槽：須要根據子組件的某些值來作動態處理，能夠簡單理解爲返回組件的函數 <template slot="xxx" slot-scope="props">...</template>、<template v-slot:xxx="props">...</template>

### （2）組件通訊

• 父子組件通訊：父組件使用props向子組件通訊，子組件使用$emit向父組件傳遞消息
• 非父子組件通訊：父組件可使用v-on監聽子組件的任何事件，子組件使用$emit傳入事件，這樣父組件就會收到事件並更新
• 跨級組件通訊：使用Vuex比較好管理

1）如何優雅地獲取跨層級組件實例（拒絕遞歸）

<p ref="p">hello</p>
<child-component ref="child></child-component>

callback ref

• 主動通知（setXxxRef）
• 主動獲取（getXxxRef）

（3）組件更新

組件的更新都是由數據驅動的，沒有特殊狀況，任何更改DOM的行爲都是在做死。

1）數據來源（單向）

包含三個部分：

• 來自父組件的屬性props
• 來自組件自身的狀態data
• 來自狀態管理器，如vuex vue.observable

注意：狀態和屬性的改變未必會觸發組件更新

8.高級特性provide/inject

通常用於底層組件通訊。底層組件通訊，不只屬性要層層傳遞，事件也要層次冒泡，這是很耗性能的。

9.Vue-router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲

下面是一個簡單路由的實現：

<div id="app" class="demo">
      <h1>Hello App!</h1>
      <p>
          <!-- 經過router-link導航 -->
          <!-- 經過傳入'to '屬性指定連接-->
          <!--  <router-link> 默認會被渲染成一個 `<a>` 標籤-->
              <router-link to="/foo">go to Foo</router-link>
              <router-link to="/bar">go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的組件將渲染在這裏 -->
      <router-view></router-view>
   </div>
   <!-- 
       0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
       1. 定義 (路由) 組件。
       2.定義路由
    -->
   <script>
       //1. 定義 (路由) 組件。
       const Foo = {template:'<div>foo</div>'};
       const Bar = {template:'<div>bar</div>'};
       //2.定義路由
       //每一個路由應該映射一個組件。其中component能夠是經過Vue.extend()建立的組件構造器
       //或者只是一個組件配置對象
       const routes = [
           {path:'/foo',component:Foo},
           {path:'/bar',component:Bar}
       ]

       //3.建立router實例，而後傳‘routes’配置
       const router = new VueRouter({
           routes//（縮寫）至關於routes:routes
       })

       //4.建立和掛載根實例
       //要記得經過router配置參數注入路由，從而讓整個應用都有路由功能
       
       const app = new Vue({
           router
       }).$mount('#app');

瀏覽器相關

1.經常使用瀏覽器內核以及理解

瀏覽器	Chrome	Firefox	Safari	IE	Opera
渲染引擎	Blink	Gecko	Webkit	Trident	Blink
JS引擎	V8	SpiderMonkey	Nitro	Chakra	V8
前綴	-webkit	-moz	-webkit	-ms	-o

瀏覽器內核主要分爲兩部分：渲染引擎 和 JS 引擎:

• 渲染引擎：負責取得網頁的內容（HTML、 XML 、圖像等等）、整理訊息（例如加入 CSS 等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。
• JS引擎：解析和執行 javascript 來實現網頁的動態效果。

2.cookies、sessionStorage 和 localStorage 的區別?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，能夠方便的在 web 請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。

sessionStorage、 localStorage 、 cookie 都是在瀏覽器端存儲的數據

區別	存儲時間	單個域名存儲量	全部域名存儲量	個數限制	是否發送到服務器
Cookie	瀏覽器關閉以前有效	4k	4k	yes	yes
LocalStorage	永久存儲	5MB	無限制
SessionStorage	只在 Session 內有效	存儲量更大（推薦沒有限制，可是實際上各瀏覽器也不一樣）

更多詳見瀏覽器數據存儲

3.表單提交中Get和Post方式的區別

Get	Post
從服務器上獲取數據	向服務器傳送數據
提交過程在url中可見	傳送過程用戶不可見
服務器端用 Request.QueryString 獲取變量的值	服務器端用 Request.Form 獲取提交的數據
傳送的數據量較小，不能大於 2KB	傳送的數據量較大，通常被默認爲不受限制。但理論上， IIS4 中最大量爲 80KB ， IIS5 中爲 100KB
安全性低	安全性較高

4.瀏覽器標準模式和怪異模式之間的區別是什麼

嚴格模式又稱標準模式，有doctype聲明，則是標準模式，瀏覽器按W3C標準解析執行代碼。

反之沒有就是怪異模式，混雜模式又稱怪異模式，瀏覽器使用本身的方式解析執行代碼。

5.常見瀏覽器兼容性問題與解決方案

（1）經常使用瀏覽器兼容

1)前綴兼容

Chrome	Firefox	Safari	IE	Opera
渲染引擎	Blink	Gecko	Webkit	Trident	Blink
JS引擎	V8	SpiderMonkey	Nitro	Chakra	V8
前綴	-webkit	-moz	-webkit	-ms	-o

2)透明屬性opacity

透明屬性opacity,解決IE9如下瀏覽器不能使用opacity問題：

opacity:0.5;
filter:alpha(opacity = 50);//IE6-IE9習慣使用filter屬性來 進行實習
filter:progrid:DXImageTransform.Microsoft.Alpha(style = 0,opacity = 50);//IE4-IE9都支持

3)瀏覽器 hack

1.判斷IE瀏覽器

<!--[if IE ]> ie8 <![endif]-->

2.判斷Safari瀏覽器

let isSafari = /a/.__proto__=='//';

3.判斷Chrome瀏覽器

let isChrome = Boolean(window.chrome);

（2）樣式兼容性(css)

1) 使用Normalize.css

不一樣瀏覽器樣式存在差別，可使用這個去除差別

2)使用通配符選擇器，全局重置樣式

不加樣式控制，不一樣瀏覽器外補丁和內補丁不一樣，用如下方法：

* {
 margin:0;
 padding:0;
}

3) display:inline轉爲行內屬性

塊屬性標籤設置浮動float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大。

解決方案：在float的標籤樣式控制中加入 display:inline,將其轉化爲行內屬性

4) 圖片間距設置font-size:0

圖片默認有間距，設置font-size

### （3）交互兼容性（JavaScript）
(1)封裝適配器進行事件兼容，過濾事件句柄綁定、移除、冒泡阻止以及默認事件行爲處理

var  helper = {}

//綁定事件
helper.on = function(target, type, handler) {
    if(target.addEventListener) {
        target.addEventListener(type, handler, false);
    } else {
        target.attachEvent("on" + type,
            function(event) {
                return handler.call(target, event);
            }, false);
    }
};

//取消事件監聽
helper.remove = function(target, type, handler) {
    if(target.removeEventListener) {
        target.removeEventListener(type, handler);
    } else {
        target.detachEvent("on" + type,
        function(event) {
            return handler.call(target, event);
        }, true);
    }
};

(2)使用new Date(str)來正確生成日期對象->'2018/07/05'。
(3)獲取scrollTop經過document.documentElement.scrollTop兼容非Chrome瀏覽器

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

詳見瀏覽器兼容性問題與處理

6.如何實現瀏覽器內多個標籤頁之間的通訊

調用 localstorge、cookies 等本地存儲方式

7.如何對網站的文件和資源進行優化(性能優化)

1.儘量減小http請求次數，將css, js, 圖片各自合併

2.使用CDN，下降通訊距離

3.添加Expire/Cache-Control頭

4.啓用Gzip壓縮文件

5.將css放在頁面最上面

6.將script放在頁面最下面

7.避免在css中使用表達式

8.將css, js都放在外部文件中

9.減小DNS查詢

10.最小化css, js，減少文件體積

11.避免重定向

12.移除重複腳本

13.配置實體標籤ETag

14.使用AJAX緩存，讓網站內容分批加載，局部更新

8.如何解決跨域問題

1. jsonp（jsonp 的原理是動態插入 script 標籤）
2. document.domain + iframe
3. window.name、window.postMessage
4. 服務器上設置代理頁面

9.documen.write和 innerHTML 的區別

document.write 只能重繪整個頁面

innerHTML 能夠重繪頁面的一部分

10.哪些操做會形成內存泄漏

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

1. setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
2. 閉包
3. 控制檯日誌
4. 循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

11.如何判斷當前腳本運行在瀏覽器仍是node環境中

經過判斷 Global 對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中。即在node中的全局變量是global ,瀏覽器的全局變量是window。 能夠經過該全局變量是否認義來判斷宿主環境

12.Node的優勢和缺點

優勢：

1. 由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
2. 與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

缺點：

1. Node是一個相對新的開源項目，因此不太穩定，它老是一直在變。
2. 缺乏足夠多的第三方庫支持。

HTTP相關

1.http狀態碼有那些？分別表明是什麼意思？

1xx: 信息性狀態碼，表示服務器接收到請求正在處理。

2xx: 成功狀態碼，表示服務器正確處理完請求。

3xx: 重定向狀態碼，表示請求的資源位置發生改變，須要從新請求。301永久重定向，302臨時重定向。

4xx: 客戶端錯誤狀態碼，服務器沒法處理該請求。 404 not found

5xx: 服務器錯誤狀態碼，服務器處理請求出錯。

2.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼

分爲4個步驟：

1. 當發送一個 URL 請求時，無論這個 URL 是 Web 頁面的 URL 仍是 Web 頁面上每一個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器得到請求對應的 IP 地址。
2. 瀏覽器與遠程 Web 服務器經過 TCP 三次握手協商來創建一個 TCP/IP 鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
3. 一旦 TCP/IP 鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。
4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了咱們關注的前端模塊

簡單來講，瀏覽器會解析 HTML 生成 DOM Tree，其次會根據 CSS 生成 CSS Rule Tree，而 javascript 又能夠根據 DOM API 操做 DOM