【面試】前端面試題

石墨文檔

1.git命令用過哪些

2.css3用過哪些

3.box- sizing

 

    默認值content-box

    border - box 內容的寬高要從已設定的寬高減去邊框和內邊距

inherit 從父元素繼承

 

4.跨域 jsonp爲何能夠跨域

   

瀏覽器爲了安全有一種同源策略，協議.域名.端口有一個不一樣都是跨域，不容許ajax跨域獲取服務器數據

   jsonp是經過script的src實現，最終目的是向服務器請求數據回調

 

跨域：爲了安全起見，瀏覽器會限制不一樣源的異步請求

 

jsonp   建立script標籤設定src，提供一個回調函數來接受數據，服務器端組織數據並返回.瀏覽器馬上調用callback

var script = document.createElement("script");

script.type="text/javascript";

script.src = "xxxx.do?jsonp =jsonpCallbak "

document.body.appendChild(script)；

function jsonpCallBack(data){

alert(data);

}

cors跨域

要求服務器端要容許跨域請求

非ie瀏覽器於異步請求是一致的

   

5.ajax原生和jq的不一樣

原生ajax ：

   首先要建立XMLHttpRequest對象

    function getxhr ( ) {

    var xhr = null ;

   if ( window. XMLHttpRequest) {

        xhr = new XMLHttpRequest;

    } else {

        xhr = new ActiveXObject ('Microsoft. XMLHttp '  )

     }

    return xhr ;

}

var xhr = getxhr( )

與服務器創建鏈接

open ( method, url, async)

客戶端向服務器發送請求

send ( 請求參數)   key = value

若是是get類型的話，send ( ) 不能向服務器端發送請求數據，send (null ) , 而且open (' get'  , " url ? user = name " )

Ajax使用的是Post請求的話要在send()方法調用以前使用，使用setRequestHeader(key, value)方法，用於設置請求頭，不設置的話參數沒法正常發送

Xhr.setReuqestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

Form 有一個默認 enctype = 「application/x-www-form-urlencoded」

Post中send起做用，get中send不起做用但不能省略

客戶端接受服務器的響應，使用readyStateChange事件監聽服務器的通訊狀態，readyState爲4  status爲200 能夠接受到服務器端的響應數據responseText

readystate   獲得服務器端目前的通訊狀態

          0  服務器端還沒有初始化

          1  正在發送請求

          2   請求完成

          3   請求成功，客戶端正在接收服務器端數據

          4    響應完成

狀態碼：  1xx 信息類

                 100繼續   101切換協議

              2xx成功

200請求成功，有數據返回

    201已建立

                202已接受      

203非權威信息

204請求成功，無數據返回

              3xx 重定向

                  301永久性重定向    

                  302對象已移動，臨時重定向

                  303請求資源存在另外一個url

                  304 服務器判斷本地緩存未更新，用本地緩存

                  307 臨時重定向

            4xx客戶端錯誤

                 400請求出現語法錯誤

                 401客戶試圖未經受權訪問受密碼保護的頁面

                 403資源不可用

                 404頁面找不到

                 405請求方法對指定的資源不適用

      5xx 服務器錯誤

6.web攻擊的幾種方式和防護

 

web安全

XSS跨站腳本攻擊：通常應用於留言板，若是攻擊者將惡意代碼寫入留言，當用戶瀏覽該網頁時，惡意代碼會被執行，從而達到惡意用戶的特殊目的

對用戶的輸入作一些過濾，將其轉化爲不被瀏覽器解釋執行的字符

 

CSRF跨站請求僞造：

讓用戶以本身的身份去完成攻擊者的目的

 

SQL注入：

利用現有的應用程序，將惡意sql命令注入到後臺數據庫引擎執行的能力

手工注入，在url中手動修改參數，得到想要的信息

工具注入，阿D或者sqlmap

防護：後臺避免手動拼接sql語句

 

7.下拉列表

 

8. 輸入查詢框自動匹配，防抖節流

  防抖：延時處理，這段時間內又觸發了事件，則從新開始延遲

  節流：保證在多少毫秒內觸發一次事件

 

9. for (var i = 0; i < 12; i + +   ) {

    settimeout ( function ( ) {

        console. log (i )

}, 1000 )

}

輸出什麼，如何依次輸出下標而且讓它每1000ms輸出一個數

 

for(let i = 0; i < 12; i++){

      setTimeout(function(){

          console.log(i)

      },1000*i)

}

 

for(var i = 0; i < 12; i++){

      (function(num){

          (setTimeout(function(){

              console.log(num)

          },1000*i))

      })(i)      

}

 

10.一個數組，如何實現查找其中兩個不一樣下標的數字想加等於一個固定的值，輸出可能的結果

var  arr = [ 2, 3, 5, 1]

var sum = 5;

function arrLoad ( ) {

 

 }

 

let arr = [2,3,4,5,6,3,2],sum = 5,result = [],find = [];

    arr.forEach((v,i)=>{

        arrCopy = arr.concat();

        while(arrCopy.indexOf(sum-v) !== -1){

            if(find.indexOf(arrCopy.indexOf(sum-v)+"*"+i) == -1){

                result.push([v, sum-v]);

                find.push(i+"*"+arrCopy.indexOf(sum-v));

            }

            arrCopy.splice(arrCopy.indexOf(sum-v),1,'*');

        }

    })

 

 

暢遊

1.你怎麼接觸到的前端

 

2.position的各個屬性的區別

    absolute 絕對定位，相對於static之外的第一個父元素進行定位

    fixed 絕對定位，相對於瀏覽器窗口進行定位

    relative 相對定位，相對於其正常位置進行定位

    static默認，不定位

inhert  從父元素繼承position屬性的值

 

3.說一下h5新特性

    一些標籤：header, footer, article定義頁面獨立的內容區域, nav, section定義文檔中的節

    新的輸入控件：number. color. Date日期. week. month.datetime完整日期

   新的表單特性：placehoLder 輸入框提示信息

required必填項    list, datalist爲輸入框構造一個選擇列表，list值爲datalist的id

    canvas  svg

   新的選擇器 querySelector querySelectorAll

 

4.行內，塊級元素有哪些

    行內：a, img , input, label

     塊級元素：h1- h6, div, ul, form, p

     行內塊級元素：img,  input

 

1. 你用過sass沒

 

6.你用過angular沒

 

網易面經：

1.web攻擊的方式，CSRF的攻擊原理，具體怎麼作的

 

1. jquery裏面的ready方法與window.onload有什麼區別

Window.onload() 必須等待網頁所有加載完畢（包括圖片）再執行JS代碼，只能執行一次，不然第二次會覆蓋前一次

$(document).ready() 只須要等待網頁中的DOM結構加載完畢，就能執行JS代碼，能夠執行屢次，都會輸出結果，簡寫方式爲$(function(){})

 

3.http狀態碼403是什麼狀態

403資源不可用

 

4.http和https有什麼區別

   https是以安全爲目標的http通道，http下加入ssl層，對http傳輸的數據進行加密，http端口80，https  443端口，http的是無狀態協議，https是由ssl + http協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全

   客戶端向服務器端請求https鏈接，服務器端返回證書（公鑰）產生隨機對稱密鑰，使用公鑰對對稱密鑰加密，客戶端向服務器端發送加密後的對稱密鑰，經過加密密鑰加密的密文通訊

 

5.抓包工具備使用過麼

 

6.進程與線程的區別

進程是資源的分配和調度的一個獨立單元，而線程是CPU調度的基本單元

同一個進程中能夠包括多個線程，而且線程共享整個進程的資源（寄存器、堆棧、上下文），一個進行至少包括一個線程。

7.node是單線程的麼？回答是，那node怎麼實現多線程操做？

8.數據庫的索引有什麼做用

9.數據庫的組件與惟一id

10.你認爲本身作前端有什麼優點

11.sessionStorage裏面的session是什麼意思

12.cookie有哪些方法

 

13.同源策略，163.com/abc和163.com/abc/a之間怎麼獲取cookie

14.你以爲bootstrap框架幹了些什麼

15.使用git的時候，怎麼管理分支的

16.angular是屬於哪類設計框架的，mvc和mvvm有什麼區別

 

 

滴滴面經：

滴滴1面：

1.你的項目最能表明你水平的一個介紹一下

2.jquery 的$fn是幹嗎的，你爲何要用它

 

$fn 是指jquery的命名空間，加上fn的方法以及屬性，會對jquery的每一個實例有效，

jQuery.extend(object);　爲jQuery類添加添加類方法，能夠理解爲添加靜態方法。如：

$.extend({

　　add:function(a,b){return a+b;}

});

便爲jQuery添加一個爲 add的「靜態方法」，以後即可以在引入 jQuery的地方，使用這個方法了，$.add(3,4);  //return 7

jQuery.fn.extend(object); 對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

好比咱們要開發一個插件，作一個特殊的編輯框，當它被點擊時，便alert 當前編輯框裏的內容。能夠這麼作：

$.fn.extend({           

    alertWhileClick:function(){              

        $(this).click(function(){                   

            alert($(this).val());            

        });            

    }        

});        

$("#input1").alertWhileClick();

 

//頁面上爲：

<input id="input1" type="text"/>    

 

3.寫一下你項目中的輪播

4.@keyframe怎麼用

 

在2s內下移200px

div {

position:absolute;

top:0px;

animation: move 2s;

}

@keyframes move {

from {

top:20px;

}

to {

  top:200px;

}

}

 

@keyframes mymove

{

0%   {top:0px;}

25%  {top:200px;}

50%  {top:100px;}

75%  {top:200px;}

100% {top:0px;}

}

 

 

@keyframes mymove

{

0%   {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

}

 

@keyframes mymove

{

0%   {top:0px; left:0px; background:red;}

25%  {top:0px; left:100px; background:blue;}

50%  {top:100px; left:100px; background:yellow;}

75%  {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}

}

 

5.css3中的各類動畫

6.h5中你用了什麼

7.你怎樣去封裝一個本身的jquery插件

(function ($) {
    $.fn.extend({
        "highLight":function(options){
            //do something
        }
    });
})(window.jQuery);

 

Jquery源碼 window.jQuery = window.$ = jQuery

8.怎樣寫一個settimeout異步

for(var i = 0 ; i < 5 ; i++){
    (function(num){
        setTimeout(function(){
            console.log(num)
        }, 1000*i)
    })(i)
}

9.css畫三角形

#triangle{ 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 

} 

 

#circle{

width:100px;
height:100px;
border-radius:50%;
background:yellow;

}

 

#oval橢圓{

width:200px;
height:100px;
background:red;
border-radius: 100px/50px;

}

 

#平行四邊形 {

width:150px;
height:100px;
background:red;
margin-left:20px;
transform:skew(20deg);

}

 

#梯形{
width:100px;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;

}

 

Border-radius  1個值等於四角

        　　　　2個值 左上右下，右上左下

             　　  3個值 上左，上右和下左，下右

10.原生實現  on off triggle

11. 怎麼實現一個類，類的繼承

原型鏈繼承：沒法傳參

function Fun1(){

this.property = true;

}

Fun1.prototype.getValue = function(){

return this . property;

}

Function Fun2(){

this.sub = false;

}

Fun2.prototype = new Fun1();

Fun2.prototype .sayValue = function(){

return this.sub;

}

Var instance = new Fun2();

Console.log(instance.getValue());

// 建立Fun1的實例，並講該實例賦給Fun2.prototype實現的。本質是重寫原型對象，代之以一個新類型的實例。原來存在於Fun1的實例中的屬性和方法，如今也存在於Fun2.prototype中了。

構造函數：call() apply()  解決傳參的問題，父類原型的屬性和方法不能繼承，實例不是父類的實例

function Fun1(){

this.color=[‘red’ , ’blue’];

}

function Fun2(){

fun1.call(this);

}

var instance1 = new Fun2();

Instance1.colors.push(「black」);

Console.log(instance1.colors); //red blue black

 

Var instance2 = new Fun2();

Console.log(instance2.colors); // red blue

 

傳參：

Function Fun1(name){

this.name = name;

}

Function Fun2(age){

Fun2.call(this, 「John」);

This.age = 23;

}

Var instance = new Fun2();

Console.log(instance.name)// John

Console.log(instance.age)//23

 

組合繼承：組合原型鏈和構造函數，原型鏈實現對原型屬性和方法的繼承，構造函數來實現對實例屬性的繼承。

Function Fun1(name){

This.name = name;

This.color = [「red」 , 「blue」];

}

Fun1.prototype.sayName = function(){

alert(this.name);

}

Function Fun2(name , age){

Fun1.call(this , name);

This.age = age;

}

Fun2.prototype = new Fun1();

Fun2.prototype.sayAge = function(){

Console.log(this.age);

}

Var instance1= new Fun2(「John」, 29);

Instance1.colors.push(「black」);

Console.log(instance1.colors); //red blue black

Instance1.sayName (); //John

Instance1.sayAge(); // 29

 

Var instance2 = new Fun2();

Console.log(Instance2.color); //red blue

Instance.sayName();//John

Instance.sayAge(); //29

 

原型式繼承：藉助原型能夠基於已有的對象建立新對象，同時還沒必要須所以建立自定義的類型。

 思想：

function object(o) {

function F(){ }

F.prototype = o;

return new F();

}

 

var person = {

name:"EvanChen",

friends:["Shelby","Court","Van"];

};

var anotherPerson = object(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

 

//新增Object.create()方法規範了原型式繼承

//能夠傳遞兩個參數，第一個是用做新對象原型的對象，第二個（可選）爲新對象定義額外屬性的對象

//傳遞一個參數時，等同於object()

var person = {

　　name:"EvanChen",

　　friends:["Shelby","Court","Van"];

};

var anotherPerson = Object.create(person);

anotherPerson.name = "Greg";

anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);

yetAnotherPerson.name = "Linda";

yetAnotherPerson.friends.push("Barbie");

 

console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

 

12.綁定和移出事件怎麼寫

綁定：btn2.onclick = function(){
移出：btn1.onclick =null; // on+事件名  覆蓋

 

綁定：

DOM 標準：elem.addEventListener(「事件名」, 函數對象, 是否在捕獲階段觸發true/false)

//一個元素的一個事件處理函數可add多個不一樣的函數對象

IE8：elem.attachEvent(「on事件名」 , 函數對象)

//IE8事件週期沒有捕獲階段

移除：經過匿名函數是沒法消除監聽事件，只有經過實名函數才能

removeEventListener

detachEvent

綁定：bind()（綁定事件）和unbind()（移除經過bind()方法添加的事件）

$(function () {

 $("#MySpan").bind("click", foo);

})  

$(function () {

 $("#LooseFocus").unbind("click", foo);

})

 

$body.on("click", "#btn2", btnClick2 );

$body.off("click", ":button", btnClick2);

 

滴滴2面：

1.rem em

rem是根據html根節點來計算的，而em是繼承父元素的字體

使用 em 和 rem 單位可讓咱們的設計更加靈活，可以控制元素總體放大縮小，而不是固定大小。 咱們可使用這種靈活性，使咱們在開發期間，能更加快速靈活的調整，容許瀏覽器用戶調整瀏覽器大小來達到最佳體驗。

2.你用過的圖片格式

GIF格式：支持動畫以及全透明/不透明，僅支持8bit的索引色，即在整個圖片中，只能存在256種不一樣的顏色，GIF是無損的，採用GIF格式保存圖片不會下降圖片質量。

JPEG：有損壓縮，更豐富的色彩，適合用來存儲照片，不適合用來存儲企業Logo、線框類的圖，不支持透明。針對相片影響，壓縮過程當中圖像的品質會遭受到可見的破壞，JPEG在色調及顏色平滑變化的相片或是寫實繪畫上能夠達到它最佳的效果。

Png: 無損壓縮，支持alpha透明，不支持動畫

 

3.png8 png24區別

Png8: png8是很是好的GIF代替者，在相同的圖片效果下，png8具備更小的體積，而且支持透明度的調節。除非要去使用動畫的支持，GIF受到普遍的支持，png8自己也是支持動畫的，只是瀏覽器支持的很差。

Png24: 無損壓縮了圖片數據，使得一樣效果的圖片，PNG-24格式的文件大小要比BMP小得多,，要比JPEG大5倍之多，而顯示效果一般只能得到一點點提高，只有在你不在意文件體積而要最好的一個顯示效果的時候，才應該去使用PNG24

4.png8怎麼實現半透明

filter:alpha(opacity=100);opacity: 1;

5.寫一個繼承，而且改變這個屬性

6.寫一個正則  匹配11個字符串 第一位1 中間9個字母或者數字不區別大小寫  最後一位不能是1

7.css怎麼區分瀏覽器

 

8.DTD類型和區別

9.css優先級

!important  > 內聯樣式（1000） > ID（0100） > 僞類選擇器（0010）   類選擇器（0010）/（僞類） > 元素選擇器（0001）/（僞元素）

選擇器的權值加到一塊兒，大的優先；權值相同，後定義的優先

10.狀態碼 1XX  2xx  3xx  4xx

1xx : 信息類

2xx : 成功

3XX：重定向

4XX：客戶端錯誤

5XX：服務器端錯誤

11.跨域  jsop原理  你爲何非要用script標籤

跨域：協議、域名、端口 有一個不一樣，都屬於不一樣的域，不一樣域之間相互請求資源就叫作「跨域」 瀏覽器自己是有同源策略禁止的。

Jsonp （主流瀏覽器）：利用script 元素的跨域能力，其實擁有Src屬性的標籤都擁有跨域的能力，<img><script>

dataType : ’jsonp’

(最上面)

12.重繪和重排  fixed是什麼

當DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器須要從新計算元素的幾何屬性，一樣其餘元素的幾何屬性和位置也會所以受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並從新構造渲染樹。這個過程稱爲重排。完成重排後，瀏覽器會從新繪製受影響的部分到屏幕，該過程稱爲重繪。

將須要屢次重排的元素，position屬性設爲absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會影響到其餘元素。例若有動畫效果的元素就最好設置爲絕對定位。

 

 

美團：

1.jquery選擇器$ (. cls1.cls2 )   $ (.cls1  .cls2 ) 區別

$(".class1 .class2") 選擇class1元素下class2的元素（中間有空格）

$(".class1.class2") 選擇同時含有class1和class2的元素（中間沒有空格）

$(".class1,.class2") 選擇class1或者class2的元素（中間有逗號）

2.寫一個依次彈出下標的jq代碼

$("div").click(function(){
    console.log($(this).index())
});

 

$ this  指的是誰，爲何你非要用$

$(this)是jquery對象，能調用jquery的方法，例如click(), keyup()；而this,則是html元素對象，能調用元素屬性

 

$this

jQuery.fn.init [div]

0: divlength:

1__proto__: Object(0)

this

<div>1</div>​

 

3. let塊級做用域爲何能解決彈出下標是循環最後一個數的問題   先寫出來代碼

for(let i = 0 ; i < 5 ;i++){
    setTimeout(function(){
        console.log(i)
    }, 1000 * i)
}

Let 塊級做用域，在for循環中，循環一次完了銷燬，不是全局的，只對本次循環有效

4.你的項目的文件是怎麼放置的畫出來

5.innerHTML innerText 區別

innerHTML 設置或獲取位於對象起始和結束標籤內的 HTML
outerHTML 設置或獲取對象及其內容的 HTML 形式
innerText 設置或獲取位於對象起始和結束標籤內的文本
outerText 設置(包括標籤)或獲取(不包括標籤)對象的文本
innerText 和outerText 在讀取得時候是同樣的，只是在設置的時候outerText 會連帶標籤一塊兒替換成目標文本

 

<div id="div1">456
    <h1>123</h1>
</div>
<script>
    var div = document.getElementById("div1");
    console.log(div.innerHTML);
    console.log(div.innerText);
    console.log(div.outerHTML);
    console.log(div.outerText);
    console.log(div.textContent);
</script>

 

6.用jq獲取標籤中的文本幾種方法

text() - 設置或返回所選元素的文本內容

html() - 設置或返回所選元素的內容（包括 HTML 標記）

val() - 設置或返回表單字段的值

 

7.es6

8. 何時cookie能互相訪問

9. vue  中data  el  compated都幹嗎的   

10. 你給我用vue寫一個組件...

11.jsonp有什麼缺點

Jsonp優勢：不受同源策略的限制，兼容性好，不須要XHR的支持，請求完成以後經過調用callback的方式回傳結果。

缺點：只支持get請求而不支持Post請求等，只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行js調用的問題

 

迅雷：

1.你的項目

2.怎麼樣實現彈幕而且讓他勻速運動還要兼容ie

3. setTimeout中的動畫公式推倒，你設置的時間跟實際時間之間的數學公式

4.你如何進行http抓包

5.http1到http2

6. es5到es6

 

 

CVTE    

一面：

自我介紹

1. 手寫兩欄佈局

2. 手寫實現一個方法傳入的數字（123123123.123）改爲123,123,123.123這種格式

3.vue雙向綁定原理

4.vue修改了data數據會不會更新視圖

5.cookie瞭解多少

6.怎麼保證cookie安全

7https是什麼  安全如何保證

1. 清除浮動的方式

先說一下什麼是文檔流和文本流：文檔流本是自上而下，自左而右的佈局，針對於盒子模型，若是一個元素浮動了，那麼它下面沒有浮動的元素就會無視它所佔據的空間，佈局在它下方。可是文本流是針對文字，這種狀況下，文字仍是會環繞它佈局。脫離文檔流的方法通常是float,absolute,fixed

清除浮動： 若是一個父元素沒有設置高，其中的子元素浮動了，而因爲父元素的高度爲0，那麼下面的元素就會自動補位。

清理浮動的方法：

(1).clear{ clear:both; }

  <div class="box">

<div class="div1"></div>

<div class="div2"></div>

</div>

<div class="div3"></div>

在浮動的盒子下面再加一個div，給一個class=「clear」; 若是放在div2下面會撐開父元素高度，並消除浮動影響； 若是在box下面會消除浮動影響可是不會撐開父元素高度；

(2) 找到浮動盒子的父元素，設置`overflow:hidden;` 便可消除影響，可是它會將超出的部分隱藏起來；

(3) 僞元素（推薦）

.clearfix:after{

content:" ";

display:block;

clear:both;

height:0;

} 　

.clearfix{

zoom:1; //兼容IE

 }

給浮動元素的父容器加一個`class=".clearfix"；` 經過僞元素在內部元素的後面添加一個看不見的"."/" "，並賦予clear屬性清除浮動

(4) 給浮動元素的父元素也設置浮動

9.手寫僞類清除浮動  content還有哪些值

內容生成：經過css向元素的前面/後面增長一部份內容

僞元素：before匹配到某一元素的最前面

:after 匹配到某一元素的最後面

內容生成  content：配合：before   :after 僞元素，插入生成內容

經常使用取值：字符串：純文本，插入到指定位置處

P:before{

Content :’Hi’;

}

 urL: 生成的圖像

P:before{

Content: url(image/1.jpg)

}

計數器：向已存在的html文本內容增添序號

      使用：定義計數器

10.xss  csrf  sql 的危害以及防護

11.怎麼判斷一個類型是否是number

isNaN

12. typeof NaN 等於啥

       number

13. 六列布局兼容ie6

 

14. http緩存

 

強制緩存：

header中會有兩個字段來標明失效規則（Expires/Cache-Control），指的是當前資源的有效期 Expires：Expires（HTTP1.0）的值爲服務端返回的到期時間，Expires 的一個缺點就是，返回的到期時間是服務器端的時間，這樣存在一個問題，比較的時間是客戶端本地設置的時間，因此有可能會致使差錯，因此在HTTP 1.1版開始，使用Cache-Control替代。Cache-Control中設定的時間會覆蓋Expires中指定的時間；

對比緩存：

須要進行比較判斷是否可使用緩存。瀏覽器第一次請求數據時，服務器會將緩存標識與數據一塊兒返回給客戶端，客戶端將兩者備份至緩存數據庫中。再次請求數據時，客戶端將備份的緩存標識發送給服務器，服務器根據緩存標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可使用緩存數據。在對比緩存生效時，狀態碼爲304，而且報文大小和請求時間大大減小。它在請求header和響應header間進行傳遞

 

Cache-control策略（重點關注）

Cache-Control與Expires的做用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據仍是從新發請求到服務器取數據。只不過Cache-Control的選擇更多，設置更細緻，若是同時設置的話，其優先級高於Expires。

max-age指示客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應。

Last-Modified/If-Modified-Since要配合Cache-Control使用：

Last-Modified：標示這個響應資源的最後修改時間。web服務器在響應請求時，告訴瀏覽器資源的最後修改時間。

 

二面：

1.xss csrf原理以及防護

2.csrf爲何會形成攻擊

3.如何保證cookie安全

4.現場敲代碼出了一個題 沒記住..

5.你爲何要學前端

 

金蝶：

1.你的項目

2.css3你用了什麼

3.旋轉用的什麼  其餘的呢

Skew

4.json標準格式的標點符號

5.vue好在哪裏

6.vue雙向綁定原理

7.二列布局

8.web安全

9null undefined 區別

Undefined 被轉化成數字是NaN，null被轉化爲數字是0

Null: 做爲函數的參數，表示函數的參數不是對象；做爲原型鏈的終點

Undefined: 變量被聲明瞭，可是沒有賦值，就等於Undefined; 調用函數時，應該提供的參數沒有提供，該參數等於undefined；對象沒有賦值的屬性，該屬性的值爲Undefined；函數沒有返回值時，默認返回Undefined

hr:

1. 你項目中遇到的問題和你的收穫

2.咱們公司的狀況

3.你怎麼知道咱們公司的

4.有沒有男友

5.你能去外地嗎

6.你的興趣愛好

 

用友：

1.http  tcp工做在哪一層

http 應用層  tcp傳輸層

Tcp/ip 五層模型：應用層、傳輸層、網絡層、數據鏈路層、物理層

OSI 應用層、表示層、會話層、傳輸層、網絡層、數據鏈路層、物理層

2.發送一個http請求得全過程

域名解析 --> 發起TCP的3次握手 --> 創建TCP鏈接後發起http請求 --> 服務器響應http請求，瀏覽器獲得html代碼 --> 瀏覽器解析html代碼，並請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給用戶

3.數據庫第三範式

4.403  204

5.你的一個項目

6.json怎麼處理數組和對象

7.跨域以及原理

8.爲何作前端

9.異步有幾種方式

10.長字符串如何進行壓縮

11.事件模型

12.addEventListener 第三個參數幹嗎的

hr :

1.你的成績排名，你怎麼學習的

2.你的家在哪能不能去外地

3.興趣愛好

4.如何保證本身成績很高還在學技術

 

 

中移在線：

1.你作前端的優點

2.定位absolute你的名字   會出如今網頁哪裏爲何

3.跨域和你如何解決的

4.node用過沒有

5.你指望的薪資

6.你想在哪裏工做

7.閉包

8.輸入一個url到頁面渲染的過程

9狀態碼

hr :

1. 你的優點

2.你四級過了麼 多少分

3.你的成績排名

4.你得指望薪資

 

 

諾瓦：

1.筆試題

2.冒泡排序時間複雜度

3.冒泡排序  快排  希爾排序的思想

4.二分查找

5.進程和線程

6.你對面向對象的理解

7.封裝繼承多態的理解

8.你對內存的理解  畫出來

9. a = b

b = a

的內存

10.一排  中間缺失一個  你怎麼解決  

11.你的項目  各類問

12.一個網頁能不能操做另外一個

13.dom節點屬性 多種方法

 

滴滴實習面經：

1.document . write和innerHTML 區別

2.跨域

3.你的項目

4.閉包

5.繼承

6.原型

7.h5你用過哪些

8.css3你用過哪些

9.何時來

 

京東：

1.css實現三角形

2.行內元素.塊級元素.行內塊級元素都有什麼

3.rem em

4.css動畫translation

5. 原型

6.有沒有用過node

7.

 

愛奇藝實習：

1.你的項目

2.animation

3. cookie有哪些字段

4.跨域和你的解決

5.xss  csrf  SQL是什麼和具體的防護怎麼作

6.原生實現mustache

 

1.說說盒子模型

2.display

3.說說vue react angularjs jquery的區別。

4.聊聊項目

5.問了一段js代碼，輸出結果是什麼

6.口述數組去重

7.jquery的一個方法的實現原理

8.怎麼實現分欄

9.怎麼隱藏一個元素

Opacity 爲 0 佔據着位置

Display 爲 None 隱藏元素

Visibility 爲 hidden 元素隱藏保留位置

Position  定位移出視覺區

10.怎麼用原生的js實現jquery的一個特定方法（你本身選的，我選的toggle）

11.js的數據類型

原始： null undefined boolean string number

其餘： object

 

1.項目 輪播圖怎麼實現的？懶加載怎麼實現的？

2.webpack模塊化原理？你還知道什麼模塊化方案（答了AMD,CMD,CommonJS,面試官說還有，就說了匿名函數自執行和閉包）

CommonJS中，有一個全局性方法require()，用於加載模塊。這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於"假死"狀態。瀏覽器端的模塊，不能採用"同步加載"，只能採用"異步加載"。

AMD 異步方式去加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成這個回調函數纔會執行。Require（）語句加載模塊的 require([module], callback);第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。因此AMD比較適合於瀏覽器環境的。Require.js。模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。若是這個模塊還依賴其餘模塊，那麼define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

CMD和AMD 對依賴模塊的執行時機處理不一樣，AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊 ，CMD推崇就近依賴，只有在用到某個模塊的時候再去require 

一樣都是異步加載模塊，AMD在加載模塊完成後就會執行改模塊，全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定在全部依賴加載完成後才執行

CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的

這也是不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了，CMD性能好，由於只有用戶須要的時候才執行的緣由

 

3.js繼承？優缺點？爲何這樣就能繼承？（答了原型鏈）

4.一個不定寬高的元素垂直水平居中方案

5.rem和em區別

6.position定位

7.事件流

8.事件委託 原理 怎麼肯定點的是哪一個（答了e.target 而後面試官問parent.target 我矇蔽了）

9.若是一個ul裏面插入1000個li節點，怎麼插入？（答了innerHTML或者用分時函數）

10.爲何要用分時函數？（答了Dom操做影響性能）爲何影響性能？（答了瀏覽器重排機制）

11.js做用域

12.js this指向

13.call apply bind區別

14.實現一個bind方法？

15.數組都有哪些方法？

16.ES6新特性？

17.手寫實現promise

18.輸入一個url後發生了什麼？

19.接上面的問題，具體說瀏覽器渲染

20接上面的 說說cssom生成規則

21前端性能優化，cdn原理？

22mvvm理解？

23你知道哪些框架是mvvm架構？

 

 

神州數碼：

1.你對你的工做環境的想法

2.你平時怎麼學習

3.你以爲網易雲課堂慕課網就你來講你有什麼建議

4.你是否是獨生子女

5.你遇到的瀏覽器兼容

6.你講一個項目

 

 

360

1.函數式編程

2.繼承

3.你對數學建模，算法的理解

4.你爲何要學前端

5.你的規劃

6.模電的01怎麼實現？（二極管）

7.一個地圖有不少條路，你怎麼選擇最近的

8.盒子模型

9.你說一下你瞭解的web安全

10.你知道Array中的push state

11.說你的項目

12.模塊化怎麼實現

13.你對數據庫學了什麼

14.你的安全實驗在哪一個平臺上作的

15.你說一下原型鏈繼承

16.你項目中的收穫

17.你項目中遇到的問題和解決的辦法

18.你的網頁設計大賽是作的什麼

19. 你的興趣愛好

20.你對後端的瞭解

21.有沒有用過node

22.你有沒有在實習

23.清除浮動的方法

24.你用Photoshop 能作圖嗎

25.你以爲vue好在哪裏

 

綠盟：

1.你的項目

2.項目中的各類問題

3.web安全  xss SQL具體實施以及預防措施

4.vue 你用過多深

5.vue react angular之間的區別

6.對後臺語言的深度

7.你對jquery 源碼的瞭解  選擇元素的源碼

8.jq綁定事件怎麼寫

9.瀏覽器兼容

二面：

1.你是哪的人

2.工做地點選擇

3.你的項目

4.你的指望薪資

5.你能不能實習

6.對後臺語言的瞭解

 

ofo (霸面 )

1. 你的項目

2.定時器的設定時間和實際時間之間的偏差以及緣由  （數學公式）

3.錯誤處理

4.跨域

5. jsonp原理  原生手寫

6.若是url沒拿到數據怎麼進行錯誤處理

7.vue中怎麼作錯誤處理（監聽變化時發現並無變化）

8.css畫個車輪

9.瀏覽器兼容

 

藝龍

一面：

1.你的項目

2.h5中的history

3. bom下的東西

4.如何用bom中的刷新頁面

5.vue (怕帶偏了就直接說了用的少 )

6.手寫編程  如何判斷一個月中的最後一個星期日是幾號

7.寫一個函數返回中位數

8.僞類after  before的具體原理

9.僞類清除浮動的原理

10.如何獲取一個星期

11.如何new一個Date

二面：

1.span div的區別  以及他們如何互相轉換

2.實現藝龍官網的輪播圖

3.setTimeout setInterval的區別

4.如何實現從快到慢

5.你對面向對象的理解

6.你寫一個面向對象

7.編碼的瞭解

8.透明度的兼容處理

9.瀏覽器兼容

10.框架

11.閉包

 

觸寶：

1.響應式局部你如何實現，遇到了什麼問題

2.rem  em

rem是根據html根節點來計算的，而em是繼承父元素的字體

使用 em 和 rem 單位可讓咱們的設計更加靈活，可以控制元素總體放大縮小，而不是固定大小。 咱們可使用這種靈活性，使咱們在開發期間，能更加快速靈活的調整，容許瀏覽器用戶調整瀏覽器大小來達到最佳體驗。

3. settimeout原理

JavaScript是單線程執行的，沒法同時執行多段代碼。當某一段代碼正在執行的時候，全部後續的任務都必須等待，造成一個任務隊列。一旦當前任務執行完畢，再從隊列中取出下一個任務

若是代碼中設定了一個 setTimeout，那麼瀏覽器便會在合適的時間，將代碼插入任務隊列，若是這個時間設爲 0，就表明當即插入隊列，但不是當即執行，仍然要等待前面代碼執行完畢。因此 setTimeout 並不能保證執行的時間，是否及時執行取決於 JavaScript 線程是擁擠仍是空閒。

4.實現深拷貝和淺複製

淺複製

function simpleClone(initalObj) {

    var obj = {};

    for ( var i in initalObj) {

        obj[i] = initalObj[i];

    }

    return obj;

}

/* ================ 客戶端調用 ================ */

var obj = {

    a: "hello",

    b: {

        a: "world",

        b: 21

    },

    c: ["Bob", "Tom", "Jenny"],

    d: function() {

        alert("hello world");

    }

}

var cloneObj = simpleClone(obj); // 對象拷貝

深拷貝

/* ================ 深拷貝 ================ */

function deepClone(initalObj) {

    var obj = {};

    try {

        obj = JSON.parse(JSON.stringify(initalObj));

    }

    return obj;

}

/* ================ 客戶端調用 ================ */

var obj = {

    a: {

        a: "world",

        b: 21

    }

}

var cloneObj = deepClone(obj);

cloneObj.a.a = "changed";

  

console.log(obj.a.a); // "world"

遞歸拷貝

/* ================ 深拷貝 ================ */

function deepClone(initalObj, finalObj) {

    var obj = finalObj || {};

    for (var i in initalObj) {

        if (typeof initalObj[i] === 'object') {

            obj[i] = (initalObj[i].constructor === Array) ? [] : {};

            arguments.callee(initalObj[i], obj[i]);

        } else {

            obj[i] = initalObj[i];

        }

    }

    return obj;

}

 

5.原生js向前向後插入

只有appendChild  找前一個再向後插入

 

今日頭條

1. 漢諾塔 

222^n - 1

尋找規律（把全部的圓盤移動到C）：

　　1）n(圓盤個數) == 1

　　　　第一次：1號盤A -> C  sum(移動次數) = 1

　　2）n == 2

　　　　第一次：1號盤 A -> B

　　　　第二次：2號盤 A -> C

　　　　第三次：1號盤 B -> C　　sum = 3

　　3）n == 3

　　　　第一次：1號盤 A -> C

　　　　第二次：2號盤 A -> B

　　　　第三次：1號盤 C -> B

　　　　第四次：3號盤 A -> C

　　　　第五次：1號盤 B -> A

　　　　第六次：2號盤 B -> C

　　　　第七次：1號盤 A -> C　　sum = 7

　　以此類推...

　　故不難發現規律,移動次數爲：sum = 2^n - 1　

算法分析（遞歸）：

　　把一堆圓盤從一個柱子移動另外一根柱子，必要時使用輔助的柱子。能夠把它分爲三個子問題：

　　　　首先，移動一對圓盤中較小的圓盤到輔助柱子上，從而露出下面較大的圓盤，

　　　　其次，移動下面的圓盤到目標柱子上

　　　　最後，將剛纔較小的圓盤從輔助柱子上在移動到目標柱子上

　　 把三個步驟轉化爲簡單數學問題：

　　　　（1）把 n-1個盤子由A 移到 B；

　　　　（2）把第n個盤子由 A移到 C；

　　　　（3）把n-1個盤子由B 移到 C；

　　咱們建立一個JS函數，當它調用自身的時候，它去處理當前正在處理圓盤之上的圓盤。最後它回一個不存在圓盤去調用，在這種狀況下，它不在執行任何操做。

JavaScript源代碼實現

var hanoi = function(disc,src,aux,dst){

    

    if(disc>0){

 

        hanoi(disc-1,src,dst,aux);

 

        console.log(' 移動 '+ disc +  ' 號圓盤 ' + ' 從 ' + src +  ' 移動到 ' +  dst);

 

        hanoi(disc-1,aux,src,dst)

 

    }

 

}

 

hanoi(3,'A','B','C')

 

整個算法的思路是：

將A柱子上的n-1個盤子暫時移到B柱子上

A柱子只剩下最大的盤子，把它移到目標柱子C上

最後再將B柱子上的n-1個盤子移到目標柱子C上

 

2. 三次握手.四次揮手

當Server端收到Client端的SYN鏈接請求報文後，能夠直接發送SYN+ACK報文。其中ACK報文是用來應答的，SYN報文是用來同步的。可是關閉鏈接時，當Server端收到FIN報文時，極可能並不會當即關閉SOCKET，因此只能先回復一個ACK報文，告訴Client端，"你發的FIN報文我收到了"。只有等到我Server端全部的報文都發送完了，我才能發送FIN報文，所以不能一塊兒發送。故須要四步握手。

3. cookie session

 session保存在服務器端, 客戶端不知道其中的信息，session中保存的是對象，不區分路徑，同一個用戶在訪問一個網站期間，全部的session在任何一個地方均可以訪問到

cookie保存在客戶端，服務器能夠知道其中的信息，保存的是字符串

session保存在服務器端, 客戶端不知道其中的信息，session中保存的是對象，不區分路徑，同一個用戶在訪問一個網站期間，全部的session在任何一個地方均可以訪問到

cookie保存在客戶端，服務器能夠知道其中的信息，保存的是字符串

 

　　首先HTTP是無狀態的協議, 數據交換完畢以後，客戶端與服務器端之間的鏈接就會關閉, 再次交換就要建議新的連接, 可是咱們有時候就須要來彌補HTTP的這個不足之處

cookie機制就是說客戶端請求服務器端的時候, 服務器端如何記錄用戶狀態，就要使用response，向客戶端發送一個cookie，客戶端就會把cookie保存起來，瀏覽器再次請求服務端時就會把網址和cookie一塊兒發給服務器，服務器檢查cookie來辨別用戶身份，因此cookie功能須要瀏覽器的支持，也就是說你不能禁用它

session 就是客戶端訪問服務器的時候服務器就會以某種形式保存下來, 服務端會有一個SESSIONID, 當再次訪問時就會在服務器端查找, 若是找不到對應的sessionid, 那麼就會建立一個session  並生成一個sessionid, sessionid會在本次響應中返回給客戶端保存, 就是個不會重複的字符串, 也就是說你再請求服務端時, 首先要檢查請求裏是否有這個id, 而客戶端保存sessionid並傳去服務端的這個過程, 一般使用cookie來保存和發送

 

4. 行內元素和塊級元素，行內塊級元素的區別

行內元素會在一條直線上排列（默認寬度只與內容有關），都是同一行的，水平方向排列。

    塊級元素各佔據一行（默認寬度是它自己父容器的100%（和父元素的寬度一致），與內容無關），垂直方向排列。塊級元素重新行開始，結束接着一個斷行。

  塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素，只能包含文本或者其它行內元素。

  行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上：行內元素設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效

inline-block 的元素（如input、img)既具備 block 元素能夠設置寬高的特性，同時又具備 inline 元素默認不換行的特性。固然不只僅是這些特性，好比 inline-block 元素也能夠設置 vertical-align（由於這個垂直對齊屬性只對設置了inline-block的元素有效） 屬性。

 

5. a是否能夠加padding margin

6. 算法中的排序

7. 排序的時間複雜度

8. 寫一個閉包

for(var i = 0 ; i < 12 ; i++){

(function(n){

(setTimeout = function (){

console.log(n)

},1000)

})(i)

}

9. cookie安全

 

提升cookie的安全性的幾種方式

1、對保存到cookie裏面的敏感信息必須加密

2、設置HttpOnly爲true

一、該屬性值的做用就是防止Cookie值被頁面腳本讀取。

二、可是設置HttpOnly屬性，HttpOnly屬性只是增長了攻擊者的難度，Cookie盜竊的威脅並無完全消除，由於cookie仍是有可能傳遞的過程當中被監聽捕獲後信息泄漏。

3、設置Secure爲true

一、給Cookie設置該屬性時，只有在https協議下訪問的時候，瀏覽器纔會發送該Cookie。

二、把cookie設置爲secure，只保證cookie與WEB服務器之間的數據傳輸過程加密，而保存在本地的cookie文件並不加密。若是想讓本地cookie也加密，得本身加密數據。（MD5  DES）

4、給Cookie設置有效期

一、若是不設置有效期，萬一用戶獲取到用戶的Cookie後，就能夠一直使用用戶身份登陸。

二、在設置Cookie認證的時候，須要加入兩個時間，一個是「即便一直在活動，也要失效」的時間，一個是「長時間不活動的失效時間」，並在Web應用中，首先判斷兩個時間是否已超時，再執行其餘操做。

 

1. highCharts 和 echarts的區別

 

Echarts 圖表是免費開源的，基於Canvas繪圖，3D繪圖方面佔據絕對的優點，能夠去結合百度地圖的使用，能夠流暢的運行在PC和移動設備上，兼容當前大部分瀏覽器

HighCharts 基於svg，對於動態的增刪節點數據很是靈活，不須要從新繪圖

 

10.Svg和 canvas 區別

Svg: 不失真，可被搜索，頁面優化：減小外部連接

Canvas: 在HTML中繪製圖形，實際運行中會以圖片.png方式出現，不能被搜索引擎抓取，放大後會失真

爲何遊戲用canvas ？ 遊戲會分不一樣分辨率的版本

   Svg效果：靜態繪製圖形，動態動畫效果，專門提供事件

   webGL : 專門用於繪製圖像

 

12 Angular  Vue   React   JQuery  Bootstarp對比

Angular :  

AngularJS的學習成本高。在性能上，AngularJS依賴對數據作髒檢查，因此Watcher越多越慢。模板功能強大豐富，自帶了極其豐富的angular指令。是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等全部功能；

Vue:

Vue.js自己提供的API都比較簡單、直觀。單html開發. 它的開發模式, 是一個html, 而後不停替換組件對應的js來切換顯示效果. html中的共通js和css只須要download一次, 理論上比Iframe頁面的呈現更快。數據的雙向綁定. 數據改, 頁面改. 頁面改, 數據也改。用模板搭建應用，應用小而快的比較適合。

組件化，創造單個component後綴爲.vue的文件，包含template(html代碼)，script(es6代碼),style(css樣式)

React:

計劃構建一個大型應用，更好的可測試性，同時適用web端和原生APP

Boostarp:

柵格系統, 使用簡單, 上手容易.  專爲響應式頁面而生. 一套代碼就能夠自適應平板電腦和PC

jQuery :

最少的代碼作最多的事情，jQuery對性能的理解最好。基於jQuery開發的插件目前已經有大約數千個。開發者可以使用插件來進行表單確認、圖表種類、字段提示、動畫、進度條等任務。不能向後兼容，每個新版本不能兼容早期的版本。在同一頁面上使用多個插件時，很容易碰到衝突現象

 

13.Vue與 Angular 雙向數據綁定原理

angular.js ：髒值檢查

angular.js 是經過髒值檢測的方式比對數據是否有變動，來決定是否更新視圖，最簡單的方式就是經過 setInterval() 定時輪詢檢測數據變更，固然Google不會這麼low，angular只有在指定的事件觸發時進入髒值檢測，大體以下：

DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )

XHR響應事件 ( $http )

瀏覽器Location變動事件 ( $location )

Timer事件( $timeout , $interval )

執行 $digest() 或 $apply()

vue ：數據劫持

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

 14.數組去重

function unique(arr){
    var res = [];
    for(var i = 0 ; i<arr.length;i++){
        if(res.indexOf(arr[i]) == -1){
            res.push(arr[i]);
        }
    }
    return res;
}

function unique10(arr){

 //Set數據結構，它相似於數組，其成員的值都是惟一的

 return Array.from(new Set(arr)); // 利用Array.from將Set結構轉換成數組

}