CN112163175A - 一种网站移动端速度优化方法 - Google Patents

Abstract

一种网站移动端速度优化方法，基于组件和区块来搭建的SaaS提供商平台服务器并在网站发布，1)计算出移动端首屏区域内的区块组件，在首次加载的时候，只需要展示出所计算出的区块和组件，并对其加载，在识别或计算完毕后，对不在首屏区域内的组件区块，进行懒加载，当滚动到不在首屏区域内的组件区块的位置时，再对其进行js，和css文件的加载；2)对其区块组件开发相应的移动端组件和区块，进行dom结构、js和css的进行精简，在保证展示效果的同时进行代码的“瘦身”；提取首屏区域内区块组件的必须的css样式，进行css样式的内联用于移动端展示。

Description

一种网站移动端速度优化方法

技术领域

本发明属于计算机数据处理的领域，具体涉及一种基于网站移动端速度优化解决方案。

背景技术

SaaS提供商(如本申请人的领动云营销平台)是一款基于Saas模式的云建站工具(SaaS提供商为企业搭建信息化所需要的所有网络基础设施及软件、硬件运作平台，并负责所有前期的实施、后期的维护等一系列服务，企业无需购买软硬件、建设机房、招聘IT人员，即可通过互联网使用信息系统)，SaaS平台上有很多积木组件和区块，客户可以通过一个或多个组件组合成网页的一行，或者以区块作为一行，客户页面由这些行组合成，这样客户就能够很轻松的通过拖拽组件和区块生成自己想要的页面。但是随着SaaS提供商业务的快速发展，页面内容越加丰富，组件和区块数量也越来越多，从而导致页面移动端的加载速度变缓，文件加载过多：

1)SaaS提供商的组件和区块都可以看成一个单独的小页面，都拥有相互独立的样式文件，dom元素和js代码，页面上的内容越多，相关的代码也越多，从而导致加载速度变缓。

2)移动端，所有的js文件和样式文件在一开始都是加载的，从而导致请求数过多，google页面速度测试，其中有一项检测项目就是页面中的加载资源数目，请求数过多，导致页面分数很低。

3)移动端的展示是pc端的代码通过，css的响应式方法，来适应移动端的，但是pc端的dom结构(DOM是网页中的用来表示文档中对象的标准模型,通过JavaScript可以对网页中的所有DOM对象进行操作)不太适合移动端的展示习惯，展示的效果不是很好。

4)通常的习惯是对css文件(css文件是指css代码放到一个单独的文件里，并以css扩展名命名如yangshi.css，这样就是css文件)用link标签进行引入，但是当页面内容较多的时候，虽进行了懒加载，只加载首屏区域的css，但是相对的样式文件也较大，用外部样式加载还是要一定的时间。

发明内容

本发明目的是，基于现有技术的上述情况，本发明目的是，需要提出一个移动端的优化方案，这种方案可以满足以下的需求：1)减少页面上的请求个数；2)提升页面的加载速度；3)移动端的区块展示更加适合移动端；4)google页面测速分数提升。

本发明技术方案是，一种网站移动端速度优化方法，基于组件和区块来搭建的SaaS提供商平台于服务器并在网站发布，用于服务于移动端，1)计算出移动端首屏区域内的区块和组件，这样在首次加载的时候，只需要展示出所计算出的区块和组件，并对其加载，在识别或计算完毕后，对不在首屏区域内的组件区块，进行懒加载，当滚动到不在首屏区域内的组件区块的位置时，再对其进行js，和css文件的加载；

2)当面对依赖太多、移动端展示效果较差的区块组件，对其区块组件开发相应的移动端组件和区块，进行dom结构、js和css的进行精简，在保证展示效果的同时进行代码的“瘦身”；

在此之上，提取首屏区域内区块组件的必须的css样式，进行css样式的内联(用于移动端展示)。从而提升了页面渲染的速度，进一步减少样式文件的加载，从而提升速度。

有益效果：通过上述方案的改进，我们满足以下的目标：页面首次请求数大幅度减少，加快了页面首次加载的速度，页面访问速度大大提升；提升了移动端页面的访问速度，用户体验更加良好。页面展示更加美观，针对某些移动端展示不尽如人意的区块组件，进行移动端改进，新的移动端版本更快更美，加速的同时，也让页面展示更好看。google测速大幅度提升：比原先的网站测速只有五六十分大幅度提升到90分左右，更加优秀的用户感官和体验，使产品更具竞争力。移动端支持单独更改样式，打破了pc端的结构限制，更加适合移动端的展示效果，移动端效果更佳。页面更加轻便，页面访问时节省了流量。

附图说明

图1：本发明页面保存时识别首屏区块组件流程；

图2：本发明页面渲染流程；

图3：本发明页面样式收集渲染流程。

具体实施方式

以下为上述方案具体实现：

(1)移动端首屏区域，区块组件识别(如图1)：

为实现此功能，有下述两种方案：

第一种：在页面发布后，往服务器的数据库中存储一条数据，用一个队列程序，取出该数据库中的数据，在服务器后台，用无界面浏览器的形式，计算出首屏区域内的区块和组件，存储在数据库中，在页面渲染时，对相关的区块和组件进行加载渲染。

第二种：在页面编辑时，提供一个按钮提示，可以点击按钮，在当前页面计算出相应的组件和区块。在离开页面，或者发布网站的时候，如未手动计算，自动计算出当前页面的组件区块。通过主动和被动的方式，把计算出的数据存储在数据库中，在页面渲染时，对相关的区块和组件进行加载渲染。

根据实际测试，采用了第二种方式。相较于第一种方式，第二种方式效率更高，其在客户端的前端页面进行计算，也减小了服务器的压力。

第二种方式是在页面后台的编辑页面，添加了一个立即优化的按钮，当页面保存时，该按钮上会添加上一个红点，用于提示用户去点击进行手动优化，当用户点击时，页面会弹出一个弹出层，提示用户正在进行移动端优化，在弹层下面所编辑的页面，会展示移动端的页面样式，计算出首屏区域内的组件和区块。如果用户没有点击立即优化的按钮，进行切换页面或者发布网站等等操作时，也会在页面跳转或者发布之前进行移动端首屏的计算。

(2)识别内容外的区块组件懒加载(如图2)：

当客户访问服务器移动端时，会将之前计算的首屏内容区块组件的相关的js代码文件，css样式文件加载。计算的首屏内容区块组件指的就是上面那个方法二计算出的区块组件，识别内容外的区块组件指的是页面上除了方法二计算的区块组件之外的组件区块。而其余的内容则不进行加载，当且只当用户滚动到该区块组件的位置时，才会对其依赖文件进行加载，这样既保证了首次加载的速度，也保证了页面的展示效果不受太大的影响。

(3)区块组件的移动端改进(如图2)：

1、开发新的移动端版本

有些区块组件的移动端的展示效果，其实并不是很适合移动端的展示习惯，展示效果不尽如人意，对此我们重新对此区块组件，开辟出一个版本，因为移动端的展示内容并不像pc端那么丰富，我们采用更加精炼的dom结构，只描绘移动端需要的内容，相应的js代码和css代码，相当于只是针对移动端进行订制，这样在保证移动端效果更佳的前提下，进一步加快了访问速度。同时每个移动端版本也可以拥有不同的风格，更满足了页面的个性化需求。

2、对移动端不需要的区块组件进行隐藏

有些区块组件，在pc端可能是需要展示的，但是在移动端，可能其并不需要，对此我们添加了一个设置项，如果需要隐藏，只需设置一下，就可以在移动端的时候不进行加载，进一步精简代码。

3、移动端首屏区块组件，依赖过大，进行缓加载。

针对某些例如幻灯片，视频等等在首屏的区块组件，一上来就对其加载，会带来大量的流量压力，我们针对其采用了缓加载，优先加载出第一张图，或者第一帧图像，在页面加载完毕后，我们再对其相关的依赖进行加载，在不影响用户体验的前提下，加快了移动端的访问速度，这对google测速的分数也有很大的提升。

(4)首屏区块组件的样式文件，进行样式收集和内联(如图3)：

我们用无界面浏览器的形式，对css样式进行收集，只收集对页面展示产生影响的css代码，将其存储下来，页面展示的时候，把其存储下的css代码，内联到页面中，等页面加载完毕后，再把完整的css文件引入。

Claims (6)

1.一种网站移动端速度优化方法，其特征是，基于组件和区块来搭建的SaaS提供商平台服务器并在网站发布，1)计算出移动端首屏区域内的区块组件，在首次加载的时候，只需要展示出所计算出的区块和组件，并对其加载，在识别或计算完毕后，对不在首屏区域内的组件区块，进行懒加载，当滚动到不在首屏区域内的组件区块的位置时，再对其进行js，和css文件的加载；

2)当面对依赖太多、移动端展示效果较差的区块组件，对其区块组件开发相应的移动端组件和区块，进行dom结构、js和css的进行精简，在保证展示效果的同时进行代码的“瘦身”；

提取首屏区域内区块组件的必须的css样式，进行css样式的内联用于移动端展示。

2.根据权利要求1所述的网站移动端速度优化方法，其特征是，移动端首屏区域，区块组件识别选择下述两种方案之一：

第一种：在移动端首屏区域页面发布后，往数据库中存储一条数据，用一个队列程序，取出该数据库中的数据，在服务器后台，用无界面浏览器的形式，计算出首屏区域内的区块和组件，存储在数据库中，在页面渲染时，对此相关的区块和组件进行加载渲染；

第二种：在移动端首屏区域页面编辑时，提供一个按钮提示，能点击按钮，在当前移动端首屏区域页面计算出相应的组件和区块；在离开页面，或者发布网站的时候，如未手动计算，自动计算出当前页面的组件区块。通过主动和被动的方式，把计算出的数据存储在数据库中，在页面渲染时，对相关的区块和组件进行加载渲染。

3.根据权利要求1所述的网站移动端速度优化方法，其特征是，识别内容外的区块组件懒加载：当客户使用访问移动端时，会将之前计算的首屏内容区块组件的相关的js代码文件，css样式文件加载；而其余的内容则不进行加载，当且只当用户滚动到该区块组件的位置时，才会对其依赖文件进行加载，这样既保证了首次加载的速度，也保证了页面的展示效果不受大的影响。

4.根据权利要求1所述的网站移动端速度优化方法，其特征是，区块组件的移动端改进的步骤：

1)开发新的移动端版本

对区块组件的移动端展示效果的区块组件，开辟出一个版本，用更加精炼的dom结构，dom结构只描绘移动端需要的内容相应的js代码和css代码，相当于只是针对移动端进行订制，能加快访问速度；同时每个移动端版本也拥有不同风格移动端的展示效果，满足页面个性化需求；

2)对移动端不需要的区块组件进行隐藏

有些区块组件，在pc端可能是需要展示的，但在移动端并不需要，对此添加了一个设置项，如果需要隐藏移动端不需要的区块组件，只需设置一下，就能在移动端的时候不进行加载，进一步精简代码；

3)移动端首屏区块组件，进行缓加载；

针对在首屏的区块组件，采用缓加载，先加载出第一张图，或者第一帧图像，在页面加载完毕后，再对其相关的依赖进行加载。

5.根据权利要求1所述的网站移动端速度优化方法，其特征是，首屏区块组件的样式文件，进行样式收集和内联：用无界面浏览器的形式，对css样式进行收集，只收集对页面展示产生影响的css代码，将其存储下来，页面展示的时候，把其存储下的css代码，内联到页面中，等页面加载完毕后，再把完整的css文件引入。

6.根据权利要求1所述的网站移动端速度优化方法，其特征是，在页面编辑时，提供一个按钮提示，能点击按钮，在当前页面计算出相应的组件和区块；在离开页面，或者发布网站的时候，如未手动计算，自动计算出当前页面的组件区块。通过主动和被动的方式，把计算出的数据存储在数据库中，在页面渲染时，对相关的区块和组件进行加载渲染；在页面后台的编辑页面，添加了一个立即优化的按钮，当页面保存时，该按钮上会添加上一个红点，用于提示用户去点击进行手动优化，当用户点击时，页面会弹出一个弹出层，提示用户正在进行移动端优化，在弹层下面所编辑的页面，会展示移动端的页面样式，计算出首屏区域内的组件和区块。

Images