2020-04-16 从输入URL到页面展示,中间发生了什么?

地址栏输入URL

检查URL

浏览器的浏览器进程检查URL,组装协议,构成完整的URL,通过进程间通信IPC把URL请求发送给网络进程

发起http请求

网络进程接收到URL发起http请求
网络进程首先查找本地是否存在缓存
如果没有缓存就进行网络请求
网络请求首先进行DNS解析,DNS查过过程也存在缓存的问题,最终拿到目标服务器的ip
网络进程通过ip地址和服务器建立tcp链接
网络进程构建请求行,请求头,请求体,发起网络请求

拿到响应后

浏览器根据相应的状态吗判断是否进行重定向
浏览器根据相应的content-type决定如何显示相应的内容
如果是text/html,浏览器为每个页面分配一个渲染进程,如果属于same-site(根域名和协议完全一致就属于same-site),就在同一渲染进程进行渲染。
渲染进程准备好之后浏览器进程发出提交文档指令,这里的文档指的是响应体数据,渲染进程收到指令后建立和网络进程的数据管道
等文档数据传输完成后,渲染进程返回确认提交的消息给浏览器进程
浏览器进程收到确认提交消息后,更新浏览器的界面,包括前进后退的历史状态,安全状态,地址栏的URL,和正真的web页面

文档提交后渲染进程开始页面解析和子资源加载

构建dom树

渲染进程根据html构建存在内存中的dom树,document就是

样式计算

将link的外部资源,style标签内css,内联样式合并为浏览器可以理解的结构styleSheets
转换样式表中的属性值,尺寸单位统一为px,颜色为rgb等
根据css的继承规则和层叠规则计算dom树种每个节点的具体样式,保存在ComputedStyle中

布局阶段

渲染引擎创建布局树,将不可见的元素忽略掉
计算每个节点的位置,计算后重新写回布局树(这是布局阶段一个不合理的地方,因为在布局阶段并没有清晰地将输入内容和输出内容区分开来,针对这个问题,Chrome 团队正在重构布局代码,下一代布局系统叫 LayoutNG,试图更清晰地分离输入和输出,从而让新设计的布局算法更加简单),对布局树进行分层,形成分层树

合成阶段

成线程会判断是否在视口附近,命令GPU将视口附进的图块转换为位图,GPU中的光栅化线程池将所有的图块光栅化(就是将图块转化成位图),保存在GPU的内存中,光栅化完成后合成线程将发送绘制命令DrawQuad给浏览器进程,浏览器进程根据DrawQuad消息生成页面,显示到显示器上。

页面完成

页面生成完成后,渲染进程发送消息给浏览器进程,收到后会停止标签栏上图标的加载动画
over

优化

渲染进程的主线程按照顺序首先构建dom树,样式计算,布局,绘制
如果发生重排(比如改变元素大小等)会直接从样式计算开始从新执行,如果发生重绘(例如改变颜色)会直接从绘制阶段开始从新执行,所以频繁的占用渲染进程的主进程,就会产生较大的开销。所以在性能优化中,减少重排和重绘的属性,渲染引擎将跳过布局和绘制,只执行非主线程的合成,例如:CSS的transform就避开重排和重绘,直接在非主线程上执行合成操作,没有占用主线程资源,所以效率最高

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343