js总结一
1?懶加載
1.1?什么是懶加載？
懶加載也就是延遲加載，當(dāng)訪問(wèn)一個(gè)頁(yè)面的時(shí)候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑(這樣就只需請(qǐng)求一次，俗稱占位圖)， 只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片正真的路徑，讓圖片顯示出來(lái)。這就是圖片懶加載。
1.2?為什么要使用懶加載？
很多頁(yè)面很長(zhǎng)，圖片很多，圖片很大，頁(yè)面如果一次性加載完畢會(huì)消耗很多的時(shí)間。
1.3?懶加載的原理是什么？
頁(yè)面中的img元素，如果沒(méi)有src屬性，瀏覽器就不會(huì)發(fā)出請(qǐng)求去下載圖片，只有通過(guò)javascript設(shè)置了圖片路徑，瀏覽器才會(huì)發(fā)送請(qǐng)求。 懶加載的原理就是先在頁(yè)面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位，把真正的路徑存在元素的“data-url”屬性里，要用的時(shí)候就取出來(lái)，再設(shè)置。
1.4?懶加載的實(shí)現(xiàn)步驟？
不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。 頁(yè)面加載完成后，根據(jù)scrollTop判斷圖片是否在用戶的視野內(nèi)，如果在，則將data-original屬性中 的值取出存放到src屬性中。 在滾動(dòng)事件中重復(fù)判斷圖片是否進(jìn)入視野，如果進(jìn)入，則將data-original屬性中的值取出存 放到src屬性中。
2?預(yù)加載
2.1?什么是預(yù)加載？
提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。
2.2?為什么使用預(yù)加載
圖片預(yù)先加載到瀏覽器中，訪問(wèn)者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。這對(duì)圖片畫(huà)廊及圖片占據(jù)很大比例的網(wǎng)站來(lái)說(shuō)十分有利，它保證了圖片快速、無(wú)縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。
2.3?怎么實(shí)現(xiàn)預(yù)加載
2.3.1?CSS和JavaScript實(shí)現(xiàn)預(yù)加載
1，單純使用CSS，可容易、高效地預(yù)加載圖片
2，使用上述加載的圖片會(huì)同頁(yè)面的其他內(nèi)容一起加載，增加了頁(yè)面的整體加載時(shí)間。為了解決這個(gè)問(wèn)題，我們?cè)黾恿艘恍㎎avaScript代碼，來(lái)推遲預(yù)加載的時(shí)間，直到頁(yè)面加載完畢。
function preloader() {
if (document.getElementById) { document.getElementById("preload-
01").style.background = "url(http://domain.tld/image-01.png)?no-repeat
-9999px -9999px";
document.getElementById("preload- 02").style.background = "url(http://domain.tld/image-02.png)?no-repeat
-9999px -9999px";
document.getElementById("preload- 03").style.background = "url(http://domain.tld/image-03.png)?no-repeat
-9999px -9999px";
}
}
2.3.2?JavaScript實(shí)現(xiàn)預(yù)加載
| ? | |
| ? | ? |
2.3.3?Ajax
使用Ajax，加載文件不會(huì)應(yīng)用到加載頁(yè)面上。從這點(diǎn)上看，
Ajax方法優(yōu)越于JavaScript。
| ? | |
| ? | ? |
setTimeout(function() {
// reference to <head> var head =
document.getElementsByTagName('head')[0];
// a new CSS var css =
document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href?=
"http://domain.tld/preload.css";
// a new JS var?js =
document.createElement("script"); js.type = "text/javascript"; js.src =
"http://domain.tld/preload.js";
// preload JS and CSS head.appendChild(css); head.appendChild(js);
// preload image new Image().src?=
"http://domain.tld/preload.png";
}, 1000);
};
3?線程和進(jìn)程的區(qū)別
3.1?進(jìn)程
進(jìn)程是具有一定獨(dú)立功能的程序關(guān)于某個(gè)數(shù)據(jù)集合上的一次運(yùn)行活動(dòng),進(jìn)程是系統(tǒng)進(jìn)行資源分配和調(diào)度的一個(gè)獨(dú)立單位.
3.2?線程
線程是進(jìn)程的一個(gè)實(shí)體,是CPU調(diào)度和分派的基本單位,它 是比進(jìn)程更小的能獨(dú)立運(yùn)行的基本單位.線程自己基本上不擁有系統(tǒng)資源,只擁有一點(diǎn)在運(yùn)行中必不可少的資源,但是它可與 ?同屬一個(gè)進(jìn)程的其他的線程共享進(jìn)程所擁有的全部資源.
3.3?區(qū)別
進(jìn)程和線程的主要差別在于它們是不同的操作系統(tǒng)資源管理方式。進(jìn)程有獨(dú)立的地址空間，一個(gè)進(jìn)程崩潰后，在保護(hù)模式下不會(huì)對(duì)其它進(jìn)程產(chǎn)生影響，而線程只是一個(gè)進(jìn)程中的不同執(zhí)行路徑。線程有自己的堆棧和局部變量，但線程之間沒(méi)有單獨(dú)的地址空間，單線程應(yīng)用的線程死掉就等于整個(gè)進(jìn)程死掉，所以多進(jìn)程的程序要比單線程的程序健壯。
4?如何判斷變量類型
如何判斷一個(gè)變量是對(duì)象還是數(shù)組
4.1?length屬性
對(duì)象沒(méi)有l(wèi)ength屬性值，其值為unde?end。
數(shù)組的length值為number類型，一般不用，當(dāng)對(duì)象的屬性存在length。
4.2?instanceof
| ? | |
| ? | ? |
4.3?constructor
| ? | |
| ? | ? |
| ? | |
| ? | ? |
4.4?toString
| ? | |
| ? | ? |
toString()方法，數(shù)組原型和對(duì)象原型定義的toString()方法不同
5?GET和POST
GET - 從指定的資源請(qǐng)求數(shù)據(jù)。
POST - 向指定的資源提交要被處理的數(shù)據(jù)
5.1?一般答案
GET使用URL或Cookie傳參。而POST將數(shù)據(jù)放在BODY
中。
GET的URL會(huì)有長(zhǎng)度上的限制，則POST的數(shù)據(jù)則可以非常大。
POST比GET安全，因?yàn)閿?shù)據(jù)在地址欄上不可見(jiàn)。
5.2?其他答案
瀏覽器。據(jù)說(shuō)早期的瀏覽器會(huì)對(duì)URL長(zhǎng)度做限制。據(jù)說(shuō)IE 對(duì)URL長(zhǎng)度會(huì)限制在2048個(gè)字符內(nèi)。
服務(wù)器。URL長(zhǎng)了，對(duì)服務(wù)器處理也是一種負(fù)擔(dān)。如果有人惡意地構(gòu)造幾個(gè)幾M大小的URL，并不停地訪問(wèn)你的服務(wù)器。服務(wù)器的最大并發(fā)數(shù)顯然會(huì)下降。另一種攻擊方式是，把告訴服務(wù)器Content-Length是一個(gè)很大的數(shù)，然后只給服務(wù)器發(fā)一點(diǎn)兒數(shù)據(jù)，服務(wù)器消耗很大。有鑒于此， 多數(shù)服務(wù)器出于安全啦、穩(wěn)定啦方面的考慮，會(huì)給URL長(zhǎng)度加限制。但是這個(gè)限制是針對(duì)所有HTTP請(qǐng)求的，與GET、POST沒(méi)有關(guān)系。
6?session和Cookie的區(qū)別
6.1?HTTP協(xié)議
協(xié)議：指計(jì)算機(jī)通信網(wǎng)絡(luò)中兩臺(tái)計(jì)算機(jī)之間進(jìn)行通信所必須共同遵守的規(guī)定或規(guī)則，超文本傳輸協(xié)議(HTTP)是一種通信協(xié)議，它允許將超文本標(biāo)記語(yǔ)言(HTML)文檔從Web服務(wù)器傳送到客戶端的瀏覽器。
HTTP協(xié)議：無(wú)狀態(tài)的協(xié)議。一旦數(shù)據(jù)交換完畢，客戶端與服 ?務(wù)器端的連接就會(huì)關(guān)閉，再次交換數(shù)據(jù)需要建立新的連接。這就意味著服務(wù)器無(wú)法從連接上跟蹤會(huì)話。
6.2?會(huì)話跟蹤
用戶登錄網(wǎng)站后的一系列動(dòng)作，比如瀏覽商品添加到購(gòu)物車并購(gòu)買(mǎi)。會(huì)話(Session)跟蹤是Web程序中常用的技術(shù)，用來(lái)跟蹤用戶的整個(gè)會(huì)話。常用的會(huì)話跟蹤技術(shù)。是Cookie與Session。Cookie通過(guò)在客戶端記錄信息確定用戶身份，Session通過(guò)在服務(wù)器端記錄信息確定用戶身份。
6.3?Cookie
| ? | |
| ? | ? |
HTTP是一種無(wú)狀態(tài)的協(xié)議，服務(wù)器單從網(wǎng)絡(luò)連接上無(wú)從 知道客戶身份。用戶A購(gòu)買(mǎi)了一件商品放入購(gòu)物車內(nèi)，當(dāng)再次購(gòu)買(mǎi)商品時(shí)服務(wù)器已經(jīng)無(wú)法判斷該購(gòu)買(mǎi)行為是屬于用戶A的會(huì)話還是用戶B的會(huì)話了。服務(wù)器Cookie對(duì)客戶進(jìn)行辨別。
Cookie實(shí)際上是一小段的文本信息?？蛻舳苏?qǐng)求服務(wù) 器，如果服務(wù)器需要記錄該用戶狀態(tài)，就使用response向客戶端瀏覽器頒發(fā)一個(gè)Cookie?？蛻舳藭?huì)把Cookie保存起來(lái)。當(dāng)瀏覽器再請(qǐng)求該網(wǎng)站時(shí)，瀏覽器把請(qǐng)求的網(wǎng)址連同該Cookie一同提交給服務(wù)器。服務(wù)器檢查該Cookie，以此來(lái)辨認(rèn)用戶狀態(tài)。服務(wù)器還可以根據(jù)需要修改Cookie的內(nèi)容。Cookie具有不可跨域名性,瀏覽器訪問(wèn)網(wǎng)易不會(huì)帶上騰訊的cookie。
6.4?Session
| ? | |
| ? | ? |
Sessions在服務(wù)器記錄客戶端信息?？蛻舳藶g覽器訪問(wèn)服務(wù)器的時(shí)候，服務(wù)器把客戶端信息以某種形式記錄在服務(wù)器上。這就是Session?？蛻舳藶g覽器再次訪問(wèn)時(shí)只需要從該Session中查找該客戶的狀態(tài)就可以了。每個(gè)用戶訪問(wèn)服務(wù)器都會(huì)建立一個(gè)session，通過(guò)SessionId對(duì)用戶進(jìn)行識(shí)別。
6.5?總結(jié)
cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
cookie不是很安全，別人可以分析存放在本地的cookie并進(jìn)行cookie欺騙，考慮到安全應(yīng)當(dāng)使用session。
session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多， 會(huì)比較占用你服務(wù)器的性能，考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie。
單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
可以考慮將登陸信息等重要信息存放為session，其他信息如果需要保留，可以放在cookie中。
7?call?和apply的區(qū)別
7.1?call
| ? | |
| ? | ? |
a對(duì)象的方法應(yīng)用到b對(duì)象上
7.1.1?繼承式
一個(gè)對(duì)象沒(méi)有這個(gè)方法，就繼承另外一個(gè)對(duì)象的方法。
| ? | |
| ? | ? |
7.1.2?替換式
A對(duì)象里面有name的屬性，但是沒(méi)有值，就借用了B對(duì)象的A對(duì)象里面有name的屬性的值。
| ? | |
| ? | ? |
7.1.3?實(shí)例繼承
一個(gè)對(duì)象繼承另外一個(gè)對(duì)象
| ? | |
| ? | ? |
7.1.4?帶有構(gòu)造函數(shù)
| ? | |
| ? | ? |
7.2?apply
| ? | |
| ? | ? |
劫持另外一個(gè)對(duì)象的方法，繼承另外一個(gè)對(duì)象的屬性.
| ? | |
| ? | ? |
實(shí)例：
| ? | |
| ? | ? |
8?數(shù)據(jù)類型
8.1?基本數(shù)據(jù)類型
Number、String?、Boolean、Null和Unde?ned，保存在棧內(nèi)存。
8.2?引用類型數(shù)據(jù)
對(duì)象類型Object type，比如：Object 、Array 、Function 、Data等。javascript的引用數(shù)據(jù)類型是保存在堆內(nèi)存中的對(duì)象。引用類型數(shù)據(jù)在棧內(nèi)存中保存的實(shí)際上是對(duì)象在堆內(nèi)存中的引用地址。通過(guò)這個(gè)引用地址可以快速查找到保存中堆內(nèi)存中的對(duì)象。
8.3?區(qū)別
8.3.1?存儲(chǔ)位置
基本數(shù)據(jù)類型是存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段。引用類型，存儲(chǔ)在堆(heap)中的對(duì)象，也就是說(shuō)，存儲(chǔ)在變量處的值是一個(gè)指針(point)，指向存儲(chǔ)對(duì)象的內(nèi)存地址。
8.3.2?訪問(wèn)機(jī)制
javascript中不允許直接訪問(wèn)堆內(nèi)存中的對(duì)象，訪問(wèn)一個(gè) 對(duì)象時(shí)，首先得到的是這個(gè)對(duì)象在堆內(nèi)存中的地址,按照這個(gè)地址去獲得這個(gè)對(duì)象中的值，
原始類型的值則是可以直接訪問(wèn)到的
8.3.3?復(fù)制變量的不同
基本類型復(fù)制后的值是不同的兩個(gè)值。
引用類型復(fù)制后，只是不同的指針，但是都是指向同一個(gè)對(duì)象。
8.3.4?參數(shù)傳遞的不同
基本類型把變量里的值傳遞給參數(shù)，之后參數(shù)和這個(gè)變量互不影響。
引用類型對(duì)象變量它里面的值是這個(gè)對(duì)象在堆內(nèi)存中的內(nèi)存地址。
9?瀏覽器渲染機(jī)制
10?http請(qǐng)求理解
10.1?URL的理解
web瀏覽器、服務(wù)器和相關(guān)的web應(yīng)用程序都是通過(guò)HTTP相互通信的，HTTP是現(xiàn)代的全球因特網(wǎng)中使用的通用語(yǔ)言。JPEG圖片、HTML頁(yè)面、文本文件、MPEG電影、WAV 音頻文件、Java程序等都是存儲(chǔ)在web服務(wù)器上的資源， HTTP可以從全世界的web服務(wù)器上將這些資源迅速、便捷可靠地傳送到客戶端、瀏覽器或者其他應(yīng)用程序。下面用一次瀏覽器通過(guò)HTTP訪問(wèn)位于遠(yuǎn)端服務(wù)器上的一個(gè)HTML頁(yè)面資源的全過(guò)程加深對(duì)HTTP的理解。
10.2?訪問(wèn)資源的過(guò)程
瀏覽器從URL中解析出服務(wù)器的主機(jī)名(域名)；
瀏覽器將服務(wù)器主機(jī)名通過(guò)DNS(域名服務(wù))轉(zhuǎn)換成服務(wù) ?器的IP地址；
瀏覽器將端口號(hào)從URL中解析出來(lái)；
瀏覽器建立一條與web服務(wù)器的TCP(傳輸控制協(xié)議)連 接；
瀏覽器向服務(wù)器發(fā)送一條HTTP請(qǐng)求報(bào)文； 服務(wù)器向客戶端發(fā)送一條HTTP響應(yīng)報(bào)文； 關(guān)閉連接，瀏覽器顯示文檔。
10.3?深入理解
10.3.1?解析主機(jī)名
瀏覽器從URL中解析出服務(wù)器的主機(jī)名。Web上可用的 每種資源 ——HTML文檔、圖像、視頻片段、程序等 - 由一個(gè)通用資源標(biāo)識(shí)符(Uniform?Resource?Identi?er,?簡(jiǎn)
稱"URI")進(jìn)行定位.URL都遵循一種標(biāo)準(zhǔn)格式。
第一部分是協(xié)議(或稱為服務(wù)方式)，說(shuō)明訪問(wèn)資源時(shí)使用的協(xié)議類型。這部分通常是HTTP協(xié)議(http://)。
第二部分是存有資源的web服務(wù)器的主機(jī)名(比如，ww?w.baidu.com)。
第三部分是主機(jī)資源的具體地址。，如目錄和文件名等。
(比如，/articles/1)。
10.3.2?轉(zhuǎn)換IP地址
瀏覽器將服務(wù)器主機(jī)名通過(guò)DNS(域名服務(wù))轉(zhuǎn)換成服 務(wù)器的IP地址。DNS(Domain?Name?System，域名系
統(tǒng))，因特網(wǎng)上作為域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)，能夠使用戶更方便的訪問(wèn)互聯(lián)網(wǎng)，而不用去記住能夠被機(jī)器直接讀取的IP數(shù)串。通過(guò)主機(jī)名，最終得到該主機(jī)名對(duì)應(yīng)的IP地址的過(guò)程叫做域名解析(或主機(jī)名解析)
10.3.3?解析端口
瀏覽器將端口號(hào)從URL中解析出來(lái)，各種傳輸協(xié)議都有默認(rèn)的端口號(hào)，http的默認(rèn)端口為80。如果輸入時(shí)省略，則 使用默認(rèn)端口號(hào)，例如，http://www.netscape.com/index.h?tml(假設(shè)使用默認(rèn)端口) 。有時(shí)候出于安全或其他考慮，?可以在服務(wù)器上對(duì)端口進(jìn)行重定義，即采用非標(biāo)準(zhǔn)端口號(hào)， 此時(shí)，URL中就不能省略端口號(hào)這一項(xiàng)，例如，http://www.?netscape.com:90/index.html?。
10.3.4?建立TCP連接
瀏覽器建立一條與web服務(wù)器的TCP(傳輸控制協(xié)議) 連接。TCP(Transmission?Control?Protocol?傳輸控制協(xié)議)是一種面向連接的、可靠的、基于字節(jié)流的傳輸層通信協(xié)議。在因特網(wǎng)協(xié)議族(Internet?protocol?suite)中，TCP
層是位于IP層之上，應(yīng)用層(HTTP就是屬于應(yīng)用層)之下的中間層。在TCP中需要用到IP和服務(wù)器上運(yùn)行特定軟件相關(guān)的TCP端口號(hào)。
10.3.5?發(fā)送報(bào)文
瀏覽器向服務(wù)器發(fā)送一條HTTP請(qǐng)求報(bào)文以及服務(wù)器向客 戶端發(fā)送一條HTTP響應(yīng)報(bào)文。從Web客戶端發(fā)往Web服務(wù)器 ?的HTTP報(bào)文稱為請(qǐng)求報(bào)文(request?message)。從服務(wù)器發(fā)往客戶端的報(bào)文稱為響應(yīng)報(bào)文(response?message)。
11?跨域
11.1?什么事跨域
跨域是指從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源。比如從www.baidu.com?頁(yè)面去請(qǐng)求 www.google.com?的資源?？缬虻膰?yán)格一點(diǎn)的定義是：只要 協(xié)議，域名，端口有任何一個(gè)的不同，就被當(dāng)作是跨域
11.2?為什么限制跨域訪問(wèn)
如果一個(gè)網(wǎng)頁(yè)可以隨意地訪問(wèn)另外一個(gè)網(wǎng)站的資源，那么就有可能在客戶完全不知情的情況下出現(xiàn)安全問(wèn)題。
11.3?跨域處理方式
11.3.1?利用script標(biāo)簽請(qǐng)求
使用script標(biāo)簽請(qǐng)求前，先進(jìn)行回調(diào)函數(shù)的申明調(diào)用
服務(wù)器返回字符串
| ? | |
| ? | ? |
11.3.2?ajax跨域
11.3.3?nodejs后臺(tái)跨域
| ? | |
| ? | ? |
12?js和jq的轉(zhuǎn)換
js它是動(dòng)態(tài)的弱類型的語(yǔ)言，是JavaScript的縮寫(xiě)，而jquery是對(duì)js的封裝、擴(kuò)展，jquery是使用js封裝的框架。
12.1?js對(duì)象轉(zhuǎn)換為jquery對(duì)象
| ? | |
| ? | ? |
12.2?jquery對(duì)象轉(zhuǎn)換為原生js
| ? | |
| ? | ? |
12.3?具體代碼
| ? | |
| ? | ? |
13?Ajax
| ? | |
| ? | ? |
13.1?工作原理
在客戶端與服務(wù)端之間加了一個(gè)抽象層(Ajax引擎)，使用 戶請(qǐng)求和服務(wù)器響應(yīng)異步化，并不是所有的請(qǐng)求都提交給服務(wù)器，像一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理都交給Ajax引擎來(lái)完成， 只有確認(rèn)需要向服務(wù)器讀取新數(shù)據(jù)時(shí)才右Ajax引擎向服務(wù)器提交請(qǐng)求。
13.2?優(yōu)點(diǎn)
13.2.1?無(wú)刷新更新數(shù)據(jù)
Ajax最大的優(yōu)點(diǎn)就是能在不刷新整個(gè)頁(yè)面的情況下維持與服務(wù)器通信
13.2.2?異步與服務(wù)器通信
使用異步的方式與服務(wù)器通信，不打斷用戶的操作
13.2.3?前端與后端負(fù)載均衡
將一些后端的工作移到前端，減少服務(wù)器與帶寬的負(fù)擔(dān)
13.2.4?基于規(guī)范被廣泛支持
不需要下載瀏覽器插件或者小程序，但需要客戶允許
JavaScript在瀏覽器上執(zhí)行。
13.2.5?界面與應(yīng)用分離
Ajax使得界面與應(yīng)用分離，也就是數(shù)據(jù)與呈現(xiàn)分離
13.3?缺點(diǎn)
13.3.1?破壞History功能
Ajax干掉了Back與History功能，即對(duì)瀏覽器機(jī)制的破壞。在動(dòng)態(tài)更新頁(yè)面的情況下，用戶無(wú)法回到前一頁(yè)的頁(yè)面狀態(tài)，因?yàn)闉g覽器僅能記憶歷史紀(jì)錄中的靜態(tài)頁(yè)面。
13.3.2?安全問(wèn)題
A JAX技術(shù)給用戶帶來(lái)很好的用戶體驗(yàn)的同時(shí)也對(duì)IT企業(yè)帶來(lái)了新的安全威脅，Ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道。這使得開(kāi)發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯。
13.3.3?對(duì)搜索引擎支持較弱
13.3.4.?破壞程序的異常處理機(jī)制
13.3.5.?違背URL與資源定位的初衷
14?jq如何獲得兄弟節(jié)點(diǎn)
| ? | |
| ? | ? |
15?
| ? | |
| ? | ? |
jsonp解決跨域以及工作原理
15.1?原理
JSONP的最基本的原理是：動(dòng)態(tài)添加一個(gè)標(biāo)簽，而script
標(biāo)簽的src屬性是沒(méi)有跨域的限制的。
JSONP即JSON with Padding。由于同源策略的限制， XmlHttpRequest只允許請(qǐng)求當(dāng)前源(域名、協(xié)議、端口)的資源。如果要進(jìn)行跨域請(qǐng)求， 我們可以通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script 代碼，其中可以直接使用JSON傳遞javascript對(duì)象。 這種跨域的通訊方式稱為JSONP。
| ? | |
| ? | ? |
15.2?優(yōu)缺點(diǎn)
15.2.1?優(yōu)點(diǎn)
不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。
15.2.2?缺點(diǎn)
它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng) ?求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩 ?個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。
16?CSS
| ? | |
| ? | ? |
16.1?引入的方式
link @import
16.2?他們的區(qū)別
16.3?初始化CSS的作用以及好處
因?yàn)闉g覽器的品種很多，每個(gè)瀏覽器的默認(rèn)樣式也是不同的，所以定義一套初始化css可以使各瀏覽器的默認(rèn)樣式統(tǒng) ?一。以便項(xiàng)目在不同瀏覽器上的效果是一致的
17?HTM4和HTML5的區(qū)別
17.1?格式
如果是就是html5，其它的就是html4了，這是一個(gè)格式上的區(qū)別
17.2?起源
中....
HTML4是1999年出來(lái)的，HTML5還在持續(xù)發(fā)展變化
HTML5 是 W3C 與 WHATWG 合作的結(jié)果。W3C 指
World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟。WHATWG 指
Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于XHTML 2.0。在 2006 年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。 為 HTML5 建立的一些規(guī)則
17.3?新特性
18?瀏覽器兼容性
世界上沒(méi)有任何一個(gè)瀏覽器是一樣的，同樣的代碼在不一樣的瀏覽器上運(yùn)行就存在兼容性問(wèn)題。
不同瀏覽器其內(nèi)核亦不盡相同，相同內(nèi)核的版本不同， 相同版本的內(nèi)核瀏覽器品牌不一樣，各種運(yùn)行平臺(tái)還存在差異、屏幕分辨率不一樣，大小不一樣，比例不一樣。兼容性主要可以分類為：
##
18.1?CSS設(shè)置
1，div的垂直居中問(wèn)題： vertical-align:middle;
| ? | |
| ? | ? |
2，margin加倍的問(wèn)題
| ? | |
| ? | ? |
3，浮動(dòng)ie產(chǎn)生的雙倍距離
block與inline兩個(gè)元素：
block元素的特點(diǎn)：總是在新行上開(kāi)始，高度、寬度、行高、邊距都可以控制(塊元素)；
Inline 元素的特點(diǎn)：和其他元素在同一行上，不可控制(內(nèi)嵌元素)。
4，IE與寬度和高度的問(wèn)題
IE?不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height 當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和 高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min- width和min-height的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。 比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。
要解決這個(gè)問(wèn)題，可以這樣：
| ? | |
| ? | ? |
5，頁(yè)面的最小寬度
min -width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。
但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把width當(dāng)做最小寬度來(lái)使。為了讓這一命令在IE上也能用，可以把一個(gè)
放到 標(biāo)簽下，然后為div指定一個(gè)類，然后CSS這樣設(shè)計(jì)：
第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太 正規(guī)。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。
6，DIV浮動(dòng)IE文本產(chǎn)生3象素的bug 左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距.
| ? | |
| ? | ? |
7，IE捉迷藏的問(wèn)題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。 有些內(nèi)容顯示不出來(lái)，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域時(shí)發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。
解決辦法：對(duì)#layout使用line-height屬性或者給#layout使 用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。
| ? | |
| ? | ? |
8，?oat的div閉合；清除浮動(dòng)；自適應(yīng)高度實(shí)例1
實(shí)例2
| ? | |
| ? | ? |
作為外部 wrapper?的 div?不要定死高度，為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上over?ow:hidden; 當(dāng)包含?oat 的 box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無(wú)效，這時(shí)候應(yīng)該觸發(fā)IE 的layout私有屬性(萬(wàn)惡的IE啊！)用zoom:1;可以做到，這樣就達(dá)到了兼容。
例如某一個(gè)wrapper如下定義： .colwrapper{ over?ow:hidden; zoom:1; margin:5px?auto;}
9，高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin?或padding?時(shí)。例：
| ? | |
| ? | ? |
解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代
碼：.1{height:0px;over?ow:hidden;}或者為div加上 border
屬性。
10，IE6下為什么圖片下有空隙產(chǎn)生
解決這個(gè)BUG的方法也有很多，可以是改變html的排版，或者設(shè)置img 為display:block 或者設(shè)置vertical-align 屬性為vertical-align:top |?bottom |middle |text-bottom 都可以解決。
13，如何對(duì)齊文本與文本輸入框
14，web標(biāo)準(zhǔn)中定義id與class有什么區(qū)別嗎
web標(biāo)準(zhǔn)中是不容許重復(fù)id的，比如 div id="aa" 不容許重復(fù)2次，而class 定義的是類，理論上可以無(wú)限重復(fù)，這樣需要多次引用的定義便可以使用他；
屬性的優(yōu)先級(jí)問(wèn)題 id 的優(yōu)先級(jí)要高于class，看上面的例子三.方便JS等客戶端腳本，如果在頁(yè)面中要對(duì)某個(gè)對(duì)象進(jìn)行腳本操作，那么可以給他定義一個(gè)id，否則只能利用遍歷頁(yè)面元素加上指定特定屬性來(lái)找到它，這是相對(duì)浪費(fèi)時(shí)間資源，遠(yuǎn)遠(yuǎn)不如一個(gè)id來(lái)得簡(jiǎn)單。
15，li中內(nèi)容超過(guò)長(zhǎng)度后以省略號(hào)顯示的方法 (此方法適用與IE與OP瀏覽器)
| ? | |
| ? | ? |
16，eb標(biāo)準(zhǔn)中IE無(wú)法設(shè)置滾動(dòng)條顏色了
17， 為什么無(wú)法定義1px左右高度的容器
| ? | |
| ? | ? |
18，怎么樣才能讓層顯示在Flash之上呢
| ? | |
| ? | ? |
19，怎樣使一個(gè)層垂直居中于瀏覽器中
這里我們使用百分比絕對(duì)定位，與外補(bǔ)丁負(fù)值的方法，負(fù)值的大小為其自身寬度高度除以二
18.2?javascript兼容
1，關(guān)于獲取行外樣式 currentStyle 和 getComputedStyle
出現(xiàn)的兼容性問(wèn)題。
js通過(guò)style不可以獲取行外樣式，當(dāng)我們需要獲取行外樣式時(shí):
我們一般通過(guò)這兩個(gè)方法獲取行外樣式：
(1)?IE下: currentStyle
(2)?Chrome,FF下: getComputedStyle(oDiv,false)
兼容兩個(gè)瀏覽器的寫(xiě)法:
| ? | |
| ? | ? |
| ? | |
| ? | ? |
2，用“索引”獲取字符串每一項(xiàng)出現(xiàn)的兼容性問(wèn)題
對(duì)于字符串也有類似于 數(shù)組 這樣的通過(guò) 下標(biāo)索引 獲取每一項(xiàng)的值,
| ? | |
| ? | ? |
3，DOM中 childNodes 獲取子節(jié)點(diǎn)出現(xiàn)的兼容性問(wèn)題
childNodes:獲取子節(jié)點(diǎn),
IE6-8:獲取的是元素節(jié)點(diǎn),正常
高版本瀏覽器:但是會(huì)包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)(不正常)
解決方法: 使用nodeType:節(jié)點(diǎn)的類型，并作出判斷
nodeType=3-->文本節(jié)點(diǎn)nodeTyPE=1-->元素節(jié)點(diǎn)
例: 獲取ul里所有的子節(jié)點(diǎn)，讓所有的子節(jié)點(diǎn)背景色變成紅色
| ? | |
| ? | ? |
注：上面childNodes為我們帶來(lái)的困擾完全可以有children 屬性來(lái)代替。
children屬性:只獲取元素節(jié)點(diǎn),不獲取文本節(jié)點(diǎn),兼容所有的瀏覽器，
比上面的好用所以我們一般獲取子節(jié)點(diǎn)時(shí),最好用children 屬性。
| ? | |
| ? | ? |
4，關(guān)于使用 ?rstChild,lastChild?等，獲取第一個(gè)/最后一個(gè)元素節(jié)點(diǎn)時(shí)產(chǎn)生的問(wèn)題
IE6-8 下 : ?rstChild,lastChild,nextSibling,previousSibling, 獲取第一個(gè)元素節(jié)點(diǎn)(高版本瀏覽器IE9+,FF,Chrome不兼容,其獲取的空白文本節(jié)點(diǎn))
高版本瀏覽器下:
?rstElementChild,lastElementChild,nextElementSibling
,previousElementSibling(低版本瀏覽器IE6-8不兼容)
兼容寫(xiě)法: 找到ul的第一個(gè)元素節(jié)點(diǎn),并將其背景色變成紅色
| ? | |
| ? | ? |
5，關(guān)于使用 event對(duì)象，出現(xiàn)的兼容性問(wèn)題
(1)?獲取鼠標(biāo)位置
| ? | |
| ? | ? |
(2)?獲取event對(duì)象兼容性寫(xiě)法:
6，關(guān)于為一個(gè)元素綁定兩個(gè)相同事件： attachEvent/attachEventLister?出現(xiàn)的兼容問(wèn)題。
事件綁定:(不兼容需要兩個(gè)結(jié)合做兼容if..else..)
IE8 以 下 用 : attachEvent(' 事 件 名 ',fn); FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
多事件綁定封裝成一個(gè)兼容函數(shù):
function myAddEvent(obj,ev,fn){ if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10 obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){ alert(a);
});
myAddEvent(oBtn,'click',function(){ alert(b);
});
7，關(guān)于獲取滾動(dòng)條距離而出現(xiàn)的問(wèn)題當(dāng)我們獲取滾動(dòng)條滾動(dòng)距離時(shí):
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容處理:
| ? | |
| ? | ? |
19?前端頁(yè)面優(yōu)化
19.1?html
| ? | |
| ? | ? |
加載順序:css放head里面(用戶看到順暢頁(yè)面)，js放尾部
(會(huì)阻塞dom渲染，且dom樹(shù)沒(méi)搭建好時(shí)，js里面的dom 操作會(huì)有問(wèn)題)
減少頁(yè)面請(qǐng)求：合并img,合并css，避免使用@import方式引入css文件
減少文件大小：主要減少img文件大小，選用合適的格式并且用工具進(jìn)行壓縮(ImageOptim,ImageAlpha,JPEGmini)，刪除不必要的標(biāo)簽
19.2?css
| ? | |
| ? | ? |
選擇器：越簡(jiǎn)單越短越好,同樣的樣式進(jìn)行選擇器合并
css值縮寫(xiě)：margin等，值為0的省略單位,
| ? | |
| ? | ? |
減少文件大小:YUI Compressor,cssmin
少用耗性能的屬性:expresion,border-radius,?lter,box- shadow,gradients等
圖片設(shè)置寬高，不要縮放，減少瀏覽器的回流和重繪。所有表現(xiàn)用css實(shí)現(xiàn)
模塊化
命名規(guī)范、語(yǔ)義化盡量減少hack
| ? | |
| ? | ? |
19.3?javascript
| ? | |
| ? | ? |
20?事件冒泡和事件捕獲
20.1?事件捕獲
事件捕獲指的是從document到觸發(fā)事件的那個(gè)節(jié)點(diǎn)， 即自上而下的去觸發(fā)事件
20.2?事件冒泡
事件冒泡是自下而上的去觸發(fā)事件
HTML結(jié)構(gòu)：
| ? | |
| ? | ? |
綁定事件：
結(jié)果：
| ? | |
| ? | ? |
結(jié)論：先child，然后parent。事件的觸發(fā)順序自內(nèi)向外，這就是事件冒泡。
20.3?事件捕獲
改變綁定事件的第三個(gè)參數(shù)的值為true
結(jié)果：
| ? | |
| ? | ? |
結(jié)論：先parent,然后child。事件觸發(fā)順序變更為自外向內(nèi)， 這就是事件捕獲。
21?響應(yīng)式布局
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端-而不是為每個(gè)終端做一個(gè)特定的版本。
21.1?四個(gè)步驟
21.1.1?布局及設(shè)置meta標(biāo)簽
21.1.2?設(shè)置樣式media?query
通過(guò)媒體查詢來(lái)設(shè)置樣式media?query，media?query 是響應(yīng)式設(shè)計(jì)的核心，它能夠和瀏覽器進(jìn)行溝通，告訴瀏覽器頁(yè)面如何呈現(xiàn)，假如一個(gè)終端的分辨率小于980px，那么可以這樣寫(xiě)。
| ? | |
| ? | ? |
21.1.3?設(shè)置多種視圖寬度
假如我們要兼容ipad和iphone視圖，我們可以這樣設(shè)置：
| ? | |
| ? | ? |
21.1.4?字體設(shè)置
開(kāi)發(fā)人員用到的字體單位大部分都是像素，雖然像素在普通網(wǎng)站上是Ok的，但是我們?nèi)匀恍枰憫?yīng)式字體。一個(gè)響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶端屏幕。
css3引入了新的單位叫做rem,和em類似但對(duì)于Html元素，rem更方便使用。 rem是相對(duì)于根元素的，不要忘記重置根元素字體大小：
| ? | |
| ? | ? |
21.2?注意的問(wèn)題
21.2.1?寬度使用百分比
| ? | |
| ? | ? |
21.2.2?圖片處理
在html頁(yè)面中的圖片，比如文章里插入的圖片我們都可以通過(guò)css樣式max-width來(lái)進(jìn)行控制圖片的最大寬度，如：
如此設(shè)置后ID為wrap內(nèi)的圖片會(huì)根據(jù)wrap的寬度改變已達(dá)到等寬擴(kuò)充，height為auto的設(shè)置是為了保證圖片原始的高 寬比例，以至于圖片不會(huì)失真。
除了img標(biāo)簽的圖片外我們經(jīng)常會(huì)遇到背景圖片，比如logo為背景圖片：
| ? | |
| ? | ? |
background-size是css3的新屬性，用于設(shè)置背景圖片的大小，有兩個(gè)可選值，
第1個(gè)值用于指定背景圖的width,
第2個(gè)值用于指定背景圖的height,如果只指定一個(gè)值，那么另一個(gè)值默認(rèn)為auto。
background-size:cover; 等比擴(kuò)展圖片來(lái)填滿元素background-size:contain; 等比縮小圖片來(lái)適應(yīng)元素的尺寸
21.3?總結(jié)
移動(dòng)端優(yōu)先，交互和設(shè)計(jì)以移動(dòng)端為主，pc則作為移動(dòng)端的擴(kuò)展，一個(gè)頁(yè)面需要兼容不同終端，那么有兩個(gè)關(guān)鍵點(diǎn)是我們需要去做到響應(yīng)式的：響應(yīng)式布局和響應(yīng)式內(nèi)容。
22?H5新特性
22.1?新的Doctype
盡管使用，即使瀏覽器不懂這句話也會(huì)按照標(biāo)準(zhǔn)模式去渲染
22.2?Figure元素
用?gure和?gcaption來(lái)語(yǔ)義化地表示帶標(biāo)題的圖片
| ? | |
| ? | ? |
22.3?重新定義的small
| ? | |
| ? | ? |
22.4?去掉link和script標(biāo)簽里面的
type屬性
22.5?加/不加 括號(hào)
HTML5沒(méi)有嚴(yán)格的要求屬性必須加引號(hào)，閉合不閉合，但是建議加上引號(hào)和閉合標(biāo)簽
22.6?
| ? | |
| ? | ? |
讓你的內(nèi)容可編輯，只需要加一個(gè)contenteditable屬性
22.7?Email?Inputs
| ? | |
| ? | ? |
| ? | |
| ? | ? |
22.8?Placeholders
| ? | |
| ? | ? |
這個(gè)input屬性的意義就是不必通過(guò)javascript來(lái)做
placeholder的效果了
22.9?Local?Storage
| ? | |
| ? | ? |
使用Local Storage可以永久存儲(chǔ)大的數(shù)據(jù)片段在客戶端(除非主動(dòng)刪除)，目前大部分瀏覽器已經(jīng)支持，在使用之前可以檢測(cè)一下window.localStorage是否存在
22.10?語(yǔ)義化的header和footer
22.11?更多的HTML5表單特性
22.12?IE和HTML5
默認(rèn)的，HTML5新元素被以inline的方式渲染，不過(guò)可以通過(guò)下面這種方式讓
其以block方式渲染
| ? | |
| ? | ? |
不幸的是IE會(huì)忽略這些樣式，可以像下面這樣?x:
| ? | |
| ? | ? |
22.13?hgroup
| ? | |
| ? | ? |
一般在header里面用來(lái)將一組標(biāo)題組合在一起，如
22.14?Required屬性
required屬性定義了一個(gè)input是否是必須的，你可以像下面這樣聲明
| ? | |
| ? | ? |
或者
| ? | |
| ? | ? |
22.15?Autofocus屬性
正如它的詞義，就是聚焦到輸入框里面
| ? | |
| ? | ? |
22.16?Audio支持
HTML5提供了audio標(biāo)簽，你不需要再按照第三方插件來(lái)渲染音頻，大多數(shù)現(xiàn)代瀏覽器提供了對(duì)于HTML5 Audio的支持，不過(guò)目前仍舊需要提供一些兼容處理，如
| ? | |
| ? | ? |
22.17?Video支持
和Audio很像，video標(biāo)簽提供了對(duì)于video的支持，由于HTML5文檔并沒(méi)有給video指定一個(gè)特定的編碼，所以瀏 覽器去決定要支持哪些編碼，導(dǎo)致了很多不一致。Safari和IE支 ?持H.264編碼的格式，Firefox和Opera支持Theora和Vorbis 編碼的格式，當(dāng)使用HTML5?video的時(shí)候，你必須都提供：
| ? | |
| ? | ? |
22.18?預(yù)加載視頻
preload屬性就像它的字面意思那么簡(jiǎn)單，你需要決定是否需要在頁(yè)面加載的時(shí)候去預(yù)加載視頻
| ? | |
| ? | ? |
22.19?顯示視頻控制
| ? | |
| ? | ? |
22.20?正則表達(dá)式
由于pattern屬性，我們可以在你的markup里面直接使用正則表達(dá)式了
| ? | |
| ? | ? |
22.21?檢測(cè)屬性支持
除了Modernizr之外我們還可以通過(guò)javascript簡(jiǎn)單地檢測(cè)一些屬性是否支持，如：
22.22?Mark元素
把mark元素看做是高亮的作用，當(dāng)我選擇一段文字的時(shí)候，
javascript對(duì)于HTML的markup效果應(yīng)該是這樣的：
| ? | |
| ? | ? |
22.23?什么時(shí)候用div
HTML5已經(jīng)引入了這么多元素，那么div我們還要用嗎？div
你可以在沒(méi)有更好的元素的時(shí)候去用。
22.24.?哪些不是HTML5
22.25?Data屬性
CSS中使用：
| ? | |
| ? | ? |
22.26?Output元素
output元素用來(lái)顯示計(jì)算結(jié)果，也有一個(gè)和label一樣的for屬性
22.27?用Range?Input來(lái)創(chuàng)建滑塊
HTML5引用的range類型可以創(chuàng)建滑塊，它接受min,?max, step和value屬性
可以使用css的:before和:after來(lái)顯示min和max的值
23?
| ? | |
| ? | ? |
xhtml和html之間的區(qū)別
23.1?功能上的差別
XHTML可兼容各大瀏覽器、手機(jī)以及PDA，并且瀏覽器 也能快速正確地編譯網(wǎng)頁(yè)
23.2?書(shū)寫(xiě)習(xí)慣的差別
23.2.1?標(biāo)簽必須小寫(xiě)
| ? | |
| ? | ? |
23.2.2?標(biāo)簽必須成雙成對(duì)
| ? | |
| ? | ? |
23.2.3?標(biāo)簽順序必須正確
| ? | |
| ? | ? |
23.2.4?所有屬性都必須使用雙引號(hào)
| ? | |
| ? | ? |
23.2.5?不允許使用target="_blank"
| ? | |
| ? | ? |
24?回流 重繪
24.1?概念
頁(yè)面的顯示過(guò)程的幾個(gè)階段：
回流：當(dāng)render樹(shù)的一部分或者全部因?yàn)榇笮∵吘嗟葐?wèn)題發(fā)生改變而需要重建的過(guò)程。
重繪：當(dāng)諸如顏色背景等不會(huì)引起頁(yè)面布局變化，而只需要重新渲染的過(guò)程。
24.2?什么會(huì)引起回流
| ? | |
| ? | ? |
24.3?減少回流
5.
改變字體大小會(huì)引發(fā)回流
display:none和visibility：hidden會(huì)產(chǎn)生回流與重繪嗎？
25?閉包
25.1?變量作用域
變量的作用域分兩種：全局變量和局部變量。
javascript語(yǔ)言的特別之處就在于：函數(shù)內(nèi)部可以直接讀取全局變量，但是在函數(shù)外部無(wú)法讀取函數(shù)內(nèi)部的局部變量
25.2?什么是閉包
| ? | |
| ? | ? |
函數(shù)f2就被包括在函數(shù)f1內(nèi)部，這時(shí)f1內(nèi)部的所有局部 變量，對(duì)f2都是可見(jiàn)的。但是反過(guò)來(lái)就不行，f2內(nèi)部的局部 變量，對(duì)f1就是不可見(jiàn)的。就是Javascript語(yǔ)言特有的"鏈?zhǔn)阶饔糜?#34;結(jié)構(gòu)(chain?scope)，對(duì)象會(huì)一級(jí)一級(jí)地向上尋找所有父對(duì)象的變量。所以，父對(duì)象的所有變量，對(duì)子對(duì)象都是可見(jiàn)的。
f2可以讀取f1中的局部變量，把f2作為返回值，f1就可以讀取f2的內(nèi)部變量了。f2函數(shù)，就是閉包。閉包就是能夠讀 取其他函數(shù)內(nèi)部變量的函數(shù)。
閉包可以簡(jiǎn)單理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)。在本質(zhì)上，閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的橋梁。
25.3?閉包的用途
閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中，不會(huì)在f1調(diào)用后被自動(dòng)清除。
f1是f2的父函數(shù)，而f2被賦給了一個(gè)全局變量，這導(dǎo)致f2 始終在內(nèi)存中，而f2的存在依賴于f1，因此f1也始終在內(nèi)存 中，不會(huì)在調(diào)用結(jié)束后，被垃圾回收機(jī)制(garbage collection)回收。
25.4?閉包的注意點(diǎn)
1，由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
2，閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對(duì)象(object)使用，把閉包當(dāng)作 它的公用方法(Public?Method)，把內(nèi)部變量當(dāng)作它的私有屬性(private?value)，這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。
26?事件代理機(jī)制
26.1?概述
事件委托也是事件代理，就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。
26.2?為什么用事件委托
前端代碼：
| ? | |
| ? | ? |
js代碼
| ? | |
| ? | ? |
在JavaScript中，添加到頁(yè)面上的事件處理程序數(shù)量將直 接關(guān)系到頁(yè)面的整體運(yùn)行性能，因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互，訪問(wèn)dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多，就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間，這就是
為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因； 如果要用事件委托，就會(huì)將所有的操作放到j(luò)s程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom 的交互次數(shù)，提高性能；
每個(gè)函數(shù)都是一個(gè)對(duì)象，是對(duì)象就會(huì)占用內(nèi)存，對(duì)象越多，內(nèi)存占用率就越大，自然性能就越差了，比如上面的100 個(gè)li，就要占用100個(gè)內(nèi)存空間，如果用事件委托，那么我們就可以只對(duì)它的父級(jí)(如果只有一個(gè)父級(jí))這一個(gè)對(duì)象進(jìn)行操作，這樣我們就需要一個(gè)內(nèi)存空間
26.3?事件委托
26.3.1?案例
| ? | |
| ? | ? |
26.3.2?案例
前端代碼：
事件委托
| ? | |
| ? | ? |
27?JS原型、原型鏈
JavaScript是一種基于對(duì)象的語(yǔ)言，JavaScript中的所有 對(duì)象，都具有prototype屬性。prototype屬性返回對(duì)象的所有屬性和方法，所有 JavaScript?內(nèi)部對(duì)象都有只讀的prototype?屬性，可以向其原型中動(dòng)態(tài)添加屬性和方法，但該對(duì)象不能被賦予不同的原型。但是自定義的對(duì)象可以被賦給新的原型。
對(duì)象分為函數(shù)對(duì)象和普通對(duì)象，區(qū)分：凡是通過(guò) new Function() 創(chuàng)建的對(duì)象都是函數(shù)對(duì)象，其他的都是普通對(duì)象。(Object ，Function 是JS自帶的函數(shù)對(duì)象)
27.1?原型對(duì)象
函數(shù)對(duì)象其中一個(gè)屬性：原型對(duì)象 prototype。普通對(duì)象是沒(méi)有prototype屬性,但有proto屬性。 原型的作用就是給這個(gè)類的每一個(gè)對(duì)象都添加一個(gè)統(tǒng)一的方法,在原型中定義的方法和屬性都是被所以實(shí)例對(duì)象所共享。
27.2?原型鏈
proto：js創(chuàng)建對(duì)象的內(nèi)置屬性，用于指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象prototype。
當(dāng)我們實(shí)例一個(gè)對(duì)象之后，調(diào)用它的內(nèi)部方法，他的運(yùn)行順序是先找自身有沒(méi)有該方法，如果沒(méi)有就會(huì)通過(guò)proto屬性想上層尋找，一直尋找到Object對(duì)象中，如果還沒(méi)有才會(huì)報(bào)錯(cuò)null
p.proto----->Persion.proto---->object.proto>null
28?屏幕適配
29?內(nèi)存泄漏
29.1?內(nèi)存問(wèn)題
javascript具有自動(dòng)垃圾回收機(jī)制，一旦數(shù)據(jù)不再使用， 可以將其設(shè)為"null"來(lái)釋放引用
29.2?循環(huán)引用
一個(gè)很簡(jiǎn)單的例子：一個(gè)DOM對(duì)象被一個(gè)Javascript對(duì)象引用，與此同時(shí)又引用同一個(gè)或其它的Javascript對(duì)象，這個(gè)DOM對(duì)象可能會(huì)引發(fā)內(nèi)存泄露。這個(gè)DOM對(duì)象的引用將不會(huì)在腳本停止的時(shí)候被垃圾回收器回收。要想破壞循環(huán)引用，引用DOM元素的對(duì)象或DOM對(duì)象的引用需要被賦值為null。
29.3?閉包
在閉包中引入閉包外部的變量時(shí)，當(dāng)閉包結(jié)束時(shí)此對(duì)象無(wú)法被垃圾回收(GC)
| ? | |
| ? | ? |
29.4?dom泄露
當(dāng)原有的COM被移除時(shí)，子結(jié)點(diǎn)引用沒(méi)有被移除則無(wú)法回收。
29.5?定時(shí)器泄露
| ? | |
| ? | ? |
29.6?調(diào)試內(nèi)存
Chrome自帶的內(nèi)存調(diào)試工具可以很方便地查看內(nèi)存使用情況和內(nèi)存泄露： 在 Timeline?-> Memory?點(diǎn)擊record即可。
29.7?垃圾回收機(jī)制
說(shuō)到內(nèi)存管理，自然離不開(kāi)JS中的垃圾回收機(jī)制，有兩種策 略來(lái)實(shí)現(xiàn)垃圾回收：標(biāo)記清除 和 引用計(jì)數(shù)；
29.7.1?標(biāo)記清除
垃圾收集器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記，然后，它會(huì)去掉環(huán)境中的變量的標(biāo)記和被環(huán)境中的變量引用的變量的標(biāo)記，此后，如果變量再被標(biāo)記則表示此變量準(zhǔn)備被刪除。 2008年為止，IE，Firefox，opera， chrome，Safari的javascript都用使用了該方式。
29.7.2?引用計(jì)數(shù)
跟蹤記錄每個(gè)值被引用的次數(shù)，當(dāng)聲明一個(gè)變量并將一個(gè)引用類型的值賦給該變量時(shí)，這個(gè)值的引用次數(shù)就是1，如果這個(gè)值再被賦值給另一個(gè)變量，則引用次數(shù)加1。相反，如果一個(gè)變量脫離了該值的引用，則該值引用次數(shù)減1，當(dāng)次數(shù)為0時(shí)，就會(huì)等待垃圾收集器的回收。
30?測(cè)試函數(shù)性能
| ? | |
| ? | ? |
31?promise
| ? | |
| ? | ? |
31.1?為什么使用promise
避免界面凍結(jié)
同步：假設(shè)你去了一家飯店，找個(gè)位置，叫來(lái)服務(wù)員，這個(gè)時(shí)候服務(wù)員對(duì)你說(shuō)，對(duì)不起我是“同步”服務(wù)員，我要服務(wù)完這張桌子才能招呼你。那桌客人明明已經(jīng)吃上了，你只是想要個(gè)菜單，這么小的動(dòng)作，服務(wù)員卻要你等到別人的一個(gè)大動(dòng)作完成之后，才能再來(lái)招呼你，這個(gè)便是同步的問(wèn)題：也就是“順序交付的工作1234，必須按照1234的順序完成”。
異步：則是將耗時(shí)很長(zhǎng)的A交付的工作交給系統(tǒng)之后，就去繼 ?續(xù)做B交付的工作，。等到系統(tǒng)完成了前面的工作之后，再通過(guò)回調(diào)或者事件，繼續(xù)做A剩下的工作。
AB工作的完成順序，和交付他們的時(shí)間順序無(wú)關(guān)，所以叫 ???“異步”。
31.2?promise是什么
promise是一個(gè)對(duì)象，對(duì)象和函數(shù)的區(qū)別就是對(duì)象可以保存 狀態(tài)，函數(shù)不可以，promise并未剝奪函數(shù)return的能力，因此無(wú)需層層傳遞callback，進(jìn)行回調(diào)獲取數(shù)據(jù)，多個(gè)異步等待合并便于解決。
代碼：
resolve：將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α?#xff0c;在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；
reject：將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆 ?即從pending?變?yōu)?rejected)，在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。
31.3?三個(gè)狀態(tài)
1、pending[待定]初始狀態(tài)2、ful?lled[實(shí)現(xiàn)]操作成功
3、rejected[被否決]操作失敗
當(dāng)promise狀態(tài)發(fā)生改變，就會(huì)觸發(fā)then()里的響應(yīng)函數(shù)處理后續(xù)步驟；Promise對(duì)象的狀態(tài)改變，只有兩種可能：
從pending變?yōu)閒ul?lled 從pending變?yōu)閞ejected
實(shí)例1：
| ? | |
| ? | ? |
實(shí)例2：
| ? | |
| ? | ? |
32?js數(shù)組
slice
unshift shift reverse forEach every some map ?lter
33?深拷貝、淺拷貝
深拷貝在計(jì)算機(jī)中開(kāi)辟了一塊內(nèi)存地址用于存放復(fù)制的對(duì) 象，而淺拷貝僅僅是指向被拷貝的內(nèi)存地址，如果原地址中對(duì)象被改變了，那么淺拷貝出來(lái)的對(duì)象也會(huì)相應(yīng)改變。
總結(jié)
- 上一篇： Archlinux 命令行模式-安装 B
- 下一篇： [USACO Jan09] 安全路径