HTML
1.網(wǎng)頁(yè)三要素title（標(biāo)題）、keywords（關(guān)鍵字）、description（描述）
2.一個(gè)頁(yè)面h2標(biāo)簽只能出現(xiàn)一次

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到荔灣網(wǎng)站設(shè)計(jì)與荔灣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋荔灣地區(qū)。

CSS
1.命名與備注　　
命名是提高代碼可讀性的第一步，也是及其重要的一步。很多人都有這樣的體會(huì)：命名是寫(xiě)代碼中最讓程序員頭疼的事情之一，尤其是對(duì)母語(yǔ)非英語(yǔ)的開(kāi)發(fā)人員來(lái)說(shuō)，要找一個(gè)合適貼切的名字并不容易。提高自己命名的能力，可以多看看別人的代碼。下面是CSS中的一些命名相關(guān)的建議：頭：header　內(nèi)容：content/container　尾：footer　導(dǎo)航：nav側(cè)欄：sidebar　欄目：column　頁(yè)面外圍控制整體佈局寬度：wrapper　左右中：left right cente登錄條：loginbar　標(biāo)志：logo　廣告：banner　頁(yè)面主體：main　熱點(diǎn)：hot　新聞：news　下載：download子導(dǎo)航：subnav　菜單menu子菜 submenu　搜索：search　友情鏈接：friendlink　頁(yè)腳：footer版權(quán)：copyright　滾動(dòng)：scroll　內(nèi)容：content　標(biāo)簽：tags　文章列表：list　　提示信息：msg　　小技巧：tips　欄目標(biāo)題：title　加入：joinus　指南：guide服務(wù)：service　注冊(cè)：regsiter 狀態(tài)：status　投票：vote　合作伙伴：partner　導(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。

2.提取重復(fù)樣式
這一個(gè)方法很容易理解，簡(jiǎn)單說(shuō)就是提取相同的樣式成為一個(gè)單獨(dú)的類再引用，這樣不僅可以精簡(jiǎn)CSS文件大小，而且CSS代碼變少，更易于重用和維護(hù)。

3.書(shū)寫(xiě)順序　　
這個(gè)書(shū)寫(xiě)順序指的是各個(gè)樣式的書(shū)寫(xiě)順序，下面是推薦的CSS書(shū)寫(xiě)順序(1)位置屬性(position, top, right, z-index, display, float等)(2)大小(width, height, padding, margin)(3)文字系列(font, line-height, letter-spacing, color- text-align等)(4)背景(background, border等)(5)其他(animation, transition等)，reflow和repaint都是耗費(fèi)瀏覽器性能的操作，這兩者尤以reflow為甚；因?yàn)槊看蝦eflow，瀏覽器都要重新計(jì)算每個(gè)元素的形狀和位置。由于reflow和repaint都是非常消耗性能的，我們的瀏覽器為此做了一些優(yōu)化。瀏覽器會(huì)將reflow和repaint的操作積攢一批，然后做一次reflow。但是有些時(shí)候，你的代碼會(huì)強(qiáng)制瀏覽器做多次reflow。

4.標(biāo)準(zhǔn)化各種瀏覽器前綴
帶瀏覽器前綴的在前，標(biāo)準(zhǔn)屬性在后。

5屬性值為浮動(dòng)小數(shù)0.，可以省略之前的0

6.如果只有一項(xiàng)值，最好不要應(yīng)用復(fù)合屬性。以免帶來(lái)不必要的麻煩。
比如 .sample1 {font-weight: bold} ，如果寫(xiě)成 .sample1 {font: bold} 就沒(méi)任何作用了。再舉個(gè)列子，比如 .sampl2 {background-color: #CCCCCC; } ，如果寫(xiě)成 .sampl2 {background: #CCCCCC; } ，瀏覽器雖然能正確解釋，但這不是規(guī)范的寫(xiě)法，因?yàn)檫@樣會(huì)導(dǎo)致瀏覽器多次計(jì)算其他無(wú)用的屬性。

7.減少文件的大小
比如屬性值簡(jiǎn)寫(xiě)#FFFFFF可以簡(jiǎn)寫(xiě)為#FFF,#BB44DD可以簡(jiǎn)寫(xiě)為#B4D

8.多用精靈圖
一個(gè)網(wǎng)頁(yè)上有很多的小圖片，比如有20個(gè)，如果我們都請(qǐng)求一遍，就需要使用20個(gè)http請(qǐng)求，這是很耗時(shí)的，但是我們可以把這些圖片合成一個(gè)大的圖片，然后將之作為 background-img插入進(jìn)去， 根據(jù)不同的圖片設(shè)置不同的background-postion即可，雖然在不同的位置需要請(qǐng)求很多的圖片，但是，實(shí)際上我們查看網(wǎng)絡(luò)只會(huì)請(qǐng)求一次

9.精簡(jiǎn)頁(yè)面的樣式文件，去掉不用的樣式　　
很多時(shí)候，我們會(huì)把所有的樣式文件合并成一個(gè)文件，但是這樣有一個(gè)問(wèn)題：很多其他頁(yè)面的CSS同時(shí)引用到當(dāng)前頁(yè)面中，而當(dāng)前頁(yè)面并沒(méi)有用到它們，這種情況會(huì)造成兩個(gè)問(wèn)題:(1)樣式文件偏大，影響加載速度　(2)瀏覽器會(huì)進(jìn)行多余的樣式匹配，影響渲染時(shí)間。正確的處理方法是根據(jù)當(dāng)前頁(yè)面需要的css去合并那些當(dāng)前頁(yè)面用到的CSS文件。PS：合并成一個(gè)文件有一個(gè)優(yōu)點(diǎn)：樣式文件會(huì)被瀏覽器緩存，進(jìn)入到其他頁(yè)面樣式文件不用再去下載。這條規(guī)則應(yīng)根據(jù)場(chǎng)景來(lái)區(qū)別對(duì)待，如果是大項(xiàng)目，應(yīng)該合并成不同的樣式文件，如果是簡(jiǎn)單的項(xiàng)目，建議合并成一個(gè)文件即可。如果無(wú)法確認(rèn)項(xiàng)目規(guī)模，建議分開(kāi)成不同的樣式文件，日后要合并也比較方便。

10.將 css放在 head中　　
如果將 css放在其他地方比如 body中，則瀏覽器有可能還未下載和解析到 css就已經(jīng)開(kāi)始渲染頁(yè)面了，這就導(dǎo)致頁(yè)面由無(wú) css狀態(tài)跳轉(zhuǎn)到 css狀態(tài)，用戶體驗(yàn)比較糟糕。除此之外，有些瀏覽器會(huì)在 CSS下載完成后才開(kāi)始渲染頁(yè)面，如果 CSS放在靠下的位置則會(huì)導(dǎo)致瀏覽器將渲染時(shí)間推遲。

11.避免使用css @import
這樣做會(huì)導(dǎo)致css無(wú)法并行下載，因?yàn)槭褂聾import引用的文件只有在引用它的那個(gè)css文件被下載、解析之后，瀏覽器才會(huì)知道還有另外一個(gè)css需要下載，這時(shí)才去下載，然后下載后開(kāi)始解析、構(gòu)建render tree等一系列操作。 瀏覽器會(huì)在頁(yè)面所有css下載并解析完成后才會(huì)開(kāi)始渲染頁(yè)面，因此css @import引起的css解析延遲會(huì)加長(zhǎng)頁(yè)面留白期。 所以，要盡量避免使用css @import而盡量采用link標(biāo)簽的方式引入。

12.避免使用復(fù)雜的選擇器，層級(jí)越少越好
有時(shí)候項(xiàng)目的模塊越來(lái)越多，功能越來(lái)越復(fù)雜，我們寫(xiě)的CSS選擇器會(huì)內(nèi)套多層，越來(lái)越復(fù)雜。建議選擇器的嵌套最好不要超過(guò)三層

13.避免讓選擇符看起來(lái)像正則表達(dá)式
css添加了一些類似~=的復(fù)雜屬性，也不是所有瀏覽器都支持，需謹(jǐn)慎使用

14.正確使用display的屬性
由于display的作用，某些組合樣式會(huì)無(wú)效，徒增樣式體積的同時(shí)也影響性能
display:inline;后不應(yīng)再使用width、height、margin、padding、float。
display：inline-block后不應(yīng)再使用float。
display:block后不應(yīng)再使用vertical-align。
display:table后不應(yīng)再使用margin、left。

15.利用繼承減少代碼量　　
我們知道有一部分CSS代碼是可以繼承的，如果父元素已經(jīng)設(shè)置了該樣式，子元素就不需要去設(shè)置該樣式，這個(gè)也是提高性能的行之有效的方法。常見(jiàn)的可以繼承的屬性比如：Color、Font 、Letter-spacing、Line-height 、List-style 、Text-align 、Text-indent 、Text-transform 、White-space 、Word-spacing 等等。不可繼承的比如：position，display，float等。

16.不濫用浮動(dòng)
雖然浮動(dòng)不可避免，但不可否認(rèn)很對(duì)css bug是由浮動(dòng)引起的，css Lint一旦檢測(cè)出樣式文件中有超過(guò)10次的浮動(dòng)便會(huì)提示警告

17.不濫用web字體
對(duì)于中文網(wǎng)站來(lái)說(shuō)，Web Fonts可能很陌生，但是國(guó)外卻很流行，Web Fonts通常體積龐大，而且一些瀏覽器在下載Web Fonts時(shí)會(huì)阻塞頁(yè)面渲染，損傷性能。

18.不重復(fù)定義h2~h7元素，不給h2~h7元素定義過(guò)多的樣式

19.不聲明過(guò)多的font-size

20.不在選擇符中使用ID標(biāo)識(shí)符

21.值為0時(shí)不需要任何單位

22.移除空的規(guī)則

23.不要在ID選擇器前面進(jìn)行嵌套，ID本來(lái)就是唯一的而且人家權(quán)值那么大，前方嵌套完全是浪費(fèi)性能。

24.減少通配符*或者類似[hidden="true"]這類選擇器的使用，挨個(gè)查找所有...這性能能好嗎？當(dāng)然重置樣式這些必須的東西是不能少的。

25.有些人喜歡在類名前面加上標(biāo)簽名：p.ty_p 來(lái)進(jìn)行更加精確的定位，但是這樣往往效率更差，類名應(yīng)該在全局范圍除非公用是唯一的，所以這種做法是應(yīng)該便面的。

26.避免使用 Filter：
IE 特有的 AlphaImageLoader filter 是為了解決 IE6 及以前版本不支持半透明的 PNG 圖片而存在的。但是瀏覽器在下載 filter 里面的圖片時(shí)會(huì)“凍結(jié)”瀏覽器，停止渲染頁(yè)面。同時(shí) filter 也會(huì)增大內(nèi)存消耗。最不能忍受的是 filter 樣式在每個(gè)頁(yè)面元素（使用到該 filter 樣式）渲染時(shí)都會(huì)被瀏覽器分析一次，而不是像一般的背景圖片渲染模式：使用過(guò)該背景圖片的所有元素都是被瀏覽器一次性渲染的。
針對(duì)這種情況，最好的解決辦法就是使用 PNG8。

JS
1.減少DOM操作
在腳本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection類型的集合，在平時(shí)使用的時(shí)候大多將它作為數(shù)組來(lái)使用，因?yàn)樗?length屬性，也可以使用索引訪問(wèn)每一個(gè)元素。不過(guò)在訪問(wèn)性能上則比數(shù)組要差很多，原因是這個(gè)集合并不是一個(gè)靜態(tài)的結(jié)果，它表示的僅僅是一個(gè)特定的查詢，每次訪問(wèn)該集合時(shí)都會(huì)重新執(zhí)行這個(gè)查詢從而更新查詢結(jié)果。所謂的 “訪問(wèn)集合” 包括讀取集合的 length屬性、訪問(wèn)集合中的元素。因此，當(dāng)你需要遍歷 HTML Collection的時(shí)候，盡量將它轉(zhuǎn)為數(shù)組后再訪問(wèn)，以提高性能。即使不轉(zhuǎn)換為數(shù)組，也請(qǐng)盡可能少的訪問(wèn)它，例如在遍歷的時(shí)候可以將 length屬性、成員保存到局部變量后再使用局部變量。

2.減少http請(qǐng)求
一方面，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP請(qǐng)求，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過(guò) HTTP Header中的Expires設(shè)置一個(gè)很長(zhǎng)的過(guò)期頭 ;變化不頻繁而又可能會(huì)變的資源可以使用 Last-Modifed來(lái)做請(qǐng)求驗(yàn)證。盡可能的讓資源能夠在緩存中待得更久。另一方面，Lazy Load Images，能在某些條件下或者頁(yè)面剛加載時(shí)減少 HTTP請(qǐng)求數(shù)。對(duì)于圖片而言，在頁(yè)面剛加載的時(shí)候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來(lái)，假如用戶只對(duì)第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請(qǐng)求就都節(jié)省了

3.js腳本寫(xiě)在body標(biāo)簽的最下方
瀏覽器是可以并發(fā)請(qǐng)求的，這一特點(diǎn)使得其能夠更快的加載資源，然而外鏈腳本在加載時(shí)卻會(huì)阻塞其他資源，例如在腳本加載完成之前，它后面的圖片、樣式以及其他腳本都處于阻塞狀態(tài)，直到腳本加載完成后才會(huì)開(kāi)始加載。如果將腳本放在比較靠前的位置，則會(huì)影響整個(gè)頁(yè)面的加載速度從而影響用戶體驗(yàn)。

4.for循環(huán)最佳寫(xiě)法(把length提出來(lái)或者預(yù)存出來(lái)，用一個(gè)內(nèi)存地址變量指引數(shù)值來(lái)替代迭代器，這樣寫(xiě)的好處是降低時(shí)間復(fù)雜度)
var divs = document.getElementsByITagName('div')

for(var i=0,len = divs.length;i<len;i++){

}
for(var i = 0 , div ; div = divs[ i++ ] ; ){
dosomething(div)
}

4.實(shí)現(xiàn)元素移動(dòng)的動(dòng)畫(huà)過(guò)程有三中方法 定位 、 margin 、translate ，但是transform里面的translate 是最佳選擇，它比前兩者的效率高幾十倍，因?yàn)樗粫?huì)
觸發(fā)整個(gè)頁(yè)面的重排，從而大大降低了頁(yè)面渲染時(shí)間

5.能用css實(shí)現(xiàn)的效果就不要用js

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱：代碼性能優(yōu)化-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://aaarwkj.com/article22/gjgcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站營(yíng)銷、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)