一、PC端優(yōu)化策略?

? 主要包括網(wǎng)絡(luò)加載類、頁(yè)面渲染類、CSS優(yōu)化類、JavaScript執(zhí)行類、緩存類、圖片類、架構(gòu)協(xié)議類等幾類；
1、網(wǎng)絡(luò)加載類
（1）減少HTTP資源請(qǐng)求次數(shù)：
? 在前端頁(yè)面中，通常建議盡可能合并靜態(tài)資源圖片、JavaScript或CSS代碼，減少頁(yè)面請(qǐng)求數(shù)和資源請(qǐng)求消耗，這樣可以縮短首屏加載時(shí)間，通過(guò)構(gòu)建工具合并雪碧圖、CSS、JavaScript文件等都是為了減少HTTP資源請(qǐng)求次數(shù)，另外也要盡量避免重復(fù)的資源，防止增加多余請(qǐng)求；
（2）減少HTTP請(qǐng)求大小：
? 除了減少HTTP資源請(qǐng)求次數(shù)，也要盡量減少每個(gè)HTTP請(qǐng)求的大小，如減少?zèng)]必要的圖片、JavaScript、CSS 及 HTML 代碼，對(duì)文件進(jìn)行壓縮優(yōu)化，或者使用gzip壓縮傳輸內(nèi)容等都可以用來(lái)減少文件大小，縮短網(wǎng)絡(luò)傳輸?shù)却龝r(shí)延，使用構(gòu)建工具來(lái)壓縮靜態(tài)圖片資源以及移除代碼中的注釋并壓縮，目的都是為了減少HTTP請(qǐng)求的大小；
（3）將CSS或JavaScript放到外部文件中，避免使用style或script標(biāo)簽直接引入：
? 在HTML文件上引用外部資源可以有效利用瀏覽器的靜態(tài)資源緩存，但有時(shí)候在移動(dòng)端頁(yè)面CSS或JavaScript比較簡(jiǎn)單的情況下為了減少請(qǐng)求，也會(huì)將CSS或JavaScript直接寫到HTML里面，具體要根據(jù)CSS或JavaScript文件的大小和業(yè)務(wù)的場(chǎng)景來(lái)分析，如果CSS或JavaScript文件內(nèi)容較多，業(yè)務(wù)邏輯較復(fù)雜，建議放到外部文件引入；
? <link rel="stylesheet" href="/css/master.css">
? <script type="text/javascript" src="http://cdn.domain.com/path/main.js"></script>
（4）避免頁(yè)面中空的href和src：
? 當(dāng)<link>標(biāo)簽的href屬性為空，或<script>、<img>、<iframe>標(biāo)簽的src屬性為空時(shí)，瀏覽器在渲染過(guò)程中仍會(huì)將href屬性或者src屬性中的空內(nèi)容進(jìn)行加載，直至加載失敗，這樣就阻塞了頁(yè)面中其他資源的下載進(jìn)程，而且最終加載到的內(nèi)容是無(wú)效的，因此要盡量避免；
? <!--不推薦-->
? <img src="" alt="photo" >
? <a href="">點(diǎn)擊鏈接</a>
（5）為HTML指定Cache-Control或Expires：
? 為HTML內(nèi)容設(shè)置Cache-Control 或 Expires可以將HTML內(nèi)容緩存起來(lái)，避免頻繁向服務(wù)器端發(fā)送請(qǐng)求，在頁(yè)面中的Cache-Control 或 Expires頭部有效時(shí)，瀏覽器將直接從緩存中讀取內(nèi)容，不再向服務(wù)器端發(fā)送請(qǐng)求；
? <meta http-equiv="Cache-Control" content="max-age=7200">
? <meta http-equiv="Expires" content="Mon,20Jul201623:00:00GMT">
（6）合理設(shè)置Etag和Last-Modified：
? 合理設(shè)置Etag 和 Last-Modified使用瀏覽器緩存，對(duì)于未修改的文件，靜態(tài)資源服務(wù)器會(huì)向?yàn)g覽器端返回304，讓瀏覽器從緩存中讀取文件，減少Web資源下載的帶寬消耗并降低服務(wù)器負(fù)載；
? <meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">
（7）減少頁(yè)面重定向：
? 頁(yè)面每次重定向都會(huì)延長(zhǎng)頁(yè)面內(nèi)容返回的等待延時(shí)，一次重定向大約需要200毫秒不等的時(shí)間開(kāi)銷（無(wú)緩存），為了保證用戶盡快看到頁(yè)面內(nèi)容，要盡量避免頁(yè)面重定向；
（8）使用靜態(tài)資源分域存放來(lái)增加下載并行數(shù)：
? 瀏覽器在同一時(shí)刻向同一域名請(qǐng)求文件的并行下載數(shù)是有限的，因此可以利用多個(gè)域名的主機(jī)來(lái)存放不同的靜態(tài)資源，增大頁(yè)面加載時(shí)資源的并行下載數(shù)，縮短頁(yè)面資源加載的時(shí)間，通常根據(jù)多個(gè)域名來(lái)分別存儲(chǔ)JavaScript、CSS和圖片文件；
? <link rel="stylesheet" >
? <script src="http://cdn2.domain.com/path/main.js"></script>
（9）使用靜態(tài)資源CDN來(lái)存儲(chǔ)文件：
? 如果條件允許，可以利用CDN網(wǎng)絡(luò)加快同一個(gè)地理區(qū)域內(nèi)重復(fù)靜態(tài)資源文件的響應(yīng)下載速度，縮短資源請(qǐng)求時(shí)間；
（10）使用CDN Combo下載傳輸內(nèi)容：
? CDN Combo是在CDN服務(wù)器端將多個(gè)文件請(qǐng)求打包成一個(gè)文件的形式來(lái)返回的技術(shù)，這樣可以實(shí)現(xiàn)HTTP連接傳輸?shù)囊淮涡詮?fù)用，減少瀏覽器的HTTP請(qǐng)求數(shù)，加快資源下載速度，例如同一個(gè)域名CDN服務(wù)器上的a.js，b.js，c.js就可以按如下方式在一個(gè)請(qǐng)求中下載：
? <script src="http://cdn.domain.com/path/a.js,b.js,c.js"></script>
（11）使用可緩存的AJAX：
? 對(duì)于返回內(nèi)容相同的請(qǐng)求，沒(méi)必要每次都直接從服務(wù)端拉取，合理使用AJAX緩存能加快AJAX響應(yīng)速度并減輕服務(wù)器壓力；
? $.ajax({
??? url: url,
??? type: 'get',
??? cache: true, //推薦使用緩存
??? data: {},
??? success() {},
??? error() {}
? });
（12）使用GET來(lái)完成AJAX請(qǐng)求：
? 使用XMLHttpRequest時(shí),瀏覽器中的POST方法會(huì)發(fā)起兩次TCP數(shù)據(jù)包傳輸，首先會(huì)發(fā)送文件頭，然后發(fā)送HTTP正文數(shù)據(jù)，而使用GET時(shí)只發(fā)送頭部，所以在拉取服務(wù)端數(shù)據(jù)時(shí)使用GET請(qǐng)求效率更高；
? $.ajax({
??? url: url,
??? type: 'get', //推薦使用get完成請(qǐng)求
??? data: {},
??? success() {},
??? error() {}
? });
（13）減少Cookie的大小并進(jìn)行Cookie隔離：
? HTTP請(qǐng)求通常默認(rèn)帶上瀏覽器端的Cookie一起發(fā)送給服務(wù)器，所以在非必要的情況下，要盡量減少Cookie來(lái)減少HTTP請(qǐng)求的大小，對(duì)于靜態(tài)資源，盡量使用不同的域名來(lái)存放，因?yàn)镃ookie默認(rèn)是不能跨域的，這樣就做到了不同域名下靜態(tài)資源請(qǐng)求的Cookie隔離；
（14）縮小favicon.ico并緩存：
? 有利favicon.ico的重復(fù)加載，因?yàn)橐话阋粋€(gè)Web應(yīng)用的favicon.ico是很少改變的；
（15）推薦使用異步JavaScript資源：
? 異步的JavaScript資源不會(huì)阻塞文檔解析，所以允許在瀏覽器中優(yōu)先渲染頁(yè)面，延后加載腳本執(zhí)行，例如JavaScript的引用可以如下設(shè)置，也可以使用模塊化加載機(jī)制來(lái)實(shí)現(xiàn)；其中使用async時(shí)，加載和渲染后續(xù)文檔元素的過(guò)程和main.js的加載與執(zhí)行是并行的；使用defer時(shí)，加載后續(xù)文檔元素的過(guò)程和main.js的加載是并行的，但是main.js的執(zhí)行要在頁(yè)面所有元素解析完成之后才開(kāi)始執(zhí)行；
? <script src="main.js" defer></script>
? <script src="main.js" async></script>
（16）消除阻塞渲染的CSS及JavaScript：
? 對(duì)于頁(yè)面中加載時(shí)間過(guò)長(zhǎng)的CSS或JavaScript文件，需要進(jìn)行合理拆分或延后加載，保證關(guān)鍵路徑的資源能快速加載完成；
（17）避免使用CSS import引用加載CSS：
? CSS中的@import可以從另一個(gè)樣式文件中引入樣式，但應(yīng)該避免這種用法，因?yàn)檫@樣會(huì)增加CSS資源加載的關(guān)鍵路徑長(zhǎng)度，帶有＠import的CSS樣式需要在CSS文件串行解析到＠import時(shí)才會(huì)加載另外的CSS文件，大大延后CSS渲染完成的時(shí)間；
? <!--不推薦-->
? <style>
? @import "path/main.css";
? </style>
? <!--推薦-->
? <link rel="stylesheet" >

2、頁(yè)面渲染類
（1）把CSS資源引用放到HTML文件頂部：
? 一般推薦將所有CSS資源指定在HTML文檔<head>中，這樣瀏覽器可以優(yōu)先下載CSS并盡早完成頁(yè)面渲染；
（2）JavaScript資源引用放到HTML文件底部：
? JavaScript資源放到HTML文檔底部可以防止JavaScript的加載和解析執(zhí)行對(duì)頁(yè)面渲染造成阻塞，由于JavaScript資源默認(rèn)是解析阻塞的，除非被標(biāo)記為異步或者通過(guò)其他的異步方式加載，否則會(huì)阻塞HTML DOM解析和CSS渲染過(guò)程；
（3）盡量預(yù)先設(shè)定圖片等大?。?br>? 在加載大量的圖片元素時(shí)，盡量預(yù)先限定圖片的尺寸大小，否則在圖片加載過(guò)程中會(huì)更新圖片的排版信息，產(chǎn)生大量的重排；
（4）不要在HTML中直接縮放圖片：
? 在HTML中直接縮放圖片會(huì)導(dǎo)致頁(yè)面內(nèi)容的重排重繪，此時(shí)可能會(huì)使頁(yè)面中的其他操作產(chǎn)生卡頓，因此要盡量減少在頁(yè)面中直接進(jìn)行圖片縮放；
（5）減少DOM元素?cái)?shù)量和深度：
? HTML中標(biāo)簽元素越多，標(biāo)簽的層級(jí)越深，瀏覽器解析DOM并繪制到瀏覽器中所花的時(shí)間就越長(zhǎng)，所以應(yīng)盡可能保持DOM元素簡(jiǎn)潔和層級(jí)較少；
? <!--不推薦-->
? <div>
??? <span>
??????? <a href="javascript:void(0);">
??????????? <img src="./path/photo.jpg" alt="圖片">
??????? </a>
??? </span>
? </div>
? <!--推薦-->
? <img src="./path/photo.jpg" alt="圖片" >
（6）盡量避免在選擇器末尾添加通配符：
? CSS解析匹配到渲染樹(shù)的過(guò)程是從右到左的逆向匹配，在選擇器末尾添加通配符至少會(huì)增加一倍多計(jì)算量；
（7）減少使用關(guān)系型樣式表的寫法：
? 直接使用唯一的類名即可最大限度的提升渲染引擎繪制渲染樹(shù)的效率；
（8）盡量減少使用JS動(dòng)畫：
? JS直接操作DOM極容易引起頁(yè)面的重排；
（9）CSS動(dòng)畫使用translate、scale代替top、height：
? 盡量使用CSS3的translate、scale屬性代替top、left和height、width，避免大量的重排計(jì)算；
（10）盡量避免使用<table>、<iframe>：
? <table>內(nèi)容的渲染是將table的DOM渲染樹(shù)全部生成完并一次性繪制到頁(yè)面上的，所以在長(zhǎng)表格渲染時(shí)很耗性能，應(yīng)該盡量避免使用它，可以考慮使用列表元素<ul>代替；盡量使用異步的方式動(dòng)態(tài)添加iframe，因?yàn)閕frame內(nèi)資源的下載進(jìn)程會(huì)阻塞父頁(yè)面靜態(tài)資源的下載與CSS及HTML DOM的解析；
（11）避免運(yùn)行耗時(shí)的JavaScript：
? 長(zhǎng)時(shí)間運(yùn)行的JavaScript會(huì)阻塞瀏覽器構(gòu)建DOM樹(shù)、DOM渲染樹(shù)、渲染頁(yè)面，所以任何與頁(yè)面初次渲染無(wú)關(guān)的邏輯功能都應(yīng)該延遲加載執(zhí)行，這和JavaScript資源的異步加載思路是一致的；
（12）避免使用CSS表達(dá)式或CSS濾鏡：
? CSS表達(dá)式或CSS濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應(yīng)該盡量避免使用；
? //不推薦
? .opacity{
??? filter : progid : DXImageTransform.Microsoft.Alpha( opacity = 50 );
? }

二、移動(dòng)端優(yōu)化策略

1、網(wǎng)絡(luò)加載類
（1）首屏數(shù)據(jù)請(qǐng)求提前，避免JavaScript文件加載后才請(qǐng)求數(shù)據(jù)：
? 為了進(jìn)一步提升頁(yè)面加載速度，可以考慮將頁(yè)面的數(shù)據(jù)請(qǐng)求盡可能提前，避免在JavaScript加載完成后才去請(qǐng)求數(shù)據(jù)，通常數(shù)據(jù)請(qǐng)求是頁(yè)面內(nèi)容渲染中關(guān)鍵路徑最長(zhǎng)的部分，而且不能并行，所以如果能將數(shù)據(jù)請(qǐng)求提前，可以極大程度縮短頁(yè)面內(nèi)容的渲染完成時(shí)間；
（2）首屏加載和按需加載，非首屏內(nèi)容滾屏加載，保證首屏內(nèi)容最小化：
? 由于移動(dòng)端網(wǎng)絡(luò)速度相對(duì)較慢，網(wǎng)絡(luò)資源有限，因此為了盡快完成頁(yè)面內(nèi)容的加載，需要保證首屏加載資源最小化，非首屏內(nèi)容使用滾動(dòng)的方式異步加載，一般推薦移動(dòng)端頁(yè)面首屏數(shù)據(jù)展示延時(shí)最長(zhǎng)不超過(guò)3秒，目前中國(guó)聯(lián)通3G的網(wǎng)絡(luò)速度為338KB/s (2.71Mb/s)，所以推薦首屏所有資源大小不超過(guò)1014KB，即大約不超過(guò)1MB；
（3）模塊化資源并行下載：
? 在移動(dòng)端資源加載中，盡量保證JavaScript資源并行加載，主要指的是模塊化JavaScript資源的異步加載，例如AMD的異步模塊，使用并行的加載方式能夠縮短多個(gè)文件資源的加載時(shí)間；
（4）inline首屏必備的CSS和JavaScript：
? 通常為了在HTML加載完成時(shí)能使瀏覽器中有基本的樣式，需要將頁(yè)面渲染時(shí)必備的CSS和JavaScript通過(guò)<script>或<style>內(nèi)聯(lián)到頁(yè)面中，避免頁(yè)面HTML載入完成到頁(yè)面內(nèi)容展示這段過(guò)程中頁(yè)面出現(xiàn)空白；
? <!DOCTYPE html>
? <head>
??? <meta charset="UTF-8">
??? <title>樣例</title>
??? <meta>
??? <style>
????? /*必備的首屏CSS*/
????? html,
????? body {
??????? margin: 0;
??????? padding: 0;
??????? background-color: #ccc;
????? }
??? </style>
? </head>
? <body>
? </body>
? </html>
（5）meta dns prefetch設(shè)置DNS預(yù)解析：
? 設(shè)置文件資源的DNS預(yù)解析，讓瀏覽器提前解析獲取靜態(tài)資源的主機(jī)IP，避免等到請(qǐng)求時(shí)才發(fā)起DNS解析請(qǐng)求，通常在移動(dòng)端HTML中可以采用如下方式完成：
? <!--cdn域名預(yù)解析-->
? <meta http-equiv="x-dns-prefetch-control" content="on" >
? <link rel="dns-prefetch" >
（6）資源預(yù)加載：
? 對(duì)于移動(dòng)端首屏加載后可能會(huì)被使用的資源，需要在首屏完成加載后盡快進(jìn)行加載，保證在用戶需要瀏覽時(shí)已經(jīng)加載完成，這時(shí)候如果再去異步請(qǐng)求就顯得很慢；
（7）合理利用MTU策略：
? 通常情況下，我們認(rèn)為TCP網(wǎng)絡(luò)傳輸?shù)淖畲髠鬏攩卧∕aximum Transmission Unit，MTU）為 1500B，即一個(gè) RTT（Round-Trip Time，網(wǎng)絡(luò)請(qǐng)求往返時(shí)間）內(nèi)可以傳輸?shù)臄?shù)據(jù)量最大為1500字節(jié)，因此在前后端分離的開(kāi)發(fā)模式中，盡量保證頁(yè)面的HTML內(nèi)容在1KB以內(nèi)，這樣整個(gè)HTML的內(nèi)容請(qǐng)求就可以在一個(gè)RTT內(nèi)請(qǐng)求完成，最大限度地提高HTML載入速度；

2、緩存類
（1）合理利用瀏覽器緩存：
? 除了上面所說(shuō)的Cache-Control、Expires、Etag 和 Last-Modified來(lái)設(shè)置HTTP緩存外，在移動(dòng)端還可以使用localStorage等來(lái)保存AJAX返回的數(shù)據(jù)，或者使用localStorage保存CSS或JavaScript靜態(tài)資源內(nèi)容，實(shí)現(xiàn)移動(dòng)端的離線應(yīng)用，盡可能減少網(wǎng)絡(luò)請(qǐng)求，保證靜態(tài)資源內(nèi)容的快速加載；
（2）靜態(tài)資源離線方案：
? 對(duì)于移動(dòng)端或Hybrid應(yīng)用，可以設(shè)置離線文件或離線包機(jī)制讓靜態(tài)資源請(qǐng)求從本地讀取，加快資源載入速度，并實(shí)現(xiàn)離線更新；
（3）嘗試使用AMP HTML
? AMP HTML可以作為優(yōu)化前端頁(yè)面性能的一個(gè)解決方案，使用AMP Component中的元素來(lái)代替原始的頁(yè)面元素進(jìn)行直接渲染；
? <!--不推薦-->
? <video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4"
? poster="path/poster.jpg">
? <div fallback>
??? <p>Your browser doesn’t support HTML5 video</p>
? </div>
? <source type="video/mp4" src="foo.mp4">
? <source type="video/webm" src="foo.webm">
? </video>
? <!--推薦-->
? <amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">
? <div fallback>
??? <p>Your browser doesn’t support HTML5 video</p>
? </div>
? <source type="video/mp4" src="foo.mp4">
? <source type="video/webm" src="foo.webm">
? </amp-video>
（4）嘗試使用PWA模式：
? PWA（Progressive Web Apps）是 Google 提出的用前沿的 Web 技術(shù)為網(wǎng)頁(yè)提供 App 般使用體驗(yàn)的一系列方案；

3、圖片類
（1）圖片壓縮處理：
? 在移動(dòng)端，通常要保證頁(yè)面中一切用到的圖片都是經(jīng)過(guò)壓縮優(yōu)化處理的，而不是以原圖的形式直接使用的，因?yàn)槟菢雍芟牧髁?，而且加載時(shí)間更長(zhǎng)；
（2）使用較小的圖片，合理使用base64內(nèi)嵌圖片：
? 在頁(yè)面使用的背景圖片不多且較小的情況下，可以將圖片轉(zhuǎn)化成base64編碼嵌入到HTML頁(yè)面或CSS文件中，這樣可以減少頁(yè)面的HTTP請(qǐng)求數(shù)，需要注意的是，要保證圖片較小，一般圖片大小超過(guò)2KB就不推薦使用base64嵌入顯示了；
? .class-name{
??? background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
? }
（3）使用更高壓縮比格式的圖片：
? 使用具有較高壓縮比格式的圖片，如webp（需要設(shè)計(jì)降級(jí)兼容方案）等，在同等圖片畫質(zhì)的情況下，高壓縮比格式的圖片體積更小，能夠更快完成文件傳輸，節(jié)省網(wǎng)絡(luò)流量；
? <img src="http://cdn.domain.com/path/photo.webp" alt="webp格式圖片" >
（4）圖片懶加載：
? 為了保證頁(yè)面內(nèi)容的最小化，加速頁(yè)面的渲染，盡可能節(jié)省移動(dòng)端網(wǎng)絡(luò)流量，頁(yè)面中的圖片資源推薦使用懶加載實(shí)現(xiàn)，在頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)載入圖片；
? <img data-src="http://cdn.domain.com/path/photo.jpg" alt="懶加載圖片" >
（5）使用MediaQuery 或 srcset根據(jù)不同屏幕加載不同大小圖片：
? 針對(duì)不同的移動(dòng)端屏幕尺寸和分辨率，輸出不同大小的圖片或背景圖能保證在用戶體驗(yàn)不降低的前提下節(jié)省網(wǎng)絡(luò)流量，加快部分機(jī)型的圖片加載速度，這在移動(dòng)端非常值得推薦；
（6）使用iconfont代替圖片圖標(biāo)：
? 在頁(yè)面中盡可能使用iconfont來(lái)代替圖片圖標(biāo)，這樣做的好處有：使用iconfont體積較小，而且是矢量圖，因此縮放時(shí)不會(huì)失真；可以方便地修改圖片大小尺寸和呈現(xiàn)顏色；但是需要注意的是，iconfont引用不同webfont格式時(shí)的兼容性寫法，根據(jù)經(jīng)驗(yàn)推薦盡量按照以下順序書寫，否則不容易兼容到所有的瀏覽器上；
? @font-face{
??? font-family:iconfont;
??? src:url("./iconfont.eot");
??? src:url("./iconfont.eot?#iefix") format("eot"),
??? url("./iconfont.woff") format("woff"),
??? url("./iconfont.ttf") format("truetype");
? }
（7）定義圖片大小限制：
? 加載的單張圖片一般建議不超過(guò)30KB，避免大圖片加載時(shí)間長(zhǎng)而阻塞頁(yè)面其他資源的下載，因此推薦10KB以內(nèi)，如果用戶上傳的圖片過(guò)大，建議設(shè)置告警系統(tǒng)，幫助我們觀察了解整個(gè)網(wǎng)站的圖片流量情況，做出進(jìn)一步的改善；
（8）強(qiáng)緩存策略：
? 對(duì)于一些永遠(yuǎn)不會(huì)變的圖片可以使用強(qiáng)緩存的方式緩存在用戶的瀏覽器上；

4、腳本類
（1）盡量使用id：
? 選擇器選擇頁(yè)面DOM元素時(shí)盡量使用id選擇器，因?yàn)閕d選擇器速度最快；
（2）合理緩存DOM對(duì)象：
? 對(duì)于需要重復(fù)使用的DOM對(duì)象，要優(yōu)先設(shè)置緩存變量，避免每次使用時(shí)都要從整個(gè)DOM樹(shù)中重新查找；
? //不推薦
? $('#mod.active').remove('active');
? $('#mod.not-active').addClass('active');
? //推薦
? let $mod=$('#mod');
? $mod.find('.active').remove('active');
? $mod.find('.not-active').addClass('active');
（3）頁(yè)面元素盡量使用事件代理，避免直接事件綁定：
? 使用事件代理可以避免對(duì)每個(gè)元素都進(jìn)行綁定，并且可以避免出現(xiàn)內(nèi)存泄露及需要?jiǎng)討B(tài)添加元素的事件綁定問(wèn)題，所以盡量不要直接使用事件綁定；
? //不推薦
? $('.btn').on('click',function(e){
??? console.log(this);
? });
? //推薦
? $('body').on('click','.btn',function(e){
??? console.log(this);
? });
（4）使用touchstart代替click：
? 由于移動(dòng)端屏幕的設(shè)計(jì)，touchstart事件和click事件觸發(fā)時(shí)間之間存在300毫秒的延時(shí)，所以在頁(yè)面中沒(méi)有實(shí)現(xiàn)touchmove滾動(dòng)處理的情況下，可以使用touchstart事件來(lái)代替元素的click事件，加快頁(yè)面點(diǎn)擊的響應(yīng)速度，提高用戶體驗(yàn)，但同時(shí)我們也要注意頁(yè)面重疊元素touch動(dòng)作的點(diǎn)擊穿透問(wèn)題；
? //不推薦
? $('body').on('click','.btn',function(e){
??? console.log(this);
? });
? //推薦
? $('body').on('touchstart','.btn',function(e){
??? console.log(this);
? });
（5）避免touchmove、scroll連續(xù)事件處理：
? 需要對(duì)touchmove、scroll這類可能連續(xù)觸發(fā)回調(diào)的事件設(shè)置事件節(jié)流，例如設(shè)置每隔16ms（60幀的幀間隔為16.7ms，因此可以合理地設(shè)置為16ms）才進(jìn)行一次事件處理，避免頻繁的事件調(diào)用導(dǎo)致移動(dòng)端頁(yè)面卡頓；
? //不推薦
? $('.scroller').on('touchmove','.btn',function(e){
??? console.log(this);
? });
? //推薦
? $('.scroller').on('touchmove','.btn',function(e){
??? let self=this;
??? setTimeout(function(){
????? console.log(self);
??? },16);
? });
（6）避免使用eval、with，使用join代替連接符+，推薦使用ECMAScript6的字符串模板，這些都是一些基礎(chǔ)的安全腳本編寫問(wèn)題，盡可能使用較高效率的特性來(lái)完成這些操作，避免不規(guī)范或不安全的寫法；
（7）盡量使用ECMAScript6+的特性來(lái)編程：
? ECMAScript6+一定程序上更加安全高效，而且部分特性執(zhí)行速度更快，也是未來(lái)規(guī)范的需要，所以推薦使用ECMAScript6+的新特性來(lái)完成后面的開(kāi)發(fā)；

5、渲染類
（1）使用Viewport固定屏幕渲染，可以加速頁(yè)面渲染內(nèi)容：
?? 一般認(rèn)為，在移動(dòng)端設(shè)置Viewport可以加速頁(yè)面的渲染，同時(shí)可以避免縮放導(dǎo)致頁(yè)面重排重繪；
（2）避免各種形式重排重繪：
? 頁(yè)面的重排重繪很耗性能，所以一定要盡可能減少頁(yè)面的重排重繪，例如頁(yè)面圖片大小變化，元素位置變化等這些情況都會(huì)導(dǎo)致重排重繪；
（3）使用CSS3動(dòng)畫，開(kāi)啟GPU加速：
? 使用CSS3動(dòng)畫時(shí)可以設(shè)置transform:translateZ(0) 來(lái)開(kāi)啟移動(dòng)設(shè)備瀏覽器的GPU圖形處理加速，讓動(dòng)畫過(guò)程更加流暢，但需要注意的是，在Native WebView 下 GPU 加速有幾率產(chǎn)生 App Crash；
? -webkit-transform:translateZ(0);
? -ms-transform:translateZ(0);
? -o-transform:translateZ(0);
? transform:translateZ(0);
（4）合理使用Canvas 和 requestAnimationFrame：
? 選擇Canvas 或requestAnimationFrame等更高效的動(dòng)畫實(shí)現(xiàn)方式，盡量避免使用setTimeout、setInterval等方式來(lái)直接處理連續(xù)動(dòng)畫；
（5）SVG 代替圖片：
? 部分情況下可以考慮使用SVG 代替圖片實(shí)現(xiàn)動(dòng)畫，因?yàn)槭褂肧VG格式內(nèi)容更小，而且SVG DOM結(jié)構(gòu)方便調(diào)整；
（6）不濫用float：
? 在DOM渲染樹(shù)生成后的布局渲染階段，使用float的元素布局計(jì)算比較耗性能，所以盡量減少float的使用，推薦使用固定布局或flex-box彈性布局的方式來(lái)實(shí)現(xiàn)頁(yè)面元素布局；
（7）不濫用web字體或過(guò)多font-size聲明：
? 過(guò)多的font-size聲明會(huì)增加字體的大小計(jì)算，而且也沒(méi)有必要；
（8）做好腳本容錯(cuò)：
? 腳本容錯(cuò)可以避免非正常環(huán)境的執(zhí)行錯(cuò)誤影響頁(yè)面的加載和不相關(guān)功能的使用；

6、架構(gòu)協(xié)議類
（1）嘗試使用 SPDY 和 HTTP2：
? 在條件允許的情況下可以考慮使用 SPDY 協(xié)議來(lái)進(jìn)行文件資源傳輸，利用連接復(fù)用加快傳輸過(guò)程，縮短資源加載時(shí)間，HTTP2 在未來(lái)也是可以考慮嘗試的；
（2）使用后端數(shù)據(jù)渲染：
? 使用后端數(shù)據(jù)渲染的方式可以加快頁(yè)面內(nèi)容的渲染展示，避免空白頁(yè)面的出現(xiàn)，同時(shí)可以解決移動(dòng)端頁(yè)面 SEO 的問(wèn)題，如果條件允許，后端數(shù)據(jù)渲染是一個(gè)很不錯(cuò)的實(shí)踐思路；
（3）使用 NativeView 代替 DOM 的性能劣勢(shì)：
? 可以嘗試使用 NativeView 的 MNV＊ 開(kāi)發(fā)模式來(lái)避免 HTML DOM 性能慢的問(wèn)題，目前使用 MNV＊ 的開(kāi)發(fā)模式已經(jīng)可以將頁(yè)面內(nèi)容渲染體驗(yàn)做到接近客戶端 Native 應(yīng)用的體驗(yàn)了，但需要避免 js Framework 和 native Framework 的頻繁交互；

雅虎網(wǎng)站性能優(yōu)化的 14 條規(guī)則：

盡可能減少 HTTP 請(qǐng)求數(shù)

使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

為文件頭指定 Expires 或 Cache-Control，使內(nèi)容具有緩存性

使用 Gzip 壓縮內(nèi)容

把 CSS 放到頂部

把 JavaScript 放在底部

避免在 CSS 中使用 Expressions

把 JavaScript 和 CSS 都放到外部文件中

減少 DNS 查找次數(shù)

壓縮 JavaScript 和 CSS

避免重定向

剔除重復(fù)的 JavaScript 和 CSS

配置 Etags

使 AJAX 緩存

對(duì)規(guī)則的分析：

代碼編寫方面的規(guī)則：

把 CSS 放到頂部

把 JavaScript 放在底部

把 JavaScript 和 CSS 都放到外部文件中

避免在 CSS 中使用 Expressions

使 AJAX 緩存

打包方面的規(guī)則：

盡可能減少 HTTP 請(qǐng)求數(shù)

壓縮 JavaScript 和 CSS

剔除重復(fù)的 JavaScript 和 CSS

部署方面的規(guī)則：

使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

為文件頭指定 Expires 或 Cache-Control，使內(nèi)容具有緩存性

使用 Gzip 壓縮內(nèi)容

減少 DNS 查找次數(shù)

避免重定向

配置 Etags

對(duì)規(guī)則的實(shí)踐

部署方面的規(guī)則，應(yīng)用 Nginx 為靜態(tài)文件添加 Expires 跟 Cache-Control 頭，

配置 Etags，并啟用 Gzip 壓縮。并且避免在 Nginx 中做重定向，有條件的話可以

啟用 CDN，并優(yōu)化網(wǎng)絡(luò)配置以減少 DNS 查找次數(shù)。

代碼編寫方面的規(guī)則，需要在編寫代碼種形成規(guī)范。默認(rèn)使用類似 jQuery 這樣的庫(kù)

便可以對(duì) AJAX 進(jìn)行緩存。

打包方面 Linner 可以合并 JavaScript 與 CSS 文件, 并且支持小圖片的合并，用以減少 HTTP 請(qǐng)求數(shù)。同時(shí) Linner 的倉(cāng)庫(kù)管理可以避免重復(fù)的 JavaScript 與 CSS文件的出現(xiàn)。在build過(guò)后所有的文件將會(huì)被壓縮。

三、前端SEO優(yōu)化

一、搜索引擎工作原理

　　當(dāng)我們?cè)谳斎肟蛑休斎腙P(guān)鍵詞，點(diǎn)擊搜索或查詢時(shí)，然后得到結(jié)果。深究其背后的故事，搜索引擎做了很多事情。

　　在搜索引擎網(wǎng)站，比如百度，在其后臺(tái)有一個(gè)非常龐大的數(shù)據(jù)庫(kù)，里面存儲(chǔ)了海量的關(guān)鍵詞，而每個(gè)關(guān)鍵詞又對(duì)應(yīng)著很多網(wǎng)址，這些網(wǎng)址是百度程序從茫茫的互聯(lián)網(wǎng)上一點(diǎn)一點(diǎn)下載收集而來(lái)的，這些程序稱之為“搜索引擎蜘蛛”或“網(wǎng)絡(luò)爬蟲”。這些勤勞的“蜘蛛”每天在互聯(lián)網(wǎng)上爬行，從一個(gè)鏈接到另一個(gè)鏈接，下載其中的內(nèi)容，進(jìn)行分析提煉，找到其中的關(guān)鍵詞，如果“蜘蛛”認(rèn)為關(guān)鍵詞在數(shù)據(jù)庫(kù)中沒(méi)有而對(duì)用戶是有用的便存入數(shù)據(jù)庫(kù)。反之，如果“蜘蛛”認(rèn)為是垃圾信息或重復(fù)信息，就舍棄不要，繼續(xù)爬行，尋找最新的、有用的信息保存起來(lái)提供用戶搜索。當(dāng)用戶搜索時(shí)，就能檢索出與關(guān)鍵字相關(guān)的網(wǎng)址顯示給訪客。

　　一個(gè)關(guān)鍵詞對(duì)用多個(gè)網(wǎng)址，因此就出現(xiàn)了排序的問(wèn)題，相應(yīng)的當(dāng)與關(guān)鍵詞最吻合的網(wǎng)址就會(huì)排在前面了。在“蜘蛛”抓取網(wǎng)頁(yè)內(nèi)容，提煉關(guān)鍵詞的這個(gè)過(guò)程中，就存在一個(gè)問(wèn)題：“蜘蛛”能否看懂。如果網(wǎng)站內(nèi)容是flash和js，那么它是看不懂的，會(huì)犯迷糊，即使關(guān)鍵字再貼切也沒(méi)用。相應(yīng)的，如果網(wǎng)站內(nèi)容是它的語(yǔ)言，那么它便能看懂，它的語(yǔ)言即SEO。

二、SEO簡(jiǎn)介

　　全稱：Search English Optimization，搜索引擎優(yōu)化。自從有了搜索引擎，SEO便誕生了。

　　存在的意義：為了提升網(wǎng)頁(yè)在搜索引擎自然搜索結(jié)果中的收錄數(shù)量以及排序位置而做的優(yōu)化行為。簡(jiǎn)言之，就是希望百度等搜索引擎能多多我們收錄精心制作后的網(wǎng)站，并且在別人訪問(wèn)時(shí)網(wǎng)站能排在前面。

　　分類：白帽SEO和黑帽SEO。白帽SEO，起到了改良和規(guī)范網(wǎng)站設(shè)計(jì)的作用，使網(wǎng)站對(duì)搜索引擎和用戶更加友好，并且網(wǎng)站也能從搜索引擎中獲取合理的流量，這是搜索引擎鼓勵(lì)和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷來(lái)獲取更多用戶的訪問(wèn)量，這類行為大多是欺騙搜索引擎，一般搜索引擎公司是不支持與鼓勵(lì)的。本文針對(duì)白帽SEO，那么白帽SEO能做什么呢？

　　1. 對(duì)網(wǎng)站的標(biāo)題、關(guān)鍵字、描述精心設(shè)置，反映網(wǎng)站的定位，讓搜索引擎明白網(wǎng)站是做什么的；

　　2. 網(wǎng)站內(nèi)容優(yōu)化：內(nèi)容與關(guān)鍵字的對(duì)應(yīng)，增加關(guān)鍵字的密度；

　　3. 在網(wǎng)站上合理設(shè)置Robot.txt文件；

　　4. 生成針對(duì)搜索引擎友好的網(wǎng)站地圖；

　　5. 增加外部鏈接，到各個(gè)網(wǎng)站上宣傳；

三、前端SEO

　　通過(guò)網(wǎng)站的結(jié)構(gòu)布局設(shè)計(jì)和網(wǎng)頁(yè)代碼優(yōu)化，使前端頁(yè)面既能讓瀏覽器用戶能夠看懂，也能讓“蜘蛛”看懂。

搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可；description把頁(yè)面內(nèi)容高度概括，不可過(guò)分堆砌關(guān)鍵詞；keywords列舉出重要關(guān)鍵詞。

（一）合理的title、description、keywords

1、title

title，就是瀏覽器上顯示的那些內(nèi)容，不僅用戶能看到，也能被搜索引擎檢索到（搜索引擎在抓取網(wǎng)頁(yè)時(shí)，最先讀取的就是網(wǎng)頁(yè)標(biāo)題，所以title是否正確設(shè)置極其重要。）title一般不超過(guò)80個(gè)字符，而且詞語(yǔ)間要用英文“-”隔開(kāi)，因?yàn)橛?jì)算機(jī)只對(duì)英語(yǔ)的敏感性較高，對(duì)漢語(yǔ)的敏感性不高。

用法：<title>網(wǎng)站標(biāo)題</title>

（1）首頁(yè)title寫法，一般是“網(wǎng)站名稱-主關(guān)鍵詞或一句含有主關(guān)鍵詞的描述”。一般網(wǎng)站名稱放后面，因?yàn)樗阉饕娼o予標(biāo)題最前面的詞比后面的高。比如，做“冰箱”這個(gè)詞，就這樣寫“冰箱_變頻冰箱-海爾官網(wǎng)”。

（2）欄目頁(yè)title寫法，一般有2種：“欄目名稱-網(wǎng)站名稱”、“欄目名稱欄目關(guān)鍵詞-網(wǎng)站名稱”。而且欄目名稱最好用關(guān)鍵詞來(lái)確定，比如企業(yè)招聘欄目最好就用企業(yè)招聘，而不要起個(gè)讓人無(wú)法識(shí)別的名字如企業(yè)來(lái)人，企業(yè)看看，或企業(yè)加上一些特殊符號(hào)，這種寫法雖然很有個(gè)性，但會(huì)讓你的網(wǎng)站在優(yōu)化上占了下風(fēng)。

（3）分類列表頁(yè)title寫法，一般是“分類列表頁(yè)名稱-欄目名稱-網(wǎng)站名稱”，這個(gè)和欄目頁(yè)差不多。

（4）文章頁(yè)title寫法，一般有3種：“文章標(biāo)題-網(wǎng)站名稱”、“內(nèi)容標(biāo)題-欄目名稱”、“內(nèi)容標(biāo)題-欄目名稱-網(wǎng)站名稱”。其中，“內(nèi)容標(biāo)題-欄目名稱-網(wǎng)站名稱”的寫法最為規(guī)范，但也相對(duì)復(fù)雜，它能給用戶很好的提示，讓用戶知道他在訪問(wèn)哪篇文章，并且是在哪個(gè)網(wǎng)站的哪個(gè)欄目下。

2、description（內(nèi)容摘要）

description是對(duì)于一個(gè)網(wǎng)頁(yè)的簡(jiǎn)要內(nèi)容概況。description一般不超過(guò)150個(gè)字符，描述內(nèi)容要和頁(yè)面內(nèi)容相關(guān)。

用法：<meta name=”Description” Content=”你網(wǎng)頁(yè)的簡(jiǎn)述”>

（1）首頁(yè)description寫法，一般是將首頁(yè)的標(biāo)題、關(guān)鍵詞和一些特殊欄目的內(nèi)容融合到里面，寫成簡(jiǎn)單的介紹。

（2）欄目頁(yè)description寫法，一般是將欄目的標(biāo)題、關(guān)鍵字、分類列表名稱融合到里面，寫成簡(jiǎn)單的介紹。

（3）分類列表頁(yè)description，這個(gè)就比較簡(jiǎn)單了，一般只需要把分類列表的標(biāo)題、關(guān)鍵詞融合在一起，寫成簡(jiǎn)單的介紹。

（4）文章頁(yè)description寫法，一般有2種寫法，標(biāo)準(zhǔn)寫法就和前面的一樣，將文章標(biāo)題、文章中的重要內(nèi)容和關(guān)鍵詞融合在一起，寫成簡(jiǎn)單的介紹。這是最好最標(biāo)準(zhǔn)的寫法。但是這樣寫比較麻煩，還有一種種偷懶的方法，你可以在文章首段和標(biāo)題中加入關(guān)鍵詞，比如我這篇文章是講title、keywords、description的，那么在文章首段和標(biāo)題中就加入這些內(nèi)容，然后直接將文章首段的內(nèi)容復(fù)制到description中即可。

3、keywords（關(guān)鍵詞）

keywords，主要作用是告訴搜索引擎本頁(yè)內(nèi)容是圍繞哪些詞展開(kāi)的。因此keywords的每個(gè)詞都要能在內(nèi)容中找到相應(yīng)匹配，才有利于排名。keywords一般不超過(guò)3個(gè)，每個(gè)關(guān)鍵詞不宜過(guò)長(zhǎng)，而且詞語(yǔ)間要用英文“,”隔開(kāi)。為什么用英文上文已經(jīng)說(shuō)過(guò)。而且，盡量將重要的關(guān)鍵字靠前放，因?yàn)榭亢蟮年P(guān)鍵字排名較差，除非你站有很高的權(quán)重。

用法：<meta name=”Keywords” Content=”關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3,關(guān)鍵詞4″>

（1）首頁(yè)keywords寫法，一般是“網(wǎng)站名稱,主要欄目名,主要關(guān)鍵詞”。

（2）欄目頁(yè)keywords寫法，一般是“欄目名稱,欄目關(guān)鍵字,欄目分類列表名稱”。

（3）分類列表頁(yè)keywords寫法，這個(gè)就比較簡(jiǎn)單了，只要將你這個(gè)欄目中的主要關(guān)鍵字寫入即可。

（4）文章頁(yè)keywords寫法，建議大家提取文章中的關(guān)鍵詞，比如我的文章主要是講SEO優(yōu)化的，那么我關(guān)鍵詞肯定是SEO優(yōu)化，如果你覺(jué)得你提取關(guān)鍵詞的能力較差，也可以選擇文章中出現(xiàn)比較多的詞來(lái)作為關(guān)鍵詞，比如我現(xiàn)在寫的內(nèi)容是關(guān)于title、keywords、description的，那我的文章頁(yè)關(guān)鍵詞就是這3個(gè)。

（二）語(yǔ)義化的HTML代碼，符合W3C規(guī)范：語(yǔ)義化代碼讓搜索引擎容易理解網(wǎng)頁(yè)

1. 什么是HTML語(yǔ)義化

? ? 什么是HTML語(yǔ)義化，我的理解是： 用最恰當(dāng)?shù)臉?biāo)簽來(lái)標(biāo)記內(nèi)容。通俗的說(shuō)，就是告訴你：“這是一個(gè)一級(jí)標(biāo)題或二級(jí)標(biāo)題”，“這是一個(gè)段落”，“這是頭部”，“這是一個(gè)導(dǎo)航欄”，并不會(huì)告訴你：“這是紅色的”，“這個(gè)有多么寬，多么高”。標(biāo)題脫了CSS這層外衣，它還是一個(gè)標(biāo)題。這就是簡(jiǎn)單的HTML語(yǔ)義化：表現(xiàn)網(wǎng)頁(yè)的結(jié)構(gòu)。語(yǔ)義化的HTML元素指的是那些使用最恰當(dāng)?shù)腍TML進(jìn)行標(biāo)記的內(nèi)容，在標(biāo)記構(gòu)成中并不關(guān)心內(nèi)容顯示。語(yǔ)義化的HTML是構(gòu)建有效網(wǎng)站的基石。

2、在寫HTML代碼時(shí)應(yīng)該注意

? ? 盡可能少的使用無(wú)語(yǔ)義的標(biāo)簽div和span；

? ? 在語(yǔ)義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利；

? ? 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。

? ? 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；

? ? 使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；

? ? 表單域要用fieldset標(biāo)簽包起來(lái)，并用legend標(biāo)簽說(shuō)明表單的用途；

? ? 每個(gè)input標(biāo)簽對(duì)應(yīng)的說(shuō)明文本都需要使用label標(biāo)簽，并且通過(guò)為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來(lái)讓說(shuō)明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來(lái)。

3、HTML5常用的語(yǔ)義元素

? ? HTML5提供了新的語(yǔ)義元素來(lái)定義網(wǎng)頁(yè)的不同部分，它們被稱為“切片元素”，如圖所示

常用的語(yǔ)義化元素：

（1）header元素

? ? header 元素代表“網(wǎng)頁(yè)”或“section”的頁(yè)眉。

? ? 通常包含h1-h6元素或hgroup，作為整個(gè)頁(yè)面或者一個(gè)內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個(gè)搜索框，一個(gè)nav，或者任何相關(guān)logo。

? ? 整個(gè)頁(yè)面沒(méi)有限制header元素的個(gè)數(shù)，可以擁有多個(gè)，可以為每個(gè)內(nèi)容塊增加一個(gè)header元素

? ? <header>

? ? ? <hgroup>

? ? <h1>網(wǎng)站標(biāo)題</h1>

? ? <h1>網(wǎng)站副標(biāo)題</h1>

? ? ? </hgroup>

? ? </header>

header使用注意：

? ? 可以是“網(wǎng)頁(yè)”或任意“section”的頭部部分；

? ? 沒(méi)有個(gè)數(shù)限制。

? ? 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

（2）footer元素

footer元素代表“網(wǎng)頁(yè)”或“section”的頁(yè)腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個(gè)節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。

<footer> 我是頁(yè)腳 </footer>

footer使用注意：

? ? 可以是“網(wǎng)頁(yè)”或任意“section”的底部部分；

? ? 沒(méi)有個(gè)數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似。

（3）hgroup元素

hgroup元素代表“網(wǎng)頁(yè)”或“section”的標(biāo)題，當(dāng)元素有多個(gè)層級(jí)時(shí)，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合

? ? <hgroup>

? ? ? <h1>這是一篇介紹HTML 5語(yǔ)義化標(biāo)簽和更簡(jiǎn)潔的結(jié)構(gòu)</h1>

? ? ? <h2>HTML 5</h2>

? ? </hgroup>

hgroup使用注意：

? ? 如果只需要一個(gè)h1-h6標(biāo)簽就不用hgroup

? ? 如果有連續(xù)多個(gè)h1-h6標(biāo)簽就用hgroup

? ? 如果有連續(xù)多個(gè)標(biāo)題和其他文章數(shù)據(jù)，h1-h6標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

（4）nav元素

nav元素代表頁(yè)面的導(dǎo)航鏈接區(qū)域。用于定義頁(yè)面的主要導(dǎo)航部分。

? ? <nav>

? ? <ul>

? ? <li>HTML 5</li>

? ? <li>CSS3</li>

? ? <li>JavaScript</li>

? ? </ul>

? ? </nav>

但是我在有些時(shí)候卻情不自禁的想用它，譬如：側(cè)邊欄上目錄，面包屑導(dǎo)航，搜索樣式，或者下一篇上一篇文章，但是事實(shí)上規(guī)范上說(shuō)nav只能用在頁(yè)面主要導(dǎo)航部分上。頁(yè)腳區(qū)域中的鏈接列表，雖然指向不同網(wǎng)站的不同區(qū)域，譬如服務(wù)條款，版權(quán)頁(yè)等，這些footer元素就能夠用了。

nav使用注意：

? ? 用在整個(gè)頁(yè)面主要導(dǎo)航部分上，不合適就不要用nav元素；

（5）aside元素

aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）

在article元素之外使用作為頁(yè)面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁(yè)面。

? ? <article>

? ? <p>內(nèi)容</p>

? ? <aside>

? ? <h1>標(biāo)題呢</h1>

? ? <p>這里是內(nèi)容呢</p>

? ? </aside>

? ? </article>

aside使用總結(jié)：

? ? aside在article內(nèi)表示主要內(nèi)容的附屬信息，

? ? 在article之外則可做側(cè)邊欄，沒(méi)有article與之對(duì)應(yīng)，最好不用。

? ? 如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用

（6）section元素

section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁(yè)面里的分組。

section通常還帶標(biāo)題，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級(jí)，但是最好手動(dòng)給他們降級(jí)。如下：

? ? <section>

? ? <h1>section是啥？</h1>

? ? <article>

? ? <h2>關(guān)于section</h1>

? ? <p>section的介紹</p>

? ? <section>

? ? <h3>關(guān)于其他</h3>

? ? <p>關(guān)于其他section的介紹</p>

? ? </section>

? ? </article>

? ? </section>

section使用注意：

一張頁(yè)面可以用section劃分為簡(jiǎn)介、文章條目和聯(lián)系信息。不過(guò)在文章內(nèi)頁(yè)，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。

? ? 表示文檔中的節(jié)或者段；

? ? article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒(méi)實(shí)際意義的就用div

（7）article元素

article元素最容易跟section和div容易混淆，其實(shí)article代表一個(gè)在文檔，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開(kāi)發(fā)者獨(dú)立開(kāi)發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評(píng)論，一個(gè)互動(dòng)的widget小工具。（特殊的section）

除了它的內(nèi)容，article會(huì)有一個(gè)標(biāo)題（通常會(huì)在header里），會(huì)有一個(gè)footer頁(yè)腳。

? ? <article>

? ? <h1>一篇文章</h1>

? ? <p>文章內(nèi)容..</p>

? ? <footer>

? ? <p><small>small內(nèi)容</small></p>

? ? </footer>

? ? </article>

更多語(yǔ)義化元素：https://developer.mozilla.org/en-US/docs/Web/HTML/Element

4、一些簡(jiǎn)單的語(yǔ)義化舉例

下面是一段html代碼，我們來(lái)進(jìn)行優(yōu)化

? ? <div class="main">

? ? <div class="h2">標(biāo)簽的語(yǔ)義<a href="#">更多</a></div>

? ? <div class="p">段落1內(nèi)容<span class="strong">強(qiáng)調(diào)內(nèi)容</span></div>

? ? <div class="p">段落2內(nèi)容</div>

? ? </div>

上述代碼添加CSS樣式可以達(dá)到效果，但用的只是向div,span這樣的無(wú)語(yǔ)義標(biāo)簽，我們從標(biāo)簽上看不出結(jié)構(gòu)這樣顯然是不行的，我們需要用代碼清晰表現(xiàn)出：“哪是標(biāo)題”，“哪是內(nèi)容”。我們改進(jìn)一下。

版本一

? ? <div class="main">

? ? <h2>標(biāo)簽的語(yǔ)義 <a href="#">更多</a></h2>

? ? <p>段落一的各種內(nèi)容.....<strong>強(qiáng)調(diào)的內(nèi)容</strong></p>

? ? <p>段落二的內(nèi)容。。。段落二的內(nèi)容。。。</p>

? ? </div>

版本一比源代碼大有改進(jìn)，從標(biāo)簽可以分清哪是標(biāo)題哪是內(nèi)容，也能看到哪被強(qiáng)調(diào)，但仔細(xì)看有a鏈接在h2標(biāo)簽中，雖然它們是在同一行，但a鏈接并不是屬于標(biāo)題。我們也可以添加HTML5語(yǔ)音元素進(jìn)行改進(jìn)：

版本二

? ? <main>

? ? <header class="title">

? ? <h2>標(biāo)簽的語(yǔ)義化</h2>

? ? <a href="#">更多</a>

? ? </header>

? ? <article class="content">

? ? <p>段落一的各種內(nèi)容.....<strong>強(qiáng)調(diào)的內(nèi)容</strong></p>

? ? <p>段落二的內(nèi)容。。。</p>

? ? </article>

? ? </main>

版本二用HTML5定義的新標(biāo)簽是語(yǔ)義化更加完美，寫到這里基本上也就可以了，但其實(shí)我們還可以利用ARIA(無(wú)障礙網(wǎng)頁(yè)倡議)更加使代碼完美。更加具有可讀性。

版本三

? ? <main role="main">

? ? <header class="title" role="heading">

? ? <h2>標(biāo)簽的語(yǔ)義化</h2>

? ? <a href="#">更多</a>

? ? </header>

? ? <article class="content" role="contentinfo">

? ? <p>段落一的各種內(nèi)容.....<strong>強(qiáng)調(diào)的內(nèi)容</strong></p>

? ? <p>段落二的內(nèi)容。。。</p>

? ? </article>

? ? </main>

?現(xiàn)在可以看到標(biāo)簽中多了一些role屬性，那是ARIA中定義的地標(biāo)角色定義它們可以使屏幕閱讀器更好的工作。當(dāng)然并不是使用div這些標(biāo)簽就是不重視語(yǔ)義化，有些時(shí)候因?yàn)闃邮降男枨蟊仨毷褂眠@些無(wú)語(yǔ)義標(biāo)簽，這時(shí)我們就應(yīng)該大膽使用它們。但能少用盡量少用。

? ? 但是也不要因?yàn)閔tml5新標(biāo)簽的出現(xiàn)，而隨意用之，錯(cuò)誤的使用肯定會(huì)事與愿違。所以有些地方還是要用div的，就是因?yàn)閐iv沒(méi)有任何意義的元素，他只是一個(gè)標(biāo)簽，僅僅是用來(lái)構(gòu)建外觀和結(jié)構(gòu)。因此是最適合做容器的標(biāo)簽。

（三）非裝飾性圖片必須加alt

<img> 標(biāo)簽的 alt 屬性指定了替代文本，用于在圖像無(wú)法顯示或者用戶禁用圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容。

示例:<img src="xxx.jpg" alt="海爾官網(wǎng)-雙門冰箱" />

1、alt標(biāo)簽的作用:

? ? 增強(qiáng)內(nèi)容相關(guān)性

它是可以利用漢字介紹文章內(nèi)容的，對(duì)于一些特定的企業(yè)產(chǎn)品，由于視覺(jué)的體驗(yàn)，它往往是少文字的。?

? ? 提高關(guān)鍵詞密度

在操作企業(yè)站的時(shí)候，我們經(jīng)常遇到是站點(diǎn)首屏一個(gè)大的橫幅banner，幾乎占用了首頁(yè)的大部分頁(yè)面，為了有效的提高首頁(yè)核心關(guān)鍵詞密度，我們只能利用一切辦法增添關(guān)鍵詞，比如：在圖片的alt標(biāo)簽中添加。?

（四）友情鏈接，好的友情鏈接可以快速的提高你的網(wǎng)站權(quán)重

? ? 友情鏈接，也稱為網(wǎng)站交換鏈接、互惠鏈接、互換鏈接、聯(lián)盟鏈接等，是具有一定資源互補(bǔ)優(yōu)勢(shì)的網(wǎng)站之間的簡(jiǎn)單合作形式，即分別在自己的網(wǎng)站上放置對(duì)方網(wǎng)站的LOGO圖片或文字的網(wǎng)站名稱，并設(shè)置對(duì)方網(wǎng)站的超鏈接（點(diǎn)擊后，切換或彈出另一個(gè)新的頁(yè)面），使得用戶可以從合作網(wǎng)站中發(fā)現(xiàn)自己的網(wǎng)站，達(dá)到互相推廣的目的，因此常作為一種網(wǎng)站推廣基本手段。

? ? 友情鏈接是指互相在自己的網(wǎng)站上放對(duì)方網(wǎng)站的鏈接。必須要能在網(wǎng)頁(yè)代碼中找到網(wǎng)址和網(wǎng)站名稱，而且瀏覽網(wǎng)頁(yè)的時(shí)候能顯示網(wǎng)站名稱，這樣才叫友情鏈接。

? ? 友情鏈接是網(wǎng)站流量來(lái)源的根本，比如一種可以自動(dòng)交換鏈接的友情鏈接網(wǎng)站（每來(lái)訪一個(gè)IP，就會(huì)自動(dòng)排到第一），這是一種創(chuàng)新的自助式友情鏈接互聯(lián)網(wǎng)模式。

（五）外鏈，高質(zhì)量的外鏈，會(huì)給你的網(wǎng)站提高源源不斷的權(quán)重提升

? ? 外鏈就是指在別的網(wǎng)站導(dǎo)入自己網(wǎng)站的鏈接。導(dǎo)入鏈接對(duì)于網(wǎng)站優(yōu)化來(lái)說(shuō)是非常重要的一個(gè)過(guò)程。導(dǎo)入鏈接的質(zhì)量（即導(dǎo)入鏈接所在頁(yè)面的權(quán)重）間接影響了我們的網(wǎng)站在搜索引擎中的權(quán)重。

? ? 外鏈?zhǔn)腔ヂ?lián)網(wǎng)的血液，是鏈接的一種。沒(méi)有鏈接的話，信息就是孤立的，結(jié)果就是我們什么都看不到。一個(gè)網(wǎng)站是很難做到面面俱到的，因此需要鏈接到別的網(wǎng)站，將其他網(wǎng)站所能補(bǔ)充的信息吸收過(guò)來(lái)，連接外鏈不在于數(shù)量，而是在于鏈接外鏈的質(zhì)量。

? ? 外鏈的效果不只是為了提高網(wǎng)站的權(quán)重，也不僅僅是為了提高某個(gè)關(guān)鍵詞的排名。一個(gè)高質(zhì)量的外部鏈接是可以給網(wǎng)站帶來(lái)很好的流量。

（六）向各大搜索引擎登陸入口提交尚未收錄站點(diǎn)

百度提交入口：https://ziyuan.baidu.com/linksubmit/url

Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl

360提交入口：http://info.so.#/site_submit.html

搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1

必應(yīng)提交入口：https://www.bing.com/toolbox/webmaster/（必應(yīng)的匿名提交url已經(jīng)取消，需要去登陸B(tài)ing網(wǎng)站管理員到“配置我的網(wǎng)站”菜單選項(xiàng)中的“提交URL”工具）

其他的一些優(yōu)化內(nèi)容：

1.重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，保證重要內(nèi)容一定會(huì)被抓取

2.少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容

3.提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

4.頁(yè)面內(nèi)容盡量不要做成flash、圖片、視頻，這些東西蜘蛛是抓不到的，就算是必須的，也要生成相應(yīng)的靜態(tài)頁(yè)面。有很多企業(yè)站看著很炫，全站flash，老板看著是爽了，做SEO優(yōu)化的人員就要抓狂了，全站沒(méi)一個(gè)鏈接。

5.除首頁(yè)外別的頁(yè)面最好要加上面包屑型導(dǎo)航，導(dǎo)航結(jié)構(gòu)一定要清晰。

6.做好404頁(yè)面，一般會(huì)加首頁(yè)鏈接及錯(cuò)誤提示，并測(cè)試其返回狀態(tài)碼為404：1、用戶體驗(yàn)友好，可以留住用戶，不至于直接關(guān)閉頁(yè)面；2、蜘蛛友好，可以返回抓取其他頁(yè)面。

7.網(wǎng)站結(jié)構(gòu)呈扁平狀樹(shù)型，目錄結(jié)構(gòu)不宜過(guò)深，每個(gè)頁(yè)面離首頁(yè)最多點(diǎn)擊不超過(guò)3次，過(guò)深不利于搜索引擎的抓取。

借鑒：https://blog.csdn.net/yuyuking/java/article/details/89374794