浏览器工作原理
2019-03-11 本文已影响0人
简默丶XS
一次完整的请求过程：
一次完整的请求过程
本文主要探讨render部分，前端是如何渲染模板给用户显示的。
五种主流浏览器——IE、Firefox、Safari、Chrome及Opera
份额
各大浏览器解析
浏览器功能
浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。
浏览器的主要构成High Level Structure（高层结构）
- 用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
- 浏览器引擎－ 用来查询及操作渲染引擎的接口
- 渲染引擎－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来
- 网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
- UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口
- JS解释器－ 用来解释执行JS代码
- 数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术
浏览器基本组件
- Chrome为每个标签分配了各自的渲染引擎实例，是单独的进程
- 渲染引擎：Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎，它本来是为linux平台研发的，后来由Apple移植到Mac及Windows上。
渲染过程
- 当用户输入url，webkit调用资源加载器加载url对应的网页
- 加载器依赖网络模块建立连接，发送请求并接受答复
- webit接收到各种网页或者资源的数据，其中某些资源可能是同步或者异步的
- 网页被交给html解析器转变一系列的词语(Token)
- 解析器根据词语构建节点，形成DOM书
-
如果节点依赖其他资源，例如css img ，则调用资源加载器来加载他们，这些都是异步的，不会阻碍dom树的构建
在浏览器中分析
css阻塞
- 内部css是html解析器调用解析css的api解析的，这是同步的不会阻塞渲染过程
-
外部css样式会调用css样式表解析器，这会是异步的，会阻塞渲染过程（不会有闪屏问题：用户只看到dom结构而看不到样式）
css样式表解析器解析外部css样式表，阻碍了渲染过程
js阻塞
- 内部js和外部js都会阻塞页面的渲染
- 主流浏览器会有预解析处理，在执行js脚本时，其他线程会解析文档的其余部分，并找出加载需要通过网络加载的其他资源。
图层
图层不会影响到根节点
创建图层的条件
- 3D css属性
- video节点
- canvas节点
- css3动画节点
- css加速属性的元素（尽量给每个动画都加：will-change:transform，浏览器会帮你开图层）
- 有一个z-index较低且包含一个复合层的兄弟元素
打开浏览器图层
重绘（repaint）
- 重绘是一个元素外观的改变所触发的浏览器行为，例如改变outline，背景色等属性。浏览器会根据元素的新属性重新绘制使元素呈现出新的外观。重绘不会带来重排
- 需要注意的是，如果图层中某个元素需要重绘，那么整个图层都需要重绘
- 优化：重绘元素(css动画，gif图)需要开一个图层（translateZ(0)），不影响到其他元素
重排（reflow 回流）
- 渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称之为布局和重排。重排必定导致重绘
勾选此属性，当浏览发生重绘页面变绿
由重绘，重排想到的前端页面渲染优化方案：
- 元素的top，left操作尽量用css3的translate操作
- 使用opacity来替代visibility
- 不要使用table布局
- 将多次改变样式属性的操作合并成一次操作，放到一个class进行操作
- 复杂的操作，先将dom离线后（dioplay：none）再进行操作
- 利用文档碎片
7.动画实现，启动gpu加速
8.为动画元素新建图层，提高动画元素的z-index
主流程 The main flow
- 第一步，浏览器拿到html文件，先用标签转化为内容树中的dom节点，生成dom树，显示基本结构
- 第二步，解析外部CSS文件及style标签中的样式信息。生成另一棵树——render树，render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上（有时候刚打开网页时会看到没有样式的结构）注意：第2步可能和第1步同时进行
- 第三步，渲染引擎给每个矩形找坐标，布局，绘制
解析 Parsing－general
解析是渲染引擎中一个非常重要的过程。解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树，称为解析树或语法树。在解析之前会将文档先转换 Translation为解析书，再解析。解析是由解析器来做的，解析又分为语法解析和此法解析。解析是根据文法 Grammars规则来进行的
