HTML制作技巧與優(yōu)化之間的必然關(guān)系篇
1、Web語(yǔ)義化 和 SEO
html 常規(guī)標(biāo)簽有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語(yǔ)義化的標(biāo)簽，比如
header,acticle,aside,section,footer,audio,radio 等等。
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)銷及品牌建設(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)化。
2、頁(yè)面渲染機(jī)制
頁(yè)面渲染就是瀏覽器的渲染引擎將html代碼根據(jù)CSS定義的規(guī)則顯示在瀏覽器窗口中的過(guò)程。大致工作原理如下：
用戶輸入網(wǎng)址，瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件；
渲染引擎開(kāi)始載入html代碼，并將HTML中的標(biāo)簽轉(zhuǎn)化為DOM節(jié)點(diǎn)，生成DOM樹(shù)；
如果<head>中引用了外部css文件，則發(fā)出css文件請(qǐng)求，服務(wù)器返回該文件；
如果<head>中引用了外部js文件，則發(fā)出js文件請(qǐng)求，服務(wù)器返回該文件后開(kāi)始運(yùn)行；
渲染引擎繼續(xù)載入html中的<body>部分的代碼，并開(kāi)始解析前面返回的css文件，然后根據(jù)css選擇器計(jì)算出節(jié)點(diǎn)的樣式，創(chuàng)建渲染樹(shù)；
從根節(jié)點(diǎn)遞歸調(diào)用，計(jì)算每一個(gè)元素的大小、位置等，給每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)；
如果body中的<img>引用了圖片資源，則立即向服務(wù)器發(fā)出請(qǐng)求，此時(shí)渲染引擎不會(huì)等待圖片下載完畢，而是繼續(xù)渲染后面的代碼；
服務(wù)器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排版，因此引擎需要回過(guò)頭來(lái)重新渲染這部分代碼；
如果此時(shí)js腳本中運(yùn)行了style.display="none", 布局被改變，引擎也需要重新渲染這部分代碼；
直到</html>為止，頁(yè)面渲染完畢。
3、重繪和回流
當(dāng)渲染樹(shù)中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流。比如上面的img文件加載完成后就會(huì)引起回流，每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。
當(dāng)渲染樹(shù)中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會(huì)影響布局的，比如background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會(huì)引起回流。
會(huì)引起重繪和回流的操作
添加、刪除元素(回流+重繪)
隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
移動(dòng)元素，比如改變top,left,transform的值，或者移動(dòng)元素到另外一個(gè)父元素中。(重繪+回流)
對(duì)style的操作(對(duì)不同的屬性操作，影響不一樣)
還有一種是用戶的操作，比如改變?yōu)g覽器大小，改變?yōu)g覽器的字體大小等(回流+重繪)
4、本地存儲(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大小的前端頁(yè)面的數(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)景比較少，此處不作介紹。
5、瀏覽器緩存機(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ù)重新拉取文件。
6、History操作
用戶訪問(wèn)網(wǎng)頁(yè)的歷史記錄通常會(huì)被保存在一個(gè)類似于棧的對(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事件。
與其類似的還有一個(gè)事件: onhashchange，onhashchange是老API, 瀏覽器支持度高, 本來(lái)是用來(lái)監(jiān)聽(tīng)hash變化的, 但可以被利用來(lái)做客戶端前進(jìn)和后退事件的監(jiān)聽(tīng)，而onpopstate是專門(mén)用來(lái)監(jiān)聽(tīng)瀏覽器前進(jìn)后退的, 不僅可以支持hash, 非hash的同源url也支持。
7、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ò)的資源。
8、Canvas 和 SVG
Canvas 通過(guò)Java 來(lái)繪制 2D 圖形。Canvas 是逐像素進(jìn)行渲染的。在 Canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象。
SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。你可以為某個(gè)元素附加 Java 事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。
Canvas和SVG相比，canvas更依賴于分辨率，不支持事件處理器，文本渲染能力弱，比較適合密集型游戲，其中的許多對(duì)象會(huì)被頻繁繪制，而svg則比較適用于類似谷歌地圖帶有大型渲染區(qū)域的應(yīng)用程序。深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。
