前端面試整理

時間  2019-11-16
標籤 前端 面試 整理 欄目 快樂工作 简体版
原文   原文鏈接

1、CSS

1.兩個盒子，一個下邊據20px，一個上邊據30px，最後爲兩個盒子之間的距離爲多少？

答案:30pxjavascript

2.什麼是高度坍塌

在文檔流中，父元素的高度默認是由子元素撐開的，可是咱們把子元素設置爲浮動後，子元素徹底脫離文檔流，此時子元素沒法撐起父元素的高度，致使父元素高度坍塌。css

3.高度坍塌的解決方法(清除浮動的方法)

給父元素設置高度 缺點：只適用於父元素高度固定的狀況下。html

給父元素也設置浮動樣式(如float: left） 缺點：給父元素設置浮動樣式後，父元素的父元素也會產生高度坍塌問題。vue

給父元素設置overflow: hidden;或overflow: auto 缺點:設置hidden會致使超出部分直接被隱藏，且不佔據文檔流位置，而設置auto的話超出部分會生成一個滾動條，影響視覺效果。java

增長塊級元素並設置clear: both屬性 缺點:增長無心義的標籤node

<style>
  .container {
    background: lawngreen;
  }

  .box1 {
    background: red;
    height: 100px;
    width: 300px;
    float: left;
  }

  .box2 {
    float: left;
    background: rebeccapurple;
    height: 200px;
    width: 300px;
  }

  .clear {
    clear: both;
  }
</style>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="clear"></div>
</div>
複製代碼

使用僞元素after 推薦使用這種方法jquery

<style>
  .container {
    background: lawngreen;
  }

  .clear {
    zoom: 1;
  }

  .clear:after {
    clear: both;
    content: '';
    display: block;
    visibility: hidden;
    height: 0;
  }

  .box1 {
    background: red;
    height: 100px;
    width: 300px;
    float: left;
  }

  .box2 {
    float: left;
    background: rebeccapurple;
    height: 200px;
    width: 300px;
  }
</style>

<div class="container clear">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
複製代碼

4.僞類和僞元素的區別

僞類和僞元素的根本區別在於：它們是否創造了新的元素(抽象)。從咱們模仿其意義的角度來看，若是須要添加新元素加以標識的，就是僞元素，反之，若是隻須要在既有元素上添加類別的，就是僞類。css3

  • CSS 僞類用於向某些選擇器添加特殊的效果。git

  • CSS 僞元素用於將特殊的效果添加到某些選擇器。github

5.src和href的區別

  • href是Hypertext Reference的縮寫，表示超文本引用。用於在當前文檔和引用資源之間確立聯繫。。當瀏覽器解析到該元素時，不會中止對當前文檔的處理
  • src是source的縮寫，src的內容是頁面必不可少的一部分，是引入。src指向的內容會嵌入到文檔中當前標籤所在的位置即替換當前元素。當瀏覽器解析到該元素時，會暫停瀏覽器的渲染，直到該資源加載完畢。

這是爲何咱們常常把CSS放在<head></head>標籤之間，而把JS放在body的最底部的緣由。

6.兩側寬度固定，中間自適應

設置左右設置float: left和float: right，中間使用margin-left和margin-right 缺點:三個元素沒有按照常規順序排列，中間center的元素必定要放在最後

<style>
  .container {
    background: #fff;
  }

  .left {
    background: red;
    float: left;
    width: 200px;
    height: 100px;
  }

  .right {
    background: blue;
    float: right;
    width: 300px;
    height: 200px;
  }

  .center {
    background: rebeccapurple;
    height: 200px;
    margin-right: 300x;
    margin-left: 200px;
  }
</style>

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>
複製代碼

兩側使用絕對定位，中間使用margin-left,和margin-right 缺點:top的值須要根據頁面上的其它內容肯定

<style>
  .container {
    background: #fff;
  }

  .left {
    background: red;
    width: 200px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }

  .center {
    background: rebeccapurple;
    height: 200px;
    margin-left: 200px;
    margin-right: 300px;
  }

  .right {
    background: blue;
    width: 300px;
    height: 200px;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
複製代碼

父元素使用兩端對齊方式display: flex,中間寬度設置爲width: 100%

<style>
  .container {
    background: #fff;
    display: flex;
  }

  .left {
    background: red;
    width: 200px;
    height: 100px;
  }

  .center {
    background: rebeccapurple;
    height: 200px;
    width: 100%;
  }

  .right {
    background: blue;
    width: 300px;
    height: 200px;
  }
</style>

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
複製代碼

margin負值法：左右兩欄均左浮動，左右兩欄採用負的margin值。

<style>
  html,
  body {
    padding: 0;
    margin: 0;
  }

  .container {
    background: #fff;
    float: left;
    width: 100%;
  }

  .left {
    background: red;
    width: 200px;
    height: 100px;
    float: left;
    margin-left: -100%;
  }

  .center {
    background: rebeccapurple;
    height: 200px;
    margin-left: 200px;
    margin-right: 300px;
  }

  .right {
    background: blue;
    width: 300px;
    height: 200px;
    float: left;
    margin-left: -300px;
  }
</style>

<div class="container">
  <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
複製代碼

7.em和rem的區別

ps: px絕對度量單位，就是像素,是屏幕能顯示出的最小的一個點

rem的特色

  • rem的大小是根據html根目錄下的字體大小進行計算的。
  • 當咱們改變根目錄下的字體大小的時候，下面字體都改變。
  • rem不只能夠設置字體的大小，也能夠設置元素寬、高等屬性。

em的特色：

  • 字體大小是根據父元素字體大小設置的。

8.css 選擇器過長怎麼判斷他的優先級：

內聯樣式1000 -- id100 -- 類、僞類、屬性選擇器10 -- 類型選擇器、僞元素選擇器1 經過相加計算大的優先級高，值相等的話後聲明的優先級高。

9.CSS怎麼實現垂直居中

絕對定位與負邊距實現 缺點：須要知道div的高度和寬度

<style>
  .center {
    position: relative;
    background-color: rebeccapurple;
    height: 200px;
    width: 200px;
  }

  .box .content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 40px;
    margin-left: -10px;
    margin-top: -20px;
    background-color: aqua;
  }
</style>

<div class="box center">
  <div class="content"></div>
</div>
複製代碼

絕對定位與margin

<style>
  .center {
    position: relative;
    background-color: rebeccapurple;
    height: 200px;
    width: 200px;
  }

  .box .content {
    position: absolute;
    width: 20px;
    height: 40px;
    background-color: aqua;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

<div class="box center">
  <div class="content"></div>
</div>
複製代碼

使用CSS3的transform屬性

<style>
  .center {
    position: relative;
    background-color: rebeccapurple;
    height: 200px;
    width: 200px;
  }

  .box .content {
    position: absolute;
    width: 20px;
    height: 40px;
    background-color: aqua;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<div class="box center">
  <div class="content"></div>
</div>
複製代碼

使用flex佈局

<style>
  .center {
    background: rebeccapurple;
    height: 200px;
    width: 200px;
  }

  .box {
    display: flex;
    justify-content: center;
    align-items: Center;
  }

  .content {
    background-color: aqua;
    width: 20px;
    height: 40px;
  }
</style>

<div class="box center">
  <div class="content"></div>
</div>
複製代碼

使用table-cell 缺點：只支持行內元素inline或inline-block,可將塊級元素設爲inline-block

<style>
  .center {
    background: rebeccapurple;
    height: 200px;
    width: 200px;
  }

  .box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .content {
    background-color: aqua;
    width: 20px;
    height: 40px;
    display: inline-block;
  }
</style>

<div class="box center">
  <div class="content"></div>
</div>
複製代碼

display:flex和margin:auto

<style>
  .center {
    background: rebeccapurple;
    height: 200px;
    width: 200px;
  }

  .box {
    display: flex;
    text-align: center;
  }

  .content {
    background-color: aqua;
    width: 20px;
    height: 40px;
    margin: auto;
  }
</style>

<div class="box center">
  <div class="content"></div>
</div>
複製代碼

10.CSS3新特性

border-radius 、box-shadow、border-image、text-shadow、word-wrap、transform、@media、flex

11.display的值

經常使用:

  • none：此元素不顯示。
  • block：將元素顯示爲塊級元素，先後會帶換行符。
  • inline:默認值，元素會被顯示爲內聯元素，先後沒有換行符。
  • inline-block:行內塊級元素。

12.去除inline-block元素間的空格

  • 去掉HTML中的空格
<div class="space">
    <a href="##">
    惆悵</a><a href="##">
    淡定</a><a href="##">
    熱血</a>
</div>
或者是：
<div class="space">
    <a href="##">惆悵</a
    ><a href="##">淡定</a
    ><a href="##">熱血</a>
</div>
或者是藉助HTML註釋：
<div class="space">
    <a href="##">惆悵</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">熱血</a>
</div>
複製代碼
  • margin 負值
.space a {
    display: inline-block;
    margin-right: -3px;
}
複製代碼
  • 省略閉合標籤
<div class="space">
    <a href="##">惆悵
    <a href="##">淡定
    <a href="##">熱血</a>
</div>
注意，爲了向下兼容IE6/IE7等瀏覽器，最後一個列表的標籤的結束（閉合）標籤不能丟。
複製代碼
  • 使用font-size: 0
.space {
    font-size: 0;
    -webkit-text-size-adjust:none;   //兼容部分瀏覽器
}
複製代碼

13. CSS超出文本隱藏並顯示省略號

單行文本省略

.ellipsis-line {
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出顯示省略號
    white-space: nowrap; //文本不會換行
  }
複製代碼

多行文本省略

.multi-line {
    border: 1px solid #f70505;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
複製代碼

利用定位和僞類元素

p{
    position: relative; 
    width:400px;
    line-height: 20px; 
    max-height: 60px;
    overflow: hidden;
}
p::after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}
複製代碼

14.元素不可見

{ display: none; /* 不佔據空間，沒法點擊 */ } 

{ visibility: hidden; /* 佔據空間，沒法點擊 */ } 

{ position: absolute; top: -999em; /* 不佔據空間，沒法點擊 */ } 

{ position: relative; top: -999em; /* 佔據空間，沒法點擊 */ } 

{ position: absolute; visibility: hidden; /* 不佔據空間，沒法點擊 */ } 

{ height: 0; overflow: hidden; /* 不佔據空間，沒法點擊 */ } 

{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，能夠點擊 */ } 

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不佔據空間，能夠點擊 */ } 
複製代碼

15.漸進加強和優雅降級

漸進加強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害於基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。）

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}
複製代碼

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

.transition{ 
&emsp;&emsp;     transition: all .5s;
&emsp;&emsp;  -o-transition: all .5s;
  &emsp;-moz-transition: all .5s;
 -webkit-transition: all .5s;
}
複製代碼

16.如何讓圖片按等比例放大縮小

<style>
  .box {
    width: 200px;
    height: 300px;
  }

  img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
</style>

<div class="box">
  <img src="./test.jpg" />
</div>
複製代碼

17. CSS3動畫性能優化

a) 儘量多的利用硬件能力,使用3D開啓GPU加速translate3d

b) 使用transform的translate替代margin或position中的top、right、bottom和left，同時使用transform中的scaleX或者scaleY來替代width和height

18. block,inline,inline-block的區別

  • display:block
    • block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
    • block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
    • block元素能夠設置margin和padding屬性。
  • display:inline
    • inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
    • inline元素設置width,height屬性無效。
    • inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
  • display:inline-block
    • 簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

19. CSS高度是寬度的一半

.box {
    background-color: blue;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}
複製代碼

20.盒模型

box-model

content-box(W3C 標準盒模型)

屬性width,height只包含內容content，不包含border和padding。

佈局所佔寬度Width： Width = width + padding-left + padding-right + border-left + border-right

佈局所佔高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom

border-box(IE 盒模型)

屬性width,height包含border和padding，指的是content+padding+border

佈局所佔寬度Width： Width = width(包含padding-left + padding-right + border-left + border-right)

佈局所佔高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

21.性能動畫方面，爲何用css3

  • 減小DOM的操做
  • 能夠利用硬件資源加速，如使用3D變形來開啓GPU加速

22.css3動畫和jquery動畫的差異是什麼

  • 功能涵蓋面，JS比CSS3大
  • 實現/重構難度不一，CSS3比JS更簡單，性能調優方向固定
  • 對於幀速表現很差的低版本瀏覽器，CSS3能夠作到天然降級，而JS則須要撰寫額外代碼
  • CSS動畫有自然事件支持（TransitionEnd、AnimationEnd，可是它們都須要針對瀏覽器加前綴），JS則須要本身寫事件
  • CSS3有兼容性問題，而JS大多時候沒有兼容性問題

23. 自適應佈局(響應式)

  • 經過media選擇加載CSS
  • viewport
  • 相對大小的字體em、rem
  • 不使用絕對定位

24.link和@import的區別

  • 加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載。
  • @import是 CSS2.1 纔有的語法，故只可在 IE5+ 才能識別；link標籤做爲 HTML 元素，不存在兼容性問題。
  • 能夠經過 JS 操做 DOM ，插入link標籤來改變樣式；因爲 DOM 方法是基於文檔的，沒法使用@import的方式插入樣式。
  • @import是 CSS 提供的語法規則，只有導入樣式表的做用；link是HTML提供的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel 鏈接屬性等。

25.CSS預處理器Sass(Scss)、Less、Stylus

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件

26.CSS hack

因爲不一樣的瀏覽器對CSS的支持及解析結果不同，還因爲CSS中的優先級的關係。咱們就能夠根據這個來針對不一樣的瀏覽器來寫不一樣的CSS。 a) 條件註釋法 只在IE下生效

<!--[if IE]>
這段文字只在IE瀏覽器顯示
<![endif]-->
複製代碼

b) 類內屬性前綴法

  • 「-″減號是IE6專有的hack
  • 「\9″ IE6/IE7/IE8/IE9/IE10都生效
  • 「\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
  • 「\9\0″ 只對IE9/IE10生效，是IE9/10的hack

27.line-height計算方法

line-height: normal;      // line-height=font-size*1.2 (默認爲1.2)

line-height:inherit;&emsp;&emsp;&emsp;// 繼承父元素

line-height:24px;&emsp;&emsp;&emsp;&emsp; // 經過像素px或者em等單位賦值

line-height:150%;&emsp;&emsp;     // line-height=font-size*1.5

line-height:1.5;&emsp;&emsp;&emsp;    // line-height=font-size*1.5

line-height:1.5em;&emsp;&emsp;&emsp;  // line-height=font-size*1.5
複製代碼

2、HTML

1.viewport原理

  • 佈局視口(layout viewport)： 手機上爲了容納爲桌面瀏覽器設計的網站，默認佈局視口寬度遠大於屏幕寬度，爲了讓用戶看到網站全貌，它會縮小網站
  • 視覺視口(visual viewport)： 屏幕的可視區域，即物理像素尺寸
  • 理想視口(ideal viewport)： 當網站是爲手機準備的時候使用。經過meta來聲明。早期iPhone理想視口爲320*480px

width=device-width指定了佈局視口=理想視口，而且禁止縮放。因此添上width=device-width的viewport meta後頁面變大了（一開始頁面內容小得看不清），其實是佈局視口變小了。

2.HTML5新特性

<nav>、<article>、<header>、<section>、<footer>、<video>、<canvas>、draggable拖放、Input 類型color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

3.DOCTYPE的做用

DOCTYPE是docunment type（文檔定義）的簡寫，用來講明web設計中所用的html或xhtml的類型，指出瀏覽器或者其餘閱讀程序按照什麼樣的規則

XHTML是XML重寫了HTML的規範，比HTML更加嚴格，表現以下：

一、XHTML中全部的標記都必須有一個相應的結束標籤；

二、XHTML全部標籤的元素和屬性的名字都必須使用小寫；

三、全部的XML標記都必須合理嵌套；

四、全部的**屬性都必須用引號「」**括起來；

五、把全部<和&特殊符號用編碼表示；

六、給全部屬性附一個值；

七、不要在註釋內容中使用「--」；

八、圖片必須使用說明文字。

4.什麼是語義化

語義化HTML：用最恰當的HTML元素標記的內容。

語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器能夠理解.

5.HTML5 語義化標籤

<title></title>：簡短、描述性、惟一（提高搜索引擎排名）
 <hn></hn>：h1~h6分級標題
 <header></header>：頁眉一般包括網站標誌、主導航、全站連接以及搜索框。
 <nav></nav>：標記導航，僅對文檔中重要的連接羣使用。
 <main></main>：頁面主要內容，一個頁面只能使用一次。若是是web應用，則包圍其主要功能。
 <article></article>：包含像報紙同樣的內容= =||是這麼理解的，表示文檔、頁面、應用或一個獨立的容器
 <section></section>：具備類似主題的一組內容，好比網站的主頁能夠分紅介紹、新聞條目、聯繫信息等條塊。
 <footer></footer>：頁腳，只有當父級是body時，纔是整個頁面的頁腳。
 <aside></aside>：指定附註欄，包括引述、側欄、指向文章的一組連接、廣告、友情連接、相關產品列表等。
 <small></small>：指定細則，輸入免責聲明、註解、署名、版權。
 <strong></strong>：表示內容重要性。
 <em></em>：標記內容着重點（大量用於提高段落文本語義）。
 <time></time>：標記時間。datetime屬性遵循特定格式，若是忽略此屬性，文本內容必須是合法的日期或者時間格式。   
 <address></address>：做者、相關人士或組織的聯繫信息（電子郵件地址、指向聯繫信息頁的連接）。
 <code></code>：標記代碼。包含示例代碼或者文件名 （< &lt;  > &gt;）
複製代碼

詳細信息

6. HTML加載過程

網頁渲染機制

解析 HTML 標籤, 構建 DOM 樹
解析 CSS 標籤, 構建 CSSOM 樹
把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
在渲染樹的基礎上進行佈局, 計算每一個節點的幾何結構
把每一個節點繪製到屏幕上 (painting)
複製代碼

加載方式

css 異步加載（不阻塞）
img 異步加載（不阻塞）
js 同步加載（阻塞）
複製代碼

放置順序

css 放置於<head>標籤中
緣由：要是頁面在無CSS渲染下先加載HTML的話將會面目全非，樣式先行的話在加載HTML內容時能夠同時渲染樣式

js 放置於</body>標籤以前、body標籤中html內容的後面
緣由：爲了提升頁面渲染的速度效率。瀏覽器在加載<script>元素內部的JS代碼將被從上至下依次解釋，解釋器對<script>元素內部全部代碼求值完畢以前，會阻塞其餘資源的加載，頁面的其他內容都不會被瀏覽器加載顯示，若是放置在前面其餘位置，會對頁面內容的加載速度產生影響。
複製代碼

7.迴流和重繪

迴流必將引發重繪，重繪不必定會引發迴流。迴流比重繪的代價要更高。

迴流： 當Render Tree中部分或所有元素的尺寸、結構、或某些屬性發生改變時，瀏覽器從新渲染部分或所有文檔的過程稱爲迴流。

會致使迴流的操做：

  • 頁面首次渲染
  • 瀏覽器窗口大小發生改變
  • 元素尺寸或位置發生改變
  • 元素內容變化（文字數量或圖片大小等等）
  • 元素字體大小變化
  • 添加或者刪除可見的DOM元素
  • 激活CSS僞類（例如：:hover）
  • 查詢某些屬性或調用某些方法

一些經常使用且會致使迴流的屬性和方法：

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • scrollIntoView()、scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

重繪： 當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並從新繪製它，這個過程稱爲重繪。

3、JavaScript

1.JavaScript基本數據類型

數字（number）、字符串（string）、布爾值（boolean）、undefined、null、對象（Object）、Symbol （ES6）

2.事件冒泡和事件委託

  • 事件冒泡：子級元素的某個事件被觸發，它的上級元素的該事件也被遞歸觸發。
  • 事件委託：使用了事件冒泡的原理，從觸發某事件的元素開始，遞歸地向上級元素傳播事件。
  • 阻止事件冒泡event.stopPropagation()
  • 阻止默認事件 event.preventDefault()
  • 阻止調用相同事件的其餘偵聽器 event.stopImmediatePropagation
  • 事件委託給父元素後，如何得知事件是哪一個子元素觸發的？ 答：能夠經過event.target對象來獲取

3.原型鏈/原型繼承

JavaScript中每一個對象都有一個私有屬性（稱之爲 __proto__），它指向它的原型對象（prototype）。該 prototype 對象又具備一個本身的 __proto__ ，層層向上直到一個對象的原型爲 null。根據定義，null 沒有原型，並做爲這個原型鏈中的最後一個環節。

4.閉包

閉包就是可以讀取其餘函數內部變量的函數。在javascript中，只有函數內部的子函數才能讀取局部變量，因此閉包能夠理解成**「定義在一個函數內部的函數「 **。在本質上，閉包是將函數內部和函數外部鏈接起來的橋樑

function fn () {
  var n = 1
  return function bar () {
    console.log(n++)
  }
}
複製代碼

5.怎麼把一個類數組對象轉化爲數組

  • var arr = Array.prototype.slice.call(arguments); 等同於var arr = [].slice.call(arguments)
  • ES6新方法var arr = Array.from(arguments);
  • Jquery方法 var arr = $.makeArray(arguments);

6.ES6新特性

let 、const、 => 、 import、 export、 export defualt

7.ES7新特性

includes、**表示乘方

8.ES8新特性

`padStart、padEnd、Object.values(obj)返回對應的value數組、Object.entries(obj)返回的是有每一對鍵值對數組組成的數組、Object.getOwnPropertyDescriptors(obj)獲取屬性信息

9.Array數組的方法有哪些

toString()、valueOf()、toLocaleString()、join()、push()、pop()、shift()、unshift()、reverse()、sort()、concat()、slice()、indexOf()、lastIndexOf()、reduce()、map()、forEach()、filter() Array方法詳細介紹

10.String有哪些方法

concat()、charAt()、slice()、substr()、substring()、split()、trim()、toLowerCase()、toUpperCase()、match()、search() String方法詳細介紹

11.實現函數可以深度克隆任何類型

1. JSON.parse方法
const newObj = JSON.parse(JSON.stringify(oldObj));
2. 構造一個深克隆函數
function deepClone (obj) {
  if (typeof obj !== "object" && typeof obj !== "function") {
    return obj;
  }
  if (typeof obj === "function") {
    return eval(obj.toString());   // 有問題
  }
  if (obj.constructor === Date) {
    return new Date(obj.getTime());
  }
  if (obj.constructor === RegExp) {
    return new RegExp(obj);
  }
  var o = Array.isArray(obj) ? [] : {};
  for (i in obj) {
    if (obj.hasOwnProperty(i)) {
      o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i];
    }
  }
  return o;
}
複製代碼

12.==和===的區別

==用於比較判斷二者相等 ==在比較的時候能夠轉自動換數據類型

===用嚴格比較判斷二者嚴格相等===嚴格比較，不會進行自動轉換

13.var 和let的區別

  • var函數做用域, let塊級做用域
  • var會變量提高, let不會變量提高
  • var能夠重複定義, let不能夠重複定義

14. 0.1 + 0.2 > 0.3的緣由

0.1的二進制格式是：0.0001100011....。這是一個二進制無限循環小數，但計算機內存有限，咱們不能用儲存全部的小數位數。那麼在精度與內存間如何取捨呢？

答案是：在某個精度點直接捨棄。固然，代價就是，0.1在計算機內部根本就不是精確的0.1，而是一個有舍入偏差的0.1。當代碼被編譯或解釋後，0.1已經被四捨五入成一個與之很接近的計算機內部數字，以致於計算還沒開始，一個很小的舍入錯誤就已經產生了。這也就是 0.1 + 0.2 不等於0.3 的緣由。

14. MVP、MVC、MVVM

MVC

img

MVP

img

MVVM

img 

Controller: 負責監聽View的用戶事件，獲得數據後Controller作一些處理，而後渲染View。
Presenter: 比起Controller，Presenter會調用View層提供的接口去渲染Model。這樣作有幾點好處：面向接口編程、更好的解耦、方便作單元測試
ViewModel: 比起MVP中View須要本身提供API，MVVM在VM中構建一組狀態數據（state data），做爲View狀態的抽象。而後經過雙向數據綁定（data binding）使VM中的狀態數據（state data）與View中的顯示狀態（screen state）保持一致。這樣，VM中的展現邏輯只須要修改對應的狀態數據，就能夠控制View的狀態，從而避免在View上開發大量的接口。
複製代碼

15. 性能優化

a) 減小HTTP請求

b) 使用精靈圖和CSS Sprites(CSS精靈)

c) 使用CDN

d) 將樣式表放在頭部,將腳本放在底部

e) 使用緩存

f) 資源合併壓縮

g) 減小DNS查找

h) 使用懶加載、預加載

16. setTimeout 和setInterval的區別

setTimeout(表達式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表達式,記住,次數是一次 而setInterval(表達式,交互時間),它從載入後,每隔指定的時間就執行一次表達式 ,直到 clearInterval() 被調用或窗口被關閉

17.setTimeout時間設爲0是否當即執行，爲何

JavaScript 是單線程執行的，也就是沒法同時執行多段代碼， 若是代碼中設定了一個 setTimeout，那麼瀏覽器便會在合適的時間，將代碼插入任務隊列，若是這個時間設爲 0，就表明當即插入隊列，但不是當即執行。

18. 函數字面量和函數聲明的區別

聲明函數具備函數提高效果,能夠在聲明函數的代碼前執行函數

console.log(add2(1,1)); //輸出2
function add2(a,b){    //函數聲明
    return a+b;
}
console.log(add1(1,1));  //報錯：add1 is not a function
var add1 = function(a,b){
    return a+b;
}
複製代碼

19.let暫時性死區(TDZ)的緣由

var會變量提高（預解析）,let不會變量提高(變量提高：函數及變量的聲明都將被提高到函數的最頂部。 )

if(true){
   // TDZ開始
   tmp = 'abc'  //報錯
   let tmp; //TDZ結束
}
複製代碼

20.閉包與函數做用域的聯繫

函數做用域是產生閉包的緣由

21. 數組不變性

  • 經過push, unshift, shift, pop方法改變數組長度， 都會致使原數組改變， 這不符合函數編程中的不變性質
  • 使用concat將返回一個新的數組， 原數組不改變
  • 使用splice會改變原數組
  • slice截取數組中的部分items，返回新的數組， 不改變原數組

22.函數參數arguments

在Javascript函數體內，標識符arguments具備特殊含義。它是調用對象的一個特殊屬性，用來引用Arguments對象。 Arugments對象就像數組 ，其中arguments[0]表示第一個參數。 arguments.length長度

23.XXS和CSRF

XSS定義的主語是「腳本」，是一種跨站執行的腳本，也就是javascript腳本，指的是在網站上注入咱們的javascript腳本，執行非法操做。

CSRF定義的主語是」請求「，是一種跨站的僞造的請求，指的是跨站僞造用戶的請求，模擬用戶的操做。

XSS： 經過客戶端腳本語言（最多見如：JavaScript） 在一個論壇發帖中發佈一段惡意的JavaScript代碼就是腳本注入，若是這個代碼內容有請求外部服務器，那麼就叫作XSS！

CSRF：又稱XSRF，冒充用戶發起請求（在用戶不知情的狀況下）,完成一些違背用戶意願的請求（如惡意發帖，刪帖，改密碼，發郵件等）。

防護XSS攻擊能夠經過如下兩方面操做：

  • 對用戶表單輸入的數據進行過濾，對javascript代碼進行轉義，而後再存入數據庫；
  • 在信息的展現頁面，也要進行轉義，防止javascript在頁面上執行。

CSRF攻擊的防護能夠經過如下兩方面操做：

  • 驗證 HTTP Referer 字段
  • 在請求地址中添加 token 並驗證
  • 在 HTTP 頭中自定義屬性並驗證

24.typeof返回的類型

"number","string","boolean","object","function","undefined"
複製代碼

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

new共經歷了四個過程。

var fn = function () { };
var fnObj = new fn();
複製代碼

建立一個空對象

var obj = new object()
複製代碼

設置原型鏈

obj._proto = fn.prototype;
複製代碼

讓fn的this指向obj，並執行fn函數體

var result = fn.call(obj);
複製代碼

判斷fn的返回值類型，若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。

if (typeof(result) == "object"){  
    fnObj = result;  
} else {  
    fnObj = obj;
}
return fnObj
複製代碼

26.怎麼判斷是否是數組

var arr = new Array("123", "ash")

- arr instanceof Array
- Array.isArray(arr)
- arr.constructor   //查看輸出是否爲function Array(){ [native code] }
- Object.prototype.toString.call(arr) === '[object Array]'
複製代碼

27. __proto__ 和prototype的區別

__proto__（隱式原型）與prototype（顯式原型） ,__proto__指向prototype

28. this綁定

默認綁定：

a) 全局環境中，this默認綁定到window console.log(this === window);//true

b) 函數獨立調用時，this默認綁定到window

function foo(){
    console.log(this === window);
}
foo(); //true
複製代碼

c) 被嵌套的函數獨立調用時，this默認綁定到window

//雖然test()函數被嵌套在obj.foo()函數中，但test()函數是獨立調用，而不是方法調用。因此this默認綁定到window
var a = 0;
var obj = {
  a: 2,
  foo: function () {
    function test () {
      console.log(this.a);
    }
    test();
  }
}
obj.foo(); // 0
複製代碼

隱式綁定

a) 通常地，被直接對象所包含的函數調用時，也稱爲方法調用，this隱式綁定到該直接對象

function foo () {
  console.log(this.a);
};
var obj1 = {
  a: 1,
  foo: foo,
  obj2: {
    a: 2,
    foo: foo
  }
}

//foo()函數的直接對象是obj1，this隱式綁定到obj1
obj1.foo(); // 1

//foo()函數的直接對象是obj2，this隱式綁定到obj2
obj1.obj2.foo();// 2
複製代碼

隱式丟失

a) 隱式丟失是指被隱式綁定的函數丟失綁定對象，從而默認綁定到window。這種狀況容易出錯卻又常見

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
//把obj.foo賦予別名bar，形成了隱式丟失，由於只是把foo()函數賦給了bar，而bar與obj對象則毫無關係
var bar = obj.foo;
bar(); // 0
複製代碼

顯式綁定

a) 經過call()、apply()、bind()方法把對象綁定到this上，叫作顯式綁定。對於被調用的函數來講，叫作間接調用

var a = 0;
function foo(){
    console.log(this.a);
}
var obj = {
    a:2
};
foo(); // 0
foo.call(obj); // 2
複製代碼

new綁定

若是函數或者方法調用以前帶有關鍵字new，它就構成構造函數調用。對於this綁定來講，稱爲new綁定

function fn(){
    this.a = 2;
}
var test = new fn();
console.log(test); // {a:2}
複製代碼

29.JS繼承

a) 原型鏈繼承

核心： 將父類的實例做爲子類的原型

function Cat(){ 
}
Cat.prototype = new Animal(); //父類Animal實例
Cat.prototype.name = 'cat';
Cat.prototype.constructor = Cat;

//&emsp;Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true
複製代碼

b) 構造繼承

核心：使用父類的構造函數來加強子類實例，等因而複製父類的實例屬性給子類（沒用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
複製代碼

c) 實例繼承

核心：爲父類實例添加新特性，做爲子類實例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
複製代碼

d) 拷貝繼承(支持多繼承)

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
複製代碼

e) 組合繼承

核心：經過調用父類構造，繼承父類的屬性並保留傳參的優勢，而後經過將父類實例做爲子類原型，實現函數複用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// 組合繼承也是須要修復構造函數指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
複製代碼

f)寄生組合繼承

核心：經過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 建立一個沒有實例方法的類
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //將實例做爲子類的原型
  Cat.prototype = new Super();
})();

Cat.prototype.constructor = Cat; // 須要修復下構造函數

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
複製代碼

30.經過JS和JQuery獲取的元素有什麼不一樣

JS獲取的是DOM元素。 jQuery返回的是jQuery對象， jQuery對象比js對象多了一些包裝方法，好比.htm() .attr() .css() 等等

31.從輸入URL到頁面加載發生了什麼

  1. DNS解析
    • 在host文件中查找：若是在緩存中都查找不到的狀況下，就會讀取系統中預設的host文件中的設置。
    • 路由器緩存：有些路由器也有DNS緩存的功能，訪問過的域名會存在路由器上。
    • ISP DNS緩存：互聯網服務提供商（如中國電信）也會提供DNS服務，好比比較著名的 114.114.114.114，在本地查找不到的狀況下，就會向ISP進行查詢，ISP會在當前服務器的緩存內查找是否有記錄，若是有，則返回這個IP，若沒有，則會開始向根域名服務器請求查詢。
    • 頂級DNS服務器/根DNS服務器：根域名收到請求後，會判別這個域名(.com)是受權給哪臺服務器管理,並返回這個頂級DNS服務器的IP。請求者收到這臺頂級DNS的服務器IP後，會向該服務器發起查詢，若是該服務器沒法解析，該服務器就會返回下一級的DNS服務器IP（nicefilm.com），本機繼續查找，直到服務器找到(www.nicefilm.com)的主機。
  2. TCP鏈接（三次握手）
    • 第一次，本機將標識位 SYN 置爲 1, seq = x(Sequence number)發送給服務端。此時本機狀態爲SYN-SENT
    • 第二次，服務器收到包以後，將狀態切換爲SYN-RECEIVED，並將標識位 SYN 和 ACK都置爲1, seq = y, ack = x + 1, 併發送給客戶端。
    • 第三次，客戶端收到包後，將狀態切換爲ESTABLISHED，並將標識位ACK置爲1，seq = x + 1, ack = y + 1, 併發送給服務端。服務端收到包以後，也將狀態切換爲ESTABLISHED。
  3. 發送HTTP請求
  4. 服務器處理請求並返回HTTP報文
  5. 瀏覽器解析渲染頁面
    • 經過HTML解析器解析HTML文檔，構建一個DOM Tree，同時經過CSS解析器解析HTML中存在的CSS，構建Style Rules，二者結合造成一個Attachment。
    • 經過Attachment構造出一個呈現樹（Render Tree）
    • Render Tree構建完畢，進入到佈局階段（layout/reflow），將會爲每一個階段分配一個應出如今屏幕上的確切座標。
    • 最後將所有的節點遍歷繪製出來後，一個頁面就展示出來了。
  6. 鏈接結束（四次揮手）
    1. 客戶端發送一個FIN置爲1的包，ack = y， seq = x + 1，此時客戶端的狀態爲 FIN_WAIT_1
    2. 服務端收到包後，狀態切換爲CLOSE_WAIT發送一個ACK爲1的包， ack = x + 2。客戶端收到包以後狀態切換爲FNI_WAIT_2
    3. 服務端處理完任務後，向客戶端發送一個 FIN包，seq = y; 同時將本身的狀態置爲LAST_ACK
    4. 客戶端收到包後狀態切換爲TIME_WAIT，並向服務端發送ACK包，ack = y + 1，等待2MSL後關閉鏈接。

32.建立對象的方法

經過Object建立對象

var person = new Object();
person.name = "hebiwen";
person.getName = function() {
    console.log(this.name);
};

複製代碼

經過字面量建立

var person = {
    name: "hebiwen",
    getName: function() {
        console.log(this.name);
    }
}
複製代碼

工場模式(沒法識別對象類型，即沒法經過instanceof和constructor來識別對象類型)

function createPerson(name) {
    var o = new Object();
    o.name = name;
    o.getNmae = function() {
        console.log(this.name);
    };
    return o;
}
var person = createPerson("hebiwen");
複製代碼

構造函數

function Person(name) {
    this.name = name;
    this.getName = function() {
        console.log(this.name);
    }
}
var person  = new Person("person");
複製代碼

構造函數的問題：

每一個方法都要在每一個實例上從新建立一次，尤爲是函數，這樣每一個Person的實例都包含了一個不一樣的sayName的函數實例。

注意1 構造函數沒有return語句。要建立Person的新實例，必須採用new操做符，new操做符大致上完成了一下4件事情：

  • 建立一個新的對象（本例中Person建立的新對象，記爲person）;
  • 將構造函數的做用域賦給新對象（this=>person）;
  • 執行構造函數中的代碼（Person中的this.name=name;this.say.....）;
  • 返回新對象

注意2 構造函數也是函數，若是不經過new操做符調用，則做用環境爲全局（瀏覽器中爲windows，node環境中爲global）

原型模式

function Person() {}
Person.prototype.name = "hebiwen";
Person.prototype.getName = function() {
    console.log(this.name);
}
var person = new Person();
複製代碼

瀏覽器支持：IE9+，這樣全部的Person實例共享name屬性及sayName函數

注意1

  • 對象的某個屬性是否來自實例，可經過hasOwnProperty()來肯定,若是是在原型中，則返回false。
  • 判斷對象是否具有屬性，能夠經過in操做符，例如console.log("name" in person)//true來判斷，不管是在原型仍是實例中，都返回true，經過for-in循環時，實例及原型中均會被枚舉。

注意2 在定義原型時，若是用字面量代替爲prototype屬性定義，則原型的constructor屬性不會指向Person。由於經過字面量定義，徹底重寫了默認的prototype對象。可是此時instanceof仍是可以返回正確的結果。

function Person(){};
Person.prototype={
    name : "hebiwen",
    sayName : function(){
        console.log(this.name);
    }
};
var person = new Person();
console.log(person instanceof Person);//true
console.log(person.constructor == Person);//false
console.log(person.constructor == Object);//true
複製代碼

注意3 在重定義原型前，不能建立對象實例，不然會形成實例的原型指向錯誤

構造函數與原型組合

function Person(name) {
    this.name = name;
    this.friends = ["Bob","Harry"];//引用類型爲實例屬性
}
Person.prototype.getName = function() {
 	console.log(this.name);   
}
複製代碼

動態原型

function Person(name) {
    this.name = name;
	this.friends = ["Bob","Harry"];//引用類型爲實例屬性
	if(typeof this.sayName != "function"){
        Person.prototype.sayName = function(){
            console.log(this.name);
        };
    }
}
複製代碼

寄生構造模式

function Person(name) {
    var o = new Object();
    o.name = name;
    o.getName = function() {
        console.log(this.name);
    }
    return o;
}
var person = new Person("hebiwen");
複製代碼

穩妥構造函數模式

function Person(name) {
    var o = new Object();
    var _name = name;
    o.getName = function() {
        console.log(_name);
    }
    return o;
}
var person = Person("hebiwen");
複製代碼

33.跨域有什麼處理方法？(協議、域名、端口 )

  • JSONP

    利用script標籤支持跨域的屬性，用script標籤拿到包裹了數據的方法（至關因而返回了一段js代碼），在請求中包含callback，服務端注入參數後返回這個回調函數，而後script標籤拿到返回的js代碼跨域直接運行回調，須要先後端的配合。
複製代碼

  • CORS

    請求頭中的Content-Type請求頭的值是下列之一：

- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
複製代碼

  • 服務端代理

    由於服務器間的數據交互沒有跨域限制，因此咱們能夠經過一箇中間代理服務器來請求目標服務器的數據，也就是開發服務器發送請求到代理服務器，代理服務器再請求目標服務器，將數據返回給開發服務器
複製代碼

34.JSONP支持post請求嗎

不支持,由於script不支持post請求

35.參考 jsonp，還有那些發送跨域請求的途徑?

img link iframe 等元素均可以發送跨域請求

36.React生命週期

Mounting：組件掛載，已插入真實DOM

  • componentWillMount

組件即將被渲染到頁面以前觸發，此時能夠進行開啓定時器、向服務器發送請求等操做

  • render()

組件渲染

  • componentDidMount()

組件已經被渲染到頁面中後觸發：此時頁面中有了真正的DOM的元素，能夠進行DOM相關的操做

Updating：組件更新，正在被從新渲染

  • componentWillReceiveProps()

在組件接收到一個新的 prop (更新後)時被調用。這個方法在初始化render時不會被調用。

  • shouldComponentUpdate()

返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。 能夠在你確認不須要更新組件時使用。

  • componentWillUpdate()

在組件接收到新的props或者state但尚未render時被調用。在初始化時不會被調用

  • componentDidUpdate()

在組件完成更新後當即調用。在初始化時不會被調用。

Unmounting：組件移除，已移出真實DOM

  • componentWillUnmount()

組件被銷燬時觸發。這裏咱們能夠進行一些清理操做，例如清理定時器，取消Redux的訂閱事件等等。

生命週期

37.Vue生命週期

Vue

38. Vue數據雙向綁定原理

數據劫持: vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。 Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

發佈者-訂閱者模式: 通常經過sub, pub的方式實現數據和視圖的綁定監聽，更新數據方式一般作法是 vm.set('property', value)，

  • 實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
  • 實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
  • 實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖

39.實現雙向數據綁定

<div>
  <input type="text" id="text1" />
  <span id="text2"></span>
</div>

<script>
  //視圖控制器
  var obj = {}
  Object.defineProperty(obj, 'text', {
    set: function(newValue) {
      document.getElementById('text1').value = newValue
      document.getElementById('text2').innerHTML = newValue
    }
  })

  document.addEventListener('keyup', function(e) {
    obj.text = e.target.value
  })
</script>
複製代碼

4、網絡知識

1.GET和POST的區別

  • GET在瀏覽器回退時是無害的，而POST會再次提交請求。
  • GET請求只能進行url編碼，而POST支持多種編碼方式。
  • GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。
  • GET請求在URL中傳送的參數是有長度限制的，而POST沒有。
  • 對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。
  • GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息。
  • GET參數經過URL傳遞，POST放在Request body中。
  • GET產生一個TCP數據包（200）；POST產生兩個TCP數據包 （200 ok）

2.三次握手和四次揮手

問題1： 爲何要三次握手？

答：三次握手的目的是創建可靠的通訊信道，說到通信，簡單來講就是數據的發送與接收，而三次握手最主要的目的就是雙方確認本身與對方的發送與接收機能正常。

問題2：爲何要發送特定的數據包，隨便發不行嗎？

答：三次握手的另一個目的就是確認雙方都支持TCP，告知對方用TCP傳輸。

問題3：上圖中的SYN和ACK是什麼？

答：SYN是標誌位，SYN=1表示請求鏈接；

問題1： 爲何要四次揮手？

答：根本緣由是，一方發送FIN只表示本身發完了全部要發的數據，但還容許對方繼續把沒發完的數據發過來。

問題2：爲何雙方要發送這樣的數據包？

答：和握手的狀況相似，只是爲了讓對方知曉本身理解了對方的意圖。

3. TCP與UDP基本區別

  • TCP面向鏈接，UDP是無鏈接 的
  • TCP要求系統資源較多，UDP較少
  • UDP程序結構較簡單
  • 流模式（TCP）與數據報模式(UDP);
  • TCP保證數據正確性，UDP可能丟包
  • TCP保證數據順序，UDP不保證

4. HTTP緩存

瀏覽器緩存的優勢有：

1.減小了冗餘的數據傳輸，節省了網費

2.減小了服務器的負擔，大大提高了網站的性能

3.加快了客戶端加載網頁的速度

1.強緩存：不會向服務器發送請求，直接從緩存中讀取資源，在chrome控制檯的network選項中能夠看到該請求返回200的狀態碼;

2.協商緩存：向服務器發送請求，服務器會根據這個請求的request header的一些參數來判斷是否命中協商緩存，若是命中，則返回304狀態碼並帶上新的response header通知瀏覽器從緩存中讀取資源；

**已存在緩存數據時，僅基於強制緩存，請求數據的流程以下 **

img

已存在緩存數據時，僅基於對比緩存，請求數據的流程以下

img

5.HTTP2

HTTP2.0的新特性

  • 新的二進制格式（Binary Format），HTTP1.x的解析是基於文本。基於文本協議的格式解析存在自然缺陷，文本的表現形式有多樣性，要作到健壯性考慮的場景必然不少，二進制則不一樣，只認0和1的組合。基於這種考慮HTTP2.0的協議解析決定採用二進制格式，實現方便且健壯。
  • 多路複用（MultiPlexing），即鏈接共享，即每個request都是是用做鏈接共享機制的。一個request對應一個id，這樣一個鏈接上能夠有多個request，每一個鏈接的request能夠隨機的混雜在一塊兒，接收方能夠根據request的 id將request再歸屬到各自不一樣的服務端請求裏面。
  • header壓縮，如上文中所言，對前面提到過HTTP1.x的header帶有大量信息，並且每次都要重複發送，HTTP2.0使用encoder來減小須要傳輸的header大小，通信雙方各自cache一份header fields表，既避免了重複header的傳輸，又減少了須要傳輸的大小。
  • 服務端推送（server push），同SPDY同樣，HTTP2.0也具備server push功能。目前，有大多數網站已經啓用HTTP2.0，例如YouTuBe，淘寶網等網站，利用chrome控制檯能夠查看是否啓用HTTP2。

6. CDN原理

CDN工做原理

  1. 用戶向瀏覽器提供要訪問的域名；
  2. 瀏覽器調用域名解析庫對域名進行解析，因爲CDN對域名解析過程進行了調整，因此解析函數庫獲得的是該域名對應的CNAME記錄（因爲如今已是使用了CDN服務，CNAME爲CDN服務商域名），爲了獲得實際IP地址，瀏覽器須要再次對得到的CNAME域名進行解析以獲得實際的IP地址；在此過程當中，使用的全局負載均衡DNS解析（全局負載均衡主要用於在多個區域擁有本身服務器的站點，爲了使全球用戶只以一個IP地址或域名就能訪問到離本身最近的服務器，從而得到最快的訪問速度。），如根據地理位置信息解析對應的IP地址，使得用戶能就近訪問。（CDN服務來提供最近的機器）
  3. 這次解析獲得CDN緩存服務器的IP地址，瀏覽器在獲得實際的IP地址之後，向緩存服務器發出訪問請求；
  4. 緩存服務器根據瀏覽器提供的要訪問的域名，經過Cache內部專用DNS解析獲得此域名的實際IP地址，再由緩存服務器向此實際IP地址提交訪問請求；
  5. 緩存服務器從實際IP地址得獲得內容之後，一方面在本地進行保存，以備之後使用，二方面把獲取的數據返回給客戶端，完成數據服務過程；
  6. 客戶端獲得由緩存服務器返回的數據之後顯示出來並完成整個瀏覽的數據請求過程。

7. HTTPS加密過程

  1. 首先，客戶端 A 訪問服務器 B ，好比咱們用瀏覽器打開一個網頁 www.baidu.com ，這時，瀏覽器就是客戶端 A ，百度的服務器就是服務器 B 了。這時候客戶端 A 會生成一個隨機數1，把隨機數1 、本身支持的 SSL 版本號以及加密算法等這些信息告訴服務器 B 。
  2. 服務器 B 知道這些信息後，而後確認一下雙方的加密算法，而後服務端也生成一個隨機數 B ，並將隨機數 B 和 CA 頒發給本身的證書一同返回給客戶端 A 。
  3. 客戶端 A 獲得 CA 證書後，會去校驗該 CA 證書的有效性，校驗方法在上面已經說過了。校驗經過後，客戶端生成一個隨機數3 ，而後用證書中的公鑰加密隨機數3 並傳輸給服務端 B 。
  4. 服務端 B 獲得加密後的隨機數3，而後利用私鑰進行解密，獲得真正的隨機數3。
  5. 最後，客戶端 A 和服務端 B 都有隨機數一、隨機數二、隨機數3，而後雙方利用這三個隨機數生成一個對話密鑰。以後傳輸內容就是利用對話密鑰來進行加解密了。這時就是利用了對稱加密，通常用的都是 AES 算法。
  6. 客戶端 A 通知服務端 B ，指明後面的通信用對話密鑰來完成，同時通知服務器 B 客戶端 A 的握手過程結束。
  7. 服務端 B 通知客戶端 A，指明後面的通信用對話密鑰來完成，同時通知客戶端 A 服務器 B 的握手過程結束。
  8. SSL 的握手部分結束，SSL 安全通道的數據通信開始，客戶端 A 和服務器 B 開始使用相同的對話密鑰進行數據通信。

8. http經常使用請求方式

序號 方法 描述
1 GET 請求指定的頁面信息，並返回實體主體。
2 HEAD 相似於get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
3 POST 向指定資源提交數據進行處理請求（例如提交表單或者上傳文件）。數據被包含在請求體中。POST請求可能會致使新的資源的創建和/或已有資源的修改。
4 PUT 從客戶端向服務器傳送的數據取代指定的文檔的內容。
5 DELETE 請求服務器刪除指定的頁面。
6 CONNECT HTTP/1.1協議中預留給可以將鏈接改成管道方式的代理服務器。
7 OPTIONS 容許客戶端查看服務器的性能。
8 TRACE 回顯服務器收到的請求，主要用於測試或診斷。

9. cookie、session、localStorage、sessionStorage的區別

cookie和session的區別(cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。 )

a) 保持狀態 ：cookie保存在瀏覽器端，session保存在服務器端

b) 存儲內容：cookie只能保存字符串類型，以文本的方式；session經過相似與Hashtable的數據結構來保存，能支持任何類型的對象(session中可含有多個對象)

c) 存儲的大小：cookie：單個cookie保存的數據不能超過4kb；session大小沒有限制。

d) 安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙，Cookie截獲；session的安全性大於cookie。

WebStorage

HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）

a) 生命週期：localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。localStorage除非主動刪除數據，不然數據永遠不會消失。

b) 存儲大小：localStorage和sessionStorage的存儲數據大小通常都是：5MB

c) 存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通訊。

d) 存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可使用ECMAScript提供的JSON對象的stringify和parse來處理

e) 應用場景：localStoragese：經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據。sessionStorage：敏感帳號一次性登陸；

10. WebSocket

最大特色就是，服務器能夠主動向客戶端推送信息，客戶端也能夠主動向服務器發送信息 ，HTTP 協議作不到服務器主動向客戶端推送信息。

（1）創建在 TCP 協議之上，服務器端的實現比較容易。

（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，而且握手階段採用 HTTP 協議，所以握手時不容易屏蔽，能經過各類 HTTP 代理服務器。

（3）數據格式比較輕量，性能開銷小，通訊高效。

（4）能夠發送文本，也能夠發送二進制數據。

（5）沒有同源限制，客戶端能夠與任意服務器通訊。

（6）協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。

11.域名收斂和域名發散

  • 域名收斂：就是將靜態資源放在一個域名下。減小DNS解析的開銷。
  • 域名發散：是將靜態資源放在多個子域名下，就能夠多線程下載，提升並行度，使客戶端加載靜態資源更加迅速。

5、其它

1.git 一個分支已經提交了，你如今的代碼已經寫了不少，發現以前有個BUG要改，怎麼辦

先暫存一下工做空間改動：git stash

新建一個分支，而且換到這個新分支

git branch fix_bug//新建分支

git checkout fix_bug//切換分支

這時候就能夠安心的在這個fix_bug分支改bug了，改完以後

git add .

git commit -m "fix a bug"

切換到master主分支

git checkout master

從fix_bug合併到master分支

git merge fix_bug

提交代碼

git push

而後從暫存區恢復代碼

git stash pop

2.數據庫事務特性

  1. 原子性（Atomicity）

    原子性是指事務包含的全部操做要麼所有成功，要麼所有失敗回滾，所以事務的操做若是成功就必需要徹底應用到數據庫，若是操做失敗則不能對數據庫有任何影響。

  2. 一致性（Consistency）

    一致性是指事務必須使數據庫從一個一致性狀態變換到另外一個一致性狀態，也就是說一個事務執行以前和執行以後都必須處於一致性狀態。

  3. 隔離性（Isolation）

    隔離性是當多個用戶併發訪問數據庫時，好比操做同一張表時，數據庫爲每個用戶開啓的事務，不能被其餘事務的操做所幹擾，多個併發事務之間要相互隔離。

  4. 持久性（Durability）

    持久性是指一個事務一旦被提交了，那麼對數據庫中的數據的改變就是永久性的，即使是在數據庫系統遇到故障的狀況下也不會丟失提交事務的操做。

3. 數據庫隔離級別

  • READ_UNCOMMITTED 讀未提交：最低級別，一個事務能夠讀取另外一個未提交事務的數據。幻讀、不可重複讀和髒讀都容許。
  • READ_COMMITTED 讀已提交：一個事務要等另外一個事務提交後才能讀取數據。容許幻讀、不可重複讀，不容許髒讀。
  • REPEATABLE_READ 可重複讀：在開始讀取數據（事務開啓）時，再也不容許修改操做。容許幻讀，不容許不可重複讀和髒讀。
  • SERIALIZABLE 可序列化：最高級別，在該級別下，事務序列化順序執行。幻讀、不可重複讀和髒讀都不容許。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程