前端页面渲染机制-笔记

tuantuan 发布于2019-08-02 16:12 / 2566人阅读

摘要：前端页面渲染机制笔记浏览器基础结构用户界面用户所看到及与之交互的功能组件，如地址栏返回前进按钮浏览器引擎用户界面和呈现引擎之间传递指令渲染引擎呈现引擎负责解析用户请求的内容网络负责处理网络相关的事物后端负责绘制提示框等浏览器组件，底层使用

前端页面渲染机制-笔记 浏览器基础结构

1.用户界面（user interface）：用户所看到及与之交互的功能组件，如地址栏、返回、前进按钮

2.浏览器引擎（browser engine）：用户界面和呈现引擎之间传递指令

3.渲染引擎（呈现引擎）（rendering engine）：负责解析用户请求的内容（HTML,CSS,XML）

4.网络（networking）：负责处理网络相关的事物（HTTP）

5.UI后端（UI backend）：负责绘制提示框等浏览器组件，底层使用的是操作系统的用户接口

6.JavaScript解释器（JavaScript interpreter）：负责解析和执行JavaScript代码

7.数据存储（Data storage）：负责持久存储如cookie和缓存等应用数据

渲染引擎及关键渲染路径

通过网络模块加载到HTML文件后渲染引擎渲染流程如下（关键渲染路径）

1.构建DOM树（DOM tree）:从上到下解析HTML文档生成DOM节点树

2.构建CSSOM树（CSS Object Model）：加载解析样式生成CSSOM树

3.执行JavaScript：加载执行JavaScript代码

4.构建渲染树（render tree）：根据DOM树和CSSOM树，生成渲染树
渲染树：按顺序展示在屏幕上的一系列矩形这些矩形带有字体，颜色和尺寸等视觉属性

5.布局（layout）：根据渲染树将节点布局在屏幕的正确位置

6.绘制（painting）：遍历渲染树绘制所有节点，为每个节点适用对应的样式（UI后端模块完成）

GPU云服务器云服务器页面渲染测速页面前端前端页面前端页面技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54856.html

前端页面渲染机制-笔记

摘要：前端页面渲染机制笔记浏览器基础结构用户界面用户所看到及与之交互的功能组件，如地址栏返回前进按钮浏览器引擎用户界面和呈现引擎之间传递指令渲染引擎呈现引擎负责解析用户请求的内容网络负责处理网络相关的事物后端负责绘制提示框等浏览器组件，底层使用前端页面渲染机制-笔记浏览器基础结构 1.用户界面（user interface）：用户所看到及与之交互的功能组件，如地址栏、返回、前进按钮 2...

nanchen2251 2019-08-29 18:33 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
重学前端学习笔记（二十四）--HTML里的链接元素

摘要：二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似，不同的是，它不是文本型的链接，而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语...

April 2019-08-26 13:56 评论0 收藏0
重学前端学习笔记（二十四）--HTML里的链接元素

摘要：二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似，不同的是，它不是文本型的链接，而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语...

CastlePeaK 2019-08-30 11:01 评论0 收藏0