浏览器的工作原理
一. 浏览器的组成
1. 用户界面:包括地址栏,后退/前进按钮,书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
2. 浏览器引擎:用来查询及操作渲染引擎的接口
3. 渲染引擎(浏览器内核): 用来显示请求的内容,例如,如果请求内容为html,他负责解析html和css,并将解析后的结果显示出来
4. 网络: 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同的平台上工作
5. UI后端: 用来绘制类似组合选择框及对话框等基本组件,具有布特东与某个平台的通用接口,底层使用操作系统的用户接口
6. js解析器 : 用来解释执行js代码
7 数据存储:属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,html5定义了storage技术,这是一种轻量级完整的客户单存储技术
二.主流的渲染引擎
浏览器的渲染引擎也叫排版引擎，或者是浏览器内核
主流的 渲染引擎 有
-
Chrome浏览器: Blink引擎（WebKit的一个分支）。
-
Safari浏览器: WebKit引擎，windows版本2008年3月18日推出正式版，但苹果已于2012年7月25日停止开发Windows版的Safari。
-
FireFox浏览器: Gecko引擎。
-
Opera浏览器: Blink引擎(早期版使用Presto引擎）。
-
Internet Explorer浏览器: Trident引擎 。
-
Microsoft Edge浏览器: EdgeHTML引擎（Trident的一个分支）。
三.渲染引擎的工作原理
渲染引擎解析的基本流程:
1. 解析HTML构建DOM树,
2.解析CSS生成CSSOM树
3.将DOM树和CSSOM规则树合并在一起,生成渲染树
4.遍历渲染树,开始布局,计算每一个节点的位置个大小信息
5.将渲染树每个节点绘制到屏幕
四.性能优化:重绘和回流
回流: 当render tree 中的一部分(或全部) 因为元素的规模尺寸,布局,隐藏等改变而需要重新构建
重绘:当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观风格,而不会影响布局的,比如background-color
1.每个页面至少需要一次回流和重绘
2.回流必将引起重绘
回流什么时候发生?
1.添加或者删除可见的DOM元素
2.元素位置改变
3.元素尺寸改变 -- 边距,填充,边框,宽度和高度
4. 内容改变 -- 比如文本改变或者图片大小改变引起的计算值宽度和高度改变
5.页面渲染初始化
6.浏览器窗口尺寸改变 --- resize事件发生
如何性能优化?尽量减少重绘和回流的次数?
- 直接使用classname修改样式,少用style设置样式
- 让要操作的元素进行'离线处理',处理之后一起更新(先display:none;更改结束,再显示)
- 将需要多次重排的元素,position属性设置为absolute或者fixed,这样此元素就脱离了文档流,他的变化不会影响到其他元素为动画的html元素,
- 完成功能的前提,在完成功能的情况下想着优化代码
五.浏览器与服务器的交互流程
- 浏览器通过地址栏发送请求
- 通过DNS服务器解析,得到域名对用的ip地址
- 根据ip地址,访问服务器具体的某个文件
- 服务器响应这个具体的文件
- 浏览器获取响应,进行显示
