整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
JS中，節(jié)流與防抖的使用是比較常用的知識點，在前端求職面試的時候二者也是必考知識點，可以說非常重要！
那么今天華妹就來做一下總結(jié)，方便同學們查閱使用~
在前端實際開發(fā)中，有關JS原生的節(jié)流和防抖處理也是很關鍵的點，關于底層和原理的掌握使用，尤其是在性能優(yōu)化方面甚為重要。
作為前端開發(fā)的進階內(nèi)容，在實際開發(fā)過程中節(jié)流和防抖通常都是項目優(yōu)化的必要手段，而且也是非常常用的優(yōu)化手段。
因為在前端程序中防止用戶短時間內(nèi)快而高頻地多次操作觸發(fā)動作執(zhí)行，最常用的就是頁面提交按鈕。
為了防止用戶多次點擊重復提交觸發(fā)表單多次提交的問題，還有就是為了防止用戶在拖動滑動條的時候，多次觸發(fā)加載更多等情況。
01
閉包
由于在JS中的節(jié)流與防抖都是屬于閉包的應用范疇，所以想要理解防抖和節(jié)流，首先要理解閉包。
閉包：一個函數(shù)和對其周圍狀態(tài)（lexical environment，詞法環(huán)境）的引用捆綁在一起（或者說函數(shù)被引用包圍），這樣的組合就是閉包（closure）。
也就是說，閉包讓你可以在一個內(nèi)層函數(shù)中訪問到其外層函數(shù)的作用域。在 JavaScript 中，每當創(chuàng)建一個函數(shù)，閉包就會在函數(shù)創(chuàng)建的同時被創(chuàng)建出來。
通俗的說，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
由于在 JavasSript 語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，所以閉包可以簡單理解成"定義在一個函數(shù)內(nèi)部的函數(shù)"。
在本質(zhì)上看，閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁。
在前端開發(fā)過程中，為了提高應用程序性能，在用戶進行窗口操作和輸入框操作時候多次提交或者滑動的時候，如果未對事件處理函數(shù)調(diào)用頻率做限制的時候，會增加瀏覽器和服務器的負擔，造成用戶體驗感非常差，甚至有些滑動事件由于自身復雜的計算回調(diào)函數(shù)頻繁調(diào)用會引起前端頁面的卡頓。
還有就是在綁定scroll、resize事件時，當它發(fā)生的時候被觸發(fā)的頻率非常高、間隔很近，尤其是日常開發(fā)的頁面中，事件中涉及到大量的位置計算、DOM操作、元素重繪等等，這些都無法在下一個scroll事件出發(fā)前完成，就會引起瀏覽器的卡幀，嚴重影響用戶體驗感。
針對這些問題，提高用戶體驗，優(yōu)化程序性能，就可以采用節(jié)流和防抖的方式來解決這些問題，把多次計算匯合成一次計算，只操作一個精確點即可，這樣可以減少事件函數(shù)的調(diào)用頻率，減輕了瀏覽器負擔，提高了程序性能，提高了用戶體驗。
另外，防抖動和節(jié)流本質(zhì)是不一樣的。防抖是多次觸發(fā)但最后只會執(zhí)行一次，節(jié)流是多次觸發(fā)但周期內(nèi)只會執(zhí)行一次。
函數(shù)節(jié)流與函數(shù)防抖都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。
02
節(jié)流是什么？
節(jié)流（throttle）：當持續(xù)觸發(fā)事件時候，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)，也就是持續(xù)觸發(fā)事件，每隔一段時間只執(zhí)行一次函數(shù)。節(jié)流的策略是，在每個時間周期內(nèi)，不論觸發(fā)多少次事件，只執(zhí)行一次動作。
在上一個時間周期結(jié)束后，如果又有事件觸發(fā)，則開始新的時間周期，同理，在新的時間周期里只執(zhí)行一次動作。和防抖類似，節(jié)流策略也分前緣和延遲兩種。
延遲是指周期結(jié)束后執(zhí)行動作，前緣是指執(zhí)行動作后再開始周期。
節(jié)流使用場景：有很多，比如圖片懶加載的使用、進行ajax數(shù)據(jù)請求加載的使用、下滑自動加載數(shù)據(jù)、側(cè)邊浮動導航欄等等。
函數(shù)節(jié)流：指在一定時間周期內(nèi)執(zhí)行的操作只執(zhí)行一次，也就是預先設定一個執(zhí)行周期，當調(diào)用動作的時間大于等于執(zhí)行的周期則執(zhí)行該動作，接著進入下一個新周期。一個函數(shù)執(zhí)行一次后，只有大于設定的執(zhí)行周期后才會執(zhí)行第二次。
嵌入式物聯(lián)網(wǎng)需要學的東西真的非常多，千萬不要學錯了路線和內(nèi)容，導致工資要不上去！
無償分享大家一個資料包，差不多150多G。里面學習內(nèi)容、面經(jīng)、項目都比較新也比較全！某魚上買估計至少要好幾十。
點擊這里找小助理0元領?。杭游⑿蓬I取資料
03
節(jié)流函數(shù)的實現(xiàn)
節(jié)流函數(shù)的適用場景主要在拖拽場景和縮放場景中，如固定時間內(nèi)只執(zhí)??次，防?超?頻次觸發(fā)位置變動；以及監(jiān)控瀏覽器的resize等場景。具體實現(xiàn)示例如下所示：
const throttle=(fun, delay)=> { //fun是事件處理程序，delay是事件執(zhí)行的延遲事件，單位為毫秒
let timer=null;
return (...args)=> {
clearTimeout(timer); //每次觸發(fā)事件，需要把定時器清理之后重新計時
timer=setTimeout(()=> {
fun.apply(this, args); //執(zhí)行事件處理程序
timer=null; //事件執(zhí)行之后把清除定時器，待下次觸發(fā)事件的時候重新設置
}, delay);
};
};
04
防抖是什么？
防抖（debounce）：在持續(xù)觸發(fā)事件的時候，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時。
防抖一定是在事件觸發(fā)N秒后才會執(zhí)行，若在一個事件觸發(fā)的N秒內(nèi)又觸發(fā)了該事件，以新的事件時間為準，N秒過后才執(zhí)行，等觸發(fā)事件N秒內(nèi)不再觸發(fā)事件才執(zhí)行。
也就是多次快速頻繁地觸發(fā)事件，只會執(zhí)行一次事件函數(shù)，前提是需要加上一個時間限制。
防抖的特點是當事件快速連續(xù)不斷觸發(fā)時，動作只會執(zhí)行一次。分為兩種，一種是延遲debounce，一種是前緣debounce。延遲debounce，是在周期結(jié)束時執(zhí)行，前緣debounce，是在周期開始時執(zhí)行。
但當觸發(fā)有間斷，且間斷大于我們設定的間隔時間時，動作就會有多次執(zhí)行。
防抖使用場景：有很多，比如監(jiān)聽滾動事件、鼠標移動事件onmousemove、頻繁點擊表單提交按鈕等。
函數(shù)防抖：是指在一定時間內(nèi)，在動作被連續(xù)頻繁觸發(fā)的情況下，動作只會被執(zhí)行一次，也就是當調(diào)用動作過N秒后，才會執(zhí)行該動作，若在這N秒內(nèi)又調(diào)用該動作則將重新計算執(zhí)行時間，所以短時間內(nèi)的連續(xù)動作只會觸發(fā)一次。
05
防抖函數(shù)的實現(xiàn)
防抖函數(shù)的適用場景主要在防止多次提交場景，比如防?多次提交按鈕，只執(zhí)?最后提交的?次；輸入框輸入的時候，只執(zhí)??段連續(xù)的輸?事件的最后?次；以及搜索框進行搜索聯(lián)想詞功能。具體實現(xiàn)示例如下所示：
const debounce=(fun, delay)=> { //fun是事件處理程序，delay是事件執(zhí)行的延遲事件，單位為毫秒
let timer=null;
return (...args)=> {
clearTimeout(timer); //每次觸發(fā)事件，需要把定時器清理之后重新計時
timer=setTimeout(()=> {
fun.apply(this, args); //執(zhí)行事件處理程序
}, delay);
};
};
不管是在實際的前端開發(fā)工作中還是在前端求職面試中，節(jié)流和防抖都是非常關鍵的知識點，所以作為前端開發(fā)者來說必須要掌握它相關的內(nèi)容，尤其是從事前端開發(fā)不久的開發(fā)者哦~
轉(zhuǎn)載自：華清遠見
文章來源于前端開發(fā)：JS的節(jié)流與防抖
原文鏈接：https://mp.weixin.qq.com/s/jyZj2J4gdy1svRP9QdSKrw
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>標簽之前。告知瀏覽器的解析器,用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現(xiàn)。
標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。**
首先：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強調(diào)的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<img><input><link><meta>
鮮為人知的是：
<area><base><col><command><embed><keygen><param><source><track><wbr>
4.頁面導入樣式時，使用link和@import有什么區(qū)別？
link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內(nèi)容的應用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；
用正確的標簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。
在用戶沒有連網(wǎng)時，可以正常訪問站點或應用，在用戶與網(wǎng)絡連接時更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。
在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題。
label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>WebSocket、也可以調(diào)用localstorge、cookies等本地存儲方式，還可以使用頁面的路有參數(shù)傳遞
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發(fā)一個事件，
我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信；
14.如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
map+area或者svg
border-radius
純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
strong是標明重點內(nèi)容，有語氣加強的含義，使用閱讀設備閱讀網(wǎng)絡時：會重讀，而是展示強調(diào)內(nèi)容。
i內(nèi)容展示為斜體，em表示強調(diào)的文本；
h5新增的屬性
可以通過ele.dataset獲取到標簽上的data-x的屬性
返回一個對象
解決：解決方案是做成PNG8.
解決：方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
解決：解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
解決：解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
解決：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
解決：方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設計的網(wǎng)頁。
1）所有的標記都必須要有一個相應的結(jié)束標記
2）所有標簽的元素和屬性的名字都必須使用小寫
3）所有的XML標記都必須合理嵌套
4）所有的屬性必須用引號""括起來
5）把所有<和&特殊符號用編碼表示
6）給所有屬性賦一個值
7）不要在注釋內(nèi)容中使“--”
8）圖片必須有說明文字
title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。
改版的時候更方便 只要改css文件。
頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。
表現(xiàn)與結(jié)構(gòu)相分離。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。
派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優(yōu)先級是怎么樣定義的？
一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準確，它的優(yōu)先級就越高。
復雜的計算方法：
用1表示派生選擇器的優(yōu)先級
用10表示類選擇器的優(yōu)先級
用100標示ID選擇器的優(yōu)先級
div.test1 .span var 優(yōu)先級 1+10 +10 +1
span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
xxx li 優(yōu)先級 100 +1
那么問題來了，看下列代碼，<p>標簽內(nèi)的文字是什么顏色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
答案：red。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關系無關。
塊級元素(block)特性：
總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內(nèi)在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計算規(guī)則：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。
rgba()和opacity都能實現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果?。?/p>
* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel="external"]）
9.偽類選擇器（a: hover, li: nth - child）
* 可繼承： font-size font-family color, UL LI DL DD DT;
* 不可繼承 ：border padding margin width height ;
* 優(yōu)先級就近原則，樣式定義最近者為準;
* 載入樣式以最后載入的定位為準;優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復選框被選中。給div設置一個寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;}
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
* IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；
* png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
* （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
* Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
!important > id > class > 標簽
!important 比 內(nèi)聯(lián)優(yōu)先級高
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
講 DOM 先從 HTML 講起，講 HTML 先從 XML 講起。XML 是一種可擴展的標記語言，所謂可擴展就是它可以描述任何結(jié)構(gòu)化的數(shù)據(jù)，它是一棵樹！
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
createDocumentFragment() //創(chuàng)建一個DOM片段
createElement() //創(chuàng)建一個具體的元素
createTextNode() //創(chuàng)建一個文本節(jié)點
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點前插入一個新的子節(jié)點
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性
attribute是dom元素在文檔中作為html標簽擁有的屬性；
property就是dom元素在js中作為對象擁有的屬性。
所以：
對于html的標準屬性來說，attribute和property是同步的，是會自動更新的，
但是對于自定義的屬性來說，他們是不同步的，
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內(nèi)，當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
Src source,指向外部資源的位置,如果我們添加<script src="js.js"></script>瀏覽器會暫停其他資源的下載和處理,直到該資源加載,編譯,執(zhí)行完畢(圖片和框架也是如此),這也就是為什么js腳本要放在底部。
src用于替換當前元素,href用于在當前文檔和引入資源之間建立聯(lián)系。
cookie 本身不是用來做服務器端存儲的（計算機領域有很多這種“狗拿耗子”的例子，例如 CSS 中的 float），它是設計用來在服務器和客戶端進行信息傳遞的，因此我們的每個 HTTP 請求都帶著 cookie。但是 cookie 也具備瀏覽器端存儲的能力（例如記住用戶名和密碼），因此就被開發(fā)者用上了。
使用起來也非常簡單，document.cookie=....即可。
但是 cookie 有它致命的缺點：
存儲量太小，只有 4KB
所有 HTTP 請求都帶著，會影響獲取資源的效率
API 簡單，需要封裝才能用
后來，HTML5 標準就帶來了sessionStorage和localStorage，先拿localStorage來說，它是專門為了瀏覽器端緩存而設計的。
存儲量增大到 5MB
不會帶到 HTTP 請求中
API 適用于數(shù)據(jù)存儲 localStorage.setItem(key, value) localStorage.getItem(key)
sessionStorage的區(qū)別就在于它是根據(jù) session 過去時間而實現(xiàn)，而localStorage會永久有效，應用場景不同。例如，一些需要及時失效的重要信息放在sessionStorage中，一些不重要但是不經(jīng)常設置的信息，放在localStorage中。
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復制內(nèi)容、提高網(wǎng)站易用性；
、遇問題：
產(chǎn)品說：“最近需要弄個活動發(fā)到朋友圈中，我把設計圖發(fā)給你”
產(chǎn)品說：“有6張設計圖，我要上下滑動翻頁，都要放在一個頁面中啊，還有里面圖片要能動！要炫酷！，在加一個背景音樂哦”
我（吊炸天，炫酷的，真是折磨人）：“好”
產(chǎn)品：“加油！”
經(jīng)理：“+1”
老板：“+1”
二、解決思路：
1.要炫酷，要花里胡哨，自己寫估計要耗電時間，算了，找插件吧
2.滑動翻頁：為了保證用戶體驗，不會再去加載下一頁，自己放到一個頁面，所以每個頁面放到一個DIV中，通過滑動來顯示指定DIV
2.動畫效果:自己使用CSS插件：animate
三、偽代碼
HTML
<div class="swiper-container" id="swiper-container-v"> <section class="poster_wrap load" id="load"> <div class="p_loading"> <div class="p_loading_logo"></div> <p class="p_loading_tip">加載頁</p> </div> </section> <div class="swiper-wrapper"> <!-------------slide1-----------------> <section class="swiper-slide swiper-slide1 swiper-slide-v"> <div class="index-top ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s"> <h1>這是第一頁</h1> </div> </section> <!-------------slide2-----------------> <section class="swiper-slide swiper-slide2 swiper-slide-v"> <h1 class="posit_tit"><i class="about_us_tit_ico"></i>這是第二頁</h1> <div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s"> <div class="swiper-wrapper"> <div class="swiper-slide slide1"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二頁中的第1頁</h3> </div> <div class="job_details"> <span class="job_address">page1</span> </div> </div> <div class="swiper-slide slide2"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二頁中的第2頁</h3> </div> <div class="job_details"> <span class="job_address">page2</span> </div> </div> <div class="swiper-slide slide3"> <div class="posit_details_head"> <h3 class="posit_details_tit">第二頁中的第3頁</h3> </div> <div class="job_details"> <span class="job_address">page3</span> </div> </div> </div> </div> </section> </div> <!--向上箭頭--> <div class="arrow-box"> <img src="images/arrow.png" id="array"> </div> </div>
四、解析
使用到的是swiper插件做滑動翻頁，一般做活動廣告宣傳發(fā)到朋友圈，簡單上手，有炫酷。
五、地址
[演示地址](http://47.105.36.188:3030/toutiao/Swiper上下滑動翻頁面帶背景音樂/index.html)
[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/Swiper上下滑動翻頁面帶背景音樂)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
