您現在的位置是:電腦技術吧?>? 故障問題 ??>??渲染速度,渲染速度和什么有關??>??正文詳情

渲染速度,渲染速度和什么有關

栗爾容2019-11-05 07:31:15 人圍觀
簡介3d影響渲染速度的一盡量避免由于不同瀏覽器對HTML標記的解釋不同,最終的web頁面效果在不同瀏覽器中可能有所不同為了消除這種風險,設計人員通常在css的開頭去掉所有標簽的默認屬

1、*{} #zishu *{} 盡量避開由于不同瀏覽器對HTML標簽的解釋有差異,所以最終的網頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風險,設計者通常會在CSS的一個始就把所有標簽的默認屬性全部去除,以達到所有簽標屬性值都統一的效果。

所以就有了*通配符。

*會遍歷所有的標簽;*{margin:0; padding:0}如果這樣寫,頁面中所有的標簽的margin全是0;padding也是0;#zishu *{margin:0; padding:0}如果這樣寫,在id等于zishu下邊的所有標簽的margin全是0;padding也是0;這樣寫的問題是:a.遍歷會消耗很多的時間,如果你的HTML代碼寫的不規范或是某一簽標沒有必合,這個時間可能還會更長;b.很多的標簽本來就沒有這個屬性或屬性本身就是統一的,那么更給設置一次,也有時間的開消;建議的的解決辦法:a.不要去使用生僻的標簽,因為這些標簽往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的去使用那些常用的標簽;b.不要使用*;而是把你常用到的這些標簽進行處理;例如:body,li,p,h1{margin:0; padding:0}2、濾鏡的一些東西不要去用IE的一些濾鏡在FIREFOX中不支持,往往寫一些效果時你還是使用CSS HACK;而濾鏡是一個非常毫資源的東西;特別是一些羽化、陰影和一個前透明的效果;例如一個陰影效果:建議的解決辦法:a.能不使用就不要使用,一方面兼容問題;很多效果只能在IE中使用;b.就本例而言,如果非要這樣在的效果,建議用圖片作背景;(只說優化速度,實際應用還是可以小部分用,有人可能會說,用圖片還多一個HTTP請求呢,呵呵)一個非常好的例子,就是在今年512大地震時,很多網站一夜之間全部變成了灰色,他們只用了一行CSS代碼:

    body{filter:gray;}
但,你會看會看到這些網頁非常的慢,打開后你的CPU也會飆升,不夸張的說,如果你的電腦配置差,干死你也不為過。

[mrgreen]3、一個頁面上少用絕對定位絕對定位(position:absolute )是網頁布局中很常用到的,特別是作一些浮動效果時,也會讓頁面看起來非常的酷。

但網頁中如果使用過多的絕對定位,會讓你的網頁變得非常的慢,這一點上邊FIREFOX表現要比IE還要差。

例如:

    styleli{position:absolute;}/style ul listyle=left:10px;top:20px001/li listyle=left:30px;top:70px001/li listyle=left:40px;top:50px001/li /ul
建議的解決辦法:a.盡可能少用,這個少用的值是多少,也沒有一個非常好的值來說明;還要看絕定定位這個標簽里邊的內容的多少;在這里我只能說,這樣寫會有性能問題,少用。

b.如果能用變通實現同樣的效果,就用變通的辦法。

4、background 背景圖片的平鋪有些網頁的背景或頁面中某塊的背景通常要用到圖片的平鋪,平鋪后就會有平鋪次數的問題,如果是單次還好,如果是多次,就廢了。

舉個簡單的例子:例一:滾動一下你的頁面,看速度怎么樣?

div style=height:8000px; background:url(http://www.zishu.cn/attachments/month_0809/i2008962026.gif)/div例二:同樣效果,再試一下這個!div style=height:8000px; background:url(http://www.zishu.cn/attachments/month_0809/120089620424.gif)/div說明:測試上邊的兩個效果,你的電腦越差越明顯,如果你的電腦配置非常好,你就把上的8000px改成9000000px試一下,如果還不行,就改的更大一些,整死機別罵我![razz]建議的作法:a.色彩少的圖片要作成gif圖片;b.平鋪的圖片盡可能大一些,如果是色彩少的GIF圖片,圖片大一些,實際大小也不會大多少;上邊的兩個例子就很好的證明,第一個圖片非常少,第二個圖大較大一些;但速度是非常不一樣的;5、讓屬性盡可能多的去繼承盡可能讓一些屬性子可以繼承父,而不是覆蓋父;簡單的一個例子:

    style a:link,a:visited{color:#0000FF} a:hover,a:active{color:#FF0000} #zishua:link,#zishua:visited{font-weight:bold} #zishua:hover,#zishua:active{font-style:italic;} /style divahref=#test/adiv divid=zishuahref=#zishu/a/div
實際上我是讓zishu去繼承我默認設置的屬性,因為那些屬性已經存在了。

另外再說幾個不是特別重要的地方,平時注意一點就行了,沒有上邊這幾個影響那么大:6、CSS的路徑別太深;例如:

    #zishu#info#tool#sidebarh2{font-size:12px;}
7、能簡寫的一些就簡寫;例如:#zishu{pading-top:10px; padding-right:50px; padding-left:50px; padding-bottom:4px;} 改成:#zishu{padding:10px 50px 4px 50px}這個對渲染速度沒有影響;只是少幾個字符;[lol]8、別放空的的class或沒有的class在HTML代碼中;9、float 的應用這個東西我的感覺是如果使用不當,百分百有性能問題,而且還非常的大,但實在不知道怎么樣能弄一個例子出來;這里只能建議大家如果不是很明白float是怎么工作的,還是少使用為妙。

10、合理的布局為什么這么說呢,合理的布局,可以改變CSS的寫法以及渲染過程。

其實有些不能總結為CSS部分;

版權聲明:本文由 栗爾容 整理編輯。

原標題:影響渲染速度的因素,如何加快渲染速度

轉載注明出處:http://www.dn9ww09s.icu/fault/11103.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • WIN鍵,win鍵用不了

    WIN鍵,win鍵用不了 相關圖片鍵盤上的windows鍵在哪當我們打開跑步窗口時,我們習慣于點擊鍵盤上的“win r”來打開它。但贏球的關鍵是什么?鍵盤上是什么鍵今天,小編會告訴你哪一個是關鍵贏家我寫了那么多教...

  • 打印機一直卡紙,打印機為什么卡紙

    打印機一直卡紙,打印機為什么卡紙 相關圖片打印機顯示卡紙我們經常滿足使用打印機的需要,但在使用打印機時,我們經常遇到一個問題,即打印機卡紙。我們應該如何處理這種現象?別慌今天小編將教你如何解決打印機卡紙的...

  • 日歷圖標,日歷圖標顯示當天日期

    日歷圖標,日歷圖標顯示當天日期 相關圖片華為日歷圖標不顯示日期今天我將向你展示如何用css的方式創建一個日歷圖標。你可以在博客文章或其他地方使用它我自己學的,但效果是圖片級的。正如書名中提到的,這不是炫耀技...

  • 刪除頑固文件夾,頑固文件夾刪除又生成

    刪除頑固文件夾,頑固文件夾刪除又生成 相關圖片文件夾刪除后又出現小編遇到過這樣的問題刪除要刪除的文件后,她發現這些文件沒有完全刪除。最后,需要一點時間來解決它所以今天小編就和大家分享如何刪除那些無法刪除的頑固...

  • body背景圖片,給body加背景圖片

    body背景圖片,給body加背景圖片 相關圖片html設置body背景圖片在css布局中,有時可能會遇到將圖像直接設置為web頁面的背景以進行水平和垂直平鋪(從上到下到中心)的情況。此時,無論整個網頁的內容是否占據全屏,css的背景...

  • 網頁如何設置自動刷新,瀏覽器怎么設置自動刷新網頁

    網頁如何設置自動刷新,瀏覽器怎么設置自動刷新網頁 相關圖片如何設置自動刷新有時我們需要不斷刷新網頁例如,買票時,手動刷新總是很慢很費力。如果您可以將瀏覽器設置為自動刷新,那么現在讓我們告訴您瀏覽器確實具有此功能接下來,編...

  • 為什么steam打不開,steam打不開了

    為什么steam打不開,steam打不開了 相關圖片steam官網打不開STEAM是一個銷售游戲軟件的平臺。它賣的所有游戲都是正版的。但是當我們打開它的時候,會出現一些情況,比如蒸汽不能打開它的問題。我們怎樣才能解決這個問題接下...

  • 言過其實,言過其實的人

    言過其實,言過其實的人 相關圖片言過其實指誰HTML5什么時候開始吸引越來越多的人盡管W3C說它的最終成熟還有很長的路要走,但它不能阻止人們對它的期望2007年,HTML5進入了W3C標準HTML5的使命言過其實指的是...

  • 顯卡筆記本,筆記本電腦顯卡排名圖

    顯卡筆記本,筆記本電腦顯卡排名圖 相關圖片筆記本電腦顯卡伙計們,編輯今天不會告訴你們“教科書概念”。這是另一種“安利解釋”。哈哈哈~今天安利的主題是一些筆記本顯卡的排名介紹。當你買電腦的時候,你可以選擇一種...

  • 網站開發教程,app開發教程

    網站開發教程,app開發教程 相關圖片android開發菜鳥教程雖然HTML5技術還不夠成熟,仍在不斷的改進和發展中,但它的許多先進和強大之處是有目共睹的。為了幫助您更好地學習html5,本文將與您分享25個優秀的html5自學小程...

熱評文章

  • 怎么計算電腦電源功耗,電腦電源功耗計算

    怎么計算電腦電源功耗,電腦電源功耗計算 相關圖片功率計算機如果計算機只需要400W的電源,即使使用1200W的電源,也無法提高其性能我們需要什么樣的電源按照“夠用就好”的原則買權其實是最合理的。有辦法測量用電量嗎現在,電腦...

  • 八卦,什么是八卦

    八卦,什么是八卦 相關圖片八卦卦象你知道世界上第一個reset.css在哪里嗎?*{邊距:0;邊距:0}個性不好?埃里克·邁耶和你是情侶嗎?谷歌使用reset.css嗎?誰是不重置css的口號先天八卦和后天八卦...

  • cr2用什么打開,cr2文件如何打開

    cr2用什么打開,cr2文件如何打開 相關圖片電腦如何打開cr2佳能相機,這是一段時間。因為我記得我在學校的時候,佳能相機的廣告每天都出現在電視上,那時我覺得很酷但現在它很受歡迎。今天,我想告訴你如何打開佳能相機...

  • 怎么使表格居中,怎么使文字居中

    怎么使表格居中,怎么使文字居中 相關圖片怎么使表格里的字居中主要樣式定義如下:body{text align:center;}{center{margin right:auto;margin left:auto;}描述:在html5中如何使表格居中...

  • word文檔目錄怎么自動生成,word文檔目錄怎么自動生成頁碼

    word文檔目錄怎么自動生成,word文檔目錄怎么自動生成頁碼 相關圖片word文檔目錄word是我們常用的文本編輯器。學習word的一些基本操作,使辦公更加方便。當我們通常寫文章或論文時,為了方便,在搜索時很容易找到由文章生成的目錄如何生成目錄現w...

  • 如何解決筆記本漏電,筆記本漏電怎么辦

    如何解決筆記本漏電,筆記本漏電怎么辦 相關圖片筆記本usb漏電小編其實也經歷過筆記本外泄的感覺。有一次,當我玩電腦的時候,當我的手碰到筆記本主板的邊緣時,我突然感覺到電流我很震驚后來,我得知是筆記本漏水,找到了解...

  • class屬性有什么用,class屬性

    class屬性有什么用,class屬性 相關圖片td標簽中的class屬性每個元素都可以有一個類屬性集如果一個元素屬于多個類,請用空格將其分開,例如a href=http://www.htmlv.cn/html5/a。具有類屬性值的元table標簽的class屬性...

  • 0xc000000a,0x000001a

    0xc000000a,0x000001a 相關圖片0x0000035我們可能每天都會面臨不同的計算機問題,而出現問題的時間并不是我們可以提前知道的所以計算機出現問題的概率取決于幸運值。接下來,我將告訴您如何解決藍屏錯誤代碼“...

  • cssclear,css中clear是什么意思

    cssclear,css中clear是什么意思 相關圖片html中clear屬性代碼如下:style type=text/css*{margin:0;padding:0;}p{border:1px{66cc00 solid;}img{widhtmlclearboth...

  • 電腦開機鼠標不能動,電腦死機鼠標不能動

    電腦開機鼠標不能動,電腦死機鼠標不能動 相關圖片電腦黑屏但是鼠標能動對于老鼠,我們都很熟悉它是計算機中必不可少的工具。在使用鼠標時,我們經常會發現一些問題,如移動緩慢和無法移動那么,是什么導致的呢?計算機鼠標不...

關注微信

变脸官网查询