網易前端面試題

前端面試題總結 - 去土耳其啊的文章 - 知乎 https://zhuanlan.zhihu.com/p/83252221

一、瀏覽器本地存儲？

二、web storage和cookie的區別

3.請描述一下 cookies、 sessionStorage和localstorage區別？

四、常見的HTTP狀態碼？（後面ajax請求會寫到）

五、bootstrap響應式實現的原理?

百分比佈局+媒體查詢

六、Vue請求數據的方式:

Vue-resource,Axios,fetch三種方式.

Vue-resource方式:vue自身不帶處理http請求,若是要使用http請求,必須先要引入vue-resource.js庫,它能夠經過XMLHttpRequest發起請求並處理響應.相似於jQuery

get類型語法:
    this.$http.get('url',{params:{key1:val1,key2:val2...}}).then((ok)=>{
        console.log(ok);
    },(err)=>{
        console.log(err);
    })
    
post類型語法:
    this.$http.post('url',{key1:val1,key2:val2…},{emulateJSON:true}).
	then((ok)=>{
         console.log(ok)
    },(err){
        console.log(err)
    })複製代碼

Axios的方式:

Axios是第三方插件,不只能在vue中使用,還能在其餘第三方庫中使用,例如react

get類型:
     axios.get("http://localhost:3000/get?uname=abc").then((ok) => {
                    console.log(ok);
                }).catch((err) => {
                    console.log(err);
     })//傳值方式爲在url後拼接 ? 加 key=val


post類型:
     var param = new URLSearchParams(); //改變發送數據的方式
                // 設置發送數據的內容
                param.append("uname", "szcszc");
                axios.post("http://localhost:3000/post", param).then((ok) => {
                    console.log(ok);
                }).catch((err) => {
                    console.log(err);
                })
   在post傳值時,若是直接將值像get那樣傳遞的話後端是沒法收到的,由於ajax收到值的類型是form data格式,
   而Axios在發送數據的時候使用的方式是request payload格式
   因此後臺沒法正常接收,解決方法是使用URLSearchParams對象修改操做 URL傳遞參數的方法 


綜合寫法:
     // axios的綜合寫法
                // 既能夠是get也能夠是post
                axios({
                    url: "http://localhost:3000/get?uname=sss", //get發送數據方式1
                    // param:{uname:"zzz"}  get發送數據方式2
                    methods: "get"
                }).then((ok) => {
                    console.log(ok);
                })


                //post的寫法
                var param = new URLSearchParams();
                param.append("uname", this.text);
                axios({
                    url: "http://localhost:3000/post",
                    method: "post",
                    // post發送數據的時候使用data屬性
                    data: param
                }).then((ok) => {
                    console.log(ok);
                })          複製代碼

七、如何優化頁面，加快頁面的加載速度（面五次有一次問到的機率）

（1）優化圖片格式和大小；

（2）開啓網絡壓縮；

（3）使用瀏覽器緩存；

（4）減小重定向請求；

（5）使用CDN存儲靜態資源；

（6）減小DNS查詢次數；

（7）壓縮css和js內容；

八、評測你寫的前端代碼性能和效率？（問到一次）

A: Chtome DevTools 的Timeline:排查應用性能的最佳工具。

B: Chtome DevTools 的Audits:對頁面性能進行檢測，根據測試結果進行優化。

C:第三方工具：Yslow。

九、iframe的優缺點？（問到一次）

1.<iframe>優勢： *解決加載緩慢的第三方內容如圖標和廣告等的加載問題

*Security sandbox

*並行加載腳本

2.<iframe>的缺點： *iframe會阻塞主頁面的Onload事件；

*即時內容爲空，加載也須要時間

*沒有語意

十、Http與Https的區別

• HTTP 的URL 以http:// 開頭，而HTTPS 的URL 以https:// 開頭
• HTTP 是不安全的，而 HTTPS 是安全的
• HTTP 標準端口是80 ，而 HTTPS 的標準端口是443
• 在OSI 網絡模型中，HTTP工做於應用層，而HTTPS 的安全傳輸機制工做在傳輸層
• HTTP 沒法加密，而HTTPS 對傳輸的數據進行加密
• HTTP無需證書，而HTTPS 須要CA機構wosign的頒發的

十一、vuex的屬性

1. state：聲明定義數據
2. getters：存放有依賴關係的數據，相似於computed計算屬性
3. mutation：同步的修改state中的數據
4. actions：異步修改數據
5. modules：讓每個模塊都有本身的state，getters，mutation，actions

十二、vue雙向綁定的原理

Vue實現雙向綁定的原理就是利用了Object.defineProperty()這個方法從新定義了對象獲取屬性值（get）和設置屬性值（set）的操做來實現的。

1三、h5新標籤

video 表示一段視頻並提供播放的用戶界面

audio 表示音頻

canvas 表示位圖區域

source 爲video和audio提供數據源

track 爲video和audio指定字母

svg 定義矢量圖

code 代碼段

figure 和文檔有關的圖例

figcaption 圖例的說明

main www.w3school.com.cn/tags/tag_ma…

time 日期和時間值

mark 高亮的引用文字

datalist 提供給其餘控件的預約義選項

keygen 祕鑰對生成器控件

output 計算值

progress 進度條

embed 嵌入的外部資源

menuitem 用戶可點擊的菜單項

menu 菜單

section

nav <nav> 標籤訂義導航連接的部分。

aside ：<aside> 的內容可用做文章的側欄。

article 標籤規定獨立的自包含內容。

footer

1四、vue全家桶：

1. Vue-cli項目構建工具
2. vue-router 路由
3. vuex狀態管理
4. axios http 請求工具
5. webpack

1五、MVVM思想:Vue.js是一套構建用戶界面的MVVM框架

MVVM分爲三部分:分別是M(model,模型層),V(View,視圖層),VM(ViewModel,V與M鏈接的橋樑,也能夠看作爲控制器MVC的C層)

1. M:模型層,主要負責業務數據相關
2. V:視圖層,負責視圖相關,主要是HTML+CSS
3. VM:V與M溝通的橋樑,負責監聽M或V的修改,是實現MVVM雙向綁定的要點;所以開發者只須要關注業務邏輯,不須要手動操做DOM,不須要關注數據狀態的同步問題,複雜的數據狀態維護徹底由MVVM來統一管理.

MVP思想:MVP的全稱爲Model-View-Presenter,Model提供數據,View負責顯示,Presenter負責邏輯的處理

MVP與MVC的最大的區別:在MVP中View並不直接使用Model,它們之間的通訊數據是經過Presenter來進行的,而在MVc中View會直接從Model中讀取數據而不是經過Controller

Vue數據驅動:經過控制數據的變化來顯示Vue的數據驅動，是視圖的內容隨着數據的改變而改變

1六、合併數組的方法

• concat

var a = [1,2,3]
var b = [4,5,6]
var c = a.concat(b)  //c = [1,2,3,4,5,6]複製代碼

• apply

var a = [1,2,3]
var b = [4,5,6]
var c = a.push.apply(a,b)複製代碼

1. 數組合並去重

let arr1 = [1,2,3]
let arr2 = [2,3,4]
let arr = arr1.concat(arr2) //合併數組
let arrNew = new Set(arr)  //經過set集合去重
Array.from(arrNew)  //將set集合轉化爲數組//call的實現思路
Function.prototype.myCall = function (context){
  if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
  var context = context || window
  //給context添加一個屬性
  context.fn = this
  //經過參數僞數組將context後面的參數取出來
  var args = [...arguments].slice(1)
  var result = context.fn(...args)
  //刪除 fn
  delete context.fn
  return result
}複製代碼

1七、垂直居中的方式

• absolute+transform：絕對定位+轉換

.parent {  
        position: relative;
}
.child {  
        position: absolute;  
        left: 50%;  
        rigth: 50%;  
        transfrom: translate(-50%，-50%) 
}複製代碼

• flex + justify-content + align-items

.parent {  
           display: flex;  
           justify-content: center; //水平居中  
           align-items: center; //垂直居中 
}複製代碼

1八、call,apply,bind的區別

1. call和apply都是爲了解決改變this的指向。做用都相同，只是傳參的方式不一樣。除了第一個參數外，call能夠接受一個參數的列表，apply只接受一個參數的數組

call的實現思路

Function.prototype.myCall = function (context){ 
if (typeof this !== 'function') { 
    throw new TypeError('Error') 
}
var context = context || window
//給context添加一個屬性 
context.fn = this 
//經過參數僞數組將context後面的參數取出來 
var args = [...arguments].slice(1) 
var result = context.fn(...args) 
//刪除 fn 
delete context.fn return result 
}複製代碼

apply的實現思路

//apply的實現思路
Function.prototype.myApply = function (context) {
    if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
    var context = context || window
    //爲context添加一個屬性
    context.fn = this
    var result 
    //判斷是否存在第二個參數
    //若是存在就將第二個參數也展開
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn
    return result
}複製代碼

bind的實現思路：bind返回了一個函數，對於函數來講有兩種調用方式，一種是直接的調用，一種是經過new的方式

Function.prototype.myBind = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    const _this = this 
    const args = [...arguments].slice(1)
    //返回一個函數
    return function F () {
        if (this instanceof F) {
            return new _this(...args, ...arguments)
        }
        return _this.apply(context,args.concat(...arguments))
    }
}複製代碼

1九、使用axios？

vue是虛擬DOM操做的，JQuery.ajax和都須要操做DOM，axios自己就能夠解決回調地獄的問題

20、new操做的過程

1. 新生成了一個對象

2. 連接到原型

3. 綁定this

4. 返回新對象 其實咱們徹底能夠本身實現一個new的過程

function createNew() {
  let obj  = {}
  let Sunday  = [].shift.call(arguments)
  obj.__proto__ = Sunday.prototype
  let result = Sunday.apply(obj,arguments)
  return result instanceof Object ? result : obj
}複製代碼

2一、vuex原理

vuex的原理其實很是簡單，它爲何能實現全部的組件共享同一份數據？

由於vuex生成了一個store實例，而且把這個實例掛在了全部的組件上，全部的組件引用的都是同一個store實例。

store實例上有數據，有方法，方法改變的都是store實例上的數據。因爲其餘組件引用的是一樣的實例，因此一個組件改變了store上的數據，

致使另外一個組件上的數據也會改變，就像是一個對象的引用。

2二、vue怎麼實現頁面的權限控制

利用 vue-router 的 beforeEach 事件，能夠在跳轉頁面前判斷用戶的權限（利用 cookie 或 token），是否可以進入此頁面，若是不能則提示錯誤或重定向到其餘頁面，在後臺管理系統中這種場景常常能遇到。

2三、真實DOM和虛擬DOM的區別

虛擬DOM不會進行排版與重繪操做

真實DOM頻繁排版與重繪的效率是至關低

虛擬DOM進行頻繁修改，而後一次性比較並修改真實DOM中須要改的部分，最後並在真實DOM中進行排版與重繪，減小過多DOM節點排版與重繪損耗

虛擬DOM有效下降的重繪與排版，由於最終與真實DOM比較差別，能夠只渲染局部

2四、跨域（機率90%，此問題想到一位奇葩的面試官，記憶猶新！）

1. JSONP

// jsonp的原理很簡單，就是利用 <script> 標籤沒有跨域的限制的漏洞。當須要通信時，經過 <script> 標籤指向一個須要訪問的地址，並提供一個回調函數來接收數據。

// JSONP使用簡單而且兼容性不錯，可是隻限於get請求

核心思想：網頁經過添加一個<script>元素，向服務器請求 JSON 數據，服務器收到請求後，將數據放在一個指定名字的回調函數的參數位置傳回來。

①原生實現：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服務器test.com發出請求，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字
 
// 處理服務器返回回調函數的數據
<script type="text/javascript">
    function dosomething(res){
        // 處理得到的數據
        console.log(res.data)
    }
</script>複製代碼

② jQuery ajax：

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式爲jsonp
    jsonpCallback: "handleCallback",    // 自定義回調函數名
    data: {}
});複製代碼

③ Vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})複製代碼

二、CORS

CORS 是跨域資源分享（Cross-Origin Resource Sharing）的縮寫。它是 W3C 標準，屬於跨源 AJAX 請求的根本解決方法。

一、普通跨域請求：只需服務器端設置Access-Control-Allow-Origin

二、帶cookie跨域請求：先後端都須要進行設置

【前端設置】根據xhr.withCredentials字段判斷是否帶有cookie

①原生ajax

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端設置是否帶cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
 複製代碼

② jQuery ajax

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端設置是否帶cookie
   },
   crossDomain: true,   // 會讓請求頭中包含跨域的額外信息，但不會含cookie
});
 複製代碼

③vue-resource

Vue.http.options.credentials = true複製代碼

④ axios

axios.defaults.withCredentials = true複製代碼

三、設置document.domain解決沒法讀取非同源網頁的 Cookie問題

瀏覽器是經過document.domain屬性來檢查兩個頁面是否同源，所以只要經過設置相同的document.domain，兩個頁面就能夠共享Cookie（此方案僅限主域相同，子域不一樣的跨域應用場景。）

// 兩個頁面都設置
document.domain = 'test.com';複製代碼

四、跨文檔通訊 API：window.postMessage()

調用postMessage方法實現父窗口test1.com向子窗口test2.com發消息（子窗口一樣能夠經過該方法發送消息給父窗口）

它可用於解決如下方面的問題：

• 頁面和其打開的新窗口的數據傳遞
• 多窗口之間消息傳遞
• 頁面與嵌套的iframe消息傳遞

上面三個場景的跨域數據傳遞

// 父窗口打開一個子窗口
var openWindow = window.open('http://test2.com', 'title');
 
// 父窗口向子窗口發消息(第一個參數表明發送的內容，第二個參數表明接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');複製代碼

調用message事件，監聽對方發送的消息

// 監聽 message 消息
window.addEventListener('message', function (e) {
  console.log(e.source); // e.source 發送消息的窗口
  console.log(e.origin); // e.origin 消息發向的網址
  console.log(e.data);   // e.data   發送的消息
},false);複製代碼

2五、請簡述JavaScript中的this。

函數的調用方式決定了this的值。

this取值符合如下規則：

一、在調用函數時使用new關鍵字，函數內的this是一個全新的對象。

二、若是apply、call或bind方法用於調用、建立一個函數，函數內的 this 就是做爲參數傳入這些方法的對象。

三、當函數做爲對象裏的方法被調用時，函數內的this是調用該函數的對象。好比當obj.method()被調用時，函數內的 this 將綁定到obj對象。

四、若是調用函數不符合上述規則，那麼this的值指向全局對象（global object）。瀏覽器環境下this的值指向window對象，可是在嚴格模式下('use strict')，this的值爲undefined。

五、若是符合上述多個規則，則較高的規則（1 號最高，4 號最低）將決定this的值。

六、若是該函數是 ES2015 中的箭頭函數，將忽略上面的全部規則，this被設置爲它被建立時的上下文。

2六、JS哪些操做會形成內存泄露

1）意外的全局變量引發的內存泄露

function leak(){  

  leak="xxx";//leak成爲一個全局變量，不會被回收  

}複製代碼

2）閉包引發的內存泄露

3）沒有清理的DOM元素引用

4）被遺忘的定時器或者回調

5）子元素存在引發的內存泄露

2七、如何肯定this指向

若是要判斷一個運行中函數的 this 綁定，就須要找到這個函數的直接調用位置。找到以後就能夠順序應用下面這四條規則來判斷 this 的綁定對象。

一、由 new 調用？綁定到新建立的對象。

二、由 call 或者 apply （或者 bind ）調用？綁定到指定的對象。

三、由上下文對象調用？綁定到那個上下文對象。

四、默認：在嚴格模式下綁定到 undefined ，不然綁定到全局對象。

必定要注意，有些調用可能在無心中使用默認綁定規則。若是想「更安全」地忽略 this 綁定，你可使用一個 DMZ 對象，好比 ø = Object.create(null) ，以保護全局對象。

ES6 中的箭頭函數並不會使用四條標準的綁定規則，而是根據當前的詞法做用域來決定this ，具體來講，箭頭函數會繼承外層函數調用的 this 綁定（不管 this 綁定到什麼）。這其實和 ES6 以前代碼中的 self = this 機制同樣

2八、箭頭函數和普通函數有什麼區別

• 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象，用call applybind也不能改變this指向
• 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
• 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
• 不可使用yield命令，所以箭頭函數不能用做 Generator 函數。
• 箭頭函數沒有原型對象prototype

2九、閉包

閉包是指有權訪問另一個函數做用域中的變量的函數.能夠理解爲(可以讀取其餘函數內部變量的函數)

閉包的做用: 正常函數執行完畢後,裏面聲明的變量被垃圾回收處理掉,可是閉包可讓做用域裏的變量,在函數執行完以後依舊保持沒有被垃圾回收處理掉

.閉包的缺陷

閉包會致使內存佔用太高,由於變量都沒有釋放內存

閉包的用途:

1.讀取函數內部的變量

2.讓變量始終保持在內存中，延長變量的生命週期

閉包造成緣由？

30、如何實現原型繼承？

先更改子類的原型prototype指向一個New父類()對象。

子類.prototype = new 父類()

再給子類的原型設置一個constructor指向子類

子類.prototype.constructor = 子類

// 人類 → 父類
 function Person() {
   this.name = '名字';
   this.age = 10;
   this.gender = '男';
 }
 Person.prototype.sayHi = function () { console.log('你好'); };
 Person.prototype.eat = function () { console.log('我會吃。。。'); };
 Person.prototype.play = function () { console.log('我會玩'); };


 // 學生類 → 子類
 function Student() {
   this.stuId = 1000;
 }
 // 子類的原型prototyp指向父類的一個實例對象
 Student.prototype = new Person();
 // 添加一個constructor成員
 Student.prototype.constructor = Student;

 // 如何實現原型繼承：
 // 給子類的原型prototype從新賦值爲父類的一個實例對象。
 // 利用了原型鏈上屬性或方法的查找規則。


 // 建立一個學生對象
 var stu1 = new Student();
 console.log(stu1.constructor)複製代碼

class繼承

• 在es6中可使用class去實現繼承，而且實現起來很簡單

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true複製代碼

• class 實現繼承的核心在於使用 extends 代表繼承自哪一個父類，而且在子類構造函數中必須調用 super，由於這段代碼能夠當作 Parent.call(this, value)。

31.講講輸入完網址按下回車，到看到網頁這個過程當中發生了什麼

a. 域名解析

b. 發起TCP的3次握手

c. 創建TCP鏈接後發起http請求

d. 服務器端響應http請求，瀏覽器獲得html代碼

e. 瀏覽器解析html代碼，並請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

32.談談你對前端性能優化的理解

a. 請求數量：合併腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求帶寬：開啓GZip，精簡JavaScript，移除重複腳本，圖像優化，將icon作成字體

c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減小DNS查找，配置ETag，使AjaX可緩存

d. 頁面結構：將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出

e. 代碼校驗：避免CSS表達式，避免重定向

33.es6新語法

聲明與表達式： let與const

let命令： 代碼塊內有效；

不能重複聲明；

迭代計數使用；

無變量提高；

const命令：暫時性死區；

聲明一個只讀的常量，一旦聲明，常量的值就不能改變；

*let是更完美的var，不是全局變量，具備塊級函數做用域,大多數狀況不會發生變量提高。

const定義常量值，不可以從新賦值，若是值是一個對象，能夠改變對象裏邊的屬性值。

var 和 let的區別: var 是在全局範圍內有效、let代碼塊內有效

var 能夠聲明屢次、 let只能聲明一次；

let 不存在變量提高，var 會變量提高；

示例：

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";複製代碼

變量 b 用 var 聲明存在變量提高，因此當腳本開始運行的時候，b 已經存在了，可是尚未賦值，因此會輸出 undefined。

變量 a 用 let 聲明不存在變量提高，在聲明變量 a 以前，a 不存在，因此會報錯。

const 命令

暫時性死區:

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}複製代碼

ES6 明確規定，代碼塊內若是存在 let 或者 const，代碼塊會對這些命令聲明的變量從塊的開始就造成一個封閉做用域。代碼塊內，在聲明變量 PI 以前使用它會報錯。

3四、Promise 對象

是異步編程的一種解決方案。

從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。

狀態的特色

Promise 異步操做有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失敗）。除了異步操做的結果，任何其餘操做都沒法改變這個狀態。

Promise 對象只有：從 pending 變爲 fulfilled 和從 pending 變爲 rejected 的狀態改變。只要處於 fulfilled 和 rejected ，狀態就不會再變了即 resolved（已定型）。

狀態的缺點

沒法取消 Promise ，一旦新建它就會當即執行，沒法中途取消。

如不設置回調函數，Promise 內部會拋出的錯誤，不會反應到外部。

當處於 pending 狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

then 方法

then 方法接收兩個函數做爲參數，第一個參數是 Promise 執行成功時的回調，第二個參數是 Promise 執行失敗時的回調，兩個函數只會有一個被調用。

then 方法的特色

在 JavaScript 事件隊列的當前運行完成以前，回調函數永遠不會被調用。

35.請你談談Cookie的弊端

a. 每一個特定的域名下最多生成的cookie個數有限制

b. IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

c. cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節

d. 安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。

36.對BFC規範的理解

BFC的一個最重要的效果是，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

利用BFC能夠閉合浮動，防止與浮動元素重疊。

37.項目中遇到過的難題？

38.你常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

39.列舉IE與其餘瀏覽器不同的特性？

a. IE的排版引擎是Trident

b. Trident內核曾經幾乎與W3C標準脫節

c. Trident內核的大量 Bug等安全性問題沒有獲得及時解決

d. JS方面，有不少獨立的方法，例如綁定事件的attachEvent、建立事件的createEventObject等

e. CSS方面，也有本身獨有的處理方式，例如設置透明，低版本IE中使用濾鏡的方式

40.什麼叫優雅降級和漸進加強？

漸進加強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

41.WEB應用從服務器主動推送Data到客戶端有那些方式？

a. html5 websoket

b. WebSocket 經過 Flash

c. XHR長時間鏈接

d. XHR Multipart Streaming

e. 不可見的Iframe（一個沒有前端的公司，java面我，問我iframe的缺點！！不會，而後他說這是後端寫的……）

f. 標籤的長時間鏈接(可跨域)

42.請解釋一下 JavaScript 的同源策略

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

4三、.ajax的步驟

什麼是ajax?

ajax(異步javascript xml) 可以刷新局部網頁數據而不是從新加載整個網頁。

如何使用ajax?

第一步，建立xmlhttprequest對象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對象用來和服務器交換數據。

var xhttp;

if (window.XMLHttpRequest) {

//現代主流瀏覽器

xhttp = new XMLHttpRequest();

} else {

// 針對瀏覽器，好比IE5或IE6

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}複製代碼

第二步，使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。

第三步，使用xmlhttprequest對象的responseText或responseXML屬性得到服務器的響應。

第四步，onreadystatechange函數，當發送請求到服務器，咱們想要服務器響應執行一些功能就須要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數

44.一次js請求通常狀況下有哪些地方會有緩存處理？

a. 瀏覽器端存儲

b. 瀏覽器端文件緩存

c. HTTP緩存304

d. 服務器端文件類型緩存

e. 表現層&DOM緩存

45.一個頁面上有大量的圖片，加載很慢，你有哪些方法優化這些圖片的加載？

a. 圖片懶加載，滾動到相應位置才加載圖片。

b. 圖片預加載，若是爲幻燈片、相冊等，將當前展現圖片的前一張和後一張優先下載。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，若是圖片爲css圖片的話。

d. 若是圖片過大，可使用特殊編碼的圖片

4六、.談談之前端角度出發作好SEO須要考慮什麼？

a. 瞭解搜索引擎如何抓取網頁和如何索引網頁

b. meta標籤優化

c. 關鍵詞分析

d. 付費給搜索引擎

e. 連接交換和連接普遍度（Link Popularity）

f. 合理的標籤使用

4七、get、 post的區別

get獲取數據；post提交數據

get 用於獲取信息，是無反作用的，是冪等的，且可緩存

post 用於修改服務器上的數據，有反作用，非冪等，不可緩存

get 傳參方式是經過地址欄URL傳遞，能直接看到get傳遞的參數，post傳參方式參數URL不可見，

get 把請求的數據在URL後經過？鏈接，經過&進行參數分割。

post 將從參數存放在HTTP的包體內

get 對傳遞的數據長度受URL的限制，URL最大長度是2048個字符。

post 沒有長度限制

get後退不會有影響，post後退會從新進行提交

get請求能夠被緩存，post不能夠被緩存

get請求只支持URL編碼，post支持多種編碼方式

get請求的記錄會留在歷史記錄中，post請求不會留在歷史記錄

get只支持ASCII字符，post沒有字符類型限制

4八、var a;

console.log(a) 求結果？緣由？

輸出：undefind, a只聲明，沒有賦值

4九、transform和transition的區別？

50、mounted中經常使用的方法？

5一、鉤子函數（問了無數次）

5二、1.清除浮動的方法？(屢次出如今面試題)

1.父級div定義 height

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。

2，結尾處加空div標籤 clear:both

原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度

3，父級div定義 僞類:after 和 zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

4，父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

5三、position有哪些屬性？

5四、隱藏一個div有幾種方法？

5五、登錄註冊怎麼作？

5六、計算屬性和監聽器有什麼區別？computed、watch

當須要在數據變化時執行異步或開銷較大的操做時，用偵聽。

模板中顯示內容，不作任何複雜的計算（或者邏輯），這個時候就能夠用到計算屬性

5七、v-for渲染列表是key是用來作什麼的？

爲了高效的更新虛擬DOM

5八、數據請求在生命週期哪個階段？

通常在 created（或beforeRouter）裏面就能夠，若是須要頁面加載完成以後的話就用

mounted。

在created的時候，視圖中的html並無渲染出來，因此此時若是直接去操做html的dom節點，必定找不到相關的元素

而在mounted中，因爲此時html已經渲染出來了，因此能夠直接操做dom節點

5九、給DOM元素綁定事件有哪些方法？

a、在DOM元素中直接綁定；

b、在JavaScript代碼中綁定；

c、綁定事件監聽函數。

60、數組裏面有哪些遍歷方法？es6

for(){} 遍歷

forEach 遍歷

for-in 遍歷

for-of 遍歷

every()、some()、filter()、map()、reduce（）、reduceRight()

6一、用js能夠實現的動畫 爲何要用css？

css渲染的動畫不佔用js主線程

6二、ajax請求數據從新處理和攔截器？

解決攔截器對ajax請求的的攔截

public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) throws Exception {
        
        //獲取斷定登錄的session是否存在
        String token = (String) request.getSession().getAttribute("token");
        String postId = (String) request.getSession().getAttribute("postId");
        if(token == null || token == ""){
            String XRequested =request.getHeader("X-Requested-With");
            if("XMLHttpRequest".equals(XRequested)){
                response.getWriter().write("IsAjax");
            }else{
                response.sendRedirect("/m-web/user/toLogin");
            }
            return false;
        }
        if(postId == null || postId == ""){
            String XRequested =request.getHeader("X-Requested-With");
            if("XMLHttpRequest".equals(XRequested)){
                response.getWriter().write("IsAjax");
            }else{
                response.sendRedirect("/m-web/user/toLogin");
            }
            return false;
        }
        return true;
    }複製代碼

一、判斷 String XRequested =request.getHeader("X-Requested-With") 的值，目的是判斷是不是ajax請求。

二、response.getWriter().write("IsAjax");寫出一個響應的數據給ajax，這樣就能夠在ajax裏面作判斷

　　判斷的方式存在兩種方式：

　　1）直接在ajax裏面作判斷（不建議）

success:function(data){
    if(data == "IsAjax"){
        window.location.href="m-web/user/toLogin"
        return;
    }
}複製代碼

2）改jQuery源碼而後在作壓縮，是針對全局的方式來修改的（建議）

if ( isSuccess ) {// if no content
                if ( status === 204 || s.type === "HEAD" ) {
                    statusText = "nocontent";

                // if not modified
                } else if ( status === 304 ) {
                    statusText = "notmodified";

                // If we have data, let's convert it } else { statusText = response.state; success = response.data; error = response.error; isSuccess = !error; //解決ajax攔截問題 var result = responses.text; if(result.indexOf("IsAjax")>=0){ window.location.href="m-web/user/toLogin"; return; } } }複製代碼

6三、bootstrap中欄柵的24個是怎麼作的？24個col不加數字就能夠

6四、輪播圖是怎麼考慮的 什麼邏輯？

6五、git的經常使用操做？

命令操做、遠程Git和local的同步實現流程：

一、把git上的代碼clone到本地

$ git clone http:xxxx(地址，能夠http也能夠ssh)

二、clone到本地之後、使用branch -a 查看遠程全部分支

$ git branch -a

三、如若你有分支：master branch1 branch2 ，使用checkout用來切換分支。還能夠用第2條指令去建立本地分支目錄和遠程的保持一致，而且切換遠程分支到本地分支目錄

$ git checkout branch1

$ git checkout -b branch1 origin/branch1

四、在本地修改完代碼後、保存全部的項目

$ git add .

五、保存完成後能夠提交到本地

$ git commit -m '提交說明'

六、最後提交git服務器，要加上分支的名字，默認master目錄不加。

$ git push origin branch1

6六、const定義對象可否改變？

能夠的 。 定義的對象仍是存儲在堆當中

6七、vue-router的原理

說簡單點，vue-router的原理就是經過對URL地址變化的監聽，繼而對不一樣的組件進行渲染。

每當URL地址改變時，就對相應的組件進行渲染。原理是很簡單，實現方式可能有點複雜，主要有hash模式和history模式

6八、生命週期？

實例在被建立前通過的一系列初始化過程叫生命週期

生命週期鉤子:在生命週期中被自動調用的函數叫作生命週期鉤子

6九、前臺發送數據到後端,而且後端給前端返回數據

後臺 server.js

var express = require("express");
var app = express();
// 經過post的方法獲取頁面的信息
// 1.npm下載bodyParser  2.引用
var bodyParser = require("body-parser");
// 3.設置
var uE = bodyParser.urlencoded({ extended: false });

// 中間件解決跨域問題
app.use(function(req, res, next) {
    // 解決跨域
    res.header('Access-Control-Allow-Origin', '*');

    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
    next();
})

app.get("/", function(req, res) {
    // 接收前臺發過來的數據
    //用get的方式獲取前臺的數據使用req.query.xxx
    console.log(req.query.num);
    res.send("我是get的接口");
})


// 4.把解析功能傳入
app.post("/post", uE, function(req, res) {
    //用post的方式獲取前臺數據使用req.body.xxx
    console.log(req.body.num);
    res.send({
        status: 200,
        content: "我是post的接口"
    });
})

app.listen(3001);
 
 複製代碼

前臺index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <button>點我進行數據請求</button>

    <script>
        $("button").eq(0).on("click", function() {
            $.ajax({
                url: "http://localhost:3001/post",
                type: "post",
                data: {
                    num: 123
                },
                success(data) {
                    console.log(data);
                }
            })
        })
    </script>

</body>

</html>複製代碼

70、express

express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性和豐富的 HTTP 工具

功能： 一、擴展了web所須要的基本功能

二、豐富了HTTP工具

三、能夠快速搭建一個網站

var express=require("express");
// 初始化express
var app=express();



// 定義中間件（每一次接收到請求後都會先通過中間件）
app.use(function(req,res,next){

    console.log("你好")


    next()//下一步
})



// 建立服務
app.get("/",function(req,res){
    res.send("aaaaaaa");
})


// 路由的使用
app.get("/index",function(req,res){
  
    res.send("我是index")
})

app.get("/home",function(req,res){
   
    res.send("我是home")
})

app.get("/post",function(req,res){
 
    res.send("我是get的post")
})

app.get("/a*",function(req,res){
   
    res.send("我是路徑通配符選擇的")
})

// 接受一個post請求
app.post("/post",function(req,res){
    res.send("我是一個post請求")
})


app.listen(3000)複製代碼

7一、路由登陸註冊

登陸頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登錄頁面</title>
</head>
<body>
    
    <form action="http://localhost:3001/login">
        <input type="text" name="uname"/>
        <input type="text" name="upwd"/>
        <input type="submit" value="登錄">
    </form>

</body>
</html>複製代碼

註冊頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>註冊頁面</title>
</head>
<body>
    
    <form action="http://localhost:3001/zhuce">
        <input type="text" name="uname"/>
        <input type="text" name="upwd"/>
        <input type="submit" value="註冊">
    </form>

</body>
</html>複製代碼

server.js

在瀏覽器輸入localhost:/端口號/zhuce 或者(login)

var http=require("http");
var url=require("url");
http.createServer(function(req,res){
    res.writeHead(200,{"Content-type":"text/html;charset=utf-8"});
    // 解決二次請求

    var pathurl=url.parse(req.url);
    if(pathurl.pathname=="/favicon.ico"){
        return;
    }


// 路由
    if(pathurl.pathname=="/login"){
        res.end("您執行了登錄的後臺功能");
    }else if(pathurl.pathname=="/zhuce"){
        res.end("您執行了註冊的後臺功能");
    }else{
        res.end("您的請求有誤 請覈實後在進行請求");
    }
}).listen(3001)複製代碼

7二、AJAX

Async javascript and XML 異步的js和xml 局部刷新

若是沒有局部刷新整個HTML頁面都會刷新，這樣比較佔網速（浪費流量），頁面比較慢。

console.log(1);
var timer = window.setTimeout(function(){console.log(2)},0);
console.log(3);複製代碼

服務器端返回給客戶端通常都是JSON格式的字符串或者xml格式的數據

xml:可擴展的標記語言

<production>
        <price>100元</price>
        <name>洗衣機</name>
 </production> 複製代碼

建立ajax

//1.建立ajax的實例
      let xhr = new XMLHTTPRequest();//後邊的()可寫可不寫
      let xhr = new XMLHTTPRequest；

//2.請求配置項
    xhr.open([請求方式],[請求路徑],[ASYNC,默認是true],[USERNAME],[USERPASS]);
    //請求方式    下邊全部的請求方式都可以給服務器發送請求，也能夠從服務器獲取內容
    //get/delete/head/options..
    
    //post/put
    
    //get/post
    //通常來說get用來從服務器獲取內容   獲取的多，給的少
    //post：獲取的少給的多
    //delete:從服務器刪除一些內容
    //head:只獲取服務器響應頭信息
    //options:客戶端對服務器的測試請求
    
    //當前給服務器發送請求的時候若是用的get通常給服務器傳遞闡述用?傳參
    https://hellojoy.jd.com:443/?itemid=12560&babelChannel=1500725&activityId=2wbhW341AywcD3Xyv9sR5MhCPFAL&linkIds=4713019,2828306,3986352&source=02
    

//3.發送請求
    xhr.send([請求主體]);//發送給服務器的內容放到請求主體中

//4.監聽通信的內容


//readySate:ajax請求狀態
UNSENT: 0   ajax實例尚未建立
OPENED: 1   參數開始配置
HEADERS_RECEIVED: 2   客戶端已經開始接收服務器端響應頭信息 （返回狀態碼，日期....）
LOADING: 3  正在準備加載服務器端響主體內容
DONE: 4   響應主體的內容已經獲取完畢了



//status:HTTP網絡狀態碼

200：ok請求狀態成功（雖然請求成功了，可是拿到的內容不必定是你想要的）
301：永久從定向（永久轉移）
307 Internal Redirect：臨時重定向   把http轉爲htts
304 Not Modified :從緩存當中獲取
302 Move Temporarily  臨時轉移（負載均衡） 當服務器的併發數不能承受的時候，把部分訪問轉移其它服務及集羣
404:not Found  找不到
400：請求參數錯誤
500 Internal Server Error 未知錯誤
503 Service Unavailable 服務器超負荷




//onreadystatechanage監聽狀態改變
xhr.onreadystatechanage = ()=>{
    if(！/^(2|3)\d{2}$/.test(xhr.sataus))return;
    if(xhr.readyState ==2){
    }
    
    if(xhr.satus ==200 &&xhr.readyState == 4){
    
    }
}複製代碼

做者：去土耳其啊 連接：https://zhuanlan.zhihu.com/p/83252221 來源：知乎