您現在的位置是:電腦技術吧?>? 組裝維修 ??>??渲染網頁,網頁渲染過程??>??正文詳情

渲染網頁,網頁渲染過程

清紫夏2019-11-16 07:30:42 人圍觀
簡介html5渲染如何提高CSS網頁的渲染效率?CSS學習過程中有很多細節需要注意,這些細節也是影響CSS網頁渲染效率的重要因素。黑貓對前人提出的提高CSS網頁渲染效率的方法進行頁面渲染原理

如何提高CSS網頁渲染效率?CSS學習過程中需要關注的細節之處非常多,而這些細節之處也是影響CSS的網頁渲染效率的重要因素,黑貓整理了由前輩們提出的提高CSS網頁渲染效率的方法,一起來學習一下。

  1、十六進制的顏色值對位數與大小寫  編寫十六進制顏色值時你可能會用小寫字母或省略成3位數,關于這寫法沒找到確實的數據證明對瀏覽器的渲染效率是否有影響,但十六進制的顏色值默認標準是大寫及6位數標注。

在未知情況下不希望冒險而降低了渲染的效率。

  * 不贊成 - color:#f3a;  * 建議用 - color:#FF33AA;  2、display與visibility的差異  他們用于設置或檢索是否顯示對象。

display隱藏對象不保留物理空間,visibility為隱藏對象保留占據的物理空間。

當瀏覽器渲染被占據的物理空間時,會有所消耗資源。

  * 不贊成 - visibility:hidden;  * 建議用 - display:none;  3、border:none;與border:0;的區別  和display與visibility的關系類似,分別不保留與保留空間。

更多的是border:0;盡管可以隱藏掉邊框,但它會為你保留border-color/border-style的使用權。

  * 不贊成 - border:0;  * 建議用 - border:none;  4、不宜用過小的背景圖片平鋪  一張寬高1px的背景圖片,雖然文件體積非常之小,但渲染寬高500px的板塊需要重復平鋪2500次。

提高背景圖片渲染效率跟圖片尺寸及體積有關,最大的圖片文件體積保持約70KB。

  * 不贊成 - 寬高8px以下的平鋪背景圖片  * 建議用 - 衡量適中體積及尺寸的背景圖片  5、慎用IE濾鏡  IE的濾鏡除了比較消耗資源外也有兼容性問題。

當中有讓PNG透明的濾鏡,可采用GIF或JPG似透非透的辦法來避免使用此濾鏡。

建議只在IE6應用GIF透明,因為IE7以上已經支持了PNG透明。

  * 不贊成,濫用IE濾鏡因為消耗資源外也有兼容性問題。

  * 建議用,最好選擇其它方法能避免使用濾鏡。

  6、*{ margin:0; padding:0;}避免瀏覽器樣式差異  *號通配符把所有標簽都初始化一遍,瀏覽器的渲染消耗一定的資源。

有部分在標簽在不同瀏覽器上幾乎無差異,或是某些已經不推薦使用的標簽(因為你不會去用它),它們不需通配符要重新初始化一遍這樣做能節省一點資源。

  * 不贊成,使用*號通配符  * 不贊成,div span button b table等標簽納入通配符控制內外填充樣式  * 建議用,有選擇性地使用通配符控制內外填充樣式。

  7、不要添加額外的標簽來描述class或id  如果你有一個選擇器是以id作為關鍵選擇符,請不要添加多余標簽名上去。

因為ID是唯一的,你不要為了一個不存在的理由而降低了匹配的效率。

  * 不贊成 - button#backButton { }  * 不贊成 - .menu-left #newMenuIcon { }  * 建議用 - #backButton { }  * 建議用 - #newMenuIcon { }  8、盡量選擇最特殊的類來存放選擇器  降低系統效率的一個最大原因是我們在標簽類中用了過多的選擇符。

通過添加 class 到元素,我們可以將類別進行再細分為 class 類,這樣就不用為了一個標簽浪費時間去匹配過多的選擇符了。

  * 不贊成 - treeitem[mailfolder=true] treerow treecell { }  * 建議用 - .treecell-mailfolder { }  9、避免子孫選擇符  子孫選擇符是CSS中最耗資源的選擇符。

他真的是非常的耗資源,尤其是在選擇器使用標簽類或通用類的時候。

很多情況中,我們真正想要的是子選擇符。

除非有明確說明,在 UI CSS 中是嚴禁使用子孫選擇符的。

  * 不贊成 - treehead treerow treecell { }  * 好一點,但還是不行(參照下一條) - treehead treerow treecell { }  10、標簽類中不要包含子選擇符  不要在標簽類中使用子選擇符。

否則,每次元素的出現,都會額外地增加匹配時間。

(特別是當選擇器似乎多半會被匹配的情況下)  * 不贊成 - treehead treerow treecell { }  * 建議用 - .treecell-header { }  11、留意所有子選擇符的使用  小心地使用子選擇符。

如果你能想出一個的不使用他的方法,那么就不要使用。

特別是在 RDF 樹和菜單會頻繁地使用子選擇符,像這樣。

  * 不贊成 - treeitem[IsImapServer=true] treerow .tree-folderpane-icon { }  請記住 RDF 的屬性是可以在模板中被復制的!利用這一點,我們可以復制那些想基于該屬性改變的子 XUL 元素上的 RDF 屬性。

  * 建議用 - .tree-folderpane-icon[IsImapServer=true] { }

版權聲明:本文由 清紫夏 整理編輯。

原標題:網頁渲染是什么意思,渲染

轉載注明出處:http://www.dn9ww09s.icu/assemble/12761.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • spotlight搜索在哪,spotlight搜索沒有了

    spotlight搜索在哪,spotlight搜索沒有了 相關圖片蘋果spotlight搜索在蘋果的設備上有一個聚光燈搜索。很多人不知道這意味著什么,也不知道它有什么用處。Spotlight search是一個快速索引功能,它根據設置搜索系統中與關鍵字spotlight怎么...

  • 創意h5,創意H5宣傳

    創意h5,創意H5宣傳 相關圖片創意h5 傳播RT,請參考類型分析和典型案例:1。個性化測試的基本邏輯:輸入姓名/其他個人信息,隨機帶出姓名變量的結果共享核心思想:測試結果一般具有個人屬性和炫耀性質(社會...

  • conime進程,rdpclip進程

    conime進程,rdpclip進程 相關圖片ecagent進程很多任務管理器通常有一些不熟悉的進程,這些進程占用了大量的CPU資源。如果你想刪除它,你不知道會有什么問題。例如,許多人不知道conime.exe是什么進程conisgtool.exe...

  • 屏幕鎖忘記了怎么解鎖,如果手機密碼忘記了怎么辦

    屏幕鎖忘記了怎么解鎖,如果手機密碼忘記了怎么辦 相關圖片蘋果解鎖密碼忘掉了迷宮解鎖是Android用戶經常使用的一種模式解鎖方法。盡管迷宮解鎖比其他密碼方法簡單,但許多用戶仍然忘記了迷宮解鎖密碼。當你忘記解鎖迷宮的密碼時你會怎么...

  • 提升用戶體驗的方法,提升用戶體驗感

    提升用戶體驗的方法,提升用戶體驗感 相關圖片如何提高網站用戶體驗1)用戶只看最終結果2)明確表達態度的原因3)關注真實的數據結果,發現用戶的情感差距。今天,阿里的紅鷹同學結合自己的工作經驗,總結出了用戶體驗設計...

  • taskmgr進程,wuauclt是什么進程

    taskmgr進程,wuauclt是什么進程 相關圖片explorer是什么進程一些用戶的計算機資源被一個名為wault.exe的進程占用,這會導致計算機阻塞。很多用戶都想知道wault.exe是什么進程。你能關閉或刪除它嗎?wault.euns進程...

  • 做一個APP需要多少錢,APP多少錢

    做一個APP需要多少錢,APP多少錢 相關圖片開發app需要多少錢這篇文章在網上很受歡迎。本文從一個實踐者的角度,真實地分析了一個應用從開發到發布的成本,非常值得借鑒。這篇文章的發表已經被原作者授權為網絡從業者,...

  • 百度有錢花借現金,有錢花有額度借不出來

    百度有錢花借現金,有錢花有額度借不出來 相關圖片有錢花怎么還款百度富富華是百度旗下的一個信用服務品牌。主要運用百度人工智能和大數據風險控制技術,為公眾提供個人消費信貸服務。具有申請簡單、審批快、額度高、放款快、...

  • 瑞星怎么徹底刪除,怎么刪除瑞星

    瑞星怎么徹底刪除,怎么刪除瑞星 相關圖片注冊表刪除瑞星許多普通用戶在電腦上安裝防病毒軟件是瑞星,但當他們想更換其他殺毒軟件時,他們無法卸載瑞星。這時,你會發現rising cliff是你見過的最頑固的軟件。瑞星如何瑞星...

  • 辨別,怎樣辨別玉的真假和好壞

    辨別,怎樣辨別玉的真假和好壞 相關圖片紫砂壺怎么分辨好壞橫幅實際上是指橫幅或旗幟。隨著互聯網的興起,橫幅一詞被用來指各種尺寸和形狀的廣告地圖,這些地圖被放在互聯網上(PC端,移動端)。有靜態和動態的區別。...

熱評文章

  • exe是什么,taskeng是什么進程

    exe是什么,taskeng是什么進程 相關圖片audiodg是什么進程一些用戶在電腦上遇到了張芳雨.exe的進程,這是360安全衛士的主動防御文件。它為360安全衛士提供實時保護、文件審核、主動防御、智能加速等功能,使360云搜索werfa...

  • 簡單的二級菜單代碼,html菜單代碼

    簡單的二級菜單代碼,html菜單代碼 相關圖片c語言菜單代碼本文的例子描述了用純CSS實現多級半透明效果菜單的代碼。與您分享以供參考。具體如下:這是一個基于CSS的多級半透明菜單,可以支持多達5級的CSS菜單。菜單樣式可ht...

  • 無線網絡密匙是什么,破解無線網絡密匙

    無線網絡密匙是什么,破解無線網絡密匙 相關圖片手機上無線網絡密匙無線網絡密鑰是無線網絡的登錄密碼。當用戶設置無線網絡時,添加登錄密碼可以有效防止未經授權的用戶訪問無線網絡,同時也保證了自身網絡環境的安全最好每...

  • canvas實例,canvas怎么使用

    canvas實例,canvas怎么使用 相關圖片canvas html5本文給出了一個基于HTML5畫布實現飛雪效果的實例。通過這個例子,我們可以看到很好的降雪效果。如下圖所示:主代碼如下:代碼如下:!DOCTYPE HTML puuoa canvas...

  • 存儲空間不足,存儲空間清理

    存儲空間不足,存儲空間清理 相關圖片存儲空間不足怎么刪除Icloud不僅是確保iPhone設備安全的一種手段,也是iPhone和其他設備非常實用的存儲空間。然而,許多iPhone用戶的icloud存儲空間往往不足手機老是顯示存儲空間不足...

  • word怎么將文字豎排,word部分文字豎排

    word怎么將文字豎排,word部分文字豎排 相關圖片word文字豎排封面當用戶通過word編輯和排版文本時,文本是水平顯示的,但有時我們也需要使文本垂直顯示。我們現在該怎么辦?實現文本垂直排列1非常簡單。如果你只想要幾個垂直排...

  • 怎樣掌握配色技巧,配色技巧

    怎樣掌握配色技巧,配色技巧 相關圖片設計配色基礎一篇你絕對不想錯過的文章!以前的色彩知識大多是基礎科普知識,閱讀后容易忘記,而且在配色時還得翻書。但今天的文章主要是基于實戰。你可以在學習之后馬上開始...

  • photoshop合成圖像,photoshop調整圖像大小

    photoshop合成圖像,photoshop調整圖像大小 相關圖片ps圖像處理在PS操作中,對稱圖像是常用的PS技術之一。通過在鏡像中排列相同的元素,有時人們可以獲得相當驚人的視覺效果。本文將與您分享PS如何制作對稱圖像步驟1,Ctrl ps如何翻轉...

  • border radius屬性,border-radius

    border radius屬性,border-radius 相關圖片textdecoration屬性邊界半徑是一種縮寫方法。如果前/后和/或后存在值,則設置/設置其水平半徑,并設置/設置其垂直半徑后的值。如果沒有/,則水平和垂直半徑相等CSS代碼將內容復制到剪...

  • excel怎么四舍五入取整,Excel四舍五入

    excel怎么四舍五入取整,Excel四舍五入 相關圖片excel不想四舍五入我們經常使用Excel來計算數據,有些數據有小數。然而,我們不需要這樣精確的數字,只要把它們圍起來就行了。有些用戶不知道如何取整excel。你得走這條路excel萬位取...

關注微信

变脸官网查询