收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2597|回复: 0

初探浏览器内核

[复制链接]
发表于 2010-10-19 15:49:53 | 显示全部楼层 |阅读模式
原文地址:http://cnwander.com/blog/?p=16

迫切想了解清楚浏览器一些内部机制,从而写出更高性能、更佳的用户体验的页面。
但无奈学识浅薄,浏览器内核更是所涉甚浅,只能凭借自己的测试和相对较少的资料进行摸索。
所探索到的一些东西,跟大家分享,作为参考。
不对之处,敬请指点,欢迎大家一起讨论。

一、还原页面渲染流程。

  你应该了解真相,真相会让你自由。 -《圣经》

  不知道大家是否玩桌球,常玩桌球的童鞋肯定知道,打好桌球,母球的控制最重要,当然要控制好它,这需要日积月累的练习,但是,如果你深入地分析过,你击球的位置和角度,对母球旋转,碰撞后路线变化的影响,了解了整个物理过程后,这将会让你事半功倍。

  废了这么多话,其实还只说了文章第一句,你应该了解真相(轻点砸,嘿嘿)。每天与浏览器打交道的我们,如果对浏览器内核的实现了如指掌,那无疑,你将可以做出最优秀的页面。有童鞋可能要喷我了,能达到这水平我直接去开发浏览器了。是的,我们不可能了解到它的每一个细节,但是我们可 以大体地了解它,把握她的性情,摸清他的脾气。

  目前,除了市场占有率最高性能最糟糕的Trident(IE内核),性能最棒市场占有最低(相对)的 Webkit(Chrome&Safari),常见的还有Gecko(FireFox)、Presto(Opera)。我们没这么多时间和精力, 也没必要逐个了解,因为它们干的都是同一件事,实现的手法大体一致。

  下图还原了从请求页面到渲染完毕整个浏览器大体工作过程,可能有很多陌生的名字,Tokenizer、Parser、DOM Builder,没关系,我们只需要知道它是其中一个功能模块,我们只需要了解它干了什么。

名词解释:
  JS宿主环境 - 如果JS运行在浏览器中,那宿主环境指浏览器相关的应用环境;如果运行在WSH(Windows Scripting Host)中,则是宿主为WScript。



如上图,从我们在地址栏输入url开始,浏览器的工作流程为:

1、DNS查找。通过DNS服务器,把你输入的域名转换成为网络可以识别的ip地址。
2、浏览器发起一个到指定端口的HTTP请求。
3、服务器响应后,开始资源加载。
4、解析获取到的文档流,并进行分析。
5、构建DOM模型。之后的大部分工作都基本围绕着DOM Tree进行。
6、合并已经读取到的样式,进行语法分析,合并,然后渲染引擎开始渲染。
7、如果期间碰到Script标签,或者由事件触发的,需要执行Javascript片断,渲染暂停,调用JS引擎分析并执行JS代码,执行结束,返回宿主环境数据。
8、OVER.

PS:上图中演示流程是一个反复循环的过程,浏览器在加载完一个代码片断之后即可以开始构建并渲染。

PS2:渲染与Javascript的执行也是一个反复交递的过程。


二、Javascript执行过程与运行期间环境。

  常见JS引擎:SpiderMonkey(Firefox)、JavascriptCore(Safari)、V8(Chrome)、Jscript(IE)。

  先引用《Javascript语言精髓》上的一句话,可能更能加深理解。
”Javascript是一门设计得相对’原始’的语言……JS是一种通用的、跨平台和跨环境的语言,并不特指某种特定的宿主环境或者运行环境”



注:

本文参考文献:
周爱民《JAVASCRIPT语言精髓与编程实践》
李嘉昱 《Webkit 内核探究》

如蒙转载,请注明出处 cnwander.com

[[i] 本帖最后由 CNwander 于 2010-10-19 16:08 编辑 ]
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-27 23:07 , Processed in 0.093515 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表