pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

CSS通用元素選擇器的都市流言

CSS通用元素選擇器的都市流言HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、HTML5教程、HTML5視頻、HT

 本文尚未有測試數據支持,以下結論僅是根據現有情況的一種解釋。

關于 * 這個選擇器,一直有個疑惑,到底是否影響效率。在先前的觀念中,這由于要匹配所有的元素,讓每一個元素都帶上這個屬性,所以會影響頁面的效率。但近來的思考,覺得這應該不會影響效率。為此還特地寫過一篇博文,里邊提到了這點:真的還需要reset.css么?

而這篇文章中我打算著重闡述為何 * 這個選擇器不會影響效率。

上周六去參加了 web標準化交流會,席間 winter 從瀏覽器(webkit)的角度分享了關于頁面渲染的過程。其PPT也可以在前面的鏈接中下載到。

其中一個很重要的過程是,當頁面載入過程中,CSS 和 HTML 是并行下載的。并且通常CSS是在HEAD中引入的,并且體積不如HTML大,所以CSS會先下載完。下載的過程中瀏覽器就已經開始對CSS中的規則進行索引,也就是已經確定哪一個元素呈現的樣式是如何的了。同時,瀏覽器根據HTML構建出的DOM樹,其中的每一個元素會直接去CSS規則索引中去比對,構建出渲染樹。這個過程都是并行的,并且CSS規則是進行了索引的,因此速度非常的快速。

那么我們看看CSS規則的來源主要有2個,一是瀏覽器內置的元素樣式,Firefox 3.x版是放在目錄下的res文件夾內,4.0版和Chrome中沒找到(這里是我的主觀臆斷不太可靠,大家自行辨別),另一個就是頁面提供的。根據查看 放在 res 文件夾下的 CSS 文件就可以得知,就是是什么樣式都不寫,已經為每一個HTML元素設定好了基本樣式了。

那么看看我們所忌諱的事情,不用*{margin:0;padding:0},而是使用

  1. html, body, div, span, applet, object, iframe, 
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre
  3. a, abbr, acronym, address, big, cite, code
  4. del, dfn, em, font, img, ins, kbd, q, s, samp, 
  5. small, strike, strong, sub, sup, tt, var, 
  6. b, u, i, center
  7. dl, dt, dd, ol, ul, li, 
  8. fieldset, form, label, legend, 
  9. table, caption, tbody, tfoot, thead, tr, th, td { 
  10.     margin0
  11.     padding0

看看這一大坨東西啊,難道不是跟上面的 * 選擇器一個用途么?對每個元素(至少是常用元素),添加樣式。其實作用是一樣的,并且就算沒有這一坨,瀏覽器內置樣式也在對每個元素設置樣式。之后 HTML 文件中的每一個元素,可以很容易找到自己應當呈現的樣式了。

那么,對于之后添加的,會不會有性能影響呢?也不會,由于CSS規則已經確定并索引了,所以今后增加的元素也不過就是簡單比對一下而已,不會多走一步的。

所以,由此得出結論,只要有需要,大膽的使用 * 吧,他不會給你從性能上增加額外的麻煩。

最后補兩個前端優化小知識:
1,由于CSS規則和HTML是并行載入的,因此把CSS放在HEAD中是非常有必要的。
2,少使用 :last-child 。因為這個選擇器無法索引起來,必須等DOM構件完,才能知道他是不是父元素中最后的那個 元素。這種就非常慢了,慎用。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

主站蜘蛛池模板: 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | PO膜_灌浆膜及地膜供应厂家 - 青州市鲁谊塑料厂 | 软装设计-提供软装装饰和软装配饰及软装陈设的软装设计公司 | PTFE接头|聚四氟乙烯螺丝|阀门|薄膜|消解罐|聚四氟乙烯球-嘉兴市方圆氟塑制品有限公司 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | 橡胶接头_橡胶软接头_可曲挠橡胶接头-巩义市创伟机械制造有限公司 | 注浆压力变送器-高温熔体传感器-矿用压力传感器|ZHYQ朝辉 | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 陶瓷加热器,履带式加热器-吴江市兴达电热设备厂 | 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 | 珠海网站建设_响应网站建设_珠海建站公司_珠海网站设计与制作_珠海网讯互联 | 代办建筑资质升级-建筑资质延期就找上海国信启航 | 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 | 全自动真空上料机_粉末真空上料机_气动真空上料机-南京奥威环保科技设备有限公司 | 等离子空气净化器_医用空气消毒机_空气净化消毒机_中央家用新风系统厂家_利安达官网 | 临海涌泉蜜桔官网|涌泉蜜桔微商批发代理|涌泉蜜桔供应链|涌泉蜜桔一件代发 | 茶叶百科网-茶叶知识与茶文化探讨分享平台 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 国际金融网_每日财经新资讯网| 大型工业风扇_工业大风扇_大吊扇_厂房车间降温-合昌大风扇 | 苏州西朗门业-欧盟CE|莱茵UL双认证的快速卷帘门品牌厂家 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 一点车讯-汽车网站,每天一点最新车讯! | 数显水浴恒温振荡器-分液漏斗萃取振荡器-常州市凯航仪器有限公司 | 小型单室真空包装机,食品单室真空包装机-百科 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 济南保安公司加盟挂靠-亮剑国际安保服务集团总部-山东保安公司|济南保安培训学校 | 淋巴细胞分离液_口腔医疗器材-精欣华医疗器械(无锡)有限公司 | 橡胶接头_橡胶软接头_可曲挠橡胶接头-巩义市创伟机械制造有限公司 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 考试试题_试卷及答案_诗词单词成语 - 优易学 | 聚丙烯酰胺_阴离子_阳离子「用量少」巩义亿腾厂家直销,售后无忧 聚合甘油__盐城市飞龙油脂有限公司 | 防潮防水通风密闭门源头实力厂家 - 北京酷思帝克门窗 | 信阳市建筑勘察设计研究院有限公司 | 400电话_400电话申请_866元/年_【400电话官方业务办理】-俏号网 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | 深圳昂为官网-气体分析仪,沼气分析仪,动态配气仪,气体传感器厂家 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 对辊破碎机-液压双辊式,强力双齿辊,四辊破碎机价格_巩义市金联机械设备生产厂家 | 国产液相色谱仪-超高效液相色谱仪厂家-上海伍丰科学仪器有限公司 | 安全光栅|射频导纳物位开关|音叉料位计|雷达液位计|两级跑偏开关|双向拉绳开关-山东卓信机械有限公司 |