一點感悟：當走完全部大廠的實習面試

時間 2019-11-06

原文原文鏈接

七月雖然不是一個豐收的季節，但倒是一個十分酷熱的月份。不知有多少小夥伴跟我同樣，頂着大太陽奔波在各類面試的征途中。面試是一個漫長的過程。可是也是一個讓你快速提高的過程。其中包含了無數的血與淚。去面試前首先咱們必須有牢固的基礎知識，足夠豐富的項目經歷(就我而言差很少是三個完整項目經歷，時間累計差很少接近一年)。而後就是表述能力，你要能把你的答案給面試官描述清楚，注意專業詞彙，這將大大提升面試官對你的印象分！css

前言

學而不思則罔，思而不學則殆。當走完基本全部大廠以後，發現其實每一個公司對基礎能力的考察都比較注重，只有基礎掌握好了，把前端全部的知識可以一連串的理清。那麼無論面試題是什麼，均可以遊刃有餘的去回答。這裏就是把我全部面試過的問題的一些底層原理闡述，並不會去描述我在面試中碰到的題目。這樣一方面能夠幫你過一遍js的基礎也能夠幫助我加深理解。下面我就分模塊的去講解沒一個知識點。篇幅過長，請耐心閱讀！！！html

1、CSS面試篇

一、盒子模型

css中的盒子模型包括IE盒子模型和標準的W3C盒子模型。其盒子模型仍是要歸宗於box-sizing的屬性,盒子模型對應的分被爲border-box,content-box。所謂的標準盒子模型(border-box):width = 左右border+左右padding+contentwidth，而咱們的IE盒子模型(border-box): width = content+padding+border 元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。前端

二、前端一像素問題（畫一條0.5px的線）

方法一：transform:scaleY（0.5）使用僞元素設置1px的邊框，而後對邊框進行縮放(scaleY)
實現思路：node

一、設定目標元素的參考位置
二、給目標元素添加一個僞元素before或者after，並設置絕對定位
三、給僞元素添加1px的邊框
四、用box-sizing: border-box 屬性把邊框都包進寬和高裏面
五、寬和高設置爲 200%
六、整個盒子模型縮小爲0.5
七、調整盒子模型的位置，以左上角爲基準 transform-origin: 0

方法二： border-image 設置圖片的邊框git

三、transition和animation的區別

Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區別是transition須要觸發一個事件才能改變屬性，
而animation不須要觸發任何事件的狀況下才會隨時間改變屬性值，而且transition爲2幀，從from .... to，而animation能夠一幀一幀的。es6

四、不定高的DIV居中

1.使用flexgithub

在父盒子設置display: flex; justify-content: center;align-items: center

2.使用css的transformweb

父盒子設置:display:relative
    Div 設置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

3.display：table-cell面試

父盒子設置:display:table-cell; text-align:center;vertical-align:middle;
    Div 設置: display:inline-block;vertical-align:middle;

五、浮動相應連接

特性：浮動元素影響的不只是本身，他會影響周圍元素對其進行環繞
爲何要清除浮動？（解決父元素高度坍陷問題）

一個塊級元素若是沒有設置height,其height由子元素撐開，對子元素使用了浮動以後，子元素就會脫離文檔流也就是說，父及元素中沒有內容能夠撐開其高度，這樣父級元素height就會被忽略。這就是所謂的高度坍塌算法

如何清除浮動

1.給父級元素定義高度 
2.讓父級元素也浮動 
3.父級定義display:table 
4.父元素設置overflow:hidden 
5.clearfix:使用內容生成的方式清除浮動
    .clearfix:after {  // :after選擇器向選定的元素以後插入內容
               content:""; // 生成內容爲空
               display: block; // 塊級元素顯示
               clear:both; // 清除前面元素
    }
不破壞文檔流，沒有反作用

六、css選擇器分類

基本的：
    1.id選擇器（id="name"）
    2.類選擇器（class="head"）
    3.標籤選擇器（body, div, ul, li）
    4.全局選擇器（*）
複雜的：
    1.組合選擇器（.head .head_logo）
    2.後代選擇器 （#head .nav ul li 從父集到子孫集）
    3.羣組選擇器 (div, span, img {color:Red} 具備相一樣式的標籤分組顯示)
    4.繼承選擇器
    5.僞類選擇器（連接樣式，a元素的僞類）
    6.子選擇器（div>p, 帶大於號>）
    7.CSS相鄰相鄰兄弟選擇器（h1+p, 帶加號+）

優先級：

不一樣級別：總結排序：!important > 行內樣式 > ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

1.屬性後面加!import 會覆蓋頁面內任何位置定義的元素樣式
2.做爲style屬性寫在元素內的樣式
3.id選擇器
4.類選擇器
5.標籤選擇器
6.通配符選擇器（*）
7.瀏覽器自定義或繼承

同一級別：後寫的會覆蓋先寫的

css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向，這樣能夠儘早的過濾掉一些沒必要要的樣式規則和元素

七、行內元素和塊元素

塊元素	行內元素
塊元素會獨佔一行，默認狀況下，其寬度自動填滿父元素寬度行元素不會佔據一行，會一直排在一行，直到一行排不下	行元素沒有寬度和高度屬性，塊級元素即便設置了寬度，仍是會獨佔一行
塊級元素： div p forn ul li h1-h6	行內元素：span img input a i

注意：對於行內元素，font-size指定他們的content area的高度，因爲inline box = 上下的helf-leading，若是leading爲0，在這種狀況下，font-size指定了inline box的高度font-size指的是字體的高度，可是不能指定每一個字形給定字體高度下的實際高度，致使了span的高度大於line-height

八、如何畫一個三角形

設置寬高，而後用border去畫
          width: 0;
            height: 0;
            border-bottom: 100px solid cyan;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;

九、使元素消失的方法

visibility:hidden、display:none、z-index=-一、opacity：0

1.opacity：0,該元素隱藏起來了，但不會改變頁面佈局，而且，若是該元素已經綁定了一些事件，如click事件也能觸發
2.visibility:hidden,該元素隱藏起來了，但不會改變頁面佈局，可是不會觸發該元素已經綁定的事件
3.display:node, 把元素隱藏起來，而且會改變頁面佈局，能夠理解成在頁面中把該元素刪掉

十、爲何css放在頂部而js寫在後面

1.瀏覽器預先加載css後，能夠沒必要等待HTML加載完畢就能夠渲染頁面了
2.其實HTML渲染並不會等到徹底加載完在渲染頁面，而是一邊解析DOM一邊渲染。
3.js寫在尾部，主要是由於js主要扮演事件處理的功能，一方面不少操做是在頁面渲染後才執行的。另外一方面能夠節省加載時間，使頁面可以更加的加載，提升用戶的良好體驗

可是隨着JS技術的發展，JS也開始承擔頁面渲染的工做。好比咱們的UI其實能夠分被對待，把渲染頁面的js放在前面，時間處理的js放在後面

2、佈局面試

一、flex彈性佈局

能夠簡單的使一個元素居中（包括水平和垂直居中）柵格式系統佈局，bootstrap grid

二、三欄是佈局

三欄是佈局（兩邊兩欄寬度固定，中間欄寬度自適應）

方案一：position（絕對定位法） center的div須要放在最後面
絕對定位法原理將左右兩邊使用absolute定位，由於絕對定位使其脫離文檔流，後面的center會天然流動到他們的上賣弄，而後margin屬性，留出左右兩邊的寬度。就能夠自適應了。
方案二：float 自身浮動法 center的div須要放到後面
自身浮動法的原理就是對左右使用float:left和float：right，float使左右兩個元素脫離文檔流，中間的正常文檔流中，使用margin指定左右外邊距對其進行一個定位。
方案三(聖盃佈局)：原理就是margin負值法。使用聖盃佈局首先須要在center元素外部包含一個div,包含的div須要設置float屬性使其造成一個BFC，而且這個寬度和margin的負值進行匹配

三、左邊定寬，右邊自適應

方案一：左邊設置浮動，右邊寬度設置100% .left{float:left} .right:{width:100%}
方案二：左設置浮動，右用cacl去補寬度計算 .left{float:left} .right:{width:cacl(100vw-200px}
方案三：父容器設置display：flex right部分是設置flex：1
方案四：右邊div套個包裹、並前置、左及包裹雙浮動

四、水平居中

行內元素居中（父元素text-align:center）
    塊狀元素居中（塊狀元素沒發用text-align）
        1.寬度必定：margin:auto
        2.寬度不定：塊級變行內，而後在父上text-aligin

五、BFC

理解：BFC是css佈局的一個概念，是一塊獨立的渲染區域，一個環境，裏面的元素不會影響到外部的元素
如何生成BFC：（脫離文檔流）
         【1】根元素，即HTML元素（最大的一個BFC）
         【2】float的值不爲none
         【3】position的值爲absolute或fixed
         【4】overflow的值不爲visible（默認值。內容不會被修剪，會呈如今元素框以外）
         【5】display的值爲inline-block、table-cell、table-caption
BFC佈局規則：1.內部的Box會在垂直方向，一個接一個地放置。
         2.屬於同一個BFC的兩個相鄰的Box的margin會發生重疊
         3.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此, 文字環繞效果，設置float
         4.BFC的區域不會與float box重疊。
         5.計算BFC的高度，浮動元素也參與計算
BFC做用：1.自適應兩欄佈局
     2.能夠阻止元素被浮動元素覆蓋
     3.能夠包含浮動元素---清除內部浮動 原理:：觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域以內
     4.分屬於不一樣的BFC時，能夠阻止margin重疊

3、js面試篇

一、前端事件流

事件流描述的是從頁面中接受事件的順序，能夠分爲：事件捕獲階段處於目標階段事件冒泡階段其中須要主要的是addeventListener這個函數最後這個布爾值參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

一、事件捕獲階段：實際目標div在捕獲階段不會接受事件，也就是在捕獲階段，事件從document到<html>再到<body>就中止了
二、處於目標階段：事件在div發生並處理，可是事件處理會被當作是冒泡階段的一部分。
三、冒泡階段：事件又傳播迴文檔

阻止冒泡事件event.stopPropagation()
           function stopBubble(e) {
           if (e && e.stopPropagation) { // 若是提供了事件對象event 這說明不是IE瀏覽器
          e.stopPropagation()
            } else {
          window.event.cancelBubble = true //IE方式阻止冒泡
              }
             }
阻止默認行爲event.preventDefault()
     function stopDefault(e) {
        if (e && e.preventDefault) {
         e.preventDefault()
        } else {
            // IE瀏覽器阻止函數器默認動做的行爲
            window.event.returnValue = false
        }
    }

事件如何先捕獲後冒泡：

在DOM標準事件模型中，是先捕獲後冒泡。可是若是要實現先冒泡後捕獲的效果，對於同一個事件，監聽捕獲和冒泡，分別對應相應的處理函數，監聽到捕獲事件，先暫緩執行，直到冒泡事件被捕獲後再執行捕獲事件。

哪些事件不支持冒泡事件：

鼠標事件：mouserleave  mouseenter
焦點事件：blur focus
UI事件：scroll resize

二、事件委託（提升性能）

簡介：事件委託指的是，不在事件的（直接dom）上設置監聽函數，而是在其父元素上設置監聽函數。經過事件冒泡，父元素能夠監聽到子元素上事件的觸發經過判斷事件發生元素DOM的類型，來作出不一樣的響應。

舉例子：最經典的就是ui和li標籤的事件監聽，好比咱們在添加事件的時候，採用事件委託機制，不會在li標籤上直接添加，而是在ul父元素上添加
好處：能夠比較合適動態元素的綁定，新添加的子元素也會監聽函數，也能夠有事件觸發機制

三、js的new操做符作了什麼

new操做符建立了一個空對象，這個對象原型指向構造函數的prototype，執行構造函數後返回這個對象。若是不要父類的屬性跟方法，在函數的prototype上去new這個父類。

四、this的指向

一、當函數做爲對象的方法被調用時，this就會指向該對象。
二、做爲普通函數，this指向window。
三、構造器調用，this指向返回的這個對象。
四、箭頭函數箭頭函數的this綁定看的是this所在函數定義在哪一個對象下，就綁定哪一個對象。若是有嵌套的狀況，則this綁定到最近的一層對象上

4.一、箭頭函數this的原理：

this指向的固定化，並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。正是由於它沒有this，因此也就不能用做構造函數。

4.二、怎麼改變this的指向呢？

1.使用es6的箭頭函數；2.在函數內部使用that = this；3.使用apply，call，bind； 4.new實例化一個對象

4.三、bind,apply,call的區別

經過apply和call改變函數的this指向，他們兩個函數的第一個參數都是同樣的表示要改變指向的那個對象，第二個參數，apply是數組，而call則是arg1,arg2...這種形式。bind一個是返回一個函數，並不會當即執行第二個是帶參數（第一個參數要指向的this，後面的的參數用來傳遞

五、深淺拷貝參考連接

基本類型	引用類型
基本類型：undefined,null,Boolean,String,Number,Symbol在內存中佔據固定大小，保存在棧內存中	引用類型：Object,Array,Date,Function,RegExp等引用類型的值是對象保存在堆內存中，棧內存存儲的是對象的變量標識符以及對象在堆內存中的存儲地址。
基本類型的複製:其實就是建立了一個新的副本給將這個值賦值給新變量，改變值舊對象不會改變	引用類型的複製：其實就是複製了指針，這個最終都將指向同一個對象，改變其值新對象也會改變

注意：基本類型的比較 == 會進行類型轉換

淺拷貝	深拷貝
僅僅就是複製了引用，彼此操做不影響，slice() concat() object.assign	在堆中從新分配內存，不一樣的地址，相同的值,互不影響的 JSON.parse()將一個js對象序列化爲一個json字符串JSON.stringify()將json字符串反序列化爲一個js對象 es6的展開 {...}
從新在堆棧中建立內存，拷貝先後對象的基本類型互不影響。只拷貝一層，不能對對象進行子對象進行拷貝	對對象中的子對象進行遞歸拷貝，拷貝先後兩個對象互不影響

六、setTimeout和setInterval的機制

由於js是單線程的。瀏覽器遇到etTimeout和setInterval會先執行完當前的代碼塊，在此以前會把定時器推入瀏覽器的待執行時間隊列裏面，等到瀏覽器執行完當前代碼以後會看下事件隊列裏有沒有任務，有的話才執行定時器裏的代碼

七、前端跨域問題

同源策略（協議+端口號+域名要相同）

一、jsonp跨域(只能解決get）

原理：動態建立一個script標籤。利用script標籤的src屬性不受同源策略限制，由於全部的src屬性和href屬性都不受同源策略的限制，能夠請求第三方服務器資源內容

步驟：1.去建立一個script標籤
              2.script的src屬性設置接口地址
              3.接口參數，必需要帶一個自定義函數名，要否則後臺沒法返回數據
              4.經過定義函數名去接受返回的數據

二、document.domain 基礎域名相同子域名不一樣
三、window.name 利用在一個瀏覽器窗口內，載入全部的域名都是共享一個window.name
四、服務器設置對CORS的支持
原理：服務器設置Access-Control-Allow-Origin HTTP響應頭以後，瀏覽器將會容許跨域請求
利用h5新特性window.postMessage()

iframe元素建立包含另一個文檔的內聯框架（行內框架）(setTimeout進行異步加載)
      解釋：瀏覽器中的瀏覽器！用於設置文本或者圖形的浮動圖文框或容器
      它和跨域
        一、document.domain 實現主域名相同，子域名不一樣的網頁通訊
          都設置爲超域：document.domain = 'demo.com'
        二、window.postMessageht(data, url)，h5的API，啓動跨域通訊

八、圖片預加載和懶加載

8.一、預加載：

提早加載圖片，當用戶須要查看是能夠直接從本地緩存中渲染

爲何要使用預加載：在網頁加載以前，對一些主要內容進行加載，以提供用戶更好的體驗，減小等待時間。不然，若是一個頁面的內容過於龐大，會出現留白。

解決頁面留白的方案：
1.預加載

2.使用svg站位圖片，將一些結構快速搭建起來，等待請求的數據來了以後，替換當前的佔位符

實現預加載的方法：

1.使用html標籤
        2.使用Image對象
        3.使用XMLHTTPRequest對像，但會精細控制預加載過程

8.二、懶加載（lazyload）

客戶端優化，減小請求數和延遲請求數，提高用戶體驗，減小無效資源的加載，防止併發加載的資源過多會阻塞js的加載，影響網站的正常使用

原理：首先將頁面上的圖片的src屬性設置爲空字符串，而圖片的真是路經則設置帶data-original屬性中，當頁面滾動的時候須要去監聽scroll事件，在scroll事件的回調中，判斷咱們的懶加載的圖片是否進入到可視區域，若是圖片在可視區域將圖片的src屬性設置爲data-original的值，這樣就能夠實現延遲加載。

九、函數節流和防抖

防抖	節流
短期內屢次觸發同一個事件，只執行最後一次，或者在開始時執行，中間不執行。好比公交車上車，要等待最後一個乘客上車	節流是連續觸發事件的過程當中以必定時間間隔執行函數。節流會稀釋你的執行頻率，好比每間隔1秒鐘，只會執行一次函數，不管這1秒鐘內觸發了多少次事件

都爲解決高頻事件而來， scroll mousewhell mousemover touchmove onresize，後面有相應的代碼實現函數的節流和防抖。

十、js垃圾回收機制

1.JS具備自動垃圾收集的機制
2.JS的內存生命週期（變量的生命）
    1.分配你所須要的空間 var a = 20
    2.使用分配帶的內存（讀寫） alert（a + 10）
    3.不適用的時候，釋放內存空間 a = null 
3.JS的垃圾收集器每隔固定的時間就執行一次釋放操做，通用的是經過標記清除的算法
4.在局部做用域中，垃圾回收器很容易作出判斷並回收，全局比較難，所以應避免全局變量

   標記清除算法：js最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將他標記爲'進入環境'，
         當變量離開（函數執行完後），就其標記爲'離開環境'。垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，
         而後去掉環境中的變量以及被環境中該變量所引用的變量（閉包）。在這些完成以後仍存在標記的就是要刪除的變量了

十一、一些檢驗方法

千萬不要使用typeof來判斷對象和數組，由於這種類型都會返回object。

typeOf()是判斷基本類型的Boolean,Number，symbol, undefined, String。
對於引用類型：除function，都返回object null返回object。
installOf() 用來判斷A是不是B的實例，installof檢查的是原型。
toString() 是Object的原型方法，對於 Object 對象，直接調用 toString() 就能返回 [Object Object] 。而對於其餘對象，則須要經過 call / apply 來調用才能返回正確的類型信息。
hasOwnProperty()方法返回一個布爾值，指示對象自身屬性中是否具備指定的屬性，該方法會忽略掉那些從原型鏈上繼承到的屬性。
isProperty()方法測試一個對象是否存在另外一個對象的原型鏈上。
valueof：全部對象都有valueof，若是存在任意原始值，他就默認將對象轉化爲表示它的原始值。若是對象是複合值，而卻大部分對象沒法真正表示一個原始值，所以默認的valueof()方法簡單的返回對象自己，而不是返回原始值

十二、splice和slice、map和forEach、 filter()、reduce()的區別

1.slice(start,end):方法能夠從已有數組中返回選定的元素，返回一個新數組，包含從start到end（不包含該元素）的數組方法
    注意：該方法不會更新原數組，而是返回一個子數組
 2.splice():該方法想或者從數組中添加或刪除項目，返回被刪除的項目。（該方法會改變原數組）
    splice(index, howmany,item1,...itemx)
        ·index參數：必須，整數規定添加或刪除的位置，使用負數，從數組尾部規定位置
        ·howmany參數：必須，要刪除的數量，
        ·item1..itemx:可選，向數組添加新項目
3.map()：會返回一個全新的數組。使用於改變數據值的時候。會分配內存存儲空間數組並返回，forEach（）不會返回數據
4.forEach(): 不會返回任何有價值的東西，而且不打算改變數據，單純的只是想用數據作一些事情，他容許callback更改原始數組的元素
5.reduce(): 方法接收一個函數做爲累加器，數組中的每個值（從左到右）開始縮減，最終計算一個值，不會改變原數組的值
6.filter(): 方法建立一個新數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。它裏面經過function去作處理

1三、jscss阻塞

js阻塞	css阻塞
全部瀏覽器在下載JS的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載JS，可是JS下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。	由於瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的JS會阻塞後面的資源加載，因此就會出現上面CSS阻塞下載的狀況。

1四、類的建立和繼承

(es6)中class, extends

14.一、繼承：

原型鏈繼承： function Cat(){ } Cat.prototype = new Animal(); Cat.prototype.name = 'cat'; 沒法實現多繼承

構造繼承：使用父類的構造函數來加強子類實例。function Cat(name){Animal.call(this);this.name = name || 'Tom';} 沒法繼承父類原型鏈上的屬性跟方法 installof去檢驗
實例繼承：爲父類實例添加新特性，做爲子類實例的返回
拷貝繼承：拷貝父類元素上的屬性跟方法
組合繼承：構造繼承 + 原型繼承的組合體
寄生組合繼承：經過寄生方式，在構造繼承上加一個Super函數(沒有實例和方法) 讓他的原型鏈指向父類的原型鏈砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性

14.2 給兩個構造函數A和B，如何實現A繼承B （Object.prototype）

function A(....){} A.prototype...
    function B(....){} B.prototype...
    A.prototype = Object.create(B.prototype)  再A的構造函數裏new B(props)        
    
   使用new一個函數的話，函數裏的構造函數的參數就爲undefined，裏面的一些函數可能執行錯誤，由於this改變了    
    Object.create =  function (o) {
           var F = function () {};
           F.prototype = o;
           return new F();
        };

1五、閉包和原型

15.一、閉包的理解

一、內部函數能夠訪問定義他們外部函數的參數和變量。（做用域鏈的向上查找，把外圍的做用域中的變量值存儲在內存中而不是在函數調用完畢後銷燬）設計私有的方法和變量，避免全局變量的污染
二、函數嵌套函數
三、本質是將函數內部和外部鏈接起來。優勢是能夠讀取函數內部的變量，讓這些變量的值始終保存在內存中，不會在函數被調用以後自動清除

15.二、閉包的缺陷：

1.閉包的缺點就是常駐內存會增大內存使用量，而且使用不當容易形成內存泄漏
2.若是不是由於某些特殊任務而須要閉包，在沒有必要的狀況下，在其它函數中建立函數是不明智的，由於閉包對腳本性能具備負面影響，包括處理速度和內存消耗。

15.三、內存的理解

內存溢出和內存泄漏（給的不夠用| 用了不歸還）

一、內存溢出：在程序中申請內存時，沒有足夠的內存空間供其使用，出現out of memory；好比申請了一個integer,但給它存了long才能存下的數，那就是內存溢出
二、內存泄漏：在程序申請內存後，沒法釋放已申請的內存空間，一次內存泄漏危害能夠忽略，但內存泄漏堆積後果很嚴重，不管多少內存，遲到會被佔光

舉列子：閉包中的this,對象函數。匿名函數返回函數return function

15.四、做用域

做用域：(由當前環境與上層環境一系列的變量對象組成！！！保證當先執行環境裏，有權訪問的變量和函數是有序的，做用域鏈變量只能被向上訪問)

定義：由當前環境與上層環境的一系列變量對象組成(函數嵌套函數，內部一級級往上有序訪問變量或對象)

做用是：保證當前執行環境裏，有權訪問的變量和函數時有序的，做用域鏈的變量只能被向上訪問

變量訪問到window對象及被終止，做用域鏈向下訪問是不容許的
    1.改變做用域有 with try..中的catch，
    2.全部爲定義的直接賦值的變量自動聲明爲全局做用域

做用域：一套規則，管理引擎如何在當前做用域以及嵌套的子做用域中根據標識符名稱
    查找變量（標識符就是變量或者函數名）（只用全局做用域和局部做用域）（做用域在它建立的時候就存在了）

代碼執行分爲兩個階段：
    1.代碼編譯階段：有編譯器完成，將代碼翻譯可執行的代碼，這個階段會被肯定
    2.代碼執行階段：有js引擎完成，主要執行可執行的大媽，這個階段執行上下文被建立（對象被建立）

執行上下文：一個看不見得對象，存在若干個屬性和變量，它被調用的時候建立的。函數被調用查看的this指向的object，object就是上下文（只有被調用的時候建立）

15.五、做用域鏈參考連接

· 當代碼在一個環境中執行時，會建立變量對象的一個做用域鏈,
    舉例子：var name ="Tom"
        function sayHi () {
            alert('Hi,'+name)
        }
        sayHi()  //Hi, Tom
    函數sayHi()的執行環境爲全局環境，因此它的變量對象爲window。當函數執行到name時，先查找局部環境，找到則換回，不然順着做用域查找，在全局環境中，
    找到name返回，這一查找變量的有序過程的依據就是做用域。

    · 做用域鏈是保證執行環境有權訪問的全部變量和函數的有序訪問

15.六、原型鏈

原型鏈：函數的原型鏈對象constructor默認指向函數自己，原型對象除了有原型屬性外，爲了實現繼承，還有一個原型鏈指針_proto_,該指針是指向上一層的原型對象，而上一層的原型對象的結構依然相似。所以能夠利用_proto_一直指向Object的原型對象上，而Object原型對象用Object.prototype._proto_=null表示原型鏈頂端。如此造成了js的原型鏈繼承。同時全部的js對象都有Object的基本防範

4、服務器端面試篇

一、狀態碼

2XX（成功處理了請求狀態）
          200 服務器已經成功處理請求，並提供了請求的網頁
          201 用戶新建或修改數據成功
          202 一個請求已經進入後臺
          204 用戶刪除成功
3XX（每次請求使用的重定向不要超過5次）
          304 網頁上次請求沒有更新，節省帶寬和開銷
4XX（表示請求可能出錯，妨礙了服務器的處理）
          400 服務器不理解請求的語法
          401 用戶沒有權限（用戶名，密碼輸入錯誤）
          403 用戶獲得受權（401相反），可是訪問被禁止
          404 服務器找不到請求的網頁，
5XX（表示服務器在處理請求的時候發生內部錯誤）
          500 服務器遇到錯誤，沒法完成請求
          503 服務器目前沒法使用（超載或停機維護）

二、304的緩存原理（添加Etag標籤.last-modified）

1.服務器首先產生Etag,服務器可在稍後使用它來判斷頁面是否被修改。本質上，客戶端經過該記號傳回服務器要求服務器驗證（客戶端）緩存）
2.304是HTTP的狀態碼，服務器用來標識這個文件沒有被修改，不返回內容，瀏覽器接受到這個狀態碼會去去找瀏覽器緩存的文件
3.流程：客戶端請求一個頁面A。服務器返回頁面A，並在A上加一個Tage客服端渲染該頁面，並把Tage也存儲在緩存中。客戶端再次請求頁面A並將上次請求的資源和ETage一塊兒傳遞給服務器。服務器檢查Tage.而且判斷出該頁面自上次客戶端請求以後未被修改。直接返回304

last-modified: 客服端請求資源，同時有一個last-modified的屬性標記此文件在服務器最後修改的時間，客服端第二次請求此url時，根據http協議。瀏覽器會向服務器發送一個If-Modified-Since報頭，詢問該事件以後文件是否被修改，沒修改返回304

有了Last-Modified，爲何還要用ETag？
  一、由於若是在一秒鐘以內對一個文件進行兩次更改，Last-Modified就會不正確（Last—Modified不能識別秒單位的修改）
  二、某些服務器不能精確的獲得文件的最後修改時間
  三、一些文件也行會週期新的更改，可是他的內容並不改變（僅僅改變修改的事件），這個時候咱們並不但願客戶端認爲文件被修改，而從新Get

ETag，爲何還要用Last-Modified？
  一、二者互補，ETag的判斷的缺陷，好比一些圖片等靜態文件的修改
  二、若是每次掃描內容都生成ETag比較，顯然要比直接比較修改時間慢的多。


ETag是被請求變量的實體值（文件的索引節，大小和最後修改的時間的Hash值）
  一、ETag的值服務器端對文件的索引節，大小和最後的修改的事件進行Hash後獲得的。

三、get/post的區別

1.get數據是存放在url以後，以？分割url和傳輸數據，參數之間以&相連； post方法是把提交的數據放在http包的Body中
2.get提交的數據大小有限制，（由於瀏覽器對url的長度有限制），post的方法提交的數據沒有限制
3.get須要request.queryString來獲取變量的值，而post方式經過request.from來獲取變量的值
4.get的方法提交數據，會帶來安全問題，好比登陸一個頁面，經過get的方式提交數據，用戶名和密碼就會出如今url上

四、http和https的總結

4.一、http協議的理解

1.超文本的傳輸協議，是用於從萬維網服務器超文本傳輸到本地資源的傳輸協議
2.基於TCP/IP通訊協議來傳遞數據（HTML，圖片資源）
3.基於運用層的面向對象的協議，因爲其簡潔、快速的方法、適用於分佈式超媒體信息系統
4.http請求信息request：
    請求行（request line）、請求頭部（header）,空行和請求數據四部分構成

    請求行，用來講明請求類型,要訪問的資源以及所使用的HTTP版本.
    請求頭部，用來講明服務器要使用的附加信息
    空行，請求頭部後面的空行是必須的
    請求數據也叫主體，能夠添加任意的其餘數據。
5.http相應信息Response
    狀態行、消息報頭、空行和響應正文

    狀態行，由HTTP協議版本號， 狀態碼， 狀態消息 三部分組成
    消息報頭，用來講明客戶端要使用的一些附加信息
    空行，消息報頭後面的空行是必須的
    響應正文，服務器返回給客戶端的文本信息。

4.二、http和https的區別

http	https
是以安全爲目標的HTTP通道，簡單講是HTTP的安全版本，經過SSL加密	超文本傳輸協議。是一個客服端和服務器端請求和應答的標準（tcp）,使瀏覽器更加高效，使網絡傳輸減小

4.三、http1.0、1.一、2.0的區別

1.0跟1.1的區別：

長鏈接：HTTP1.0須要使用keep-alive參數來告知服務器創建一個長鏈接，而HTP1.1默認支持長鏈接

節約寬帶：HTTP1.1支持只發送一個header信息（不帶任何body信息）

host域（設置虛擬站點，也就是說，webserver上的多個虛擬站點能夠共享同一個ip端口）：HTTP1.0沒有host域

1.1跟2.0的區別：

1.http2採用的二進制文本傳輸數據，而非http1文本格式，二進制在協議的解析和擴展更好
2.數據壓縮：對信息頭採用了HPACK進行壓縮傳輸，節省了信息頭帶來的網絡流量
3.多路複用：一個鏈接能夠併發處理多個請求
4.服務器推送：咱們對支持HTTP2.0的webserver請求數據的時候，服務器會順便把一些客戶端須要的資源一塊兒推送到客戶端，省得客戶端再次建立鏈接發送請求到服務器端獲取。這種方式很是合適加載靜態資源

五、web總結

5.一、web緩存

1.web緩存就是存在於客戶端與服務器之間的一個副本、當你第一個發出請求後，緩存根據請求保存輸出內容的副本
2.緩存的好處
        （1）減小沒必要要的請求
    （2）下降服務器的壓力，減小服務器的消耗
    （3）下降網絡延遲，加快頁面打開速度（直接讀取瀏覽器的數）

5.二、常見的web安全及防禦原理

1.sql注入原理：通郭sql命令插入到web表單遞交或者輸入活命，達到欺騙服務器執行的惡意sql命令
```
防範：1.對用戶輸入進行校驗
        2.不適用動態拼接sql
```

2.XSS（跨站腳本攻擊）：往web頁面插入惡意的html標籤或者js代碼。

舉例子：在論壇放置一個看是安全的連接，竊取cookie中的用戶信息
     防範：1.儘可能採用post而不使用get提交表單
           2.避免cookie中泄漏用戶的隱式

3.CSRF(跨站請求假裝）：經過假裝來自受信任用戶的請求

舉例子：黃軼老師的webapp音樂請求數據就是利用CSRF跨站請求假裝來獲取QQ音樂的數據
     防範：在客服端頁面增長僞隨機數，經過驗證碼

XSS和CSRF的區別：
1.XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包
2.CSRF代替用戶完成指定的動做，須要知道其餘頁面的代碼和數據包

5.三、CDN(內容分發網絡)

1.儘量的避開互聯網有可能影響數據傳輸速度和穩定性的瓶頸和環節。使內容傳輸的更快更穩定。
2.關鍵技術：內容存儲和分發技術中
3.基本原理：普遍採用各類緩存服務器，將這些緩存服務器分佈到用戶訪問相對的地區或者網絡中。當用戶訪問網絡時利用全局負載技術
        將用戶的訪問指向距離最近的緩存服務器，由緩存服務器直接相應用戶的請求（全局負載技術）

六、前端呈現流程（TCP三次握手，DOM樹渲染）

6.一、從輸入url到獲取頁面的完整過程參考連接

1.查詢NDS(域名解析),獲取域名對應的IP地址  查詢瀏覽器緩存
2.瀏覽器與服務器創建tcp連接（三次握手）
3.瀏覽器向服務器發送http請求(請求和傳輸數據）
4.服務器接受到這個請求後，根據路經參數，通過後端的一些處理生成html代碼返回給瀏覽器
5.瀏覽器拿到完整的html頁面代碼開始解析和渲染，若是遇到外部的css或者js，圖片同樣的步驟
6.瀏覽器根據拿到的資源對頁面進行渲染，把一個完整的頁面呈現出來

6.二、TCP三次握手

客服端發c起請求鏈接服務器端s確認，服務器端也發起鏈接確認客服端確認。

第一次握手：客服端發送一個請求鏈接，服務器端只能確認本身能夠接受客服端發送的報文段
第二次握手：服務端向客服端發送一個連接，確認客服端收到本身發送的報文段
第三次握手：服務器端確認客服端收到了本身發送的報文段

6.三、瀏覽器渲染原理及流程 DOM -> CSSOM -> render -> layout -> print

流程：解析html以及構建dom樹 -> 構建render樹 ->  佈局render樹 -> 繪製render樹
    概念：1.構建DOM樹： 渲染引擎解析HTML文檔，首先將標籤轉換成DOM樹中的DOM node(包括js生成的標籤)生成內容樹
          2.構建渲染樹： 解析對應的css樣式文件信息（包括js生成的樣式和外部的css）
          3.佈局渲染樹：從根節點遞歸調用，計算每個元素的大小，位置等。給出每一個節點所在的屏幕的精準位置
          4.繪製渲染樹：遍歷渲染樹，使用UI後端層來繪製每個節點
   
    重繪：當盒子的位置、大小以及其餘屬性，例如顏色、字體大小等到肯定下來以後，瀏覽器便把這些顏色都按照各自的特性繪製一遍，將內容呈如今頁面上
        觸發重繪的條件：改變元素外觀屬性。如：color，background-color等
        重繪是指一個元素外觀的改變所觸發的瀏覽器行爲，瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀
    注意：table及其內部元素須要屢次計算才能肯定好其在渲染樹中節點的屬性值，比同等元素要多發時間，要儘可能避免使用table佈局
    
    重排（重構/迴流/reflow）： 當渲染書中的一部分（或所有）由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建，這就是迴流。
        每一個頁面都須要一次迴流，就是頁面第一次渲染的時候
    重排必定會影響重繪，可是重繪不必定會影響重排

七、前端儲存總結

7.一、存儲方式與傳輸方式

1.indexBD: 是h5的本地存儲庫，把一些數據存儲到瀏覽器中，沒網絡，瀏覽器能夠從這裏讀取數據，離線運用。5m
2.Cookie: 經過瀏覽器記錄信息確認用戶身份，最大4kb,這也就限制了傳輸的數據，請求的性能會受到影響
3.Session: 服務器端使用的一種記錄客戶狀態的機制（session_id存在set_cookie發送到客服端，保存爲cookie）
4.localStroage: h5的本地存儲，數據永久保存在客服端

一、cookie，sessionStorage，localStorage是存放在客戶端，session對象數據是存放在服務器上
       實際上瀏覽器和服務器之間僅需傳遞session id便可，服務器根據session-id找到對應的用戶session對象
        session存儲數據更安全一些，通常存放用戶信息，瀏覽器只適合存儲通常的數據
    二、cookie數據始終在同源的http請求中攜帶，在瀏覽器和服務器來回傳遞，裏面存放着session-id
       sessionStorage，localStorage僅在本地保存
    三、大小限制區別，cookie數據不超過4kb，localStorage在谷歌瀏覽中2.6MB
    四、數據有效期不一樣，cookie在設置的（服務器設置）有效期內有效，無論窗口和瀏覽器關閉
      sessionStorage僅在當前瀏覽器窗口關閉前有效，關閉即銷燬（臨時存儲）
      localStorage始終有效

7.二、SessionStorage和localStorage區別：

1.sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在用一個會話的頁面中才能被訪問（也就是說在第一次通訊過程當中）
   而且在會話結束後數據也隨之銷燬，不是一個持久的本地存儲，會話級別的儲存
2.localStorage用於持久化的本地存儲，除非主動刪除數據，不然不會過時

7.三、token、cookie、session三者的理解

一、token就是令牌，好比你受權(登陸)一個程序時,他就是個依據,判斷你是否已經受權該軟件（最好的身份認證，安全性好，且是惟一的）用戶身份的驗證方式
二、cookie是寫在客戶端一個txt文件，裏面包括登陸信息之類的，這樣你下次在登陸某個網站，就會自動調用cookie自動登陸用戶名服務器生成，發送到瀏覽器、瀏覽器保存，下次請求再次發送給服務器（存放着登陸信息）
三、session是一類用來客戶端和服務器之間保存狀態的解決方案，會話完成被銷燬（表明的就是服務器和客戶端的一次會話過程）cookie中存放着sessionID，請求會發送這個id。sesion由於request對象而產生。

7.三、基於Token的身份驗證：（最簡單的token: uid用戶惟一的身份識別 + time當前事件戳 + sign簽名）

一、用戶經過用戶名和密碼發送請求
  二、服務器端驗證
  三、服務器端返回一個帶簽名的token，給客戶端
  四、客戶端儲存token，而且每次用於發送請求
  五、服務器驗證token而且返回數據
  每一次請求都須要token
 cookie與session區別
  一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
  二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。
  三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE。
  四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。

7.四、session與token區別

一、session認證只是把簡單的User的信息存儲Session裏面，sessionID不可預測，一種認證手段。只存在服務端，不能共享到其餘的網站和第三方App
二、token是oAuth Token，提供的是認證和受權，認證針對用戶，受權是針對App，目的就是讓某APP有權訪問某用戶的的信息。Token是惟一的，token不能轉移到其餘的App，也不能轉到其餘用戶上。（適用app）
三、session的狀態是存在服務器端的，客戶端只存在session id， Token狀態是存儲在客戶端的

7.五、Cookie的弊端有哪些？？？（優點：保存客戶端數據，分擔了服務器存儲的負擔）

一、數量和長度的限制。每一個特定的域名下最多生成20個cookie（chorme和safari沒有限制）
  二、安全性問題。

5、寫在後面

因爲篇幅過長，我準備了一個txt文檔，裏面有更多的前端基礎知識。包括這裏不曾談及的Vue,React,node,數據結構等。奉上個人文檔地址前端面試武林祕籍，學習老是須要不斷的積累和總結的。寫此文的目的也很明確，若總結的很差地方歡迎指出並在下方評論，或者你認爲很好的知識點，沒有概括到，也但願可以分享出來，幫助你們，也提升本身。