在浏览器地址栏输入网址---看到网页的过程
浏览器基础结构：
- 用户界面（用户所看到及与之交互的功能组件，如地址栏，返回，前进按钮等）
- 浏览器引擎（负责控制和管理下一级的渲染引擎）
- 渲染引擎（负责解析用户请求的内容，如html，xml）
- 网络（处理http请求）
- UI后端（负责绘制提示框等浏览器组件，底层使用的是操作系统的用户接口）
- javascript解释器（解析js代码）
- 数据存储（cookie、localStorage、sessionStorage缓存）
1,当用户访问页面时，浏览器需要获取用户请求内容，这个过程主要涉及浏览器网络模块：
用户在地址栏输入域名，如baidu.com，DNS（Domain Name System，域名解析系统）服务器根据输入的域名查找对应IP，然后向该IP地址发起请求；
2.浏览器获得并解析服务器的返回内容(HTTP response)；
3.浏览器加载HTML文件及文件内包含的外部引用文件及图片，多媒体等资源。
多进程
浏览器网络部分通常是有几个平行进程同时开启，但是也会有
限制，一般为2-6个。
渲染引擎所做的事是将请求内容展现给我们，默认支持HTML,XML和图片类型，对于其他诸如PDF等类型的内容则需要安装相应插件，但浏览器的展示工作流程基本是一样的。
关键渲染路径
1.构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
3.执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
4.构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
5.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
6.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；
渲染
渲染引擎同js一样都是单线程操作
解析文档顺序
浏览器按从上到下的顺序扫描解析文档；
脚本或许是由于通常会在JavaScript脚本中改变文档DOM结构，于是浏览器以同步方式解析，加载和执行脚本，浏览器在解析文档时，当解析到标签时，会解析其中的脚本（对于外链的JavaScript文件，需要先加载该文件内容，再进行解析），然后立即执行，这整个过程都会阻塞文档解析，直到脚本执行完才会继续解析文档。就是说由于脚本是同步加载和执行的，它会阻塞文档解析，这也解释了为什么现在通常建议将js脚本放在标签后面。现在HTML5提供defer和async两个属性支持延迟和异步加载JavaScript文件，如：
<script defer src="script.js">
样式不同于脚本，浏览器对样式的处理并不会阻塞文档解析，大概是因为样式表并不会改变DOM结构。
网友评论