欧美日韩一区二区在线视频_久久精品国产91精品亚洲_日韩精品在线一区_四虎国产精品免费观看

在網(wǎng)站搭建和不斷維護(hù)的過(guò)程中需要與程序猿同學(xué)互相配合開(kāi)發(fā)，那么到底怎么樣的前段代碼才算規(guī)范，這里給大家一些例子。

1、盡量減少HTTP請(qǐng)求個(gè)數(shù)——須權(quán)衡

合并圖片（如csssprites，內(nèi)置圖片使用數(shù)據(jù)）、合并CSS、JS，這一點(diǎn)很重要，但是要考慮合并后的文件體積。

2、根據(jù)域名劃分頁(yè)面內(nèi)容減少DNS查找次數(shù)

我們需要權(quán)衡減少DNS查找次數(shù)和保持較高程度并行下載兩者之間的關(guān)系。

理想的方法就是將所有的內(nèi)容資源都放在同一個(gè)域(domain)下面，這樣訪問(wèn)整個(gè)網(wǎng)站就只需要進(jìn)行一次dns查找，這樣可以提其他高性能。但理想總歸是理想，上面的理想做法會(huì)帶來(lái)另外一個(gè)問(wèn)題，就是由于這些資源都在同一個(gè)域，而http/1.1中推薦客戶端針對(duì)每個(gè)域只有一定數(shù)量的并行度（它的建議是2），那么就會(huì)出現(xiàn)下載資源時(shí)的排隊(duì)現(xiàn)象，這樣就會(huì)降低性能。很顯然，是大限度地實(shí)現(xiàn)平行下載。

所以，折衷的做法是：建議在一個(gè)網(wǎng)站里面使用至少2個(gè)域，但不多于4個(gè)域來(lái)提供資源。我認(rèn)為這條建議是很合理的，也值得我們?cè)陧?xiàng)目實(shí)踐中去應(yīng)用。

3、減少DOM元素個(gè)數(shù)

結(jié)構(gòu)合理、語(yǔ)義化、減少代碼，使用更適合或者在語(yǔ)意是更貼切的標(biāo)簽，要考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)

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

這里可以關(guān)注CDN的三類(lèi)實(shí)現(xiàn)：鏡像、高速緩存、專(zhuān)線，以及智能路由器和負(fù)載均衡；

5、避免空的src和href和其他無(wú)意義的鏈接

留意具有這兩個(gè)屬性的標(biāo)簽如alink，script，img，iframe等；代碼盡量不要出現(xiàn)空鏈接和無(wú)意義的鏈接

6、為文件頭指定Expires或Cache-Control，合理使用緩存。

區(qū)分靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容，避免以后頁(yè)面訪問(wèn)中不必要的HTTP請(qǐng)求。

7、配置ETags

Entitytags（ETags）（實(shí)體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制（“實(shí)體”就是所說(shuō)的“內(nèi)容”，包括圖片、腳本、樣式表等），是比last-modifieddate更更加靈活的機(jī)制，單位時(shí)間內(nèi)文件被修過(guò)多次，Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))，MTime(修改時(shí)間)和Size來(lái)精準(zhǔn)的進(jìn)行判斷，避開(kāi)UNIX記錄MTime只能到秒的問(wèn)題。服務(wù)器集群使用，可取后兩個(gè)參數(shù)。使用ETags減少Web應(yīng)用帶寬和負(fù)載。zhanzhang.baidu.com/college/articleinfo?id=487

8、使用gzip壓縮內(nèi)容

Gzip壓縮所有可能的文件類(lèi)型以來(lái)減少文件體積

9、把CSS放到頂部

實(shí)現(xiàn)頁(yè)面有秩序地加載，這對(duì)于擁有較多內(nèi)容的頁(yè)面和網(wǎng)速較慢的用戶來(lái)說(shuō)更為重要，同時(shí)，HTML規(guī)范清楚指出樣式表要放包含在頁(yè)面的區(qū)域內(nèi)；

10、把JS放到底部

HTTP/1.1規(guī)范建議，瀏覽器每個(gè)主機(jī)名的并行下載內(nèi)容不超過(guò)兩個(gè)，而問(wèn)題在于腳本阻止了頁(yè)面的平行下載，即便是主機(jī)名不相同

11、避免使用CSS表達(dá)式

CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的一種方法。這個(gè)過(guò)程非常耗時(shí)，因?yàn)槊看尉W(wǎng)頁(yè)展示，滾動(dòng)或者調(diào)整大小，抑或者用戶移動(dòng)鼠標(biāo)時(shí)，表達(dá)式都會(huì)被解析。即使網(wǎng)頁(yè)已經(jīng)加載完畢，代碼被重新解析的需求也會(huì)大大降低頁(yè)面的速度，這樣就會(huì)直接影響網(wǎng)站的用戶體驗(yàn)。移除所有的表達(dá)式會(huì)整體上提高網(wǎng)頁(yè)的性能。

12、避免錯(cuò)誤跳轉(zhuǎn)

為了確保“后退”按鈕可以正確地使用，使用標(biāo)準(zhǔn)的3.XXHTTP狀態(tài)代碼；同域中注意避免反斜杠“/”的跳轉(zhuǎn)；跨域使用Alias或者mod_rewirte建立CNAME（保存一個(gè)域名和另外一個(gè)域名之間關(guān)系的DNS記錄）

13、使AJAX可緩存使用GET來(lái)完成AJAX請(qǐng)求

利用時(shí)間戳，更精巧的實(shí)現(xiàn)響應(yīng)可緩存與服務(wù)器數(shù)據(jù)同步更新。當(dāng)使用XMLHttpRequest時(shí)，瀏覽器中的POST方法是一個(gè)“兩步走”的過(guò)程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。在url小于2K時(shí)使用GET獲取數(shù)據(jù)時(shí)更加有意義。

14、盡早刷新輸出緩沖

尤其對(duì)于css，js文件的并行下載更有意義

SEO前段規(guī)范

15、延遲加載和預(yù)加載

確定頁(yè)面運(yùn)行正常后，再加載腳本來(lái)實(shí)現(xiàn)如拖放和動(dòng)畫(huà)，或者是隱藏部分的內(nèi)容以及折疊內(nèi)容等。延時(shí)加載時(shí)核心內(nèi)容需要代碼可見(jiàn)，尤其是資源url。關(guān)注下無(wú)條件加載，有條件加載和有預(yù)期的加載。

16、精簡(jiǎn)代碼

對(duì)于一個(gè)網(wǎng)站文件大小應(yīng)該有限制。百度建議HTML文件不要超過(guò)128KB。Goolgle及時(shí)建議文件限制在100KB以下，頁(yè)面上連接數(shù)在100個(gè)以下。常見(jiàn)的精簡(jiǎn)代碼如下：

1)使用css定義字體、顏色、尺寸及頁(yè)面排版。有很多網(wǎng)站使用css，又在課件文字部分使用style或font再定義一遍字體、尺寸等，這完全是冗余的。

2)使用外部文件Css和js采取外部調(diào)取方式。

3)減少或刪除代碼中的注釋。

4)減少使用嵌套表格。

5)導(dǎo)航中使用文字連接，不適使用JS或是flash。

6)使用文字而不是flash、圖片、Javascript等來(lái)顯示重要的內(nèi)容或鏈接。

7)如果必須使用Flash制作網(wǎng)頁(yè)，建議同時(shí)制作一個(gè)供搜索引擎收錄的文字版，并在首頁(yè)使用文本鏈接指向文字版。

8)Ajax等搜索引擎不能識(shí)別的技術(shù)，只用在需要用戶交互的地方，不把希望搜索引擎“看”到的導(dǎo)航及正文內(nèi)容放到Ajax中。

不使用frame和iframe框架結(jié)構(gòu)，通過(guò)iframe顯示的內(nèi)容可能會(huì)被百度丟棄。

17、符合w3c標(biāo)準(zhǔn)

1)停止使用Xhtml廢棄的元素，Xhtml代碼需要全部小寫(xiě)

2)所有圖片必須包含alt屬性

3)所有標(biāo)簽必須關(guān)閉

4)所有的標(biāo)簽屬性必須在引號(hào)內(nèi)

5)所有的特殊字符必須要編碼

18、語(yǔ)義標(biāo)記

1)合理使用H1-H6標(biāo)簽，h1標(biāo)簽一個(gè)網(wǎng)頁(yè)多只出現(xiàn)一次，表示當(dāng)前網(wǎng)頁(yè)核心內(nèi)容，盡量不要跟其他網(wǎng)頁(yè)重復(fù)。h2標(biāo)簽可以出現(xiàn)多個(gè)，可是是網(wǎng)頁(yè)的小標(biāo)題，代表不同模塊的內(nèi)容。

2)加粗使用strong和em

3)css標(biāo)記盡量包含語(yǔ)義，比如headerfootnavsidebar等

4)盡量不使用圖片熱點(diǎn)鏈接，一定要使用也要增加對(duì)應(yīng)的文字鏈接

19、搜索引擎作弊規(guī)避

1)禁止css中使用display:none隱藏文本和鏈接

2)交互設(shè)計(jì)中隱藏文本和鏈接要確保使用動(dòng)態(tài)技術(shù)（例如js）后內(nèi)容仍然代碼可見(jiàn)。

3)不要使用和背景色相同的文本和鏈接

4)不使用js制作網(wǎng)站導(dǎo)航和目錄

5)頁(yè)面不存在大量重復(fù)的titilekeywordsdescription

20、避免蜘蛛陷阱

1)Flash

網(wǎng)頁(yè)中的某一小部分使用flash增強(qiáng)視覺(jué)效果沒(méi)問(wèn)題，但是盡量避免首頁(yè)只有一個(gè)大的flash文件，如果flash效果是必須的話需要在首頁(yè)加上一個(gè)通往html版本的鏈接（此鏈接在flash文件之外的html代碼中）。

2)SessionID

通常建議跟蹤用戶訪問(wèn)應(yīng)該使用cookies而不要生成SessionID。或者程序判斷是搜索引擎蜘蛛還是普通用戶，如果是搜索引擎蜘蛛，則不生成SessioID。

3)各種各樣跳轉(zhuǎn)

301轉(zhuǎn)向：搜索引擎推薦的，用于網(wǎng)址URL更改的轉(zhuǎn)向，可以將權(quán)重從舊網(wǎng)址轉(zhuǎn)移到新網(wǎng)址。

盡量避免使用除301之外的其他跳轉(zhuǎn)或轉(zhuǎn)向（meta刷新、js跳轉(zhuǎn)、flash跳轉(zhuǎn)等），非要使用其他轉(zhuǎn)向的時(shí)候，跳轉(zhuǎn)時(shí)間應(yīng)該設(shè)置得長(zhǎng)一點(diǎn)，而不能設(shè)置為零。框架結(jié)構(gòu)慎重使用，和flash一樣盡量不用。

4)動(dòng)態(tài)URL

盡量避免動(dòng)態(tài)URL，生成靜態(tài)URL，至少是偽靜態(tài)。

5)JS鏈接

網(wǎng)站上必須使用用簡(jiǎn)單標(biāo)準(zhǔn)的HTML鏈接，尤其是導(dǎo)航系統(tǒng)。可以使用CSS替換。

6)要求登錄

用戶后臺(tái)部分，可以使用要求登錄功能避免蜘蛛的抓取。

7)強(qiáng)制使用Cookies

搜索引擎蜘蛛相當(dāng)于一個(gè)禁用了Cookies的瀏覽器，盡量避免強(qiáng)制使用Cookies造成蜘蛛的無(wú)法訪問(wèn)。