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