怎么提高瀏覽器渲染頁面速度

本篇內容主要講解“怎么提高瀏覽器渲染頁面速度”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么提高瀏覽器渲染頁面速度”吧!

從網站建設到定制行業(yè)解決方案，為提供網站制作、成都網站建設服務體系，各種行業(yè)企業(yè)客戶提供網站建設解決方案，助力業(yè)務快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質的建站服務。

一，寫出高效的css代碼

首先弄清瀏覽器解析html代碼的過程：構建一個dom樹，頁面要顯示的各元素都會創(chuàng)建到這個dom樹當中。每當一個新元素加入到這個dom樹當中，瀏覽器便會通過css引擎查遍css樣式表，找到符合該元素的樣式規(guī)則應用到這個元素上。css引擎查找樣式表，對每條規(guī)則都按從右到左的順序去匹配。

了解過程后，我們可以看出可以從兩方面優(yōu)化我們的css代碼：1，定義的css樣式規(guī)則條數(shù)越少越好，所以趕緊刪除css文件中不必要的樣式定 義；2，優(yōu)化每條規(guī)則的選擇符書寫方式，盡量讓css引擎一看就知道這個規(guī)則是否需要應用到當前這個元素上，讓引擎少走不必要的彎路。

如以下幾種效率不高的css書寫方式：

body * {...} hide-scrollbars * {...}

b, 用標簽做關鍵選擇符

  1. ul li a {...} 
  2. #footer h4 {...} 
  3. * html #atticPromo ul li a {...} 

c, 畫蛇添足的寫法

ul#top_blue_nav {...} form#UserLogin {...}

d, 給非連接標簽添加 :hover 偽類，這會對用了strict doctype的頁面在IE7和IE8下變的很慢。

h4:hover {...} .foo:hover {...} #foo:hover {...} div.faa :hover {...}

優(yōu)化建議：

a, 避免使用通配符；

b, 讓css引擎快速辨別該規(guī)則是否適用于當前元素：多用id或class選擇符，少用標簽選擇符；

c, 不要畫蛇添足把id和class或標簽和class等連著寫；

d, 盡量避免使用后代選擇符，去除不必要的祖先元素，可以考慮使用class選擇符來替換后代選擇符；

/*給無序和有序的li定義不同顏色，你可能會這樣寫：*/ ul li {color: blue;} ol li {color: red;} /*給li添加class，這樣定義效率會更高：*/ .unordered-list-item {color: blue;} .ordered-list-item {color: red;}

e, 避免給非連接標簽添加 :hover 偽類。

二，避免使用css表達式

css表達式僅在ie瀏覽器下才起作用，微軟已在ie8后不推薦使用，因為它會嚴重影響頁面性能：任何時候，不管任何一個事件被觸發(fā)，例如窗口的 resize 事件，鼠標的移動等等，css表達式都會重新計算一遍。

三，把css文件放在頁面頂部

把外聯(lián)或內聯(lián)樣式表放在body部分會影響頁面渲染的速度，因為瀏覽器只有在所有樣式表下載完成后才會繼續(xù)下載頁面其他內容。另外，內聯(lián)樣式表（放在<style>內的樣式）有可能會引起頁面重新渲染或顯示隱藏頁面中的某些元素，建議不要使用內聯(lián)樣式表。

四，指定頁面圖片的尺寸

指定頁面圖片尺寸，要符合圖片的真實尺寸（不要通過指定尺寸來縮放圖片），可以避免尺寸改變導致的頁面結構效果的變化，所以對加快頁面渲染速度有益。

五，頁面頭部標明文檔編碼

HTML文檔是以包含文檔編碼信息的數(shù)據(jù)流方式在網絡間傳輸。頁面的編碼信息一般會在HTTP響應的頭部信息或在文檔內的HTML標記中指明。客戶端瀏覽器只有在確定了頁面編碼后才能正確的渲染頁面， 所以在繪制頁面或執(zhí)行任何的javascript代碼前，大部分的瀏覽器（ie6、ie7、ie8除外）都會緩沖一定字節(jié)的數(shù)據(jù)來從中查找編碼信息，不同 的瀏覽器當中預緩沖的字節(jié)數(shù)是不一樣的。如果瀏覽器在接收到了設定的預緩沖數(shù)據(jù)量后還沒有找到頁面的編碼信息，便會根據(jù)各自指定的默認編碼開始渲染頁面，如果這時再獲取到頁面編碼信息，而又跟現(xiàn)在所用編碼不一致，那整個頁面就得重新渲染，某些情況下甚至需要重新獲取數(shù)據(jù)。所以，對于大小超過1KB的頁面（根據(jù)在各瀏覽器的測試情況，預緩沖數(shù)據(jù)量最多的也就1KB）應當盡早標明編碼信息。

優(yōu)化建議：

a, 盡量在HTTP頭部信息中標明頁面編碼（這個需要在服務器端設置）。像Firefox瀏覽器，如果在HTTP頭部信息就獲取到了編碼信息，便會預緩沖更少的數(shù)據(jù)從而減少不必要的數(shù)據(jù)緩沖時間；

b, 在HTML的 <head> 部分標明編碼信息；

c, 要習慣給文檔指定編碼；

d, 給頁面指定的編碼要符合頁面實際編碼；如果你在HTTP頭部信息和HTML標記中同時指定了編碼，需確保編碼信息一致。

到此，相信大家對“怎么提高瀏覽器渲染頁面速度”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

本文標題：怎么提高瀏覽器渲染頁面速度
文章分享：http://bm7419.com/article40/jcegho.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、商城網站、網站建設、網站設計公司、小程序開發(fā)、電子商務

廣告

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

手機網站建設