CN109255086A - 基于ionic开发框架的网页加载速度优化方法及装置 - Google Patents
基于ionic开发框架的网页加载速度优化方法及装置 Download PDFInfo
- Publication number
- CN109255086A CN109255086A CN201810982406.2A CN201810982406A CN109255086A CN 109255086 A CN109255086 A CN 109255086A CN 201810982406 A CN201810982406 A CN 201810982406A CN 109255086 A CN109255086 A CN 109255086A
- Authority
- CN
- China
- Prior art keywords
- compressed
- file
- ionic
- development framework
- compression
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及计算机技术领域，基于ionic开发框架的客户端进行加载软件时耗费大量时间的问题，提出一种基于ionic开发框架的网页加载速度优化方法，包括如下步骤：a.在除根路径页面的其它页面根据需要添加懒加载标识；b.使用代码级别的压缩方法对运行时文件进行压缩；c.使用uglify方法或uglifyjs方法对资源文件进行压缩。通过懒加载标识可使得软件启动时自动加载非懒加载的页面数据，请求带懒加载标识的页面时再加载对应的页面数据。步骤b和步骤c中的压缩方法可使得加载时间减少70％；本发明适用于基于ionic开发框架的软件开发。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种网页加载速度优化方法及装置。
背景技术
在前端盛行时代，敏捷开发及跨平台开发已经成了客户端及前端工程师的首选，而ionic开发框架则在这个背景下营运而生，ionic结合AngularJS的特性，专门为客户端及前端开发打造的一个全能框架，开发人员在完成代码编写后，相关代码文件并不能直接运行，需要通过编译工具编译成系统识别的文件及文件格式进行运行，编译过后的文件就是运行时文件，当工程师把前端代码编译成运行时文件时，需要借助打包工具打包，而ionic官方给的打包工具并不是那么渐变且会出现各种因为版本等原因造成打包时消耗很长的时间或者打包后的运行时文件非常大，以至于用户无论使用web版还是apk版或者ipa版客户端软件进行加载都需要等待很久，开发人员在打包时也需要耗费大量时间进行打包等待。
发明内容
本发明所要解决的技术问题是：克服基于ionic开发框架的客户端进行加载软件时耗费大量时间的问题，提出一种基于ionic开发框架的网页加载速度优化方法及装置。
本发明解决上述技术问题，采用的技术方案是：
基于ionic开发框架的网页加载速度优化方法，包括如下步骤：
a.在除根路径页面的其它页面根据需要添加懒加载标识；
b.使用代码级别的压缩方法对运行时文件进行压缩；
c.使用uglify方法或uglifyjs方法对资源文件进行压缩。
为了缩小文本文件的大小以提高web版客户端软件的加载效率，进一步的，还包括如下步骤：使用gzip方法对文本文件进行压缩，在容器上配置相应的过滤器使得请求加载文本文件时跳转至对应的压缩后的文件。
优选的，所述步骤b中的压缩方法为ionic开发框架提供的-prod指令。
基于ionic开发框架的网页加载速度优化装置，包括：
标识添加模块，用于在除根路径页面的其它页面根据需要添加懒加载标识；
代码压缩模块，用于使用代码级别的压缩方法对运行时文件进行压缩；
资源文件压缩模块，用于使用uglify方法或uglifyjs方法对资源文件进行压缩。
为了缩小文本文件的大小以提高web版客户端软件的加载效率，进一步的，还包括：文本文件压缩模块，用于使用gzip方法对文本文件进行压缩，且在容器上配置相应的过滤器使得请求加载文本文件时跳转至对应的压缩后的文件。
优选的，所述压缩方法为ionic开发框架提供的-prod指令。
本发明的有益效果是：
1)以ionic提供的例子程序MyApp而言，该例子程序的大小为5M，采用ionic官方给的打包工具对该例子程序的运行时文件进行压缩可压缩至1.2M，移动终端上加载该1.2M的例子程序时消耗10秒的启动时间；通过本发明步骤b和步骤c的压缩后，例子程序的大小为800K，移动终端上加载该1.2M的例子程序时消耗3秒的启动时间。也就是说相比ionic官方给的打包工具压缩后，移动终端上加载该例子程序的时间减少了70％。
2)通过懒加载标识可使得软件启动时自动加载非懒加载的页面数据，请求带懒加载标识的页面时再加载对应的页面数据，提高了软件启动的速度的同时减少了很多无用页面引用加载造成的资源臃肿和卡顿。
附图说明
图1为本发明实施例的方法流程图。
图2为本发明实施例的装置结构图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图对本发明进行进一步详细说明。
如图1所示，基于ionic开发框架的网页加载速度优化方法，包括如下步骤：
a.在除根路径页面的其它页面根据需要添加懒加载标识；
为了提高启动速度，需要引入ionic3带来的新特性“懒加载”，该懒加载方式由ionic团队专门针对客户端代码较大而做出的硬性能上的优化。如此，启动时自动加载非懒加载的页面数据，请求带懒加载标识的页面时再加载对应的页面数据，大大提高了客户端软件启动的速度；其中，页面数据包括HTML数据、Javascript数据和CSS数据。
b.使用代码级别的压缩方法对运行时文件进行压缩。
其中，压缩方法可为ionic开发框架提供的-prod指令。使用该-prod指令，以ionic提供的例子程序为例，可以把ionic提供的例子程序MyApp由5M压缩至1.2M左右，相比未压缩时加载效率提升70％。此时程序还有1.2M的资源文件，该1.2M会造成android或者ios手机加载软件时消耗大概10秒左右的启动时间，Web端加载软件时获取1.2M数据需要12秒。
c.使用uglify方法或uglifyjs方法对资源文件进行压缩。
仍以步骤b后的经过压缩后的例子程序为例，可以对ionic的资源文件进行进一步的压缩，可采用uglifyjs方法将关键的js文件进行进一步压缩，例如main.js-omain.min.js指令，将原main.js文件经过uglifyjs逻辑压缩后可由1M压缩至600K左右，此时整个例子程序的大小为800K，在此步骤压缩后再打包到原数据文件中，基本上app启动或者web远程加载能在3秒左右完成，符合远程app的要求，大多数项目使用该方法可提升加载效率。
此时web端其实还有将近800K左右的数据在远程，当用户网络不佳时，800K左右的数据包还是会加载大概10秒左右，等待时间太长，此时我们需要进行更进一步的优化，为了缩小文本文件的大小以提高web版客户端软件的加载效率，进一步的，可使用gzip方法对文本文件进行压缩，在容器上配置相应的过滤器使得请求加载文本文件时跳转至对应的压缩后的文件，上述容器可为tomcat容器，可采用Gzip的压缩指令gzip-9-S gz main.min.js，以步骤c后的ionic例子程序为例，main.js经过上面几步后还有600K左右，使用gzip压缩后能压缩至167k左右，整个项目包全部进行gzip压缩可以缩小至500k以内。这样使用加载远程webapp可以在4-5秒左右完成，符合远程的加载的一般需求，很大程度上提升用户的体验。
如图2所述，对应于基于ionic开发框架的网页加载速度优化方法的装置，包括：
标识添加模块，用于在除根路径页面的其它页面根据需要添加懒加载标识；
使用该标识添加模块，启动时自动加载非懒加载的页面数据，请求带懒加载标识的页面时再加载对应的页面数据，大大提高了客户端软件启动的速度；其中，页面数据包括HTML数据、Javascript数据和CSS数据。
代码压缩模块，用于使用代码级别的压缩方法对运行时文件进行压缩；
其中，压缩方法可为ionic开发框架提供的-prod指令。
资源文件压缩模块，用于使用uglify方法或uglifyjs方法对资源文件进行压缩。
为了缩小文本文件的大小以提高web版客户端软件的加载效率，进一步的，还包括：文本文件压缩模块，用于使用gzip方法对文本文件进行压缩，且在容器上配置相应的过滤器使得请求加载文本文件时跳转至对应的压缩后的文件。
Claims (6)
1.基于ionic开发框架的网页加载速度优化方法，其特征在于，包括如下步骤：
a.在除根路径页面的其它页面根据需要添加懒加载标识；
b.使用代码级别的压缩方法对运行时文件进行压缩；
c.使用uglify方法或uglifyjs方法对资源文件进行压缩。
2.如权利要求1所述的方法，其特征在于，还包括如下步骤：使用gzip方法对文本文件进行压缩，在容器上配置相应的过滤器使得请求加载文本文件时跳转至对应的压缩后的文件。
3.如权利要求1所述的方法，其特征在于，所述步骤b中的压缩方法为ionic开发框架提供的-prod方法。
4.基于ionic开发框架的网页加载速度优化装置，其特征在于，包括：
标识添加模块，用于在除根路径页面的其它页面根据需要添加懒加载标识；
代码压缩模块，用于使用代码级别的压缩方法对运行时文件进行压缩；
资源文件压缩模块，用于使用uglify方法或uglifyjs方法对资源文件进行压缩。
5.如权利要求4所述的装置，其特征在于，还包括：
文本文件压缩模块，用于使用gzip方法对文本文件进行压缩，且在容器上配置相应的过滤器使得请求加载文本文件时跳转至对应的压缩后的文件。
6.如权利要求4所述的装置，其特征在于，所述压缩方法为ionic开发框架提供的-prod指令。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810982406.2A CN109255086A (zh) | 2018-08-27 | 2018-08-27 | 基于ionic开发框架的网页加载速度优化方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810982406.2A CN109255086A (zh) | 2018-08-27 | 2018-08-27 | 基于ionic开发框架的网页加载速度优化方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109255086A true CN109255086A (zh) | 2019-01-22 |
Family
ID=65049407
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810982406.2A Pending CN109255086A (zh) | 2018-08-27 | 2018-08-27 | 基于ionic开发框架的网页加载速度优化方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109255086A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112162780A (zh) * | 2020-09-24 | 2021-01-01 | 联想(北京)有限公司 | 应用运行控制方法、装置及电子设备 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103020155A (zh) * | 2012-11-23 | 2013-04-03 | 中国电信股份有限公司云计算分公司 | 一种Web前端资源请求处理方法及装置 |
| CN104408178A (zh) * | 2014-12-12 | 2015-03-11 | 用友软件股份有限公司 | Web控件加载装置和方法 |
| CN104601691A (zh) * | 2015-01-13 | 2015-05-06 | 北京中交兴路车联网科技有限公司 | 提高Web站点资源加载速度的方法及系统 |
| CN104978194A (zh) * | 2015-06-25 | 2015-10-14 | 北京京东尚科信息技术有限公司 | 一种网页前端开发方法及装置 |
| CN104991860A (zh) * | 2015-06-24 | 2015-10-21 | 深圳欧德蒙科技有限公司 | Web前端自动化开发方法与系统 |
| US20160170944A1 (en) * | 2014-12-15 | 2016-06-16 | International Business Machines Corporation | Browser interaction for lazy loading operations |
-
2018
- 2018-08-27 CN CN201810982406.2A patent/CN109255086A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103020155A (zh) * | 2012-11-23 | 2013-04-03 | 中国电信股份有限公司云计算分公司 | 一种Web前端资源请求处理方法及装置 |
| CN104408178A (zh) * | 2014-12-12 | 2015-03-11 | 用友软件股份有限公司 | Web控件加载装置和方法 |
| US20160170944A1 (en) * | 2014-12-15 | 2016-06-16 | International Business Machines Corporation | Browser interaction for lazy loading operations |
| US20160171007A1 (en) * | 2014-12-15 | 2016-06-16 | International Business Machines Corporation | Browser interaction for lazy loading operations |
| CN104601691A (zh) * | 2015-01-13 | 2015-05-06 | 北京中交兴路车联网科技有限公司 | 提高Web站点资源加载速度的方法及系统 |
| CN104991860A (zh) * | 2015-06-24 | 2015-10-21 | 深圳欧德蒙科技有限公司 | Web前端自动化开发方法与系统 |
| CN104978194A (zh) * | 2015-06-25 | 2015-10-14 | 北京京东尚科信息技术有限公司 | 一种网页前端开发方法及装置 |
Non-Patent Citations (4)
| Title |
|---|
| CPU_DRIVER: "ionic3 使用懒加载（译）", 《HTTPS://WWW.JIANSHU.COM/P/A445B497CB60》 * |
| GAVIN·GONG: "Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率", 《HTTPS://WWW.ITDAAN.COM/BLOG/2017/05/31/9778AEFE041066F604B9B1451C54720C.HTML》 * |
| WEIXIN_30580341: "ionic 2.x 3.x 打包 压缩", 《HTTPS://BLOG.CSDN.NET/WEIXIN_30580341/ARTICLE/DETAILS/97508037》 * |
| 高兴建 等: "基于Ionic的混合移动应用的研究与实现", 《计算机时代》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112162780A (zh) * | 2020-09-24 | 2021-01-01 | 联想(北京)有限公司 | 应用运行控制方法、装置及电子设备 |
| CN112162780B (zh) * | 2020-09-24 | 2022-03-25 | 联想(北京)有限公司 | 应用运行控制方法、装置及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108108162B (zh) | 应用程序编程接口生成方法及装置 | |
| US20090119659A1 (en) | Method of Computer Based Data Card Software Downloading and Updating | |
| CN109144493A (zh) | 业务规则的生成方法、电子装置及可读存储介质 | |
| CN103176774A (zh) | 应用程序的编译方法、装置以及系统 | |
| CN111552838A (zh) | 数据处理方法及装置、计算机设备、存储介质 | |
| CN102262684A (zh) | 移动终端网页页面生成方法及装置 | |
| CN109508211A (zh) | 一种多语言配置方法、装置、系统及电子设备 | |
| CN109783752A (zh) | 页面加载方法及装置、电子设备和计算机可读存储介质 | |
| CN109582377A (zh) | Bios选项修改方法、装置、设备及存储介质 | |
| CN101894069B (zh) | Linux中的早期串口打印调试方法及装置 | |
| CN104461589A (zh) | 单片机升级方法及升级系统 | |
| CN109918075A (zh) | 利用打包插件的sdk打包方法、打包插件及相应终端 | |
| CN102508661A (zh) | 一种通讯模块开发配置的方法和装置 | |
| CN109255086A (zh) | 基于ionic开发框架的网页加载速度优化方法及装置 | |
| US8813029B2 (en) | Remote card content management using synchronous server-side scripting | |
| CN104424317A (zh) | 一种向用户终端提供应用的方法和系统 | |
| CN103458037A (zh) | 一种在资源受限环境下提供复杂网页应用的方法和设备 | |
| CN110650192A (zh) | 一种基于北斗短报文通信的新能源监测系统 | |
| CN108334392B (zh) | 安卓系统中启动页面的方法、存储介质、设备及系统 | |
| CN105183603A (zh) | 终端显示屏效果调试方法和系统 | |
| CN105094787B (zh) | 企业互联网应用的处理方法及装置 | |
| CN112965732A (zh) | 资源包的获取方法、智能穿戴设备及存储介质 | |
| CN111158665B (zh) | 代码生成方法及装置、电子设备和存储介质 | |
| CN114020414B (zh) | Android系统与底层Linux共生方法、装置、电子设备及存储介质 | |
| CN107092601B (zh) | 资源文件构建方法、资源文件应用方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190122 |
|
| RJ01 | Rejection of invention patent application after publication |