【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）