陕西建设网网站集群,html5 php 网站源码,业务外包,应聘网站开发的自我介绍一、简单介绍一下什么是浏览器内核。 浏览器最重要或者说核心的部分是“Rendering Engine”#xff0c;可大概译为“解释引擎”#xff0c;不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释#xff08;如HTML、JavaScript#xff09;并渲染#xff08;显示可大概译为“解释引擎”不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释如HTML、JavaScript并渲染显示网页。 所以通常所谓的浏览器内核也就是浏览器所采用的渲染引擎渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 不同的浏览器内核对网页编写语法的解释也有不同因此同一网页在不同的内核的浏览器里的渲染显示效果也可能不同这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。 浏览器内核很多如果加上所有的几乎没有什么人在用的非商业的免费内核那么可能大约有10款以上甚至更多不过通常我们比较常见的大约只有以下四种下面先简单介绍一下。 Trident IE浏览器使用的内核该内核程序在1997年的IE4中首次被采用是微软在Mosaic代码的基础之上修 改而来的并沿用到目前的IE9。 Trident实际上是一款开放的内核其接口内核设计的相当成熟因此才有许多 采用IE内核而非IE的浏览器涌现如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等。 此外 为了方便也有很多人直接简称其为IE内核当然也不排除有部分人是因为不知道内核名称而只好如此说。 由于IE本身的“垄断性”虽然名义上IE并非垄断但实际上特别是从Windows 95年代一直到XP初期就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位而使得Trident内核的长期一家独大微软很长时间都并没有更新Trident内核这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节2005年二是Trident内核的大量 Bug等安全性问题没有得到及时解决然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点也有很多用户转向了其他浏览器Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。 Gecko Netscape6开始采用的内核后来的Mozilla FireFox (火狐浏览器) 也采用了该内核Gecko的特点 是代码完全公开因此其可开发程度很高全世界的程序员都可以为其编写代码增加功能。 因为这是个开源 内核因此受到许多人的青睐Gecko内核的浏览器也很多这也是Geckos内核虽然年轻但市场占有率能够迅速 提高的重要原因。 事实上Gecko引擎的由来跟IE不无关系前面说过IE没有使用W3C的标准这导致了微软内部一些开发人员的不满他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla以当时的Mosaic内核为基础 重新编写内核于是开发出了Geckos。 不过事实上Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多 所以有时也会被称为Firefox内核。 此外Gecko也是一个跨平台内核可以在Windows、 BSD、Linux和Mac OS X 中使用。 Presto 目前Opera采用的内核该内核在2003年的Opera7中首次被使用该款引擎的特点就是渲染速度的优化达到了极致也是目前公认网页浏览速度最快的浏览器内核然而代价是牺牲了网页的兼容性。 实际上这是一个动态内核与前面几个内核的最大的区别就在脚本处理上Presto有着天生的优势页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。 此外该内核在执行Javascrīpt的时候有着最快的速度根据在同等条件下的测试Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3Trident内核最慢不过两者相差没有多大。 那次测试的时候因为Apple机的硬件条件和普通PC机不同所以没有测试WebCore内核。 只可惜Presto是商业引擎使用Presto的除开Opera以外只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等这很大程度上限制了Presto的发展。 Webkit 苹果公司自己的内核也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎均是从KDE的KHTML及KJS引擎衍生而来它们都是自由软件在GPL条约下授权同时支持BSD系统的开发。 所以Webkit也是自由软件同时开放源代码。在安全方面不受IE、Firefox的制约所以Safari浏览器在国内还是很安全的。 限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器这个内核本身应该说市场范围并不大但似乎根据最新的浏览器调查表明该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨另外也是因为Safari 3终于推出了Windows版的缘故吧。 Mac下还有OmniWeb、Shiira等人气很高的浏览器。 google的chrome也使用webkit作为内核。 WebKit 内核在手机上的应用也十分广泛例如 Google 的手机 Gphone、 Apple 的 iPhone Nokia’s Series 60 browser 等所使用的 Browser 内核引擎都是基于 WebKit。 // 比如检测一下猎豹浏览器双核 http://ie.icoa.cn/ PC的浏览器内核主要就是这几个那手机浏览器是基于什么内核呢 目前微软的Trident在移动终端上主要为WP系统内置浏览器Webkit内核的适用范围则较为广泛Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。 从实际情况出发 对于Android手机而言使用率最高的就是Webkit内核我们看到很多手机浏览器厂商都宣称有着自主内核比如手机UC就号称采用了U3内核、而华为也经常标榜自己的天天浏览器采用了T9内核事实上他们都是基于开源内核Webkit进行二次开发的并不是完全的自主内核。 而在iOS以及WP7平台上由于系统封闭不允许除系统自带浏览器内核以外的浏览器内核进入因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发优化功能和自制UI。 比如海豚、遨游等浏览器就是直接采用系统自带浏览器的内核这点从这几款浏览器的HTML5评分与系统自带浏览器评分结果完全一致就可以看出。 内核并无手机与PC的区分手机浏览器的内核与PC浏览器类似例如 IE手机版和PC版都是Trident内核的Opera手机版和PC版都是Presto内核的自从2013年2月13日Opera宣布放弃Presto内核转向Webkit内核后已出现部分Webkit内核的Opera手机浏览器测试版Firefox手机版和PC版都是Gecko内核的Chrome、Safari手机版和PC版都是Webkit内核的。 至于国内的UC和QQ等手机浏览器也都是根据Webkit修改过来的内核。 --------------- 另一个关于浏览器内核的说明 ----------------- 可以直接去 维基百科 看看 一、排版引擎 首先厘清一下浏览器内核是什么东西。 英文叫做Rendering Engine中文翻译很多排版引擎、解释引擎、渲染引擎现在流行称为浏览器内核至于为什么流行这么称呼请自行领悟。 Rendering Engine顾名思义就是用来渲染网页内容的将网页的内容和排版代码转换为可视的页面。因为是排版所以肯定会排版错位等问题。为什么会排版错位呢有的是由于网站本身编写不规范有的是由于浏览器本身的渲染不标准。 现在有几个主流的排版引擎因为这些排版引擎都有其代表的浏览器所以常常会把排版引擎的名称和浏览器的名称混用比如常的说IE内核、Chrome内核。其实这样子是不太合理的因为一个完整的浏览器不会只有一的排版引擎还有自己的界面框架和其它的功能支撑而排版引擎本身也不可能实现浏览器的所有功能。下面罗列一下几款主流的排版引擎和浏览器。 1、TridentWindows IE浏览器所使用的内核也是很多浏览器所使用的内核通常被称为IE内核。基于Trident内核的浏览器非常多这是因为Trident内核提供了丰富的调用接口。老的Trident内核比如常说的IE6内核一直是不遵循W3C标准的但是由于它的市场份额最大所以后果就是大量的网站只支持老的Trident内核依据W3C标准写的网页在老的Trident内核下面又出现偏差。目前可供调用的最新版的Trident内核是IE9所用的内核相较之前的版本对W3C标准的支持增强了很多。 Trident内核的浏览器 IE6、IE7、IE8Trident 4.0、IE9Trident 5.0、IE10Trident 6.0 世界之窗1、世界之窗2、世界之窗3 360安全浏览器1、360安全浏览器2、360安全浏览器3、360安全浏览器4、360安全浏览器5 傲游1、傲游2搜狗浏览器1腾讯TT阿云浏览器早期版本、百度浏览器早期版本、瑞星安全浏览器、Slim Browser GreenBrowser、爱帆浏览器12 之前版本、115浏览器、155浏览器 闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器 2、Gecko跨平台 Netscape6启用的内核现在主要由Mozilla基金会进行维护是开源的浏览器内核目前最主流的Gecko内核浏览器是Mozilla Firefox所以也常常称之为火狐内核。因为Firefox的出现IE的霸主地位逐步被削弱Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网最直接的就是推动了编码的标准化也使得微软在竞争压力下不得不改进IE。不过比较可惜的是虽然是开源的也开发了这么多年基于Gecko的浏览器并不多见除了一些简单的改动坑爹的X浏览器或者是重新编译绫川ayakawa、tete009深度定制或者增强型外壳的还比较少见。另外就是有一些其它软件借用了Gecko内核比如音乐管理软件SongBird。 常见的Gecko内核的浏览器 Mozilla Firefox、Mozilla SeaMonkey Epiphany早期版本、Flock早期版本、K-Meleon 3、KHTMLLinux KDE开发的内核速度快捷容错度低。这个内核可能不见得很多人知道但是后面再看下去你就明白了。 常见的KHTML内核的浏览器Konqueror 4、WebKit跨平台 由KHTML发展而来也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核火热倒不是说市场份额而是应用的面积和势头。因为是脱胎于KHTML所以也是具有高速的特点同样遵循W3C标准。 常见的WebKit内核的浏览器Apple Safari、Symbian系统浏览器 5、Chromium跨平台 维基百科里面并没有将Chromium从WebKit分出来这个区分完全是基于我个人的恶趣味。记得以前看过一个大牛的博文说过Chromium把WebKit的代码梳理得可读性提高很多所以以前可能需要一天进行编译的代码现在只要两个小时就能搞定。这个我自己也没有考究过但是估计可信。这个也能解释为什么Gecko和WebKit出来了这么久第三方编译、定制的版本并不多但是由Chromium衍生出来的浏览器早就满坑满谷了。 常见的Chromium内核的浏览器Chromium、Google Chrome、SRWare Iron、Comodo Dragon 6、Presto跨平台 Opera的内核准确地说是Opera 7.0及以后版本的内核Opera 3.5-6.1版本使用的内核叫做Elektra。不用说Presto对W3C标准的支持也是很良好的。虽然我很喜欢Opera但是我对Presto的渲染速度一直有保留态度。之前在OperaChina论坛看见有人说过Presto优先解析文字保证可阅读性媒体资源的渲染放后。 常见的Presto内核的浏览器Opera 7、其它 http://zh.wikipedia.org/wiki/排版引擎 二、JavaScript引擎 说完了排版引擎接下来说说JavaScript引擎。顾名思义JavaScript引擎就是用来渲染JavaScript的。 为什么要单独拿出来说呢因为它涉及到跑分。经常看见很多文章在报道说哪个浏览器更快其实大部分说的就是JavaScript的渲染速度而不是页面的载入速度。在网速许可的情况下其实各个浏览器的页面载入速度差别不大Opera逊色一些。那是不是说对比JavaScript的渲染速度其实没有意义也不是这么说因为现在JavaScript在页面中的比重会越来越大越来越多的动态页面开始大量借助JavaScript比如现在主流的SNS、邮箱、网页游戏所以JavaScript的渲染速度也是一个很重要的指标。 JavaScript的渲染速度越快动态页面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的一般来说最新测试版之间PKOpera基本都会夺冠。 1、Chakra 查克拉IE9启用的新的JavaScript引擎。 2、SpiderMonkey/TraceMonkey/JaegerMonkey SpiderMonkey应用在Mozilla Firefox 1.0-3.0TraceMonkey应用在Mozilla Firefox 3.5-3.6版本JaegerMonkey应用在Mozilla Firefox 4.0及后续的版本。 3、V8 应用于Chrome、傲游3。 4、Nitro 应用于Safari 4及后续的版本。 5、Linear A/Linear B/Futhark/Carakan Linear A应用于Opera 4.0-6.1版本Linear B应用于Opera 7.09.2版本Futhark应用于Opera 9.5-10.2版本Carakan应用于Opera 10.5及后续的版本。 6、KJS KHTML对应的JavaScript引擎。 三、几个测试 1、V8引擎 http://v8.googlecode.com/svn/data/benchmarks/v6/run.html 现在很多“双核”浏览器都用它来跑分测试JavaScript引擎分数越高越好。 2、Acid3 http://acid3.acidtests.org/ 标准支持测试分数越高越好满分是100分。 3、HTML5 http://www.html5test.com/ 测试浏览器对HTML5标准的支持分数越高越好。 四、几个奇葩 1、IETab 在没有第三方编译版本的时候IETab一直是Mozilla Firefox、Chrome等非Trident内核的浏览器的安装量最大的扩展之一方便用户在不开启IE的情况下调用Trident内核访问一些兼容性比较差的网站。 2、Trident/Gecko双核浏览器 虽然IETab能实现部分需求但是深度订制的毕竟还是不一样所以Trident/Gecko双核浏览器就诞生了Sleipnir、Avant 12Orca是这类里面比较常见的。Avant 12因为有Orca的前期积累所以轻车熟路后面还打算加入Chromium变成三核浏览器但是偏偏现在Mozilla Firefox和Chrome都在疯狂刷版本号肯定有一部分精力要花在跟进版本上。 3、Trident/WebKit双核浏览器 现在国内最主流的“双核”浏览器基本都是这个架构360极速浏览器、世界之窗浏览器极速版、傲游3搜狗浏览器3、QQ浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器后期版本、太阳花浏览器其中最奇葩的是傲游3。其它双核浏览器都是基于Chromium的而傲游是基于WebKit的但是偏偏又用的是V8引擎。 4、Trident/Gecko/WebKit三核浏览器 目前能见的应该就是日本的LunascapeAvant增加了WebKit内核之后也会归类到这里。说实话Lunascape真的很难用真的很奇葩。各个内核相对独立外壳本身不够强化稳定性不高所以还不如用回单核浏览器。 五、几个小点 1、Chrome/Chromium 很多人都会说自己用的双核浏览器是Chrome/IE双核的或者说是基于Chrome的。其实这种说法并不正确因为Chrome本身并不开源其它厂商是不能去定制Chrome的。能被修改、定制的是ChromiumChrome的开源开发版本代码和Build都提供下载。Chromium/Chrome两个单词都是铬分别是拉丁文和英文除了名字之外很有很多不同你可以自己对比一下。 Chromium一天最多可以更新十几二十个版本实验性的新特性都会现在这里放出但是Chromium本身其实并不稳定。 Chrome总共有四个更新分支Canary、Dev、Beta、Stable稳定性依次增强。 2、MyIE、MyIE2、傲游、GreenBrowser 自行搜索一段历史。 3、页面兼容性判断 在确保IE浏览器没有损坏的基础上搭配一款非Trident内核的浏览器进行判断如果可以的话最好所有内核都配齐了。 控制变量就能找到问题所在是浏览器本身的问题还是页面编码有问题。对于用户来说就能更好地去选择自己该用什么浏览器访问什么页面对于开发者来说应该要写出无差别代码。 4、一直被模仿一直被超越的Opera Opera其实很好看也很好用而且极度创新但是市场占有率一直很低。很多很好用的新特性总是被抄袭所以大家笑称Opera“一直被模仿一直被超越”。坊间传闻多标签页浏览器就是Opera发明的但是貌似有人考究了这个传闻其实不属实。不过快速拨号、Turbo浏览等功能就是扎扎实实Opera首创的。你可以不用Opera但是你会损失很多乐趣。 5、这年头流行刷版本号 现在版本号最高的浏览器是Chrome稳定版的版本号是14也是现在主流浏览器里面诞生时间最短的真是一个刷版本号高手。早期的Chrome版本更迭还会增加一些比较重要的新特性比如扩展支持现在的版本更迭基本上并没有伴随什么大的更新。现在很多伪高端用户就会整天追着第三方编译版本赶紧跟进版本号但是其实真正的意义并不大。 多亏了Chrome的“提携”今年Firefox也在猛刷版本号年初还是3.x现在正式版已经是7.0.1每夜版已经到了10.0。Opera积累了多年才到11.50测试版是12.0。IE的正式版是9平台预览版是10。 6、查看源代码、开发者工具 一般来说查看源代码和使用开发者工具是比较实用的可能用的机会并不多但是在判断一些问题的时候其实是很有用的。通过查看源代码或者使用开发者工具可以大致了解这些网站里面的一些元素或者加载的脚本或者是规则对于判断兼容性问题有一定的帮助也可以用来准确捕捉页面元素。 7、几个主要的浏览器官网以及版本下载 1Internet Explorer 官网 http://windows.microsoft.com/zh-CN/internet-explorer/products/ie/home IE7下载 http://www.microsoft.com/downloads/zh-cn/details.aspx?displaylangzh-cnFamilyID9ae91ebe-3385-447c-8a30-081805b2f90b IE8下载 http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8 IE9下载 http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-9/worldwide-languages 2Mozilla Firefox 官网 http://firefox.com.cn/ 7.x Release http://releases.mozilla.org/pub/mozilla.org/firefox/releases/latest/win32/zh-CN/ 8.x Candidates http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/8.0b1-candidates/build1/win32/zh-CN/ 9.x Aurora http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/ 10.x Nightly http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/ 3Apple Safari 官网 http://www.apple.com.cn/safari/ 下载 http://www.apple.com.cn/safari/download/ 4Chromium 官网 http://www.chromium.org/ 下载 http://build.chromium.org/f/chromium/snapshots/Win_Webkit_Latest/ 5Google Chrome 官网 http://www.google.com/chrome?hlzh-cn Stable在线安装包 http://www.google.com/chrome/eula.html?hlzh-cn Beta在线安装包 http://www.google.com/chrome/eula.html?hlzh-CNextrabetachannel Dev在线安装包 http://www.google.com/chrome/eula.html?hlzh-CNextradevchannel Canary在线安装包 http://www.google.com/chrome/eula.html?hlzh-CNextracanarychannel Stable离线安装包 http://www.google.com/chrome/eula.html?hlzh-CNstandalone1 Beta离线安装包 http://www.google.com/chrome/eula.html?hlzh-CNstandalone1extrabetachannel Dev离线安装包 http://www.google.com/chrome/eula.html?hlzh-CNstandalone1extradevchannel Canary离线安装包 http://www.google.com/chrome/eula.html?hlzh-CNstandalone1extracanarychannel 6Opera 官网 http://www.opera.com/ 正式版 http://www.opera.com/download/ 测试版 http://snapshot.opera.com/windows/latest ----------------- 隔 ---------------- 二、浏览器渲染原理 Web页面运行在各种各样的浏览器当中浏览器载入、渲染页面的速度直接影响着用户体验简单地说页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。 先来大致了解一下浏览器都是怎么干活的 1. 用户输入网址假设是个html页面并且是第一次访问浏览器向服务器发出请求服务器返回html文件 2. 浏览器开始载入html代码发现head标签内有一个link标签引用外部CSS文件 3. 浏览器又发出CSS文件的请求服务器返回这个CSS文件 4. 浏览器继续载入html中body部分的代码并且CSS文件已经拿到手了可以开始渲染页面了 5. 浏览器在代码中发现一个img标签引用了一张图片向服务器发出请求。此时浏览器不会等到图片下载完而是继续渲染后面的代码 6. 服务器返回图片文件由于图片占用了一定面积影响了后面段落的排布因此浏览器需要回过头来重新渲染这部分代码 7. 浏览器发现了一个包含一行Javascript代码的script标签赶快运行它 8. Javascript脚本执行了这条语句它命令浏览器隐藏掉代码中的某个style.display”none”。杯具啊突然就少了这么一个元素浏览器不得不重新渲染这部分代码 9. 终于等到了/html的到来浏览器泪流满面…… 10. 等等还没完用户点了一下界面中的“换肤”按钮Javascript让浏览器换了一下link标签的CSS路径 11. 浏览器召集了在座的各位 spanulli们“大伙儿收拾收拾行李咱得重新来过……”浏览器向服务器请求了新的CSS文件重新渲染页面。 浏览器每天就这么来来回回跑着要知道不同的人写出来的html和css代码质量参差不齐说不定哪天跑着跑着就挂掉了。 好在这个世界还有这么一群人——页面重构工程师平时挺不起眼也就帮视觉设计师们切切图啊改改字其实背地里还是干了不少实事的。 说到页面为什么会慢那是因为浏览器要花时间、花精力去渲染尤其是当它发现某个部分发生了点变化影响了布局需要倒回去重新渲染内行称这个回退的过程叫reflow。 reflow几乎是无法避免的。现在界面上流行的一些效果比如树状目录的折叠、展开实质上是元素的显示与隐藏等都将引起浏览器的 reflow。 鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化都会引起它内部、周围甚至整个页面的重新渲染。 通常我们都无法预估浏览器到底会reflow哪一部分的代码它们都彼此相互影响着。 reflow问题是可以优化的我们可以尽量减少不必要的reflow。 比如开头的例子中的img图片载入问题这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。 这样浏览器就知道了图片的占位面积在载入图片前就预留好了位置。 另外有个和reflow看上去差不多的术语repaint中文叫重绘。 如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性将只会引起浏览器repaint。 repaint的速度明显快于 reflow在IE下需要换一下说法reflow要比repaint 更缓慢。 三、从浏览器的渲染原理讲CSS性能 平时我们几乎每天都在和浏览器打交道写出来的页面很有可能在不同的浏览器下显示的不一样。苦逼的前端攻城师们为了兼容各个浏览器而不断地去测试和调试还在脑子中记下各种遇到的BUG及解决方案而我们好像并没有去主动地关注和了解下浏览器的工作原理。 如果我们对此做一点了解我想在项目过程中就可以根据它有效的避免一些问题以及对页面性能做出相应的改进。 今天我们主要根据浏览器的渲染原理对CSS的书写性能做一点改进当然还有JS本篇文章暂不考虑后面的文章会做介绍下面让我们一起来揭开浏览器的渲染原理这一神秘的面纱吧 最终决定浏览器表现出来的页面效果的差异是渲染引擎 Rendering Engine也叫做排版引擎也就是我们通常所说的“浏览器内核”负责解析网页语法如HTML、JavaScript并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样那么就很有可能是不同的浏览器内核导致的。 我们来看一下加载页面时浏览器的具体工作流程图一 idiframe_0.6653571213866947 srcdata:text/html;charsetutf8,%3Cimg%20id%22img%22%20src%22http://www.smallni.com/wp-content/uploads/2011/09/0_1315384739kRCC.png?_4481092%22%20style%22border:none;max-width:1024px%22%3E%3Cscript%3Ewindow.onload%20%20function%20()%20%7Bvar%20img%20%20document.getElementById(img);%20window.parent.postMessage(%7BiframeId:iframe_0.6653571213866947,width:img.width,height:img.height%7D,%20http://www.cnblogs.com);%7D%3C/script%3E styleborder: none; width: 600px; height: 66px; frameborder0 scrollingno 图一 1、解析HTML以重建DOM树Parsing HTML to construct the DOM tree 渲染引擎开始解析HTML文档转换树中的标签到DOM节点它被称为“内容树”。 2、构建渲染树Render tree construction解析CSS包括外部CSS文件和样式元素根据CSS选择器计算出节点的样式创建另一个树 —- 渲染树。 3、布局渲染树Layout of the render tree: 从根节点递归调用计算每一个元素的大小、位置等给每个节点所应该出现在屏幕上的精确坐标。 4、绘制渲染树Painting the render tree : 遍历渲染树每个节点将使用UI后端层来绘制。 主要的流程就是构建一个dom树页面要显示的各元素都会创建到这个dom树当中每当一个新元素加入到这个dom树当中浏览器便会通过css引擎查遍css样式表找到符合该元素的样式规则应用到这个元素上。 注意了css引擎查找样式表对每条规则都按从右到左的顺序去匹配。 看如下规则 1 #nav li {} 看起来很快实际上很慢尽管这让人有点费解#_#。 我们中的大多数人尤其是那些从左到右阅读的人可能猜想浏览器也是执行从左到右匹配规则的因此会推测这条规则的开销并不高。 在脑海中我们想象浏览器会像这样工作找到唯一的ID为nav的元素然后把这个样式应用到直系子元素的li元素上。 我们知道有一个ID为nav的元素并且它只有几个Li子元素所以这个CSS选择符应该相当高效。 事实上CSS选择符是从右到左进行匹配的。了解这方面的知识后我们知道这个之前看似高效地规则实际开销相当高浏览器必须遍历页面上每个li元素并确定其父元素的id是否为nav。 1 *{} 额这种方法我刚写CSS的也写过殊不知这种效率是差到极点的做法因为*通配符将匹配所有元素所以浏览器必须去遍历每一个元素这样的计算次数可能是上万次 1 ul#nav{} ul.nav{} 在页面中一个指定的ID只能对应一个元素所以没有必要添加额外的限定符而且这会使它更低效。同时也不要用具体的标签限定类选择符而是要根据实际的情况对类名进行扩展。例如把ul.nav改成.main_nav更好。 1 ul li li li .nav_item{} 对于这样的选择器之前也写过最后自己也数不过来有多少后代选择器了何不用一个类来关联最后的标签元素如.extra_navitem这样只需要匹配class为extra_navitem的元素效率明显提升了 对此在CSS书写过程中总结出如下性能提升的方案 避免使用通配规则 如 *{} 计算次数惊人只对需要用到的元素进行选择尽量少的去对标签进行选择而是用class 如#nav li{},可以为li加上nav_item的类名如下选择.nav_item{}不要去用标签限定ID或者类选择符 如ul#nav,应该简化为#nav尽量少的去使用后代选择器降低选择器的权重值 后代选择器的开销是最高的尽量将选择器的深度降到最低最高不要超过三层更多的使用类来关联每一个标签元素考虑继承 了解哪些属性是可以通过继承而来的然后避免对这些属性重复指定规则 选用高效的选择符可以减少页面的渲染时间从而有效的提升用户体验页面越快用户当然越喜欢^_^,你可以看一下CSS selectors Test这个实验的重点是评估复杂选择符和简单选择符的开销。 也许当你想让渲染速度最高效时你可能会给每个独立的标签配置一个ID然后用这些ID写样式。那的确会超级快也超级荒唐这样的结果是语义极差后期的维护难到了极点。 但说到底CSS性能这东西对于小的项目来讲可能真的是微乎其微的东西提升可能也不是很明显但对于大型的项目肯定是有帮助的。而且一个好的CSS书写习惯和方式能够帮助我们更加严谨的要求自己。 --------------------------- 原文 -----------------------------
