【web】【性能优化】浏览器加载资源和渲染流程

举报
huahua.Dr 发表于 2023/11/10 19:49:19 2023/11/10
【摘要】 一、基本流程图浏览器首先使用HTTP协议或者HTTPS协议,向服务端请求页面;把请求回来的HTML代码经过解析,构建成DOM树;计算DOM树上的CSS属性;最后根据CSS属性对元素逐个进行渲染,得到内存中的位图;一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;合成之后,再绘制到界面上。1.1 html解析过程(1)词token:指解析html页面中最小词法单位(2)DOM:文档...

一、基本流程图

  1. 浏览器首先使用HTTP协议或者HTTPS协议,向服务端请求页面;
  2. 把请求回来的HTML代码经过解析,构建成DOM树;
  3. 计算DOM树上的CSS属性;
  4. 最后根据CSS属性对元素逐个进行渲染,得到内存中的位图;
  5. 一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;
  6. 合成之后,再绘制到界面上。

 html解析过程


(1)词token:指解析html页面中最小词法单位
(2)DOM:文档对象模型(DOM)是一个网络文档的编程接口。 它代表页面,以便程序可以改变文档的结构、风格和内容。 DOM 将文档表示为节点和对象;这样,编程语言就可以与页面交互。 网页是一个既可以在浏览器窗口中显示,也可以作为HTML 源代码的文档。

二、详细时序图

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。