代碼性能優(yōu)化-創(chuàng)新互聯(lián)

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

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

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

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

3.書寫順序　　
這個書寫順序指的是各個樣式的書寫順序，下面是推薦的CSS書寫順序(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都是耗費瀏覽器性能的操作，這兩者尤以reflow為甚；因為每次reflow，瀏覽器都要重新計算每個元素的形狀和位置。由于reflow和repaint都是非常消耗性能的，我們的瀏覽器為此做了一些優(yōu)化。瀏覽器會將reflow和repaint的操作積攢一批，然后做一次reflow。但是有些時候，你的代碼會強制瀏覽器做多次reflow。

4.標準化各種瀏覽器前綴
帶瀏覽器前綴的在前，標準屬性在后。

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

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

7.減少文件的大小
比如屬性值簡寫#FFFFFF可以簡寫為#FFF,#BB44DD可以簡寫為#B4D

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

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

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

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

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

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

14.正確使用display的屬性
由于display的作用，某些組合樣式會無效，徒增樣式體積的同時也影響性能
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è)置該樣式，這個也是提高性能的行之有效的方法。常見的可以繼承的屬性比如：Color、Font 、Letter-spacing、Line-height 、List-style 、Text-align 、Text-indent 、Text-transform 、White-space 、Word-spacing 等等。不可繼承的比如：position，display，float等。

16.不濫用浮動
雖然浮動不可避免，但不可否認很對css bug是由浮動引起的，css Lint一旦檢測出樣式文件中有超過10次的浮動便會提示警告

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

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

19.不聲明過多的font-size

20.不在選擇符中使用ID標識符

21.值為0時不需要任何單位

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

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

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

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

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

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

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

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

4.for循環(huán)最佳寫法(把length提出來或者預(yù)存出來，用一個內(nèi)存地址變量指引數(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.實現(xiàn)元素移動的動畫過程有三中方法 定位 、 margin 、translate ，但是transform里面的translate 是最佳選擇，它比前兩者的效率高幾十倍，因為它不會
觸發(fā)整個頁面的重排，從而大大降低了頁面渲染時間

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

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

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

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

廣告

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