前端一些基礎的重要的知識

5.call 和 apply 都是爲了改變函數體內部 this 的指向。
    兩者的做用徹底同樣，只是接受參數的方式不太同樣。

 var func1 = function(arg1, arg2) {};

//能夠經過 func1.call(this, arg1, arg2);   
//或者 func1.apply(this, [arg1, arg2]); 來調用

 

var pet={
    words:'xxx',
    speak:function(say){
        console.log(say +' '+this.words)
    }
}
var dog={
    words:'wang'
}
pet.speak.call(dog,'miao')//miao wang
//調用pet.speak方法，而且speak裏的this指向dog，與原來的上下文無關
//第二個參數(及後面的參數)是speak方法的傳參

繼承：

function Pet(words) {
　　this.words = words;
　　this.speak = function () {
　　　　console.log(this.words)
　　}
}
function Dog(words) {
　　Pet.call(this, words)
　　//調用Pet，而且Pet裏面的this指向Dog,意思是Pet裏this定義的方法和屬性，Dog一樣有
}
var dog = new Dog('wang')

 若是call/apply第一個參數是null，那麼this就是指向window

bind和上面兩個不一樣的是bind返回的是一個函數，必須調用()來執行：

var pet = {
　　words: 'xxx',
　　speak: function (say) {
	console.log(say + ' ' + this.words)
　　}
}
var dog = {
　　words: 'wang'
}
pet.speak.bind(dog)('miao') //miao wang 
//pet.speak.bind(dog,'miao')()//miao wang 等價於上面

 

7.漸進加強和優雅降級

　　漸進加強 ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
　　優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

9.一個標準的AJAX：

        var xhr = new XMLHttpRequest(); //IE6及以前的版本要使用ActiveXObject
        xhr.onreadystatechange = function () {//每當readyState改變都會觸發readystatechange
            if (xhr.readyState == 4) {
                //readyState的狀態爲: 0 open() 1 send() 2 正在傳輸數據=3 接收所有數據=4
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    //處理 xhr.responseText等
                } else {
                    //處理錯誤
                }
            }
        };
        xhr.open('get', 'example.txt', true);//第三個參數表示是否異步發送請求
        xhr.setRequestHeader('MyHeader','MyValue');
        xhr.send(null);

AJAX是什麼？在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容的技術。

AJAX的過程：

　　一、建立XMLHttpRequest對象

　　二、建立HTTP請求（open方法）

　　三、設置響應HTTP請求狀態變化的函數

　　四、發送HTTP請求

　　五、獲取異步調用返回的數據，DOM局部更新

10.webSocket、ajax輪詢、長輪詢

　　WebSocket是Web應用程序的傳輸協議，它提供了雙向的，按序到達的數據流。
　　他是一個HTML5協議，WebSocket的鏈接是持久的，他經過在客戶端和服務器之間保持雙工鏈接，服務器的更新能夠被及時推送給客戶端，而不須要客戶端以必定時間間隔去輪詢。
　　只須要通過一次HTTP請求,只須要一次握手，整個通信過程是創建在一次鏈接/狀態中，也就避免了HTTP的非狀態性，服務端會一直知道你的信息，直到你關閉請求。
　　ws和wss: 與http和https相似。ws是不安全的，wss是安全的。

　　　ajax輪詢：瀏覽器隔個幾秒就發送一次請求，詢問服務器是否有新信息。

　　　長輪詢long poll：瀏覽器發起請求後，一直等待服務器直到它返回信息，處理信息後再次發起長輪詢。

11.HTTP和HTTPS

　　HTTP協議一般承載於TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TLS），這個時候，就成了咱們常說的HTTPS。
　　TLS:安全傳輸層協議

　　默認HTTP的端口號爲80，HTTPS的端口號爲443。

12.HTTP1.0和HTTP1.1的區別

（1）HTTP 1.0規定瀏覽器與服務器只保持短暫的鏈接，瀏覽器的每次請求都須要與服務器創建一個TCP鏈接。

　　 HTTP 1.1支持持久鏈接，在一個TCP鏈接上能夠傳送多個HTTP請求和響應。

（2）HTTP 1.1增長host字段

　　在HTTP1.0中認爲每臺服務器都綁定一個惟一的IP地址，所以，請求消息中的URL並無傳遞主機名（hostname）。

　　但隨着虛擬主機技術的發展，在一臺物理服務器上能夠存在多個虛擬主機，而且它們共享一個IP地址。

　　因此HTTP 1.1中增長Host請求頭字段，WEB瀏覽器可使用主機頭名來明確表示要訪問服務器上的哪一個WEB站點。

（3）HTTP1.1增長了100狀態碼。

14.Http 2.0

　　1.改進傳輸性能,在應用層和傳輸層之間增長一個二進制分幀層，實現低延遲和高吞吐量

　　2.多路複用,容許同時經過單一的 HTTP/2 鏈接發起多重的請求-響應消息

　　3.頭壓縮

　　4.服務端推

20.Repain(重繪)和Reflow(迴流)

　　注：display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，由於沒有發現位置變化。

　　總結： 若是變化影響了佈局，則會觸發迴流。若是變化只是一些背景色之類的不影響佈局，則只會發生重繪。

　　迴流比重繪嚴重性要高得多。

　　避免方法：儘可能少地修改DOM樣式，特別是在JS裏。CSS裏儘可能不要二次賦值樣式。

16.em和px和rem

　　絕對值px，相對值em，默認1em=16px

　　若是父元素定義字體大小16px，那麼子元素定義1em，大小就是16px

　　em計算公式： em值 x 父元素的font-size = px值

　　rem的計算公式： rem值 x HTML的font-size =px值

15.defer和async

沒加關鍵字的話，先加載執行script，而後再渲染後續文檔元素

async   加載執行script，同時渲染後續文檔元素（一塊兒跑），（不管是哪一種方式，執行js時，DOM渲染都是會中止的）

defer 加載scrpit的同時渲染後續文檔元素，可是隻有所有元素解析完纔開始執行script

 藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的；綠色線表明 HTML 解析。

17.對前端模塊化的認識

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。
CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。
AMD 是提早執行，CMD 是延遲執行。
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

　　require.js寫法:

//index.js
require(['./content.js'], function(animal){
    console.log(animal);   //A cat
})
//content.js 
define('content.js', function(){ 
　　return 'A cat'; 
})

　　CommonJS寫法：

//index.js
var animal = require('./content.js')

//content.js
module.exports = 'A cat'

　　ES6寫法：

//index.js
import animal from './content'

//content.js
export default 'A cat'

19.display:none和visibility:hidden的區別

　　display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。產生reflow與repaint

　　visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。只產生repaint

23.CSS樣式優先級

CSS中class第二個聲明老是比第一個具備優先權, 並且id具備更高的優先級，行內樣式具備最高的優先權。在屬性最後加上  !important ，這個屬性就最高的優先權
!important >內聯樣式> id > class > tag

21.position:absolute和float屬性的異同

   共同點：對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。

   不一樣點：float仍會佔據位置，absolute會覆蓋文檔流中的其餘元素。

22.僞元素和僞類

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素

僞元素：

屬性              描述                       CSS版本
::first-letter    向文本的第一個字母添加特殊樣式。  1
::first-line      向文本的首行添加特殊樣式。       1
::before          在元素以前添加內容。            2
::after           在元素以後添加內容。            2

僞類：

屬性            描述                             CSS版本
:active        向被激活的元素添加樣式。                1
:focus         向擁有鍵盤輸入焦點的元素添加樣式。       2
:hover         當鼠標懸浮在元素上方時，向元素添加樣式。  1
:link          向未被訪問的連接添加樣式。              1
:visited       向已被訪問的連接添加樣式。              1
:first-child   向元素的第一個子元素添加樣式。           2
:lang          向帶有指定 lang 屬性的元素添加樣式。     2

38.如何刪除一個cookie

1.將時間設爲當前時間往前一點。

var date = new Date();

date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用於設置一個月的某一天。

2.expires的設置

document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

26.null和undefined的區別

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

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

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

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。

31.異步加載和延遲加載

1.異步加載的方案： 動態插入script標籤

2.經過ajax去獲取js代碼，而後經過eval執行

3.script標籤上添加defer或者async屬性

4.建立並插入iframe，讓它異步執行js

5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

33.ajax的缺點

 一、ajax不支持瀏覽器back按鈕。

 二、安全問題 AJAX暴露了與服務器交互的細節。

 三、對搜索引擎的支持比較弱。

 四、破壞了程序的異常機制。

 五、不容易調試。