Web 前端网页渲染优化研究

2020-08-21 01:01肖建芳

现代计算机 2020年20期

肖建芳

（汕头职业技术学院计算机系，汕头515041）

0 引言

互联网+时代，各行各业都拥抱互联网，特别是在移动端快速发展的时代，网页不仅是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web App 和Hybrid App 的开发队伍中，性能这一问题又再一次成为程序员们重点关注的问题。在用户就是上帝、速度为王的时代，用户的选择直接决定企业的生存。尤其是智能手机当道的今天，首屏显示时间决定了用户是否会继续选择你的网站和服务。因此，在网站生命周期过程中，不断对网站性能进行优化非常必要。

S 养生馆连锁店网站前端的主要作用是展示连锁店的企业文化、产品和服务，查看各地连锁店分布，以及提供更好的客户服务，同时用户也可以直接在网站上订购部分产品和服务，前端设计在该网站中占据着非常重要的地位。

1 网页渲染的基本过程[1]

浏览器的主要作用是将用户输入的网站“URL”转变成可视化的图像。这其中包含两个过程，一是网页加载过程，从“URL”到构建DOM（Document Object Model，文档对象模型）树；二是网页渲染过程，从DOM树到生成可视化图像，即我们看到的页面效果。网页渲染的过程其实就是将URL 对应的各种资源，通过浏览器渲染引擎的解析，输出可视化的图像。根据数据的流向，浏览器的渲染过程可以分成三个阶段（以WebKit 内核浏览器为例）：从网页的URL 到构建完DOM 树；从DOM 树到构建完WebKit 的绘图上下文；从绘图上下文到生成最终图像。

浏览器渲染引擎主要包括HTML 解释器、CSS 解释器、布局和JavaScript（以下简称JS）解释器。其中，HTML 解释器主要作用是将HTML 文本解释成DOM树；CSS 解释器作用是为DOM 中各元素对象计算出样式信息；布局则是指在DOM 树创建之后形成一个内部表示模型，这个模型将HTML 元素与CSS 样式结合起来，计算出元素的具体大小和位置等布局信息；JS 解释器能够解释JS 代码并通过DOM 接口和CSSOM 接口来修改网页内容和样式信息，从而改变渲染的结果。随着JS 解释器越来越重要，JS 解释器逐渐脱离出来成为独立的JS 引擎。

2 构建Web前端页面响应时间模型

根据浏览器渲染过程，构建Web 前端页面响应时间模型如下：

其中T 表示Web 前端页面响应时间，Tweb表示网络传输时间，TDOM表示构建DOM 树所需的时间，Tc表示从DOM 树到构建完WebKit 的绘图上下文时间，Tp表示从绘图上下文到生成最终图像的时间。

由公式可知，Tweb为网络传输时间，这个主要由网络带宽、数据传输量、用户及网站服务器所使用网络的软硬件环境决定，开发者无法改变。因此要缩短Web前端页面响应时间，进行前端页面渲染优化，开发者只能针对TDOM、Tc和Tp三个时间进行性能优化。

3 Web前端网页渲染优化策略[2-4]

以S 养生馆连锁店网站为例，顾客就是上帝，网页打开的速度直接影响到顾客的网络体验，Web 开发必须从用户使用的角度出发。为了给用户更好的体验，通过对Web 前端页面响应时间模型进行分析，明确了在网页前端方面通过缩短TDOM、Tc和Tp三个时间可以优化网页加快网页的打开速度，确定从HTML 代码、CSS 样式、JavaScript 脚本和框架应用4 个方面给出优化策略。

3.1 HTML代码优化

首先，能使用静态页面的坚决不用动态页面。例如S 养生馆连锁店网站部分页面就具备内容较多、有较多数据库访问、会被频繁访问但较少更新的特点，将其中包括首页在内的部分页面设计成静态网页，然后定期更新，这可以减少每次访问时浏览器渲染的时间。

其次，设计时尽量使用HTML5 新增的语义化标签，例如

、