Web性能
web系统架构及页面渲染流程
web系统通常包含客户端(浏览器)和服务端。
在Web页面展示过程中,通常经历以下几个步骤:
-
请求并下载页面资源:用户在浏览器地址栏中输入网址或点击链接,浏览器向服务器发送请求,请求页面的HTML、CSS、JavaScript、图片等静态资源。服务器接收到请求后,会将所需的资源文件发送给浏览器,浏览器开始下载资源文件。
-
解析HTML:浏览器收到HTML文件后,开始解析HTML代码,构建DOM树(文档对象模型)。
-
加载CSS和JavaScript:浏览器解析HTML时,会遇到链接的CSS和JavaScript文件,在解析过程中加载并执行这些文件,同时构建CSSOM树。
-
执行JavaScript代码,通过后台接口向服务端请求动态数据。
-
渲染页面:浏览器根据DOM树和CSSOM树构建渲染树,确定页面元素的布局,计算每个元素的位置和大小,最终将页面内容显示在用户界面上。
其中,除了4以外,其他的步骤都只在页面初始化时执行一次,缓存在本地。在后续的页面更新、重复请求过程中不再消耗资源。
影响各步骤性能的因素:
-
请求并下载页面资源: