發文前,小編想先對上一篇文章-css篇糾正錯誤以及針對文章提出的優化的小夥伴表示感謝,大家的每一個建議或意見都很寶貴🌻🌻。javascript
繼上兩篇文章html篇和CSS篇以後,本篇文章對於常見的有關Javascript
部分的內容進行了大體的整合。文中涉及的知識面仍是蠻廣的,小編在整理的時候也順道溫習了一遍。css
文章字數1.5萬+
,篇幅比較長,仍是建議收藏吧,慢慢看。所謂溫故而知新,本篇文章做爲溫習知識點仍是挺有用的(尤爲是準備跳槽的小夥伴抱佛腳尤其有用哈哈哈哈)🥴。html
PS: 文中,爲了方便閱讀,小編一如既往作了分割線。java
首先,在js
中,this
是指正在執行的很熟的「全部者」,更確切的說,是指將當前函數做爲方法的對象。node
javascript
中的this
有一套徹底不用於其它語言的對this
的處理機制。在如下五種狀況下,this
的指向各不相同。linux
當在全局範圍內的時候,使用this
將會指向全局對象(this->window)
;程序員
這裏的this
是在對象中的.當函數被保存爲對象的一個屬性時,成該函數爲該對象的方法,函數中this
的值爲該對象。web
咱們先看個例子:ajax
const object = {
a: 1,
func: function() {
console.log(this.a)
}
}
object.fun() //1 (this->object)
複製代碼
function func() {
console.log(this.a)
}
const object = {
a: 1,
b: func
}
object.fun() // 1 (this->object)
複製代碼
這裏的兩個this
指向的是對象object
,此時咱們能夠這麼理解,函數不管在對象內部或外部定義,實現的效果同樣。由於做爲對象的屬性的函數,對於對象來講是獨立的。算法
可是須要注意有時候,對象中的也會存在this綁定丟失的問題,這也是咱們下面將的使用apply
或call
調用模式。
看下面例子:
function func() {
console.log(this.a)
}
const object = {
a: 1,
b: func
}
const fun = object.b;
fun() // undefined
複製代碼
此時fun()
打印出來的值並非對象中的1
,而是undefined
。由此可看出,此時的this
指向的並非object
對象。咱們再給代碼添加一個全局的a
看看狀況:
function func() {
console.log(this.a)
}
const object = {
a: 1,
b: func
}
const fun = object.b;
var a = 2;
fun() // 2
複製代碼
此時的func
打印出來的是全局變量的值--2
,說明此時的this
是指向外部全局變量的。這種狀況主要是由由於this的隱式綁定致使的this綁定丟失。
咱們能夠理解爲: 執行「 fun= object.b」以後fun的調用和object.b調用的結果是不一樣的,由於這個函數賦值的過程沒法把b所綁定的this也傳遞過
決絕方式:經過this
的顯示綁定解決。
咱們能夠經過使用 call
和apply
以及bind
來解決,此時函數內的this
將會被顯示設置爲函數調用的第一個參數。以下代碼:
function func() {
console.log(this.a)
}
const object = {
a: 1,
b: func
}
var a = 2;
const fun = object.b;
fun.call(object) 或者 fun.apply(object) 或者 const funb = fun.bind(object) ; funb() // 1
複製代碼
此時this
指向的就是object
內部的a
,這就解決了this
綁定丟失的問題。
🌈🌈注意 :
bind
是提供了一個可執行的函數,可是自己並不會執行,須要咱們手動去執行;call
和apply
它們是提供了一個可當即執行的函數,在綁定this
的同時,也會當即去執行該函數。這也是爲何咱們在最後一個bind
方法中再次須要的單獨再調用一次funb()
方法的緣由。此時的this
也會指向全局對象。咱們也能夠這麼理解:當沒有明確的調用對象的時候,行數的this仍是在全局範圍內的,因此this會綁定到全局的window對象。
先看個例子:
function func() {
this.b = a;
console.log(b)
}
func(20); // 20,此時的b是20
const funb = new func(30)
funb.b; // 30
複製代碼
能夠看到,當執行new
操做的時候,會建立一個新的對象,而且將構造函數的this
指向所建立的新對象。
有關原型鏈以及其繼承的原理,小編在以前的文章毒雞湯中,在前面的部分圖文結合,已經作了比較詳細的介紹,有興趣的童鞋能夠去瞅瞅,小編這裏就不過多介紹了(又能夠偷懶了)。
有關閉包部分,亦是在毒雞湯中有所體現。
同步(阻塞模式)指的是:當發送一個請求時,須要等待返回,而後才能發送另外一個請求。其有個等待的過程。此外,同步也能夠避免出現死鎖,讀髒數據的發生。
異步(非阻塞模式)指的是:當發送一個請求時,不須要等待返回,能夠隨時發送下一個請求。其不須要等待。
區別: 最明顯的就是一個須要等待,一個不須要等待。
拓展: 在項目過程當中,能夠根據需求,來考慮功能是使用同步仍是異步。通常,有些功能爲了縮短用戶的等待時間,都會優先採用異步的方式;可是對於數據庫保存等操做,通常採用的是同步的方式。
js
引擎中的對象;Object
, Function
, Array
, String
, Boolean
, Number
, Date
, RegExp
, Error
, EvalError
, RangeError
, ReferenceError
, SyntaxError
, Typerror
, URLError
等;Global
(全局對象), Math
;(注意全部的內置對象都是原生對象)window
對象以及其下邊的全部子對象(例如dom
等),在node
中是global
以及其子對象,也包含自定義的類對象。function Person(){}
是聲明瞭一個名爲Person
的函數;var person = Person()
是直接調用了Person
函數,並將返回值做爲值賦值給變量person
;var person = new Person()
建立了一個Person
實例對象;首先咱們先看個例子:
console.log(num); //undefined
var num = 5;
console.log(num) // 5
複製代碼
到這裏,有基礎的小夥伴可能看出來這是爲何了。沒錯,就是變量聲明提高!一個變量的生命週期包含3個階段
var num
;num = 5
;console.log(num)
;上面的例子其實等價於:
var num;
console.log(num); //undefined 由於變量num提高了,可是值並無提高,因此打印出來是undefined
num = 5;
console.log(num) // 5
複製代碼
🌈🌈注意: 若是變量是在函數做用域內,那麼它的做用域就是函數做用域。不然,它就是全局做用域。
函數聲明和函數表達式在語法上是的等價的,可是有一點不一樣的是,
js
引擎加載它們的方式不同。簡單來講就是:函數聲明會被提高到其做用域頂部,而函數表達式不會。
具體能夠看如下兩點:
javascript
的一等公民,當一個變量名和函數同名時,函數聲明優先變量聲明,而且會忽略同名的變量聲明。在此長話短說,總的來講就是let
和const
的聲明會造成塊級做用域,不存在變量提高且不能重複聲明同一變量(或常量)。而var
聲明的變量會掛載在window
上,存在變量提高且能夠命名重複。
「use strict」
-- 嚴格模式, ES5
添加的一種運行模式,目的是爲了是javascript
在更嚴格的條件下運行。
js
語法的一些不合理,不嚴謹之處,減小一些怪異行爲;javascript
作好鋪墊;🌈🌈注意: 通過測試,目前IE6-9
都不支持嚴格模式。
如今網站的js
通常都會進行壓縮,壓縮過程當中,有些文件使用了嚴格模式,有些卻沒有。這種狀況下原本是嚴格模式的文件,被merge
後,這個串就到了文件中間,不只沒有指示嚴格模式,在壓縮後也會浪費字節。
javascript
是單線程執行的,從上到下一次運行。在js
中分爲兩個任務,宏任務和微任務。通常狀況下,首先執行的是宏任務(就是一般說的第一時間執行全部同步代碼),遇到微任務時,先加入隊列,宏任務執行完畢再執行微任務。微任務執行完畢以後再往下執行宏任務,執行完後再次執行全部微任務。
簡單的理解就是: 宏任務-> 微任務-> 宏任務 ->微任務;
終於詳細的執行機制,有興趣的小夥伴小編建議請移步至毒雞湯瞅瞅。
類似之處
this
要指向的對象;this
指向的;區別
call
和apply
以後函數可自動執行,可是使用bind
須要手動執行;call
和apply
接收的第一個參數是在其中運行函數的做用域,不一樣的是在接收的第二個參數時,apply
接收的是一個數組,而call
接收的是參數列表,須要跟函數保持一一對應。🌈🌈注意: call
和apply
擴充了函數的做用域。
應用場景
apply
;call
;bind
;概念: 事件冒泡是指嵌套最深的元素觸發一個事件,而後這個事件順着嵌套順序在父元素上觸發。而事件委託,是利用事件冒泡原理,讓本身所觸發的事件,讓其父元素代替執行。
冒泡阻止方式:使用event.cancelBubble = true
或者event.stopPropgation()
(低於IE9)。
默認事件阻止方式: e.preventDefault();
或return false;
。
比較簡單的方式是能夠將其數字對1進行取模,看看是否存在餘數。看如下代碼:
function isInt(number) {
return number % 1 === 0;
};
console.log(isInt(2.1)); // false
console.log(isInt(2)); // true
複製代碼
它是當即調用函數表達式(Immediately-Invoked Function Expression),簡稱爲IIFE
。指的是函數被建立後當即執行。看下面代碼:
(function IIFE(){
console.log( "Hello!" );
})();
// "Hello!"
複製代碼
這種當即調用函數表達式通常應用於避免污染全局命名空間條件下。由於 IIFE
(與任何其餘正常函數同樣)內部的全部變量在其做用域以外都是不可見的。
原型模式可用於建立新對象,可是它建立的並非初始化的對象,而是使用原型對象的值進行初始化的對象。原型模式也成爲屬性模式。
原型模式在初始化業務對象是很是有用,業務對象中的值與數據庫的默認值相匹配。原型對象中的默認值被複制到新建立的業務對象中。目前js
在構造新對象及其原型時使用了這個模式。
原型模式包含如下主要角色:
clone()
方法,它是可被複制的對象;clone()
方法來複制新的對象;Jsonp原理: 利用瀏覽器能夠動態的插入一段JS代碼並執行;
爲何不是真正的AJAX
ajax
和jsonp
在調用方式上雖然長得差很少(目的同樣,都是請求一個url
,而後把服務器返回的數據進行處理),可是ajax
和jsonp
本質上是不一樣的東西;ajax
的核心是經過XmlHttpRequest
獲取非本頁內容,而jsonp
的核心則是動態添加<script>
標籤來調用服務器提供的js
腳本;ajax
和jsonp
的區別不在因而否跨域。由於ajax
經過服務端代理同樣能夠實現跨域,jsonp
自己也不排斥同域的數據的獲取。還有就是jsonp
是一種方式或者說是非強制協議,如同ajax
同樣,它也不必定非要jsonp
格式來傳遞數據;jsonp
只支持get
請求,ajax
支持get
和post
請求.DOM
根節點。(逐級向上)DOM
根節點開始,依次觸發其祖先節點的同類型事件,直到當前節點自身。(逐級向下)dom
同時支持兩種事件模型,但捕獲性事件先開始,從document
開始也結束於document
,dom
模型的獨特之處在於文本也能夠觸發事件。簡單的說分爲三個階段:事件捕捉, 目標階段, 事件冒泡首先咱們須要明白的是:new
關鍵字主要的做用仍是在於繼承。
對於const a = new Foo();
,new
乾的事情。以下代碼:
const obj = new Object(); // 聲明一個新的空對象obj
obj.__propto__ = Person.prototype; // 讓obj的__proto__指向函數原型的prototype
Person.call(obj); // this指向obj對象
person = obj; // 將obj對象賦值給person對象
複製代碼
而後咱們來捋一捋,new
一共經歷了幾個階段?(4個)
Func
的this
指向obj
,並執行Func
函數體;Func
(構造函數)的返回值類型;defer
屬性(頁面load
後執行):腳本會被延遲到整個頁面都解析完畢以後再執行。如果設置了defer
屬性,就等於告訴瀏覽器當即下載,可是會延遲執行。注意defer
屬性只適用於外部腳本文件。async
屬性(頁面load
前執行):爲了避免讓頁面等待腳本下載和執行,異步加載頁面和其餘內容。async
一樣也只適用於外部文件(不會影響頁面加載,可是不能控制加載的順序)。DOM
方式;jQuery
的getScript()
方法;setTimeout
延遲方法;js
文件最後加載。flash
是個處理多媒體,矢量圖形以及訪問機器等;可是對於CSS
,文本處理有不足,不容易被搜索;Ajax
對CSS
,文本處理有很好的支持,亦支持搜索;可是對多媒體,矢量圖形以及訪問機器等不足;共同點:
DOM
;cookies
是服務器暫時放在咱們電腦裏的文本文件,好讓服務器來辨認咱們的計算機。
當咱們在瀏覽網站的時候,web
服務器會先發送小部分資料放在咱們的計算機中,cookies
會幫助咱們,將咱們在網站上打印的文字或一些選擇記錄下來,當咱們再次訪問同一個網站,web
服務器會先檢查有沒有它上次留下的cookies
資料。
如有,會依據cookies
裏面的內容來判斷使用者,從而給咱們推出相應的網頁內容。
json
是一種輕量級的數據交換格式;number
,string
,boolean
, null
),數組,對象;一個程序至少有一個進程,一個進程至少有一個線程。線程的劃分尺度小於進程,使得多線程程序的併發性高。這裏咱們能夠簡單的把進程理解成火車,線程理解爲車箱。
區別:
cpu
。(不一樣的火車能夠開在不一樣的軌道上,而同一火車的車箱只能形式在當前火車行駛的軌道上);===
和!==
來作比較;new Array
這種形式;switch
語句必需要帶default
分支;fon-in
循環中的變量,用var
關鍵字說明做用域,防止變量污染;if..else..
條件語句;6
中狀況是false
,false
、""
、0
、null
、undefined
、NaN
;其他的都是true
;typeof
,對象類型檢測用instanceof
;閉包是可以讀取其餘函數內部變量的函數,使得函數不被GC
回收。可是濫用閉包,會致使內存泄漏;
js
和圖片加載完才執行js;dom
樹建立完成就執行的方法,原生是沒有這種方法的。ajax
自動斷開;ajax
請求,其核心是調用XML
對象的abort
方法,ajax.abort()
;script
,setTimeout
,setInterval
;Promise
,process.nextTick
(node.js);🌈🌈注意: 宏任務中的事件放在callback
queue
中,由事件觸發線程維護;微任務的事件放在微任務隊列中,由js
引擎線程維護。
get
傳參方式是經過地址欄URL傳遞,是能夠直接看到get
傳遞的參數,post
傳參方式參數URL不可見,get
把請求的數據在URL
後經過?
鏈接,經過&
進行參數分割。psot
將參數存放在HTTP
的包體內;get
傳遞數據是經過URL
進行傳遞,對傳遞的數據長度是受到URL
大小的限制,URL
最大長度是2048
個字符。post
沒有長度限制;get
回退不會有影響,post
回退會從新進行提交;get
請求能夠被緩存,post
不能夠被緩存;get
請求只URL
編碼,post
支持多種編碼方式;get
只支持ASCII
字符,post
提交沒有字符類型限制;get
請求的記錄會留在歷史記錄中,post
請求不會留在歷史記錄;(1)、1xx(臨時響應)
100
: 請求者應當繼續提出請求。101
(切換協議) :請求者已要求服務器切換協議,服務器已確認並準備進行切換。(2)、2xx(成功)
200
: 請求成功並返回正確接口結果;201
: 表示資源被正確建立。202
: 請求正確,但結果正在處理中,這時候客戶端能夠經過輪詢等機制繼續請求。203
: 非受權信息,服務器已成功處理了請求,但返回的信息可能來自另外一個源;204
: 無內容,服務器成功處理了請求,但沒有返回任何內容;205
: 重置內容,服務器成功處理了請求,內容被重置;206
: 部份內容,服務器成功處理了部分請求;(3)、3xx(已重定向)
300
: 已經請求成功,可是有多個結果返回;301
: 請求成功,可是資源被永久轉移;302
: 臨時移動,請求的網頁暫時跳轉到其餘頁面,即暫時重定向;303
: 使用get訪問新的地址來獲取資源;304
: 請求的資源並無被修改過;305
: 使用代理,請求者應該使用代理訪問該頁面;306
: 臨時重定向,請求的資源臨時從其餘位置響應;(4)、4xx(請求錯誤)
400
: 請求出現錯誤,好比請求頭不對等;401
: 沒有提供認證信息。請求的時候沒有帶上 Token
等;402
: 爲之後須要所保留的狀態碼;403
: 請求的資源不容許訪問,無權限;405
: 方法禁用,服務器禁用了請求中指定的方法;406
:不接受,沒法使用請求的內容響應請求的頁面;407
: 請求者須要使用代理受權;408
: 服務器請求超時;409
: 服務器在完成請求時發生衝突;410
:請求的資源已永久刪除;411
: 須要有效長度。服務器不接受不含有效內容長度標頭字段的請求;412
: 服務器未知足請求者在請求中設置的其中一個前提條件;413
: 請求實體過大,超出服務器的處理能力;414
: 請求網址過長,服務器沒法處理;415
: 請求格式不被請求頁面支持;416
: 頁面沒法提供請求的範圍;417
: 服務器未知足指望請求標頭字段的要求;(5)、5xx(服務器錯誤)
500
: 服務器內部錯誤,沒法完成請求;501
: 請求尚未被實現,服務器不具有完整的請求功能;502
: 錯誤網關,服務器做爲網關或代理,從上游服務器收到無效響應;503
: 服務不可用;504
:網關超時,服務器做爲網關或代理。可是沒有及時從上游服務器收到請求;505
:HTTP
版本不支持,服務器不支持請求中所用的HTTP
協議版本。IE
採用的是冒泡型事件,而DOM
是先捕獲後冒泡事件;咱們能夠看個例子:
<body>
<div>
<button>點擊</button>
</div>
</body>
// 冒泡型事件模型: button->div->body (IE事件流)
// 捕獲型事件模型: body->div->button (Netscape事件流)
// DOM事件模型: body->div->button->button->div->body (先捕獲後冒泡)
複製代碼
ie
沒有回調函數,只能進行冒泡;addEventListener()
,支持attachEvent
,第一個參數須要加on
;IE
指向windows
,不指向觸發的函數;html
頁面添加交互行爲;html
頁面,或單獨寫成js文件。建議單獨寫成文件,有利於結構和行爲分離,利於維護;windows
,linux
等;首先咱們須要知道:javascript是由ECMAScript,DOM,BOM三部分構成的。
ECMAScript
是一種語言,是對規定的語法,操做,關鍵字,語句的一個描述,javascript
實現了ECMAScript
;DOM
是文檔對象模型,包括了獲取元素,修改樣式以及操做元素等三方面的內容,也是一般咱們用的最多的操做,其提供了不少兼容性的寫法;BOM
是瀏覽器對象模型,包括瀏覽器的一些操做,window.onload
, window.open
等還有瀏覽器時間,監聽窗口的改變onresize
,監聽滾動事件onscroll
等;(1)、在一個標籤內使用localStorage
。setItem(key, value)
添加(刪除或修改)內容;
(2)、在另外一個標籤頁面監聽storage
事件;
(3)、獲得localStorage
存儲的值,便可實現不用頁面之間的通訊。
(1)、將要傳遞的信息存儲在cookie
中,能夠設置定時讀取cookie
的信息,便可隨時獲取想要傳遞的信息。
(1)、webworker
做爲瀏覽器的一個新特性,能夠提供一個額外的線程來執行一些js代碼,而且對瀏覽器用戶界面不影響;
(2)、普通的Webworker
用 new worker()
便可建立,這種webworker
是當前頁面專有的。而後還有種共享worker(SharedWorker)
,這種是能夠多個標籤頁、iframe
共同使用;
(1)、SharedWorker
能夠被多個window
共同使用,但必須保證這些標籤頁都是同源的(相同的協議,主機和端口號);
內存泄露是指一塊被分配的內存既不能使用,又不能回收,直到瀏覽器進程結束。
如下幾點回形成內存泄露:
dom
的引用);setTimeout
的第一個參數是字符串而不是函數的時候也會形成內存泄露(解決:儘可能不要講第一個參數定義爲字符串);DOM
元素(解決: 手動刪除);javascript
具備自動垃圾回收機制,垃圾器回收會按照固定的時間間隔週期性的執行。
常見的垃圾回收機制有兩種: 標記清除,引用計數。
原理: 當變量進入環境時,將這個變量標記爲「進入環境」。當變量離開時,則將其標記爲「離開環境」。標記「離開環境」的就回收內存。
工做流程:
原理: 跟蹤記錄每一個值被引用的次數,聲明一個變量,並將引用 類型賦值給這個變量,則這個值的引用次數+1
,當變量的值變成了另外一個,則這個值的引用次數-1
,當值的引用次數爲0
的時候,就回收。
工做流程:
1
;+1
;-1
;0
的值所佔的內存;Boolean
, String
, Number
, Null
, Undefined
, Symbol
(新增))的值保存在內存中。從一個變量向另外一個變量賦值基本類型的值,會建立這個值的一個副本;object
)的值是個對象,保存在堆內存中。🌈🌈注意:
javascript
不容許直接訪問內存中的位置,也就是不能直接訪問操做對象的內存空間。在操做對象時,實際上在操做對象的引用而不是實際的對象;(1)、堆和棧空間分配的區別
(2)、堆和棧緩存方式的區別
(3)、堆和棧結構區別
(1)、DNS解析
DNS
緩存;DNS
緩存;hosts
文件;DNS
服務器發起請求;.win
系統若沒有好到,能夠操做系統查找NetBIOS name cache
或查詢wins
服務器或廣播查找或讀取LMHOSTS文件;(若以上都沒有,則解析失敗)
(2)、TCP三次握手
(3)、瀏覽器向服務器發送http請求
一旦創建了TCP
連接,web
瀏覽器就會向web
服務器發送請求命令。
(4)、瀏覽器發送請求頭信息
瀏覽器發送其請求命令以後,還要以頭信息的形式想web
服務器發送一些別的信息,以後瀏覽器發送了一空白行開通知服務器,它已經結束了該頭信息的發送。
(5)、服務器處理請求
服務器收到http
請求以後,肯定用相應的一眼來處理請求。讀取參數並進行邏輯操做後,生成指定的數據。
(6)、服務器作出響應
客戶端向服務器發送請求後,服務端向客戶端作出應答。
(7)、服務器發送應答頭信息
正如客戶端會隨同請求發送關於自身的信息同樣,服務器也會隨同應答向用戶發送關於它本身的數據以及被請求的文檔。
(8)、服務器發送數據
web
服務器向瀏覽器發送信息後,它會發送一個空白行來表示頭信息的發送到此結束。接着,它會以Content-Type
應答頭信息所描述的格式發送用戶所請求的實際數據。
(9)、 TCP關閉(四次揮手)
通常狀況下,一旦web
服務器向瀏覽器發送了請求數據,它就要關閉tcp
連接。若是瀏覽器或服務器在其頭信息加入了Connection:keep-alive
,則會保持長鏈接狀態,也就是TCP連接在發送後仍保持打開狀態,瀏覽器能夠繼續經過仙童的連接發送請求。
(優勢:保持連接節省了爲每一個請求創建新連接所屬的時間,還節約了網絡寬帶 )
通常狀況下,javascript
會更快。javascript
是一種客戶端語言,所以它不須要web
服務器的協助來執行。另外一方面,ASP
是服務端語言,所以老是比javascript
慢。可是須要注意的是:javascript
如今也能夠用於服務端語言(例如nodejs
)。
java
是一門十分完整,成熟的編程語言;相比之下,javascript
是一個能夠被引入HTML
頁面的編程語言。這兩種語言並非徹底相互依賴的,而是真對不一樣的意圖而設計的。java
是一種面向對象編程(OOPS
)或結構化的編程語言,相似於C++
和C
;而javascript
是客戶端腳本語言,它被稱爲非結構化編程。負無窮大是javascript
中的一個數字,能夠經過將負數除以零獲得。
conosle.log(b);
// Uncaught ReferenceError: conosle is not defined
at <anonymous>:1:1
複製代碼
undefined
。let c;
console.log(c); // undefined
複製代碼
定時器用於在設定的時間執行一段代碼,或者在給定的時間間隔內重複該代碼。經過函數setTimeout
、setInterval
和clearInterval
來完成。
function
, delay
)函數用於移動在所述延遲以後調用特定功能的定時器;function
,delay
)函數用於在提到的延遲中重複執行給定的功能,只有在取消時才能中止;id
)函數指示定時器中止;🌈🌈注意: 定時器在一個線程內運行,所以事件可能須要排隊等待執行;
web
應用程序中的全部頁面上訪問的用戶特定數據;delete
操做符用於刪除程序中的全部變量或對象,可是不能刪除使用var
關鍵字聲明的變量。
console.log(5 + 8 + '7'); // 137
console.log(5 + '8' + 7); // 587
複製代碼
能夠這樣理解:連續的整數能夠直接相加,字符串直接相連。
innerHTML
’同樣使用;+=like "innerHTML = innerHTML + 'html'"
,舊的內容仍然會被html
替換;innerHTML
內容被從新解析並構建成元素,所以它的速度會慢不少;innerHTML
不提供驗證,所以可能會在文檔中插入有效的和破壞性的HTML
並將其中斷;JS的錯誤類型通常包含六種常見的派生錯誤以及手動拋出錯誤類型。
(1)、常見的幾種錯誤類型
eval()
函數沒有被正確執行時,會拋出evalError
錯誤;通常狀況下,當頁面首先加載腳本時,加載期間頁面的HTML
代碼將會暫停解析,直到腳本加載完才能執行。
因此會出現這麼一種狀況,就是當服務器速度很慢或者腳本很沉重的狀況下,會致使網頁延遲。在使用Defer
時,腳本會延遲執行直到html
解析器運行完成。這極大程度上減小了加載時間,提高了顯示速度。
encodeURI()
用於將URL
轉爲十六進制編碼,而decodeURI()
用於將編碼的URL
轉換成正常的URL
。
哈希表(亦稱散列表),是根據關鍵碼值直接進行訪問的數據結構。也就是說,它經過把關鍵碼映射到表中一個位置來訪問記錄,以加快查找的速度。這個映射函數也稱散列函數,存放記錄的數組叫作散列表。
nodeType === 1
;nodeType === 2
;nodeType === 3
;innerHTML
(元素內包含的內容);outerHTML
(本身以及元素內的內容);offsetWidth/offsetHeight
(content
寬/高 + padding
寬/高 + border
寬/高);clientWidth/clientHeight
(content
寬/高 + padding
寬/高);CSS
、JS
文件;CSS
、JS
文件,減小http
請求;JS
、CSS
放在最底層;DOM
操做,儘量使用變量代替沒必要要的DOM
操做;gzip
壓縮;AJAX
對象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)
);open
打開鏈接,格式爲open
(請求方式,'請求路徑',同步/異步);send()
;ajax
對象完成第四步(onreadystatechange)
,數據接收完成。再判斷對象狀態碼(readystate)
當狀態碼爲成功接收的狀態碼時,HTTP
響應徹底接收 。 再判斷http
響應狀態(200-300
之間或者304
),(緩存)執行回調函數 獲取的數據轉成字符串格式(responseText)
。缺點:
ajax
下的先後退功能成本比較大;瀏覽器緩存(Browser Caching)是爲了加速瀏覽,瀏覽器在用戶磁盤上歲最近請求過的文檔進行存儲,當用戶再次訪問這個文檔時,瀏覽器會從本地磁盤顯示此文檔,從而提高頁面加載速率。
cache-control
中的max-age
是實現內容cache
的重要手段,經常使用的策略有如下三種:
max-age
和ETag
的組合;max-age
;max-age
和Last-Modified
(If-Modified-Since)的組合;在此,拓展一下有關強制緩存(200)和協商緩存(304)部分的內容。
respone header
裏面對該文件作了緩存配置。強制緩存不會向服務器發送請求,直接從緩存中讀取資源,在chrome
控制檯的network
選項中能夠看到該請求返回200
的狀態碼;Etag
和Last-Modified
經過請求發給服務器,由服務器校驗,返回狀態碼304
時,瀏覽器就能夠直接使用緩存。共同點: 都是從客戶端中讀取數據;
區別: 強緩存不會發出請求,協商緩存會發出請求。
緩存中header(頭部)的參數:
(1)、強制緩存:
response header
裏的過時時間,瀏覽器再次加載資源時,若是在這個過時時間內,則命中強緩存。max-age=120
時,則表明在這個請求正確返回時間(瀏覽器也會記錄下來)的2
分鐘內再次加載資源,就會命中強緩存。(2)、協商緩存
hash
,每一個文件惟一。web
服務器響應請求時,告訴瀏覽器當前資源在服務器的惟一標識(生成規則由服務器決定);Cache-Control
標識的max-age
),發現資源具備Etag
聲明,則再次向web
服務器請求時帶上頭If-None-Match
(Etag的值)。web
服務器收到請求後發現有頭If-None-Match
則與被請求資源的相應校驗串進行比對,決定是否命中協商緩存;header
中會加上Last-Modify
,Last-modify
是一個時間標識該資源的最後修改時間;當瀏覽器再次請求該資源時,request
的請求頭中會包含If-Modify-Since
,該值爲緩存以前返回的Last-Modify
。服務器收到If-Modify-Since
後,根據資源的最後修改時間判斷是否命中緩存;🌈🌈注意:
Etag
要優於Last-Modified
;Etag
;Etag
要遜於Last-Modified
。這裏,小編的理解是:虛擬DOM
是真實DOM
的內存表示,是一種編程概念,一種模式。它的做用是判斷DOM
是否改變、哪些部分須要被從新渲染。這樣,不須要操縱真實的DOM
,同時極大的提升了React
的性能。
虛擬DOM
使用diff
算法,當咱們屢次修改某一部分的內容時,首先在虛擬DOM
樹從上至下進行同層比對(不影響真實DOM
),上層發生變化,下層從新渲染,直到最後修改完成,再在真實DOM
中渲染。
使用虛擬DOM
的緣由是,能夠極大程度上減小DOM
節點的迴流和重繪問題,節約資源,提高運行效率。
DOM
不會進行重排和重繪;DOM
進行頻繁的修改,而後一次性比較並修改真實DOM
中須要修改的部分,最後進行迴流和重繪,有效的減小了過多DOM
節點回流和重繪資源消耗的問題;DOM
有效下降大面積(真實DOM
節點)的迴流和重繪,由於最終與真實DOM
比較差別,能夠局部渲染。協議、域名、端口號不一樣--跨域(也能夠理解爲協議、域名、端口號相同--同源策略)
解決跨域的幾種辦法:
document.domain + iframe
(只有在主域相同的狀況下才能使用);script
;location.hash + iframe
;window.name + iframe
;postMessage
(HTML5
中的XMLHttpRequest Level 2
中的API
);CORS
(跨域資源共享);jsonp
;websockets
;跨站腳本攻擊,黑客將惡意腳本代碼植入到頁面中從而實現盜取用戶信息等操做(注意這裏操做的是用戶,攻擊的方式只是代碼的嵌入)。
預防措施:
post
,對get
使用時儘可能對路徑長度作限制;httponly
來方式黑客經過腳本獲取用戶cookie
數據。跨站請求僞造,黑客假裝成用戶身份來執行一些非用戶自願的惡意以及非法操做(注意,這裏是黑客假裝成用戶操做)。
預防措施:
token id
令牌;reFerer
是否正確;CSRF
須要登錄後操做,XSS
不須要;CSRF
是請求頁面api
來實現非法操做,XSS
是向當前頁面植入js
腳原本修改頁面內容。瀏覽器端異步和服務器端同步的模塊化編程規範。
CommonJS:是爲了解決 JavaScript
的做用域問題而定義的模塊形式,可使每一個模塊它自身的命名空間中執行。該規範的主要內容是,模塊必須經過 module.exports
導出對外的變量或接口,經過 require()
來導入其餘模塊的輸出到當前模塊做用域中,module
標識模塊自己。
AMD:是全局定義的,當即執行函數提供 module
和 exports
兩個外部變量,模塊就放在這個當即執行函數裏面。模塊的輸出值放在 module.exports
之中,這樣就實現了模塊的加載。
var func = function() {};
定義的函數;區別:
undefined
;javascript
訪問不會報錯;檢測方式:
null
是一種特殊的object
,表示無值;console.log(typeof null); // object
const a = null;
if(!a && typeof(a) !== 'undefined' && a!==0) {
alert('a is null')
} else {
alert('a is not null')
}
複製代碼
undefined
: 是聲明但未賦值的變量;const a = undefined;
if(typeof(a) === 'undefined') {
alert('a is undefined')
} else {
alert('a is not undefined')
}
複製代碼
undeclared
:undeclared
是未聲明也未賦值的變量,JavaScript
訪問會報錯。JS
中,對象是引用類型的數據,其優勢在於頻繁的修改對象時都是在原對象的基礎上修改的,並不須要進行從新建立,這樣就能夠有效的利用內存,不會形成內存空間的浪費;immutable
對象時,都會建立一個新的不可變對象,在新對象上的操做不會影響到原對象的數據。Promise
是異步編程的一種解決方案,比傳統的解決方案 回調函數和事件 更合理和更強大。它由社區最先提出和實現,ES6
將其寫進了語言標準,統一了用法,原生提供了Promise
對象。
所謂Promise
,簡單說就是一個容器,裏面保存着某個將來纔會結束的事件(一般是一個異步操做)的結果。從語法上說,Promise
是一個對象,從它能夠獲取異步操做的消息。Promise
提供統一的API
,各類異步操做均可以用一樣的方法進行處理。
有了Promise
對象,就能夠將異步操做以同步操做的流程表達出來,避免了層層嵌套的回調函數。此外,Promise
對象提供統一的接口,使得控制異步操做更加容易。
但Promise
同時存在一些缺點,例如:
Promise
,一旦新建它就會當即執行,沒法中途取消;Promise
內部拋出的錯誤,不會反應到外部;Pending
狀態時,沒法得知目前進展到哪個階段(剛剛開始仍是即將完成)。UA
字符串因爲被瀏覽器廠商能夠隨意修改,所以給使用者的感受不太靠譜。Function.prototype.bind
方法會建立一個新的函數,當這個新函數被調用時,它的this
值是傳給bind()
的第一個參數,它的參數是bind()
的其它參數和其本來的參數。
關於javascript
部分的整理,就先整理到這裏吧,後繼會持續更新。有關開發性能優化篇小編還在整理當中,可是因爲最近項目壓身,可能會延遲一丟丟吧(生活不易且珍惜🌻🌻)。
整理的過程當中,不免會有疏漏,如果看到有誤或者須要補充的知識點,歡迎留言小編💌💌。