整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
站打開(kāi)速度慢？網(wǎng)站加載圖片慢？網(wǎng)站容易卡頓？身為站長(zhǎng)和網(wǎng)站用戶的你有沒(méi)有遇到過(guò)這種情況？沒(méi)錯(cuò)，這些都是網(wǎng)站頁(yè)面體積惹的禍。解決辦法是通過(guò)技術(shù)手段去掉臃腫雜亂的代碼，減小網(wǎng)頁(yè)文件大小，加快網(wǎng)頁(yè)加載速度，替身網(wǎng)站打開(kāi)速度。
網(wǎng)頁(yè)精簡(jiǎn)代碼主要涉及以下幾個(gè)要點(diǎn)：
1.CSS樣式精簡(jiǎn)
網(wǎng)頁(yè)制作應(yīng)通過(guò)CSS（層疊樣式表單）來(lái)統(tǒng)一定制字體風(fēng)格。例如：
(bstyle="color:red;font-size:16px;")測(cè)試(/b)
(divid="divmain"style="font-size:12px;")DIV(/b)
(divstyle="color:red;")紅色(bstyle="color:green;")綠色(/b)(/div)
----------------------
(styletype="text/css")
b（color:red;font-size:16px;）/*通用對(duì)象*/
#divmain（font-size:12px;）/*ID對(duì)象*/
.red（color:red;）/*定制類(lèi)別*/
.redb（color:green;）/*定制類(lèi)別下的通用對(duì)象*/
(/style)
(b)測(cè)試(/b)
(divid="divmain")DIV(/b)
(divclass="red")紅色(b)綠色(/b)(/div)
CSS精簡(jiǎn)代碼示例文件把文字的字體、字號(hào)、顏色、背景色等統(tǒng)一起來(lái)，不用對(duì)每段文字單獨(dú)進(jìn)行格式定義，從而減少大量重復(fù)性標(biāo)簽。注意把所有css文件單獨(dú)存放在命名為css的外部文件中。
語(yǔ)法：(linkrel="stylesheet"type="text/css"href="/common/client.css")
作用的優(yōu)先級(jí)：自身的style屬性)頁(yè)面的內(nèi)部style對(duì)象)頁(yè)面外部css文件。
下載：css幫助
2.JavaScript精簡(jiǎn)：
1.簡(jiǎn)化js中的函數(shù)名稱(chēng)和變量。
例如：Google，里面的函數(shù)名稱(chēng)只有1個(gè)或者2個(gè)字符。
2.將網(wǎng)頁(yè)的公共部分轉(zhuǎn)換為腳本并存于js文件里。這樣可以減少文件大小，加快下載速度，同時(shí)也方便管理。不過(guò)不能將導(dǎo)航等等優(yōu)化的關(guān)鍵代碼轉(zhuǎn)換成js，否則搜索引擎搜索不到。
轉(zhuǎn)換方式：
原來(lái)：(h1)天天收藏夾(/h1)
腳本：document.write(“(h1)天天收藏夾(/h1)”);
例如：華軍軟件園源代碼，將標(biāo)題、導(dǎo)航等等都放著js文件里，將導(dǎo)航放在js里面就不太好了。
3.使用base標(biāo)簽精簡(jiǎn)：
Base標(biāo)簽是一個(gè)全集控制的標(biāo)簽。
比如：
(Atarget=”_blank”)代碼一(/A)
(Atarget=”_blank”)代碼一(/A)
其中http://www.llsffx.com和target=”_blank”:多次重復(fù)，增加無(wú)用的代碼。
修改為：
(head)
(basehref=”http://www.llsffx.com/”target=”_blank”)
(/head)
(body)
(ahref=”/code/1.htm”)代碼一(/a)
(ahref=”/code/2.htm”)代碼二(/a)
(/body)
4.慎用網(wǎng)頁(yè)精簡(jiǎn)代碼工具
通常的網(wǎng)頁(yè)精簡(jiǎn)代碼工具，對(duì)htm精簡(jiǎn)代碼具有一定的破壞性，常常為了精簡(jiǎn)代碼將標(biāo)簽的后半個(gè)標(biāo)簽刪除，造成網(wǎng)頁(yè)的不完整。
處理前：(table)(tr)(td)第一行(/td)(/tr)(tr)(td)第二行(/td)(/tr)(/table)
處理后：(table)(tr)(td)第一行(tr)(td)第二行(/table)
處理后(/td)(/tr)被去掉了，使頁(yè)面不完整。
5.刪除空格和回車(chē)
機(jī)智的精簡(jiǎn)代碼是連多余的空格和回車(chē)都刪除的一干二凈。這樣能夠使網(wǎng)頁(yè)文件大小下降不少。但是這樣的做后果是容易使代碼排列雜亂，加大程序猿修改代碼進(jìn)度。
注：()替換成<>和{}
eb前端技術(shù)由html、css和 javascript三大部分構(gòu)成，是一個(gè)龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門(mén)后端語(yǔ)言。而我們?cè)趯W(xué)習(xí)它的時(shí)候往往是先從某一個(gè)點(diǎn)切入，然后不斷地接觸和學(xué)習(xí)新的知識(shí)點(diǎn)，因此對(duì)于初學(xué)者很難理清楚整個(gè)體系的脈絡(luò)結(jié)構(gòu)。本文將對(duì)Web前端知識(shí)體系進(jìn)行簡(jiǎn)單的梳理，對(duì)應(yīng)的每個(gè)知識(shí)點(diǎn)點(diǎn)到為止，不作詳細(xì)介紹。目的是幫助大家審查自己的知識(shí)結(jié)構(gòu)是否完善，如有遺漏或不正確的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的縮寫(xiě)，即瀏覽器對(duì)象模型，當(dāng)一個(gè)瀏覽器頁(yè)面初始化時(shí)，會(huì)在內(nèi)存創(chuàng)建一個(gè)全局的對(duì)象，用以描述當(dāng)前窗口的屬性和狀態(tài)，這個(gè)全局對(duì)象被稱(chēng)為瀏覽器對(duì)象模型，即BOM。BOM的核心對(duì)象就是window，window
對(duì)象也是BOM的頂級(jí)對(duì)象，其中包含了瀏覽器的 6個(gè)核心模塊：
document -
即文檔對(duì)象，渲染引擎在解析HTML代碼時(shí)，會(huì)為每一個(gè)元素生成對(duì)應(yīng)的DOM對(duì)象，由于元素之間有層級(jí)關(guān)系，因此整個(gè)HTML代碼解析完以后，會(huì)生成一個(gè)由不同節(jié)點(diǎn)組成的樹(shù)形結(jié)構(gòu)，俗稱(chēng)DOM樹(shù)，document
用于描述DOM樹(shù)的狀態(tài)和屬性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在瀏覽器里嵌入另一個(gè)窗口，父框架和子框架擁有獨(dú)立的作用域和上下文。
history - 以棧(FIFO)的形式保存著頁(yè)面被訪問(wèn)的歷史記錄，頁(yè)面前進(jìn)即入棧，頁(yè)面返回即出棧。
location - 提供了當(dāng)前窗口中加載的文檔相關(guān)信息以及一些導(dǎo)航功能。
navigator - 用來(lái)描述瀏覽器本身，包括瀏覽器的名稱(chēng)、版本、語(yǔ)言、系統(tǒng)平臺(tái)、用戶特性字符串等信息。
screen - 提供了瀏覽器顯示屏幕的相關(guān)屬性，比如顯示屏幕的寬度和高度，可用寬度和高度。
2、DOM 系統(tǒng)
DOM 是 Document Object Model 的縮寫(xiě)，即 文檔對(duì)象模型，是所有瀏覽器公共遵守的標(biāo)準(zhǔn)，DOM
將HTML和XML文檔映射成一個(gè)由不同節(jié)點(diǎn)組成的樹(shù)型結(jié)構(gòu)，俗稱(chēng)DOM樹(shù)。其核心對(duì)象是document，用于描述DOM樹(shù)的狀態(tài)和屬性，并提供對(duì)應(yīng)的DOM操作API。隨著歷史的發(fā)展，DOM
被劃分為1級(jí)、2級(jí)、3級(jí)，共3個(gè)級(jí)別：
1級(jí)DOM - 在1998年10月份成為W3C的提議，由DOM核心與DOM
HTML兩個(gè)模塊組成。DOM核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu)，允許獲取和操作文檔的任意部分。DOM
HTML通過(guò)添加HTML專(zhuān)用的對(duì)象與函數(shù)對(duì)DOM核心進(jìn)行了擴(kuò)展。
2級(jí)DOM - 鑒于1級(jí)DOM僅以映射文檔結(jié)構(gòu)為目標(biāo)，DOM
2級(jí)面向更為寬廣。通過(guò)對(duì)原有DOM的擴(kuò)展，2級(jí)DOM通過(guò)對(duì)象接口增加了對(duì)鼠標(biāo)和用戶界面事件（DHTML長(zhǎng)期支持鼠標(biāo)與用戶界面事件）、范圍、遍歷（重復(fù)執(zhí)行DOM文檔）和層疊樣式表（CSS）的支持。同時(shí)也對(duì)DOM
1的核心進(jìn)行了擴(kuò)展，從而可支持XML命名空間。
3級(jí)DOM -
通過(guò)引入統(tǒng)一方式載入和保存文檔和文檔驗(yàn)證方法對(duì)DOM進(jìn)行進(jìn)一步擴(kuò)展，DOM3包含一個(gè)名為“DOM載入與保存”的新模塊，DOM核心擴(kuò)展后可支持XML1.0的所有內(nèi)容，包括XML
Infoset、 XPath、和XML Base。
瀏覽器對(duì)不同級(jí)別DOM的支持情況如下所示：
從圖中可以看出，移動(dòng)端常用的 webkit 內(nèi)核瀏覽器目前只支持DOM2，而不支持DOM3 。
新手福利獲取方式：
1.在你手機(jī)的右上角有【關(guān)注】選項(xiàng)，或點(diǎn)擊我的頭像，點(diǎn)擊關(guān)注！（關(guān)注我）
2.關(guān)注后，手機(jī)客戶端點(diǎn)擊我的主頁(yè)面，右上角有私信，請(qǐng)私信發(fā)我：html
其實(shí)作為一個(gè)開(kāi)發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要這里請(qǐng)私信我“html”不管你是小白還是大牛歡迎入住大家一起交流成長(zhǎng)。小編會(huì)在里面不定期分享干貨源碼，包括我精心整理的一份零基礎(chǔ)教程。歡迎各位感興趣的的小伙伴。
學(xué)習(xí)思路：
3、事件系統(tǒng)
事件是用戶與頁(yè)面交互的基礎(chǔ)，到目前為止，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到了 移動(dòng)端的 觸摸事件(touch) 和
手勢(shì)事件(guesture)，touch事件描述了手指在屏幕操作的每一個(gè)細(xì)節(jié)，guesture 則是描述多手指操作時(shí)更為復(fù)雜的情況，總結(jié)如下：
第一根手指放下，觸發(fā) touchstart，除此之外什么都不會(huì)發(fā)生
手指滑動(dòng)時(shí)，觸發(fā)touchmove
第二根手指放下，觸發(fā) gesturestart
觸發(fā)第二根手指的 touchstart
立即觸發(fā) gesturechange
任意手指移動(dòng)，持續(xù)觸發(fā) gesturechange
第二根手指彈起時(shí)，觸發(fā) gestureend，以后將不會(huì)再觸發(fā) gesturechange
觸發(fā)第二根手指的 touchend
觸發(fā)touchstart (多根手指在屏幕上，提起一根，會(huì)刷新一次全局touch) _ ___
彈起第一根手指，觸發(fā) touchend
更多關(guān)于手勢(shì)事件的介紹請(qǐng)參考：
gesture事件處理復(fù)雜手勢(shì)
DOM2.0 模型將事件處理流程分為三個(gè)階段，即 事件捕獲階段 、 事件處理階段 、 事件冒泡階段， 如圖所示：
事件捕獲 ：當(dāng)用戶觸發(fā)點(diǎn)擊事件后，頂層對(duì)象document 就會(huì)發(fā)出一個(gè)事件流，從最外層的DOM節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)傳遞，最終到達(dá)目標(biāo)元素。
事件處理 ：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素綁定的處理函數(shù)。如果沒(méi)有綁定監(jiān)聽(tīng)函數(shù)，則不做任何處理。
事件冒泡 ：事件流從目標(biāo)元素開(kāi)始，向最外層DOM節(jié)點(diǎn)傳遞，途中如果有節(jié)點(diǎn)綁定了事件處理函數(shù)，這些函數(shù)就會(huì)被執(zhí)行。
利用事件冒泡原理可以實(shí)現(xiàn) 事件委托
，所謂事件委托，就是在父元素上添加事件監(jiān)聽(tīng)器，用以監(jiān)聽(tīng)和處理子元素的事件，避免重復(fù)為子元素綁定相同的事件。當(dāng)目標(biāo)元素的事件被觸發(fā)以后，這個(gè)事件就從目標(biāo)元素開(kāi)始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過(guò)event.target
獲取到這個(gè)目標(biāo)元素，這樣做的好處是，父元素只需綁定一個(gè)事件監(jiān)聽(tīng)，就可以對(duì)所有子元素的事件進(jìn)行處理了，從而減少了不必要的事件綁定，對(duì)頁(yè)面性能有一定的提升。
4、HTML解析過(guò)程
瀏覽器加載 html 文件以后，渲染引擎會(huì)從上往下，一步步來(lái)解析HTML標(biāo)簽，大致過(guò)程如下：
用戶輸入網(wǎng)址，瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件；
渲染引擎開(kāi)始解析 html 標(biāo)簽，并將標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)，生成 DOM樹(shù)；
如果head 標(biāo)簽中引用了外部css文件，則發(fā)出css文件請(qǐng)求，服務(wù)器返回該文件，該過(guò)程會(huì)阻塞后面的解析；
如果引用了外部 js 文件，則發(fā)出 js 文件請(qǐng)求，服務(wù)器返回后立即執(zhí)行該腳本，這個(gè)過(guò)程也會(huì)阻塞html的解析；
引擎開(kāi)始解析 body 里面的內(nèi)容，如果標(biāo)簽里引用了css 樣式，就需要解析剛才下載好的css文件，然后用css來(lái)設(shè)置標(biāo)簽的樣式屬性，并生成渲染樹(shù)；
如果 body 中的 img 標(biāo)簽引用了圖片資源，則立即向服務(wù)器發(fā)出請(qǐng)求，此時(shí)引擎不會(huì)等待圖片下載完畢，而是繼續(xù)解析后面的標(biāo)簽；
服務(wù)器返回圖片文件，由于圖片需要占用一定的空間，會(huì)影響到后面元素的排版，因此引擎需要重新渲染這部分內(nèi)容；
如果此時(shí) js 腳本中運(yùn)行了 style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼；
直到 html 結(jié)束標(biāo)簽為止，頁(yè)面解析完畢。
5、重繪 和 回流
當(dāng)渲染樹(shù)中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱(chēng)為回流。比如上面的img文件加載完成后就會(huì)引起回流，每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。
當(dāng)渲染樹(shù)中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如 background-color。則就叫稱(chēng)為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會(huì)引起回流。會(huì)引起重繪和回流的操作如下：
添加、刪除元素(回流+重繪)
隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
移動(dòng)元素，比如改變top,left的值，或者移動(dòng)元素到另外一個(gè)父元素中。(重繪+回流)
對(duì)style的操作(對(duì)不同的屬性操作，影響不一樣)
還有一種是用戶的操作，比如改變?yōu)g覽器大小，改變?yōu)g覽器的字體大小等(回流+重繪)
另外，transform
操作不會(huì)引起重繪和回流，是一種高效率的渲染。這是因?yàn)閠ransform屬于合成屬性，對(duì)合成屬性進(jìn)行transition/animation
動(dòng)畫(huà)時(shí)將會(huì)創(chuàng)建一個(gè)合成層，這使得動(dòng)畫(huà)元素在一個(gè)獨(dú)立的層中進(jìn)行渲染，當(dāng)元素的內(nèi)容沒(méi)有發(fā)生改變，就沒(méi)必要進(jìn)行重繪，瀏覽器會(huì)通過(guò)重新復(fù)合來(lái)創(chuàng)建動(dòng)畫(huà)幀。
6、本地存儲(chǔ)
本地存儲(chǔ)最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數(shù)據(jù)以鍵值對(duì)的形式保存，可以設(shè)置過(guò)期時(shí)間。 但是 cookie
不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)槊空?qǐng)求一次頁(yè)面，cookie 都會(huì)發(fā)送給服務(wù)器，這使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
Firefox和Safari允許cookie多達(dá)4097個(gè)字節(jié)，包括名(name)、值(value) 和 等號(hào)。
Opera允許cookie多達(dá)4096個(gè)字節(jié)，包括：名(name)、值(value) 和 等號(hào)。
Internet Explorer允許cookie多達(dá)4095個(gè)字節(jié)，包括：名(name)、值(value) 和 等號(hào)。
在所有瀏覽器中，任何cookie大小超過(guò)限制都被忽略，且永遠(yuǎn)不會(huì)被設(shè)置。
html5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value
的形式來(lái)存儲(chǔ)數(shù)據(jù)，前者是永久存儲(chǔ)，后者的存儲(chǔ)期限僅限于瀏覽器會(huì)話(session)，即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。
localStorage的存儲(chǔ)空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個(gè)相當(dāng)于一個(gè)5M大小的前端數(shù)據(jù)庫(kù)，相比于cookie，可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲(chǔ)數(shù)據(jù)超過(guò)了localStorage
的存儲(chǔ)空間后會(huì)拋出異常。
此外，H5還提供了逆天的websql和
indexedDB，允許前端以關(guān)系型數(shù)據(jù)庫(kù)的方式來(lái)存儲(chǔ)本地?cái)?shù)據(jù)，相對(duì)來(lái)說(shuō)，這個(gè)功能目前應(yīng)用的場(chǎng)景比較少，此處不作介紹。
7、瀏覽器緩存機(jī)制
瀏覽器緩存機(jī)制是指通過(guò) HTTP 協(xié)議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段來(lái)控制文件緩存的機(jī)制。
Cache-Control 用于控制文件在本地緩存有效時(shí)長(zhǎng)。最常見(jiàn)的，比如服務(wù)器回包：Cache-Control:max-age=600
表示文件在本地應(yīng)該緩存，且有效時(shí)長(zhǎng)是600秒 (從發(fā)出請(qǐng)求算起)。在接下來(lái)600秒內(nèi)，如果有請(qǐng)求這個(gè)資源，瀏覽器不會(huì)發(fā)出 HTTP
請(qǐng)求，而是直接使用本地緩存的文件。
Last-Modified 是標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間。下次請(qǐng)求時(shí)，如果文件緩存過(guò)期，瀏覽器通過(guò) If-Modified-Since
字段帶上這個(gè)時(shí)間，發(fā)送給服務(wù)器，由服務(wù)器比較時(shí)間戳來(lái)判斷文件是否有修改。如果沒(méi)有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時(shí)返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個(gè)用于控制緩存有效時(shí)間，一個(gè)在緩存失效后，向服務(wù)查詢是否有更新。
Cache-Control 還有一個(gè)同功能的字段：Expires。Expires 的值一個(gè)絕對(duì)的時(shí)間點(diǎn)，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在這個(gè)時(shí)間點(diǎn)之前，緩存都是有效的。
Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段，Cache-Control 是 HTTP1.1
標(biāo)準(zhǔn)中新加的字段，功能一樣，都是控制緩存的有效時(shí)間。當(dāng)這兩個(gè)字段同時(shí)出現(xiàn)時(shí)，Cache-Control 是高優(yōu)化級(jí)的。
Etag 也是和 Last-Modified 一樣，對(duì)文件進(jìn)行標(biāo)識(shí)的字段。不同的是，Etag
的取值是一個(gè)對(duì)文件進(jìn)行標(biāo)識(shí)的特征字串。在向服務(wù)器查詢文件是否有更新時(shí)，瀏覽器通過(guò) If-None-Match
字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來(lái)判斷文件是否有更新。沒(méi)有更新回包304，有更新回包200。Etag 和
Last-Modified 可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用。兩個(gè)同時(shí)使用時(shí)，只要滿足基中一個(gè)條件，就認(rèn)為文件沒(méi)有更新。
另外有兩種特殊的情況：
手動(dòng)刷新頁(yè)面(F5)，瀏覽器會(huì)直接認(rèn)為緩存已經(jīng)過(guò)期(可能緩存還沒(méi)有過(guò)期)，在請(qǐng)求中加上字段：Cache-Control:max-age=0，發(fā)包向服務(wù)器查詢是否有文件是否有更新。
強(qiáng)制刷新頁(yè)面(Ctrl+F5)，瀏覽器會(huì)直接忽略本地的緩存(有緩存也會(huì)認(rèn)為本地沒(méi)有緩存)，在請(qǐng)求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，發(fā)包向服務(wù)重新拉取文件。
8、History
用戶訪問(wèn)網(wǎng)頁(yè)的歷史記錄通常會(huì)被保存在一個(gè)類(lèi)似于棧的對(duì)象中，即history對(duì)象，點(diǎn)擊返回就出棧，跳下一頁(yè)就入棧。 它提供了以下方法來(lái)操作頁(yè)面的前進(jìn)和后退：
window.history.back( ) 返回到上一個(gè)頁(yè)面
window.history.forward( ) 進(jìn)入到下一個(gè)頁(yè)面
window.history.go( [delta] ) 跳轉(zhuǎn)到指定頁(yè)面
HTML5 對(duì)History Api 進(jìn)行了增強(qiáng)，新增了兩個(gè)Api 和一個(gè)事件，分別是pushState、replaceState 和
onpopstate：
pushState是往history對(duì)象里添加一個(gè)新的歷史記錄，即壓棧。
replaceState 是替換history對(duì)象中的當(dāng)前歷史記錄。
當(dāng)點(diǎn)擊瀏覽器后退按鈕或 js調(diào)用history.back 都會(huì)觸發(fā) onpopstate 事件。
與其類(lèi)似的還有一個(gè)事件：onhashchange，onhashchange是老API，瀏覽器支持度高，本來(lái)是用來(lái)監(jiān)聽(tīng)hash變化的，但可以被利用來(lái)做客戶端前進(jìn)和后退事件的監(jiān)聽(tīng)，而onpopstate是專(zhuān)門(mén)用來(lái)監(jiān)聽(tīng)瀏覽器前進(jìn)后退的，不僅可以支持hash，非hash的同源
url 也支持。
9、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來(lái)的一塊緩存區(qū)，如果要在這個(gè)緩存中保存數(shù)據(jù)，可以使用一個(gè)描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡(jiǎn)單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。manifest 文件可分為三個(gè)部分：
- CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
- NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存
- FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問(wèn)時(shí)的回退頁(yè)面（比如 404 頁(yè)面）
離線緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：
離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。
10、Web語(yǔ)義化 和 SEO
Web語(yǔ)義化是指使用語(yǔ)義恰當(dāng)?shù)臉?biāo)簽，使頁(yè)面有良好的結(jié)構(gòu)，頁(yè)面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點(diǎn)擊訪問(wèn)網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營(yíng)銷(xiāo)及品牌建設(shè)的目標(biāo)。
搜索引擎通過(guò)爬蟲(chóng)技術(shù)獲取的頁(yè)面就是由一堆 html 標(biāo)簽組成的代碼，人可以通過(guò)可視化的方式來(lái)判斷頁(yè)面上哪些內(nèi)容是重點(diǎn)，而機(jī)器做不到。
但搜索引擎會(huì)根據(jù)標(biāo)簽的含義來(lái)判斷內(nèi)容的權(quán)重，因此，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽，使整個(gè)頁(yè)面的語(yǔ)義明確，結(jié)構(gòu)清晰，搜索引擎才能正確識(shí)別頁(yè)面中的重要內(nèi)容，并予以較高的權(quán)值。比如h1~h6這幾個(gè)標(biāo)簽在SEO中的權(quán)值非常高，用它們作頁(yè)面的標(biāo)題就是一個(gè)簡(jiǎn)單的SEO優(yōu)化。
言
對(duì)于項(xiàng)目，那就是我們的親兒子啊，作為一個(gè)前端菜鳥(niǎo)，面向用戶就是將自己的兒子介紹給別人認(rèn)識(shí)，肯定要讓他白白凈凈，漂漂亮亮的啦，給別人一眼就喜歡上的感覺(jué)咯，哈哈哈~
常在河邊走，哪有不濕鞋，在我們編程的工程中，尤其是前端的同學(xué)，肯定少不了跟Css打交道，命名、縮寫(xiě)、書(shū)寫(xiě)順序等都是有一定規(guī)范，這個(gè)規(guī)范可能來(lái)源于你、我、或者瀏覽器等不定向人群（這個(gè)規(guī)范是我瞎編的），今天自己整合收集，以及個(gè)人項(xiàng)目用到的html+css的書(shū)寫(xiě)規(guī)范送給在"編程界"奮斗的小伙伴，你 不是一個(gè)人在戰(zhàn)斗。
話不多說(shuō)，鍋燒空氣，鍋熱放油，放入寫(xiě)好的html+css炸一遍，撈出，控油，裹上雞蛋液，粘上面包糠，再炸，隔壁小孩都饞哭了，不好吃你來(lái)打我。
一 命名規(guī)則說(shuō)明
1、所有的命名最好都小寫(xiě)
2、屬性的值一定要用雙引號(hào)("")括起來(lái)，且一定要有值如class="app",id="app"
3、每個(gè)標(biāo)簽都要有開(kāi)始和結(jié)束，且要有正確的層次，排版有規(guī)律工整例如：<div></div>
4、空元素要有結(jié)束的tag或于開(kāi)始的tag后加上"/" <br />、<img />
5、表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等
6、<h1>到<h6>的定義，應(yīng)遵循從大到小的原則，體現(xiàn)文檔的結(jié)構(gòu)，并有利于搜索引擎的查詢,因此，請(qǐng)不要利用標(biāo)題標(biāo)簽來(lái)改變同一行中的字體大小。相反，我們應(yīng)當(dāng)使用層疊樣式表定義來(lái)達(dá)到漂亮的顯示效果。
7、給每一個(gè)表格和表單加上一個(gè)唯一的、結(jié)構(gòu)標(biāo)記id
8、給圖片加上alt標(biāo)簽,alt屬性是一個(gè)必需的屬性，它規(guī)定在圖像無(wú)法顯示時(shí)的替代文本。假設(shè)由于下列原因用戶無(wú)法查看圖像，alt 屬性可以為圖像提供替代的信息：網(wǎng)速太慢、src 屬性中的錯(cuò)誤、瀏覽器禁用圖像、用戶使用的是屏幕閱讀器。
9、盡量使用英文命名原則
10、盡量不縮寫(xiě)，除非一看就明白的單詞如btn。
11、命名方式(BEM)：類(lèi)-體（例：g-head）、類(lèi)-體-修飾符（例：u-btn-active）。
12、scss中的變量、函數(shù)、混合、placeholder采用駝峰式命名
13、后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁(yè)面布局中使用，因?yàn)槲廴镜目赡苄暂^大；
14、減少id命名，id在JS是唯一的，不能多次使用，id的優(yōu)先級(jí)優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。
二 網(wǎng)頁(yè)外層重要部分CSS樣式命名
wrap ------------------ 用于最外層 header ---------------- 用于頭部 main ------------------ 用于主體內(nèi)容（中部） main-left ------------- 左側(cè)布局 main-right ------------ 右側(cè)布局 nav ------------------- 網(wǎng)頁(yè)菜單導(dǎo)航條 content --------------- 用于網(wǎng)頁(yè)中部主體 footer ---------------- 用于底部
三 樣式屬性順序
1. 定位：positionz-indexleftrighttopbottomclip等。
2. 自身屬性：widthheightmin-heightmax-heightmin-widthmax-width等。
3. 文字樣式：colorfont-sizeletter-spacing, colortext-align等。
4. 背景：background-imageborder等。
5.文本屬性: text-alignvertical-aligntext-wraptext-transformtext-indenttext-decoration letter-spacingword-spacingwhite-spacetext-overflow等。
6. css3中屬性：content、box-shadow、animation、border-radius、transform等
/* yes */
.example {
z-index: -1;
display: inline-block;
font-size: 16px;
color: red;
background-color: #eee;
}
/* no */
.example {
color: red;
background-color: #eee;
display: inline-block;
z-index: -1;
font-size: 16px;
}
目的：減少瀏覽器reflow(回流)，提升瀏覽器渲染dom的性能。
關(guān)注我的頭條號(hào)，分享更多的技術(shù)學(xué)習(xí)文章，我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
文檔加載完成到完全顯示之間瀏覽器的渲染流程為：
1）瀏覽器解析html構(gòu)建dom樹(shù)，解析css構(gòu)建cssom樹(shù)即css rule tree：將html和css都解析成樹(shù)形的數(shù)據(jù)結(jié)構(gòu)；dom樹(shù)的構(gòu)建過(guò)程是一個(gè)深度遍歷過(guò)程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。2）構(gòu)建render樹(shù)：DOM樹(shù)和cssom樹(shù)合并之后形成render樹(shù)。為了構(gòu)建渲染樹(shù)，瀏覽器大體完成了下列工作：從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)節(jié)點(diǎn)。對(duì)于每個(gè)可見(jiàn)節(jié)點(diǎn)，為其找到適配的CSSOM規(guī)則并應(yīng)用它們。發(fā)射可見(jiàn)節(jié)點(diǎn)，連同其內(nèi)容和計(jì)算的樣式。渲染樹(shù)中包含了屏幕上所有可見(jiàn)內(nèi)容及其樣式信息。3）布局render樹(shù)：有了render樹(shù)，瀏覽器已經(jīng)知道網(wǎng)頁(yè)中有哪些節(jié)點(diǎn)，各個(gè)節(jié)點(diǎn)的css定義以及它們的從屬關(guān)系，接著就開(kāi)始布局，計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置和大小。(html采用了一種流式布局的布局模型，從上到下，從左到右順序布局，布局的起點(diǎn)是從render樹(shù)的根節(jié)點(diǎn)開(kāi)始的，對(duì)應(yīng)dom樹(shù)的document節(jié)點(diǎn)，其初始位置為(0,0)，詳細(xì)的布局過(guò)程為：每個(gè)renderer的寬度由父節(jié)點(diǎn)的renderer確定。父節(jié)點(diǎn)遍歷子節(jié)點(diǎn)，確定子節(jié)點(diǎn)的位置(x,y)，調(diào)用子節(jié)點(diǎn)的layout方法確定其高度，父節(jié)點(diǎn)根據(jù)子節(jié)點(diǎn)的height, margin, padding確定自身的高度)。4）渲染，繪制render樹(shù)：瀏覽器已經(jīng)知道啦哪些節(jié)點(diǎn)要顯示，每個(gè)節(jié)點(diǎn)的css屬性是什么，每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里。就進(jìn)入啦最后一步，按照計(jì)算出來(lái)的規(guī)則，通過(guò)顯卡把內(nèi)容畫(huà)在屏幕上。瀏覽器并不是一獲取到css樣式就立馬開(kāi)始解析而是根據(jù)css樣式的書(shū)寫(xiě)順序按照dom樹(shù)的結(jié)構(gòu)分布render樣式，完成第（2）步，然后開(kāi)始遍歷每個(gè)樹(shù)節(jié)點(diǎn)的css樣式進(jìn)行解析，此時(shí)的css樣式的遍歷順序完全是按照之前的的書(shū)寫(xiě)順序，在解析過(guò)程中，一旦瀏覽器發(fā)現(xiàn)某個(gè)元素的定位變化影響布局，則需要倒回去重新渲染。例如css樣式：{width: 100px; height: 100px; background-color: red; position: absolute;}當(dāng)瀏覽器解析到position的時(shí)候突然發(fā)現(xiàn)該元素是絕對(duì)定位元素需要脫離文檔流，而之前卻是按照普通元素進(jìn)行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由于該元素的占位發(fā)生變化，其他元素也可能會(huì)受到回流的影響而重新排位，最終導(dǎo)致（3）步驟花費(fèi)時(shí)間太久而影響到（4）步驟的顯示，影響了用戶體驗(yàn)。
注：render樹(shù)的結(jié)構(gòu)不等同于DOM樹(shù)的結(jié)構(gòu)，一些設(shè)置display:none的節(jié)點(diǎn)不會(huì)被放在render樹(shù)中，但會(huì)在dom樹(shù)中。
有些情況，比如修改了元素的樣式，瀏覽器并不會(huì)立刻回流(reflow)或重繪(repaint)，而是把這些操作積攢一批，然后做一次reflow，這也叫做異步reflow。但是在有些情況下，比如改變窗口大小，改變頁(yè)面默認(rèn)字體等瀏覽器會(huì)馬上進(jìn)行reflow。為了更好的用戶體驗(yàn)，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)在屏幕上，并不會(huì)等到所有html都解析完成之后再去構(gòu)建和布局render樹(shù)。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容，同時(shí)，可能還在網(wǎng)絡(luò)上下載其余內(nèi)容。
四 css樣式書(shū)寫(xiě)規(guī)范
使用CSS縮寫(xiě)屬性
CSS有些屬性是可以縮寫(xiě)的，比如padding,margin,font等等，這樣精簡(jiǎn)代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。
去掉小數(shù)點(diǎn)前的“0”
簡(jiǎn)寫(xiě)命名(前提是要讓人看懂你的命名才能簡(jiǎn)寫(xiě)哦)
16進(jìn)制顏色代碼縮寫(xiě)
連字符CSS選擇器命名規(guī)范
1.長(zhǎng)名稱(chēng)或詞組可以使用中橫線來(lái)為選擇器命名。2.不建議使用“_”下劃線來(lái)命名CSS選擇器，為什么呢？
功能
狀態(tài)
注釋的寫(xiě)法
/* Header */ 內(nèi)容區(qū) /* End Header */
id的命名
1)頁(yè)面結(jié)構(gòu)
容器: container
頁(yè)頭：header
內(nèi)容：content/container
頁(yè)面主體：main
頁(yè)尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體佈局寬度：wrapper
左右中：left right center(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainnav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：register
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)籤頁(yè)：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋?zhuān)簄ote
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專(zhuān)欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
五 HTML5-語(yǔ)義化
距HTML5標(biāo)準(zhǔn)規(guī)范制定完成并公開(kāi)發(fā)布已經(jīng)有好些年了，但是多數(shù)公司還是用的不是很多，可能一部分原因是部分用戶在使用低版本瀏覽器吧。
什么是語(yǔ)義化？就是用合理、正確的標(biāo)簽來(lái)展示內(nèi)容，比如h1~h6定義標(biāo)題。
語(yǔ)義化優(yōu)點(diǎn)：
1、header
<header>定義文檔或者文檔的部分區(qū)域的頁(yè)眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。在一個(gè)文檔中，您可以定義多個(gè)<header>元素，但需要注意的是<header>元素不能作為<address>、<footer>或 <header>元素的子元素。
2、nav
<nav>描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁(yè)面或頁(yè)面內(nèi)部其他部分的鏈接列表。在一個(gè)文檔中，可定義多個(gè)元素。
3、main
<main>定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無(wú)二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能）。需要注意的是在一個(gè)文檔中不能出現(xiàn)多個(gè)<main>標(biāo)簽。
4、article
<article>元素表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。當(dāng)<article>元素嵌套使用時(shí)，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評(píng)論的元素可嵌套在代表博客文章的元素中。
5、aside
<aside>元素表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無(wú)關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來(lái)而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。
6、footer
<footer>定義最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁(yè)腳。一個(gè)頁(yè)腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。使用footer插入聯(lián)系信息時(shí)，應(yīng)在 footer 元素內(nèi)使用 元素。注意不能包含<footer>或者<header>
7、section
<section>表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專(zhuān)題組。
如果元素內(nèi)容可以分為幾個(gè)部分的話，應(yīng)該使用 <article>而不是 <section>。不要把 <section>元素作為一個(gè)普通的容器來(lái)使用，特別是當(dāng)<section>僅僅是為了美化樣式或方便腳本使用的時(shí)候，應(yīng)使用<div>。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
