-
用户输入:
用户在地址栏输入关键字并回车,会先判断关键字格式是搜索内容还是url,如果是搜索内容,则会使用默认的搜索引擎合成带关键字的url。如果是url,会根据规则合成完整的带协议名的url。然后回判断当前页面是否有beforeunload事件,如果有则会先执行,可以用此方法可以拦截浏览器后续动作。 -
请求过程:
浏览器主进程通知网络进程启动请求过程。先查找本地是否有缓存,有的话直接返回给浏览器进程,没有的话会进入网络请求过程,DNS解析,建立TCP连接,发起http请求。http响应后,如果状态码是301或302,则浏览器会从响应头里取出Location字段并重新根据该字段的值来进行导航。
根据响应头中的content-type的值来进行不同的处理,比如application/octet-stream,会被浏览器当做文件下载,text/html会被认为为html文档......
-
准备渲染进程
一般情况下,每个标签页使用单独的渲染进程;
如果从A页打开B页,A和B属于同一站点(协议名和根域名相同),B页会复用A页的渲染进程。 -
提交文档
浏览器主进程将网络进程接收到的html数据提交给渲染进程。 -
渲染阶段
构建dom树,html解析器将html文本转换为dom树。样式计算
渲染引擎将css文本转换为styleSheets数据结构。
转换样式表中的属性值,使其标准化。
计算dom树中每个节点的样式。布局阶段
创建布局树(不会创建不可见的dom节点)
创建图层(每个节点直接或间接从属一个层)
图片绘制(生成绘制列表)
栅格化操作(主线程把绘制列表commit给合成线程,使用GPU加速)
合成和显示(合成线程通知主进程,将页面内容绘制到内存中,再将内容显示在屏幕上)
性能问题方面
制作动画时,使用css的transform属性可以避开重排和重绘阶段,直接在非主线程执行合成动画操作,可以节约性能