浏览器是如何工作的

这其实是一篇读书笔记。

原文:http://taligarsiel.com/Projects/howbrowserswork1.htm

译文:http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

随便扯两句,云时代可能就是浏览器的时代不搞清楚浏览器,怎么在云时代混?

 

浏览器的常见元素

(1) 地址栏(2) 前进、后退按钮(3) 书签(4) 刷新(5) 到达主页的按钮

 

浏览器的主要构成:

chrome不同于其他浏览器的是,它的渲染引擎是多线程的,一个tab对应一个线程。

上面的这个图还是很清晰的,本来想自己弄个中文版的,发现还是原味的好点。

 

(1) 用户界面(2) 浏览器引擎(3) 渲染引擎(4) 网络(5) UI后端(6) JS解释器(7)数据存储

 

对于在地址栏输入一个URL,到浏览器呈现出来,自己的理解就是:首先在用户界面部分,输入URL,点击回车,网络部分发送请求,服务器响应,渲染引擎开始工作,解析HTML,解析CSS,JS解析器解析JS,如果有对话框等UI后台绘制它们,数据持久层存储COOKIE什么的。

 

渲染引擎

对于前端来说,这个比较重要,其实我还没了解清楚,从用户输入URL以后,浏览器的工作流程,但至少知道了渲染器的工作流程。

流程:解析HTML构建DOM树--->解析CSS构建渲染树--->布局渲染树(layout)--->绘制渲染树(painting)

(1) 构建DOM树,HTML的标签转化而来。

(2) 构建Render树,包含颜色和大小的矩形组成。

(3) 布局,确定每个节点在屏幕上的确切坐标

(4) 绘制,遍历render树,使用UI后端层绘制每个节点

这是一个渐进的过程,渲染引擎不会等到HTML解析完才开始构建渲染树,而是随着网络上返回的内容不断的去解析和展示内容。

  1. DOM树的构建:HTML的解析算法包括两部分(符号化)和(构建树)

    通过符号化的通过,解析器就识别了一个一个的dom节点,比如<body>、<div>、文本等,用这些dom节点来构建树,另外这些节点还会被放到堆栈中,是用来做html纠错处理(比如,没有闭合的标签等)用的。

    解析结束以后,浏览器将文档表示为可交互阶段,并开始解析处于延时模式中的脚本——这些脚本在文档解析后执行。文档状态将被设置为完成,同时触发一个load事件。

  2. 渲染树的构建:
    渲染树中每个节点用具有CSS盒模型的矩形区域表示。这里面的节点对应的是DOM树中的可视化节点,比如:display:none的节点就不在这棵树中了。
  3. 布局:
    渲染树中的每个节点是没有位置和大小的。这一步就是来计算节点的位置和大小,这一步就叫layout或者reflow。浏览器的一个优化措施是,采用了一个dirty bit系统,一个渲染对象发生了变化或是被添加了,就标记它及它的children为dirty,表示需要layout 。
  4. 绘制:
    最后就是绘制了,块元素的绘制步骤是:

    (1).     背景色

    (2).     背景图

    (3).     边框

    (4).     子节点

    (5).     outline(外边框)

 

 ----------------------------------------------------------------------------------------

后来仔细的在阅读了文章,跟同事一起对这篇文章进行了分享。

分享以后,才发现,其实了解浏览器的工作原理更重要的是对性能的控制。。

附上PPT,以便交流~

https://files.cnblogs.com/lilyimage/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86.pdf

posted @ 2012-03-15 19:09  hlily  阅读(777)  评论(1编辑  收藏  举报