浏览器基础 一
想学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的一些过程