【web】【性能优化】浏览器加载资源和渲染流程
【摘要】 一、基本流程图浏览器首先使用HTTP协议或者HTTPS协议,向服务端请求页面;把请求回来的HTML代码经过解析,构建成DOM树;计算DOM树上的CSS属性;最后根据CSS属性对元素逐个进行渲染,得到内存中的位图;一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;合成之后,再绘制到界面上。1.1 html解析过程(1)词token:指解析html页面中最小词法单位(2)DOM:文档...
一、基本流程图
- 浏览器首先使用HTTP协议或者HTTPS协议,向服务端请求页面;
- 把请求回来的HTML代码经过解析,构建成DOM树;
- 计算DOM树上的CSS属性;
- 最后根据CSS属性对元素逐个进行渲染,得到内存中的位图;
- 一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;
- 合成之后,再绘制到界面上。
html解析过程
(1)词token:指解析html页面中最小词法单位
(2)DOM:文档对象模型(DOM)是一个网络文档的编程接口。 它代表页面,以便程序可以改变文档的结构、风格和内容。 DOM 将文档表示为节点和对象;这样,编程语言就可以与页面交互。 网页是一个既可以在浏览器窗口中显示,也可以作为HTML 源代码的文档。
二、详细时序图
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)