浏览器基础(一)

想学node.js 看着阿里云上面有教程，索性做一下笔记。

浏览器工作原理

浏览器组成

浏览器可大致分为五个部分：人机交互（UI）、网络请求（Socket）、JavaScript引擎、渲染引擎、数据存储。

人机交互：用户登录，浏览器设置等界面
网络请求：浏览器主要使用HTTP和HTTPS协议
JavaScript引擎：解析执行JS代码
渲染引擎：渲染HTML和CSS
数据存储：(cookie、HTML5中的本地存储LocalStorage、SessionStorage)

大家提到浏览器，对不同的浏览器进行区分主要是依靠渲染引擎

渲染引擎

渲染引擎 又称 浏览器内核 也叫 排版引擎

      浏览器            |                   内核               
      chrome                        Blink（WebKit的一个分支）
      safari                              WebKit
      FireFox                              Gecko
      IE                                  Trident
      Edge                                EdgeHTML

一般渲染引擎的工作原理：
解析HTML构建DOM树--》构建“渲染树”--》对“渲染树”进行布局--》绘制“渲染树”

名词解释：
DOM是W3C组织推荐的处理可拓展标记语言的标准编程接口
渲染树  剔除了DOM树中不显示的标记
第三步的操作又叫做layout或者reflow

渲染树的生成

一般渲染引擎的工作原理如图所示：

一些具体的开源渲染引擎的工作原理：

WebKit引擎工作原理

Gecko引擎工作原理：

Layout和reflow

直观的视频：facebook页面渲染过程
补充：
点击 开发人员工具–》更多工具–》绘制（Rendering） 可以显示layout的一些过程