整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
篇文章我們來聊一聊靜態(tài)資源的緩存策略，如果你準(zhǔn)備去做頁面的優(yōu)化，那么這個知識點你就必須得了解。
首先明確一下靜態(tài)資源的概念，靜態(tài)可以理解為不變的。頁面中像js、css、img等文件都是靜態(tài)文件，因為此類文件你上線什么內(nèi)容，所有的用戶都會獲取一樣的內(nèi)容，它是不會變化的，基于這樣的特點，這樣的文件可以做緩存，提高加載速度。
像一般的html文件，在你開發(fā)完還需要套各類模板，因為數(shù)據(jù)不同，展現(xiàn)的內(nèi)容也不同，最典型的就是頭條的頁面，千人千面，每個頁面都不一樣，你很難從整體上做緩存，所以這樣的文件不能算是靜態(tài)資源。
圖1
回想一下，在你開發(fā)完一個項目上線時，一般都是先上靜態(tài)資源后上模板，二者的上線方式會有所不同。靜態(tài)資源一般都會推到cdn服務(wù)器上去，而模板都是上到后端服務(wù)的機器上，前者就是想利用cdn的緩存策略讓用戶有更好的頁面加載體驗。
1、瀏覽器第一次跟服務(wù)器請求一個資源，服務(wù)器在返回這個資源的同時，在響應(yīng)頭中加上Expires，如：
圖2
2、瀏覽器在接收到這個資源后，會把這個資源連同所有響應(yīng)頭一起緩存下來；
3、瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源后，拿出它的Expires跟當(dāng)前的請求時間比較，如果請求時間在Expires指定的時間之前，就能命中緩存，否則就不行；
4、如果緩存沒有命中，瀏覽器會將請求發(fā)往服務(wù)器，Expires Header在重新加載的時候會被更新。
Expires是較老的強緩存管理header，由于它是服務(wù)器返回的一個絕對時間，在服務(wù)器時間與客戶端時間相差較大時，緩存管理容易出現(xiàn)問題，比如隨意修改下客戶端時間，就能影響緩存命中的結(jié)果。所以在http1.1的時候，提出了一個新的header，就是Cache-Control，這是一個相對時間，在配置緩存的時候，以秒為單位，用數(shù)值表示，如：Cache-Control:max-age=315360000，它的緩存原理如下：
1、瀏覽器第一次跟服務(wù)器請求一個資源，服務(wù)器在返回這個資源的同時，在響應(yīng)頭加上Cache-Control的header，如：
圖3
2、瀏覽器在接收到這個資源后，會把這個資源連同所有響應(yīng)頭一起緩存下來；
3、瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源后，根據(jù)它第一次的請求時間和Cache-Control設(shè)定的有效期，計算出一個資源過期時間，再拿這個過期時間跟當(dāng)前的請求時間比較，如果請求時間在過期時間之前，就能命中緩存，否則就不行。
4、如果緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時，Cache-Control Header在重新加載的時候會被更新。
Cache-Control描述的是一個相對時間，在進(jìn)行緩存命中的時候，都是利用客戶端時間進(jìn)行判斷，所以相比較Expires，Cache-Control的緩存管理更有效，安全一些。這兩個header可以只啟用一個，也可以同時啟用，當(dāng)響應(yīng)頭中，Expires和Cache-Control同時存在時，Cache-Control優(yōu)先級高于Expires。
如果沒有命中強緩存，請求就會來到服務(wù)器，服務(wù)器檢查HTTP請求頭是否包含緩存驗證信息，如果協(xié)商緩存命中，請求響應(yīng)返回的http狀態(tài)為304并且會顯示一個Not Modified的字符串。協(xié)商緩存利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對Header來管理的，原理如下：
1、瀏覽器第一次跟服務(wù)器請求一個資源，服務(wù)器在返回這個資源的同時，在響應(yīng)頭加上Last-Modified的header，這個header表示這個資源在服務(wù)器上的最后修改時間；
圖4
2、瀏覽器再次跟服務(wù)器請求這個資源時，在請求頭上加上If-Modified-Since的header，這個header的值就是上一次請求時返回的Last-Modified的值；
圖5
3、服務(wù)器再次收到資源請求時，根據(jù)瀏覽器傳過來If-Modified-Since和資源在服務(wù)器上的最后修改時間作對比判斷資源是否有變化，如果沒有變化則返回304 Not Modified，但是不會返回資源內(nèi)容。如果有變化，就正常返回資源內(nèi)容。當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時，response header中不會再添加Last-Modified的header，因為既然資源沒有變化，那么Last-Modified也就不會改變。
4、瀏覽器收到304的響應(yīng)后，就會從緩存中加載資源。
5、如果協(xié)商緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時，Last-Modified Header在重新加載的時候會被更新，下次請求時，If-Modified-Since會啟用上次返回的Last-Modified值。
【Last-Modified，If-Modified-Since】都是根據(jù)服務(wù)器時間返回的header，一般來說，在沒有調(diào)整服務(wù)器時間和篡改客戶端緩存的情況下，這兩個header配合起來管理協(xié)商緩存是非常可靠的，但是有時候服務(wù)器上資源其實有變化，但是最后修改時間卻沒有變化的情況，而這種問題又很不容易被定位出來，而當(dāng)這種情況出現(xiàn)的時候，就會影響協(xié)商緩存的可靠性。所以就有了另外一對header來管理協(xié)商緩存，這對header就是【ETag、If-None-Match】，它們的緩存管理的方式如下：
1、瀏覽器第一次跟服務(wù)器請求一個資源，服務(wù)器在返回這個資源的同時，在響應(yīng)頭中加上ETag的header，這個header是服務(wù)器根據(jù)當(dāng)前請求的資源生成的一個唯一標(biāo)識，這個唯一標(biāo)識是一個字符串，只要資源有變化這個串就不同，跟最后修改時間沒有關(guān)系，所以能很好的補充Last-Modified的問題；
圖6
2、瀏覽器再次跟服務(wù)器請求這個資源時，在請求頭上加上If-None-Match的header，這個header的值就是上一次請求時返回的ETag的值：
圖7
3、服務(wù)器再次收到資源請求時，根據(jù)瀏覽器傳過來的If-None-Match和再根據(jù)資源生成一個新的ETag，如果這兩個值相同就說明資源沒有變化，否則就是有變化；如果沒有變化則返回304 Not Modified，但是不會返回資源內(nèi)容；如果有變化，就正常返回資源內(nèi)容。與Last-Modified不一樣的是，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時，由于ETag重新生成過，響應(yīng)頭中還會把這個ETag返回，即使這個ETag跟之前的沒有變化。
4、瀏覽器收到304的響應(yīng)后，就會從緩存中加載資源。
【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同時啟用，這是為了處理Last-Modified不可靠的情況。有一種場景需要注意：
這篇文章主要介紹了兩種緩存策略——強緩存和協(xié)商緩存，其實它是從瀏覽器地址欄輸入url到顯示頁面過程中的一部分。幾年之前，我在我的博客中就已經(jīng)詳細(xì)介紹過了，這次再拿出來說，一是為了分享給更多的同學(xué)，二是為了下一篇開發(fā)一個靜態(tài)請求處理的node服務(wù)中間件做理論支撐。
喜歡我的文章就關(guān)注我吧，有問題可以發(fā)表評論，我們一起學(xué)習(xí)，共同成長！
往一些不足的地方，通過博客，好好總結(jié)一下。
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
復(fù)制代碼超文本傳輸協(xié)議（HTTP）的設(shè)計目的是保證客戶機與服務(wù)器之間的通信。 HTTP 的工作方式是客戶機與服務(wù)器之間的請求-應(yīng)答協(xié)議。 web 瀏覽器可能是客戶端，而計算機上的網(wǎng)絡(luò)應(yīng)用程序也可能作為服務(wù)器端。
HEAD: 與 GET 相同，但只返回 HTTP 報頭，不返回文檔主體 PUT: 上傳指定的 URI 表示 DELETE: 刪除指定資源 OPTIONS: 返回服務(wù)器支持的 HTTP 方法 CONNECT: 把請求連接轉(zhuǎn)換到透明的 TCP/IP 通道 POST: 向指定的資源提交要被處理的數(shù)據(jù)
// 查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
復(fù)制代碼GET: 從指定的資源請求數(shù)據(jù)
GET 請求可被緩存 GET 請求保留在瀏覽器歷史記錄中 GET 請求可被收藏為書簽 GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用 GET 請求有長度限制(2048字符),IE和Safari瀏覽器限制2k;Opera限制4k;Firefox，Chrome限制8k GET 請求只應(yīng)當(dāng)用于取回數(shù)據(jù)
POST 請求不會被緩存 POST 請求不會保留在瀏覽器歷史記錄中 POST 不能被收藏為書簽 POST 請求對數(shù)據(jù)長度沒有要求
nth-child(even/odd)
// odd表示基數(shù)，此時選中基數(shù)行的樣式，even表示偶數(shù)行
.row:nth-child(odd){
background: #eee;
}
復(fù)制代碼nth-of-type(odd)
.row:nth-of-type(odd){
background: #eee;
}
復(fù)制代碼漸變實現(xiàn)linear-gradient
.stripe-bg{
padding: .5em;
line-height: 1.5em;
background: beige;
background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
}
復(fù)制代碼// 數(shù)據(jù)可以以數(shù)組方式存儲，也可以是對象方式
let a={x:'6', y:10},
b={x: 8, y: 20};
function distant(a,b){
let dx=Number(a.x) - Number(b.x)
let dy=Number(a.y) - Number(b.y)
return Math.pow(dx*dx + dy*dy, .5)
}
復(fù)制代碼body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
復(fù)制代碼// indexOf實現(xiàn)
var array=[1, 1, '1'];
function unique(array) {
var res=[];
for (var i=0, len=array.length; i < len; i++) {
var current=array[i];
if (res.indexOf(current)===-1) {
res.push(current)
}
}
return res;
}
console.log(unique(array));
// 排序后去重
var array=[1, 1, '1'];
function unique(array) {
var res=[];
var sortedArray=array.concat().sort();
var seen;
for (var i=0, len=sortedArray.length; i < len; i++) {
// 如果是第一個元素或者相鄰的元素不相同
if (!i || seen !==sortedArray[i]) {
res.push(sortedArray[i])
}
seen=sortedArray[i];
}
return res;
}
console.log(unique(array));
// filter實現(xiàn)
var array=[1, 2, 1, 1, '1'];
function unique(array) {
var res=array.filter(function(item, index, array){
return array.indexOf(item)===index;
})
return res;
}
console.log(unique(array));
// 排序去重
var array=[1, 2, 1, 1, '1'];
function unique(array) {
return array.concat().sort().filter(function(item, index, array){
return !index || item !==array[index - 1]
})
}
console.log(unique(array));
// Object鍵值對
var array=[{value: 1}, {value: 1}, {value: 2}];
function unique(array) {
var obj={};
return array.filter(function(item, index, array){
console.log(typeof item + JSON.stringify(item))
return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)]=true)
})
}
console.log(unique(array)); // [{value: 1}, {value: 2}]
// ES6 Set實現(xiàn)
var unique=(a)=> [...new Set(a)]
復(fù)制代碼CDN:CDN是將源站內(nèi)容分發(fā)至最接近用戶的節(jié)點，使用戶可就近取得所需內(nèi)容，提高用戶訪問的響應(yīng)速度和成功率。解決因分布、帶寬、服務(wù)器性能帶來的訪問延遲問題，適用于站點加速、點播、直播等場景。 好處： 1、多域名加載資源 一般情況下，瀏覽器都會對單個域名下的并發(fā)請求數(shù)（文件加載）進(jìn)行限制，通常最多有4個，那么第5個加載項將會被阻塞，直到前面的某一個文件加載完畢。 因為CDN文件是存放在不同區(qū)域（不同IP）的，所以對瀏覽器來說是可以同時加載頁面所需的所有文件（遠(yuǎn)不止4個），從而提高頁面加載速度。
2、文件可能已經(jīng)被加載過并保存有緩存 一些通用的js庫或者是css樣式庫，如jQuery，在網(wǎng)絡(luò)中的使用是非常普遍的。當(dāng)一個用戶在瀏覽你的某一個網(wǎng)頁的時候，很有可能他已經(jīng)通過你網(wǎng)站使用的CDN訪問過了其他的某一個網(wǎng)站，恰巧這個網(wǎng)站同樣也使用了jQuery，那么此時用戶瀏覽器已經(jīng)緩存有該jQuery文件（同IP的同名文件如果有緩存，瀏覽器會直接使用緩存文件，不會再進(jìn)行加載），所以就不會再加載一次了，從而間接的提高了網(wǎng)站的訪問速度
3、高效率 你的網(wǎng)站做的再NB也不會NB過百度NB過Google吧？一個好的CDNs會提供更高的效率，更低的網(wǎng)絡(luò)延時和更小的丟包率。
4、分布式的數(shù)據(jù)中心 假如你的站點布置在北京，當(dāng)一個香港或者更遠(yuǎn)的用戶訪問你的站點的時候，他的數(shù)據(jù)請求勢必會很慢很慢。而CDNs則會讓用戶從離他最近的節(jié)點去加載所需的文件，所以加載速度提升就是理所當(dāng)然的了。
5、使用情況分析 一般情況下CDNs提供商（如百度云加速）都會提供數(shù)據(jù)統(tǒng)計功能，可以了解更多關(guān)于用戶訪問自己網(wǎng)站的情況，可以根據(jù)統(tǒng)計數(shù)據(jù)對自己的站點適時適當(dāng)?shù)淖龀鲂┰S調(diào)整。
6、有效防止網(wǎng)站被攻擊 一般情況下CDNs提供商也是會提供網(wǎng)站安全服務(wù)的
參考連接
function checkPhone(){
if(!(/^1[345678]\d{9}$/.test(phone))){
alert("手機號碼有誤，請重填");
return false;
}
}
復(fù)制代碼1.js外聯(lián)文件放到body底部，css外聯(lián)文件放到head內(nèi) 2.http靜態(tài)資源盡量用多個子域名 3.服務(wù)器端提供html和http靜態(tài)資源時最好開啟gzip 4.在js,css,img等資源響應(yīng)的http headers里設(shè)置expires,last-modified 5.盡量減少http requests的數(shù)量 6.js/css/html/img資源壓縮 7.使用css spirtes，可以減少img請求次數(shù) 8.大圖使用lazyload懶加載 9.避免404，減少外聯(lián)js 10.減少cookie大小可以提高獲得響應(yīng)的時間 11.減少dom elements的數(shù)量 12.使用異步腳本，動態(tài)創(chuàng)建腳本
IE/360/搜狗瀏覽器: Trident Chrome/Safari/Opera: WebKit(KHTML的一個開源的分支) (雖然我們稱WebKit為瀏覽器內(nèi)核，但不太適合直接稱渲染引擎，因為WebKit本身主要是由兩個引擎構(gòu)成的，一個正是渲染引擎“WebCore”，另一個則是javascript解釋引擎“JSCore”，它們均是從KDE的渲染引擎KHTML及javascript解釋引擎KJS衍生而來。) (在13年發(fā)布的Chrome 28.0.1469.0版本開始，Chrome放棄Chromium引擎轉(zhuǎn)而使用最新的Blink引擎（基于WebKit2——蘋果公司于2010年推出的新的WebKit引擎），Blink對比上一代的引擎精簡了代碼、改善了DOM框架，也提升了安全性。) (為了減少研發(fā)成本，Opera在2013年2月宣布放棄Presto，轉(zhuǎn)而跟隨Chrome使用WebKit分支的Chromium引擎作為自家瀏覽器核心引擎) Firefox/SeaMonkey: Gecko
1）解析： 一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應(yīng)這三類文檔。解析這三種文件會產(chǎn)生一個DOM Tree。 CSS，解析CSS會產(chǎn)生CSS規(guī)則樹。 Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree. 2）渲染：瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。注意： Rendering Tree 渲染樹并不等同于DOM樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。 CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結(jié)點。也就是所謂的Frame。 然后，計算每個Frame（也就是每個Element）的位置，這又叫l(wèi)ayout和reflow過程。 3）繪制：最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。
減少reflow和repaint 1）不要一條一條地修改DOM的樣式。還不如預(yù)先定義好css的class，然后修改DOM的className。
（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS; （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題; (4)link支持使用js控制DOM去改變樣式，而@import不支持;
用正確的標(biāo)簽做正確的事情。 html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析; 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO; 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）。 cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大小： cookie數(shù)據(jù)大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
有期時間： localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)； sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。 cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
*iframe會阻塞主頁面的Onload事件； *搜索引擎的檢索程序無法解讀這種頁面，不利于SEO; *iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。
（圖片來自vue官網(wǎng)，更多vue學(xué)習(xí)推薦去官網(wǎng)查看詳細(xì)文檔）
區(qū)分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水； 有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。
（1）有兩種， IE 盒子模型、W3C 盒子模型； （2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)； （3）區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;
absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進(jìn)行定位。 fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。 relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。 static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 inherit 規(guī)定從父元素繼承 position 屬性的值。
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）； 如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹配它們了）； 提取項目的通用公有樣式，增強可復(fù)用性，按模塊編寫組件；增強項目的協(xié)同開發(fā)性、可維護(hù)性和可擴(kuò)展性; 使用預(yù)處理工具或構(gòu)建工具（gulp對css進(jìn)行語法檢查、自動補前綴、打包壓縮、自動優(yōu)雅降級）；
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
復(fù)制代碼-webkit-font-smoothing: antialiased;
復(fù)制代碼-webkit-overflow-scrolling: touch;
復(fù)制代碼function commafy(num){
return num && num
.toString()
.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
return $2 + ',';
});
}
復(fù)制代碼全局函數(shù)無法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)。 當(dāng)需要從局部函數(shù)查找某一屬性或方法時，如果當(dāng)前作用域沒有找到，就會上溯到上層作用域查找， 直至全局函數(shù)，這種組織形式就是作用域鏈。
this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）； 如果有new關(guān)鍵字，this指向new出來的那個對象； 在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；
它的功能是把對應(yīng)的字符串解析成JS代碼并運行； 應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。 由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj=eval('('+ str +')');
window對象是指瀏覽器打開的窗口。 document對象是Documentd對象（HTML 文檔對象）的一個只讀引用，window對象的一個屬性。
["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]
閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部。
使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。 默認(rèn)支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值; 全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用； 保證代碼運行的安全,限制函數(shù)中的arguments修改; 提高編譯器效率，增加運行速度；
if(a instanceof Person){
alert('yes');
}
// 判斷對象類型最好的方式
// 對于 Object 對象，直接調(diào)用 toString() 就能返回 [object Object] 。而對于其他對象，則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。
Object.prototype.toString.call('') ; // [object String]
Object.prototype.toString.call(1) ; // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局對象 global 的引用
復(fù)制代碼1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。
復(fù)制代碼1、在ajax發(fā)送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
2、在ajax發(fā)送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。 3、在URL后面加上一個隨機數(shù)： "fresh=" + Math.random();。 4、在URL后面加上時間戳："nowtime=" + new Date().getTime();。 5、如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會執(zhí)行這條語句就是不需要保存緩存記錄。
jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面
立即執(zhí)行函數(shù),不暴露私有成員
var module1=(function(){
????var _count=0;
????var m1=function(){
??????//...
????};
????var m2=function(){
??????//...
????};
????return {
??????m1 : m1,
??????m2 : m2
????};
??})();
復(fù)制代碼對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。 2. CMD 推崇依賴就近，AMD 推崇依賴前置。
// CMD
define(function(require, exports, module) {
var a=require('./a')
a.doSomething()
// 此處略去 100 行
var b=require('./b') // 依賴可以就近書寫
b.doSomething()
// ...
})
// AMD 默認(rèn)推薦
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
// ...
})
復(fù)制代碼參考鏈接
參考連接
（1）不要在同一行聲明多個變量 （2）如果你不知道數(shù)組的長度，使用 push （3）請使用===/!==來比較 true/false 或者數(shù)值 （4）對字符串使用單引號 ''(因為大多時候我們的字符串。特別html會出現(xiàn)") （5）使用對象字面量替代 new Array 這種形式 （6）絕對不要在一個非函數(shù)塊里聲明一個函數(shù)，把那個函數(shù)賦給一個變量。瀏覽器允許你這么做，但是它們解析不同 （7）不要使用全局函數(shù) （8）總是使用 var 來聲明變量，如果不這么做將導(dǎo)致產(chǎn)生全局變量，我們要避免污染全局命名空間 （9）Switch 語句必須帶有 default 分支 （10）使用 /**...*/ 進(jìn)行多行注釋，包括描述，指定類型以及參數(shù)值和返回值 （11）函數(shù)不應(yīng)該有時候有返回值，有時候沒有返回值 （12）語句結(jié)束一定要加分號 （13）for 循環(huán)必須使用大括號 （14）if 語句必須使用大括號 （15）for-in 循環(huán)中的變量應(yīng)該使用 var 關(guān)鍵字明確限定作用域，從而避免作用域污染 （16）避免單個字符名，讓你的變量名有描述意義 （17）當(dāng)命名對象、函數(shù)和實例時使用駝峰命名規(guī)則 （18）給對象原型分配方法，而不是用一個新的對象覆蓋原型，覆蓋原型會使繼承出現(xiàn)問題
1）創(chuàng)建新節(jié)點 createDocumentFragment() //創(chuàng)建一個DOM片段 createElement() //創(chuàng)建一個具體的元素 createTextNode() //創(chuàng)建一個文本節(jié)點 （2）添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點 （3）查找 getElementsByTagName() //通過標(biāo)簽名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的) getElementById() //通過元素Id，唯一性
參考鏈接
jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴(kuò)展：
$.fn.stringifyArray=function(array) {
return JSON.stringify(array)
}
$.fn.parseArray=function(array) {
return JSON.parse(array)
}
然后調(diào)用：
$.fn.stringifyArray(array)
復(fù)制代碼// 淺復(fù)制
$={
extend : function(target, options) {
for (name in options) {
target[name]=options[name];
}
return target;
}
};
// 深復(fù)制
$={
extend : function(deep, target, options) {
for (name in options) {
copy=options[name];
if (deep && copy instanceof Array) {
target[name]=$.extend(deep, [], copy);
} else if (deep && copy instanceof Object) {
target[name]=$.extend(deep, {}, copy);
} else {
target[name]=options[name];
}
}
return target;
}
};
復(fù)制代碼jquery.extend 為jquery類添加類方法，可以理解為添加靜態(tài)方法
this===window ? 'browser' : 'node';
復(fù)制代碼參考鏈接
之前推薦的方法（已過時）：之前解決這個問題的方法是把script標(biāo)簽放到body標(biāo)簽之后 ，這確保了解析到</body>之前都不會被script終端。這個方法是有問題的: 瀏覽器在整個文檔解析完成之前都不能下載script文件，如果文檔很大的話，解析完HTML，用戶依然要等待script文件下載并執(zhí)行完成之后，才能操作這個網(wǎng)站。
現(xiàn)在推薦的解決方案： 現(xiàn)在瀏覽器script標(biāo)簽支持 async 和 defer 屬性. 應(yīng)用這些屬性當(dāng)script被下載時，瀏覽器更安全而且可以并行下載（下載script并不阻斷HTML解析）。 1.async標(biāo)記的Script異步執(zhí)行下載，并執(zhí)行。這意味著script下載時并不阻塞HTML的解析，并且下載結(jié)束script馬上執(zhí)行。 2.defer標(biāo)簽的script順序執(zhí)行。這種方式也不會阻斷瀏覽器解析HTML。 跟 async不同, defer scripts在整個文檔里的script都被下載完才順序執(zhí)行。
//多個事件同一個函數(shù)：
$("div").on("click mouseover", function(){});
//多個事件不同函數(shù)
$("div").on({
click: function(){},
mouseover: function(){}
});
復(fù)制代碼參考鏈接
功能檢測、userAgent特征檢測
比如：navigator.userAgent
//"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"
復(fù)制代碼polyfill 是“在舊版瀏覽器上復(fù)制標(biāo)準(zhǔn) API 的 JavaScript 補充”,可以動態(tài)地加載 JavaScript 代碼或庫，在不支持這些標(biāo)準(zhǔn) API 的瀏覽器中模擬它們。 例如，geolocation（地理位置）polyfill 可以在 navigator 對象上添加全局的 geolocation 對象，還能添加 getCurrentPosition 函數(shù)以及“坐標(biāo)”回調(diào)對象， 所有這些都是 W3C 地理位置 API 定義的對象和函數(shù)。因為 polyfill 模擬標(biāo)準(zhǔn) API，所以能夠以一種面向所有瀏覽器未來的方式針對這些 API 進(jìn)行開發(fā)， 一旦對這些 API 的支持變成絕對大多數(shù)，則可以方便地去掉 polyfill，無需做任何額外工作。
html5shiv、Geolocation、Placeholder
按照W3C的標(biāo)準(zhǔn)，先發(fā)生捕獲事件，后發(fā)生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件
// div-capture > btn-bubble > btn-capture > div-bubble
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.addEventListener('click', function(){
console.log('bubble','btn');
},false);
btn.addEventListener('click', function(){
console.log('capture','btn');
},true);
div.addEventListener('click', function(){
console.log('bubble','div');
},false);
div.addEventListener('click', function(){
console.log('capture','div');
},true);
復(fù)制代碼Webpack編譯期，為需要熱更新的 entry 注入熱更新代碼(EventSource通信)
參考鏈接
網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。 也就是說是在不改變UI的情況下，對網(wǎng)站進(jìn)行優(yōu)化，在擴(kuò)展的同時保持一致的UI。
對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：
表格(table)布局改為DIV+CSS 使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的) 對于移動平臺的優(yōu)化 針對于SEO進(jìn)行優(yōu)化 深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面
減少代碼間的耦合 讓代碼保持彈性 嚴(yán)格按規(guī)范編寫代碼 設(shè)計可擴(kuò)展的API 代替舊有的框架、語言(如VB) 增強用戶體驗 通常來說對于速度的優(yōu)化也包含在重構(gòu)中
壓縮JS、CSS、image等前端資源(通常是由服務(wù)器來解決) 程序的性能優(yōu)化(如數(shù)據(jù)讀寫) 采用CDN來加速資源加載 對于JS DOM的優(yōu)化 HTTP服務(wù)器的文件緩存
事件不同之處：
觸發(fā)事件的元素被認(rèn)為是目標(biāo)（target）。而在 IE 中，目標(biāo)包含在 event 對象的 srcElement 屬性；
獲取字符代碼、如果按鍵代表一個字符（shift、ctrl、alt除外），IE 的 keyCode 會返回字符代碼（Unicode），DOM 中按鍵的代碼和字符是分離的，要獲取字符代碼，需要使用 charCode 屬性；
阻止某個事件的默認(rèn)行為，IE 中阻止某個事件的默認(rèn)行為，必須將 returnValue 屬性設(shè)置為 false，Mozilla 中，需要調(diào)用 preventDefault() 方法；
停止事件冒泡，IE 中阻止事件進(jìn)一步冒泡，需要設(shè)置 cancelBubble 為 true，Mozzilla 中，需要調(diào)用 stopPropagation()；
復(fù)制代碼*（優(yōu)點）因為Node是基于事件驅(qū)動和無阻塞的，所以非常適合處理并發(fā)請求， 因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。 此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的， 因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。
*（缺點）Node是一個相對新的開源項目，所以不太穩(wěn)定，它總是一直在變， 而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當(dāng)年的樣子。
（1） 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)
（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。
（5） 少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。
（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
（8） 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來，顯示比div+css布局慢。
對普通的網(wǎng)站有一個統(tǒng)一的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫操作、減少磁盤IO。向前端優(yōu)化指的是，在不影響功能和體驗的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器，程序能直接取得的結(jié)果不要到外部取得，本機內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取，內(nèi)存能取到的不要到磁盤取，緩存中有的不要去數(shù)據(jù)庫查詢。減少數(shù)據(jù)庫操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)、將數(shù)據(jù)庫執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫文件次數(shù)等。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分，換語言是無法“優(yōu)化”的。
復(fù)制代碼1**(信息類)：表示接收到請求并且繼續(xù)處理 100——客戶必須繼續(xù)發(fā)出請求 101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本
2**(響應(yīng)成功)：表示動作被成功接收、理解和接受
200——表明該請求被成功地完成，所請求的資源發(fā)送回客戶端
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務(wù)器完成了請求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件
206——服務(wù)器已經(jīng)完成了部分用戶的GET請求
3**(重定向類)：為了完成指定的動作，必須接受進(jìn)一步處理
300——請求的資源可在多處得到
301——本網(wǎng)頁被永久性轉(zhuǎn)移到另一個URL
302——請求的網(wǎng)頁被轉(zhuǎn)移到一個新的地址，但客戶訪問仍繼續(xù)通過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發(fā)出新的Request。
303——建議客戶訪問其他URL或訪問方式
304——自從上次請求后，請求的網(wǎng)頁未修改過，服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容，代表上次的文檔已經(jīng)被緩存了，還可以繼續(xù)使用
305——請求的資源必須從服務(wù)器指定的地址得到
306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用
307——申明請求的資源臨時性刪除
4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執(zhí)行
400——客戶端請求有語法錯誤，不能被服務(wù)器所理解
401——請求未經(jīng)授權(quán)，這個狀態(tài)代碼必須和WWW-Authenticate報頭域一起使用
HTTP 401.1 - 未授權(quán)：登錄失敗
??HTTP 401.2 - 未授權(quán)：服務(wù)器配置問題導(dǎo)致登錄失敗
??HTTP 401.3 - ACL 禁止訪問資源
??HTTP 401.4 - 未授權(quán)：授權(quán)被篩選器拒絕
HTTP 401.5 - 未授權(quán)：ISAPI 或 CGI 授權(quán)失敗
402——保留有效ChargeTo頭響應(yīng)
403——禁止訪問，服務(wù)器收到請求，但是拒絕提供服務(wù)
HTTP 403.1 禁止訪問：禁止可執(zhí)行訪問
??HTTP 403.2 - 禁止訪問：禁止讀訪問
??HTTP 403.3 - 禁止訪問：禁止寫訪問
??HTTP 403.4 - 禁止訪問：要求 SSL
??HTTP 403.5 - 禁止訪問：要求 SSL 128
??HTTP 403.6 - 禁止訪問：IP 地址被拒絕
??HTTP 403.7 - 禁止訪問：要求客戶證書
??HTTP 403.8 - 禁止訪問：禁止站點訪問
??HTTP 403.9 - 禁止訪問：連接的用戶過多
??HTTP 403.10 - 禁止訪問：配置無效
??HTTP 403.11 - 禁止訪問：密碼更改
??HTTP 403.12 - 禁止訪問：映射器拒絕訪問
??HTTP 403.13 - 禁止訪問：客戶證書已被吊銷
??HTTP 403.15 - 禁止訪問：客戶訪問許可過多
??HTTP 403.16 - 禁止訪問：客戶證書不可信或者無效
HTTP 403.17 - 禁止訪問：客戶證書已經(jīng)到期或者尚未生效
404——一個404錯誤表明可連接服務(wù)器，但服務(wù)器無法取得所請求的網(wǎng)頁，請求資源不存在。eg：輸入了錯誤的URL
405——用戶在Request-Line字段定義的方法不允許
406——根據(jù)用戶發(fā)送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán)
408——客戶端沒有在用戶指定的餓時間內(nèi)完成請求
409——對當(dāng)前資源狀態(tài)，請求不能完成
410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址
411——服務(wù)器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當(dāng)前請求中錯誤
413——請求的資源大于服務(wù)器允許的大小
414——請求的資源URL長于服務(wù)器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當(dāng)前請求資源范圍內(nèi)沒有range指示值，請求也不包含If-Range請求頭字段
417——服務(wù)器不滿足請求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級服務(wù)器不能滿足請求長。
5**(服務(wù)端錯誤類)：服務(wù)器不能正確執(zhí)行一個正確的請求
HTTP 500 - 服務(wù)器遇到錯誤，無法完成請求
??HTTP 500.100 - 內(nèi)部服務(wù)器錯誤 - ASP 錯誤
??HTTP 500-11 服務(wù)器關(guān)閉
??HTTP 500-12 應(yīng)用程序重新啟動
??HTTP 500-13 - 服務(wù)器太忙
??HTTP 500-14 - 應(yīng)用程序無效
??HTTP 500-15 - 不允許請求 global.asa
??Error 501 - 未實現(xiàn)
HTTP 502 - 網(wǎng)關(guān)錯誤
HTTP 503：由于超載或停機維護(hù)，服務(wù)器目前無法使用，一段時間后可能恢復(fù)正常
復(fù)制代碼而高手可以根據(jù)自己擅長的領(lǐng)域自由發(fā)揮，從URL規(guī)范、HTTP協(xié)議、DNS、CDN、數(shù)據(jù)庫查詢、 到瀏覽器流式解析、CSS規(guī)則構(gòu)建、layout、paint、onload/domready、JS執(zhí)行、JS API綁定等等；
詳細(xì)版：
1、瀏覽器會開啟一個線程來處理這個請求，對 URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來處理;
2、調(diào)用瀏覽器內(nèi)核中的對應(yīng)方法，比如 WebView 中的 loadUrl 方法;
3、通過DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個GET請求;
4、進(jìn)行HTTP協(xié)議會話，客戶端發(fā)送報頭(請求報頭);
5、進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務(wù)器;
6、進(jìn)入部署好的后端應(yīng)用，如 PHP、Java、JavaScript、Python 等，找到對應(yīng)的請求處理;
7、處理結(jié)束回饋報頭，此處如果瀏覽器訪問過，緩存上有對應(yīng)資源，會與服務(wù)器最后修改時間對比，一致則返回304;
8、瀏覽器開始下載html文檔(響應(yīng)報頭，狀態(tài)碼200)，同時使用緩存;
9、文檔樹建立，根據(jù)標(biāo)記請求所需指定MIME類型的文件（比如css、js）,同時設(shè)置了cookie;
10、頁面開始渲染DOM，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等，頁面顯示完成。
復(fù)制代碼js秘密花園 jquery原理解析 css3 js標(biāo)準(zhǔn)
var pattern=/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
復(fù)制代碼參考鏈接
readyState屬性有五個狀態(tài)值。
0：是uninitialized，未初始化。已經(jīng)創(chuàng)建了XMLHttpRequest對象但是未初始化。
1：是loading.已經(jīng)開始準(zhǔn)備好要發(fā)送了。
2：已經(jīng)發(fā)送，但是還沒有收到響應(yīng)。
3：正在接受響應(yīng)，但是還不完整。
4：接受響應(yīng)完畢。
responseText：服務(wù)器返回的響應(yīng)文本。只有當(dāng)readyState>=3的時候才有值，根據(jù)readyState的狀態(tài)值，可以知道，當(dāng)readyState=3，返回的響應(yīng)文本不完整，只有readyState=4，完全返回，才能接受全部的響應(yīng)文本。
responseXML：response as Dom Document object。響應(yīng)信息是xml，可以解析為Dom對象。
status：服務(wù)器的Http狀態(tài)碼，若是200，則表示OK，404，表示為未找到。
statusText：服務(wù)器http狀態(tài)碼的文本。比如OK，Not Found。
復(fù)制代碼參考鏈接
參考鏈接
復(fù)制代碼優(yōu)點：1.保護(hù)函數(shù)內(nèi)部變量的安全，加強了封裝性 2.在內(nèi)存中維持一個變量 3.設(shè)計私有方法和變量 4.可以讀取函數(shù)內(nèi)部的變量 缺點：1.導(dǎo)致內(nèi)存泄漏，使用不當(dāng)會造成額外的內(nèi)存占用 2.可以改變父函數(shù)的變量，所以使用時要謹(jǐn)慎
1.從圖像類別區(qū)分，Canvas是基于像素的位圖，而SVG卻是基于矢量圖形。可以簡單的把兩者的區(qū)別看成photoshop與illustrator的區(qū)別。 2.從結(jié)構(gòu)上說，Canvas沒有圖層的概念，所有的修改整個畫布都要重新渲染，而SVG則可以對單獨的標(biāo)簽進(jìn)行修改。 3.從操作對象上說，Canvas是基于HTML canvas標(biāo)簽，通過宿主提供的Javascript API對整個畫布進(jìn)行操作的，而SVG則是基于XML元素的。 4.從功能上講，SVG發(fā)布日期較早，所以功能相對Canvas比較完善。 5.關(guān)于動畫，Canvas更適合做基于位圖的動畫，而SVG則適合圖表的展示。 6.從搜索引擎角度分析，由于svg是有大量標(biāo)簽組成，所以可以通過給標(biāo)簽添加屬性，便于爬蟲搜索
//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當(dāng)檢測到某個DOM元素應(yīng)用了某些CSS規(guī)則時就會自動開啟，從而解決頁面閃白，保證動畫流暢。
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
復(fù)制代碼<button></button>元素一定要寫上type屬性不然會默認(rèn)提交表單，出現(xiàn)想不到的bug
復(fù)制代碼html,body{
overflow: hidden;/*手機上寫overflow-x:hidden;會有兼容性問題，如果子級如果是絕對定位有運動到屏幕外的話ios7系統(tǒng)會出現(xiàn)留白*/
-webkit-overflow-scrolling:touch;/*流暢滾動,ios7下會有滑一下滑不動的情況，所以需要寫上*/
position:realtive;/*直接子級如果是絕對定位有運動到屏幕外的話，會出現(xiàn)留白*/
}
復(fù)制代碼.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第幾行出現(xiàn)省略號*/
/*text-align:justify;不能和溢出隱藏的代碼一起寫，會有bug*/
}
復(fù)制代碼.element {
-webkit-touch-callout: none;
}
復(fù)制代碼::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
復(fù)制代碼//JS綁定自動播放（操作window時，播放音樂）
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
復(fù)制代碼消除transition閃屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
復(fù)制代碼文中如有一些不足，歡迎指正。筆者1天后將推出開源的CMS系統(tǒng)，技術(shù)架構(gòu)：
后面將推出該系統(tǒng)的設(shè)計思想，架構(gòu)和實現(xiàn)過程，歡迎在公眾號《趣談前端》里查看更詳細(xì)的介紹。
原鏈接：https://juejin.im/post/5d8989296fb9a06b1f147070
個章節(jié)我們給大家講了使用HttpWatch分析響應(yīng)時間的內(nèi)容，在這個章節(jié)我們講一下第三部分“Request View”的內(nèi)容。
Request View
Request View內(nèi)容詳細(xì)記錄了每個請求的信息，主要包括Overview、Time Chart、Headers、Cookies、Cache、Query String、POST Data、Content、Stream 和 Warnings 幾部分內(nèi)容。
1Overview的內(nèi)容如圖8-35所示。
圖8-35 Overview內(nèi)容
2Display URL：表示請求的URL。
3Started At：表示該請求開始的時間。
4Submit Form：表示表單(Form)被提交到的URL，只有POST操作時才會有該項。
5DNS Lookup：表示DNS查找操作。
6Connect：表示TCP連接操作。
7HTTP Request：表示一個請求被發(fā)出去。
8HTTP Response：表示一個應(yīng)答被收回。
9表示該次請求是從cache中讀取應(yīng)答消息。
10Time Chart的內(nèi)容如圖8-36所示。
圖8-36 Time Chart圖
Time Chart顯示了一次請求應(yīng)答過程中每個時間片段所花費的時間。
一次完整的請求應(yīng)答過程需要經(jīng)歷的時間片段如圖8-37所示。
圖8-37 請求應(yīng)答過程
各時間塊顏色的意義見表8-1。
表8-1 各時間片段含意
Headers的內(nèi)容如圖8-38所示。
圖8-38 Headers的內(nèi)容
Header Sent的內(nèi)容如下：
1Request-Line：包括HTTP提交請求方法、HTTP版本和URL子路徑。
2Accept：可接受的文件類型。
3Accept-Encoding：可接受的純文本之外的內(nèi)容編碼的類型。
4Accept-Language：可接受的返回數(shù)據(jù)的語言種類。
5Connection：指定該次請求回應(yīng)結(jié)束后，如何處理連接。
6Cache-Control：指定請求和響應(yīng)遵循的緩存機制。
7Location：用于重定向接收者到一個新URI地址。
8Host：請求連接的主機名。
9Submit Form：表示表單(Form)被提交到的URL，只有POST操作時才會有該項。
Header Received的內(nèi)容如下：
1Status-Line：包括HTTP請求的狀態(tài)碼和HTTP版本信息。
2Connection：指定該次請求回應(yīng)結(jié)束后，如何處理連接。
3Cache-Control：指定請求和響應(yīng)遵循的緩存機制。
4Content-Language：內(nèi)容數(shù)據(jù)的語言種類。
5Content-Length：傳輸?shù)膬?nèi)容長度。
6Content-Type：內(nèi)容數(shù)據(jù)的類型(Mini Type)。
7Last-Modified：服務(wù)器上保存內(nèi)容的最后修訂時間。
8Expires：內(nèi)容數(shù)據(jù)被緩存的過期時間。
Cookies的內(nèi)容如圖8-39所示。
圖8-39 Headers內(nèi)容
關(guān)于Cookies主要包括這幾方面的信息：Cookie Name、Direction、Value、Path、Domain和Expires。
1Cookie Name：Cookie的名稱。
2Direction：表明該Cookie是由客戶端發(fā)送到服務(wù)器的還是從服務(wù)器接受的。
3Value：Cookie的內(nèi)容。
4Path：該Cookie所在站點的路徑。
5Domain：顯示該Cookie所屬的域名或主機名。
6Expires：指該Cookie失效時間，當(dāng)瀏覽器關(guān)閉時該Cookie值將被刪除。
Cache的內(nèi)容如圖8-40所示。
圖8-40 Cache的內(nèi)容
關(guān)于Cache主要包括這幾方面的信息：URL in cache、Expires、Last Modification、Last Cache Update、Last Access、ETag和Hit Count。
1URL in cache：該項內(nèi)容是否寫入瀏覽器緩存。
2Expires：Cache失效日期和時間。
3Last Modification：當(dāng)Cache內(nèi)容被存儲或更新時，那么更改日期將會修改為最近的日期。
4Last Cache Update：Cache內(nèi)容被更新的最近時間。
5Last Access：最近一次讀Cache的時間。
6ETag：ETag是用于匹配服務(wù)器上的實體，使用的方式為模糊匹配。
7Hit Count：讀Cache內(nèi)容的次數(shù)。
Query String的內(nèi)容如圖8-41所示。
圖8-41 Query String內(nèi)容
Query String是通過URL來傳遞參數(shù)的一種方式，通常的格式如下：
...?name1=value1&name2=value2&...Query String內(nèi)容中可以顯示當(dāng)前URL中所有的參數(shù)名及對應(yīng)的值。圖8-41所對應(yīng)的URL如下：
http://webmail.mail.163.com/app/jifen/wel_js5.jsp?sid=FAldACVuhNPHoCHfGVuueKhMhWgqijnA&uid=arivnhuang@163.com&color=003399&p=0（左右拉動查看完整內(nèi)容）
POST Data的內(nèi)容如圖8-42所示。
圖8-42 POST Data內(nèi)容
POST Data顯示以POST方式請求的數(shù)據(jù)信息，圖8-42顯示的內(nèi)容對應(yīng)的URL如下：
https://ssl.mail.163.com/entry/coremail/fcg/ntesdoor2?funcid=loginone&language=-1&passtype=1&iframe=1&product=mail163&from=web&df=email163&race=-2_99_-2_hz&module=&uid=arivnhuang@163.com&style=-1&skinid=null（左右拉動查看完整內(nèi)容）
圖8-42中內(nèi)容“Mime Type：application/x-www-form-urlencoded”是指POST方式提交數(shù)據(jù)的編碼方式。
以POST方式提交數(shù)據(jù)，其數(shù)據(jù)編碼有以下幾種方式：
1// Text/plain
2//Application/x-www-form-urlencoded
3// Multipart/form-data
MIME的類型見8-2。
表8-2 MIME類型
Internet中有一個專門組織IANA來確認(rèn)標(biāo)準(zhǔn)的MIME類型，但I(xiàn)nternet發(fā)展的太快，很多應(yīng)用程序等不及IANA來確認(rèn)他們使用的 MIME類型為標(biāo)準(zhǔn)類型。因此他們使用在類別中以x-開頭的方法標(biāo)識這個類別還沒有成為標(biāo)準(zhǔn)，例如：x-gzip、x-tar等。事實上這些類型運用的很廣泛，已經(jīng)成為了事實標(biāo)準(zhǔn)。只要客戶機和服務(wù)器共同承認(rèn)這個MIME類型，即使它是不標(biāo)準(zhǔn)的類型也沒有關(guān)系，客戶程序就能根據(jù)MIME類型，采用具體的處 理手段來處理數(shù)據(jù)。而Web服務(wù)器和瀏覽器(包括操作系統(tǒng))中，缺省都設(shè)置了標(biāo)準(zhǔn)的和常見的MIME類型，只有對于不常見的MIME類型，才需要同時設(shè)置服務(wù)器和客戶瀏覽器，以進(jìn)行識別。
Content的內(nèi)容如圖8-43所示。
圖8-43 Content內(nèi)容
顯示接收到的HTTP響應(yīng)信息，包括MIME的類型(如圖中的類型為text/html)，總的字節(jié)數(shù)和這些內(nèi)容是否從服務(wù)中下載或從緩存中讀取，如果對HTTP進(jìn)行了壓縮還應(yīng)該顯示壓縮的方式、壓縮后的文件大小以及壓縮比。
Stream的內(nèi)容如圖8-44所示。
圖8-44 Stream內(nèi)容
Stream的內(nèi)容主是顯示客戶端發(fā)送的內(nèi)容和服務(wù)器端返回的內(nèi)容。左邊顯示的是客戶端發(fā)送的內(nèi)容，顯示了數(shù)據(jù)流大小和發(fā)送到那個服務(wù)器，如圖8-44所示，發(fā)送的字節(jié)數(shù)為869個字節(jié)，服務(wù)器的IP地址為211.162.127.78，端口號為80。右邊顯示的是服務(wù)器返回的內(nèi)容，包括返回的字節(jié)數(shù)和返回到客戶端的IP地址。
左邊為客戶端向服務(wù)器提交的請求，主要包括以下內(nèi)容：
GET / HTTP/1.1
Accept
Referer
Accept-Language
Accept-Encoding
User-Agent
Host
Connection
右邊的內(nèi)容為服務(wù)器向客戶返回的數(shù)據(jù)內(nèi)容，主要包括以下內(nèi)容：
HTTP/1.0 200 OK
Date
Expires
Content-Type
Last-Modified
Age
Warnings的內(nèi)容如圖8-45所示。
圖8-45 Warnings內(nèi)容
Warnings顯示了單個請求出現(xiàn)警告的內(nèi)容，顯示的內(nèi)容包括警告ID、警告類型和警告的詳細(xì)描述，關(guān)于警告類型主要三種：Performace(性能)、Security(安全)和Functional(功能)。
下個工作日小編會更新下一章節(jié)的內(nèi)容，希望大家多多關(guān)注我們，一起來學(xué)習(xí)喔！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
