现代浏览器历史

• 1990年：蒂姆伯纳斯李开发了第一个网页浏览器WorldWideWeb，后来改名为Nexus。WorldWideWeb浏览器支持早期的HTMl标记语言，很简单，只支持文本、简单的样式表、电影、声音、图片等资源的显示。
• 1993年：马克安德森领导的团队开发了第一个具有影响力的浏览器Mosaic，这就是后来有名的Netscape Navigator。
• 1995年：微软推出了Internet Explorer，内置在windows系统中，和Netscape展开了第一次浏览器大战。
• 1998年：Netscape公司因为微软的商业策略市场份额下降，随后开放了Netscape Navigator源代码，成立了Mozilla基金会，之后开启了第二次浏览器大战。同年1998年11月24日，美国在线（AOL）宣布将以42亿美元的免税股票交换方式收购Netscape Communications。
• 2003年：苹果公司发布了Safari浏览器，时代华纳（前美国在线时代华纳）解散了Netscape。
• 2005年：苹果公司开源了浏览器中的核心代码，基于此发起了一个新的开源项目Webkit
• 2008年：谷歌以WebKit内核创建了一个新的浏览器项目Chromium，以此发布了Chrome浏览器。

1. 现代浏览器的特征

• 网络
• 资源管理
• 网页浏览
• 多页面管理
• 插件和拓展
• 账户和同步
• 安全机制
• 开发者工具

2. 现代浏览器的结构

• 用户界面（User Interface）
• 浏览器引擎（Browser Engine）
• 渲染引擎（Rendering Engine）
• 网络（Networking）
• XML解析器（XML Parser）
• 显示后端（Display Backend）
• 数据持久层（Data Persistence）
  

1. 常见的渲染引擎

   渲染引擎	浏览器
   Trident	IE、Edge(旧)
   Gecko	Firefox
   WebKit	Safari
   Blink(WebKit fork)	Chromium/Chrome/Opera/Edge

渲染引擎结构和工作流程

总流程

结合这张渲染引擎的过程，可以得知

• 通过HTML/JavaScript/CSS等文件作为输入–>
• 解析HTML转换成DOM Tree，把HTML的标签啥的转成DOM树的节点–>
• 根据CSS的渲染规则和DOM树关联起来生成渲染树Render Tree–>
• 根据渲染树生成布局树Layout of Render Tree–>
• 最后绘制渲染树–>
• 展示页面

  每步详细流程

  
  三大件的代码进入浏览器之后，会通过HTML解析器、CSS解析器、JavaScript解释器，最终生成最后的渲染树给到Layout去进行布局树的构建，最后通过最终的Tree进行Painting绘制得到最后的页面。
  其中因为Javascript可以操作CSS和DOM元素，所以JavaScript可以打断整个流程，所以我们最好是把JavaScript放在整个页面的最后来执行。
  当其中的DOM发生变化后，整个RenderTree和Layout of Render Tree都要重新生成，然后重新绘制。