CN112989241A - 一种基于Web前端网站的显示优化方法及系统 - Google Patents

一种基于Web前端网站的显示优化方法及系统 Download PDF

Info

Publication number
CN112989241A
CN112989241A CN202110308112.3A CN202110308112A CN112989241A CN 112989241 A CN112989241 A CN 112989241A CN 202110308112 A CN202110308112 A CN 202110308112A CN 112989241 A CN112989241 A CN 112989241A
Authority
CN
China
Prior art keywords
optimization
css
web front
cookie
end website
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
Application number
CN202110308112.3A
Other languages
English (en)
Inventor
吕茹花
孟潜
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN202110308112.3A priority Critical patent/CN112989241A/zh
Publication of CN112989241A publication Critical patent/CN112989241A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种基于Web前端网站的显示优化方法及系统，属于前端技术领域。本发明的基于Web前端网站的显示优化方法包括页面内容优化、CSS优化、JavaScript优化、图片优化、服务器优化和Cookie优化。该发明的基于Web前端网站的显示优化方法能够让页面加载的更快，对用户的操作响应的更及时，为用户提供更友好的体验，具有很好的推广应用价值。

Description

一种基于Web前端网站的显示优化方法及系统
技术领域
本发明涉及前端技术领域，具体提供一种基于Web前端网站的显示优化方法及系统。
背景技术
前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90％。Google Map首页文件大小从100KB减小到70-80KB后，流量在第一周涨了10％，接下来的三周涨了25％。亚马逊的数据表明：加载时间增加100毫秒，销量就下降1％。以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。
计算机技术和网络通讯技术的高速发展促进了Web应用的快速增长和普及，Web应用已经成为人们的一种必不可少的工具，充斥着人们生活的方方面面。电子商务，在线娱乐，电子政务等已经不再是新名词。近年来Web站点数量激增，Web站点的用户规模也日益庞大,其内容和功能也变得十分丰富。在这种情况下，对Web站点的性能要求也越来越高，人们不仅要看到自己需要的内容,而且要求有尽可能快地响应速度，用户不能忍受浏览网页的时候，长时间的等待。所以站点的优化工作势在必行。对于Web站点的优化,后台的优化技术已经比较成熟，比如数据库的优化，后台代码的优化，但是对Web前端性能优化的研究和重视度还远远不够，就国内的情况来看，大多数站点并不关注Web前台的性能优化，这方面的研究也很少，有待进一步的改进。
发明内容
本发明的技术任务是针对上述存在的问题，提供一种能够让页面加载的更快，对用户的操作响应的更及时，为用户提供更友好的体验的基于Web前端网站的显示优化方法。
本发明进一步的技术任务提供一种基于Web前端网站的显示优化系统。
为实现上述目的，本发明提供了如下技术方案：
一种基于Web前端网站的显示优化方法，包括页面内容优化、CSS优化、JavaScript优化、图片优化、服务器优化和Cookie优化。
作为优选，所述页面内容优化为减少HTTP请求数，包括合并JS/CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。
合并JS/CSS文件时，服务器端(CDN)自动合并，基于Node.js的文件合并工具，通过把所有脚本放在一个文件中的方式来减少请求数。
设置合理的HTTP缓存，缓存的力量是壮大的，恰当的缓存设置可以大大的削减HTTP请求。以网站的首页为例，当浏览器没有缓存的时候访问一共会发出几十个请求，共600多K数据，而当第二次访问即浏览器已缓存之后访问则仅有10个请求百度快照排名，共20多K数据。能缓存越多越好，能缓存越久越好。例如，很少转变的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；转变不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。
减少DOM元素数量复杂的页面不仅下载的字节更多，JavaScript DOM操作也更慢。例如，同是添加一个事件处理器，500个元素和500个元素的页面速度上会有很大区别。
所述CSS优化把样式表放在<head>中，把样式表放在<head>中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。如果把样式表放在页面底部，一些浏览器为减少重绘，会在CSS加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。使用<link>替代@import。
作为优选，所述JavaScript优化为将脚本放在页面底部和使用外部JavaScript和CSS。
浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。一些特殊场景无法将脚本放到页面底部的，可以考虑<script>的以下属性：
defer属性；
HTML5新增的async属性。
外部JavaScript和CSS文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。实际中也需要考虑代码的重用程度。如果仅仅是某个页面使用到的代码，可以考虑内嵌在页面中，减少HTTP请求数。另外，可以在首页加载完成以后，预先加载子页面的资源。
作为优选，所述图片优化为优化图片和优化CSS Sprite。
优化图片为尝试把GIF格式转换成PNG格式，会节省不小的空间。
优化CSS Sprite为水平排列Sprite中的图片。Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以适用PNG8格式。
作为优选，所述服务器优化为使用CDN、Ajax请求使用GET和避免图片src为空。
网站80-90％响应时间消耗在资源下载上，减少资源下载时间是性能优化的黄金法则。相比分布式架构的复杂和巨大投入，静态内容分发网络(CDN)可以以较低的投入，获得加载速度有效提升。
内容分发网络(CDN)是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数(hop)最少的或者响应时间最快的服务器。
Ajax请求使用GET，浏览器执行XMLHttpRequest POST请求时分成两步，先发送Http Header，再发送data。而GET只使用一个TCP数据包(Http Header与data)发送数据，所以首选GET方法。
避免图片src为空，虽然src属性为空字符串，但浏览器仍然会向服务器发起一个HTTP请求：IE向页面所在的目录发送请求；Safari、Chrome、Firefox向页面本身发送请求；Opera不执行任何操作。
作为优选，Cookie优化为减少Cookie大小和静态资源使用Cookie域名。
Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送，减少Cookie大小可以降低其对响应速度的影响。
去除不必要的Cookie；
尽量压缩Cookie大小；
注意设置Cookie的domain级别，如无必要，不要影响到sub-domain；
设置合适的过期时间。
静态资源使用无Cookie域名静态资源一般无需使用Cookie，可以把它们放在使用二级域名或者专门域名的无Cookie服务器上，降低Cookie传送的造成的流量浪费，提高响应速度。
一种基于Web前端网站的显示优化系统，包括页面内容优化模块、CSS优化模块、JavaScript优化模块、图片优化模块、服务器优化模块和Cookie优化模块。
作为优选，所述页面内容优化模块用于减少HTTP请求数，包括合并JS/CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。
作为优选，所述图片优化模块用于优化图片和优化CSS Sprite。
作为优选，所述Cookie优化模块用于减少Cookie大小和静态资源使用Cookie域名。
与现有技术相比，本发明的基于Web前端网站的显示优化方法具有以下突出的有益效果：
(一)所述基于Web前端网站的显示优化方法，从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验；
(二)所述基于Web前端网站的显示优化方法从服务商角度而言，优化能够削减页面请求数、或者减小请求所占带宽，能够节省可观的资源，具有良好的推广应用价值。
具体实施方式
下面将结合实施例，对本发明的基于Web前端网站的显示优化方法及系统作进一步详细说明。
实施例
本发明的基于Web前端网站的显示优化方法基于Web前端网站的显示优化方法，包括页面内容优化、CSS优化、JavaScript优化、图片优化、服务器优化和Cookie优化。
其中页面内容优化为减少HTTP请求数，包括合并JS/CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。
合并JS/CSS文件时，服务器端(CDN)自动合并，基于Node.js的文件合并工具，通过把所有脚本放在一个文件中的方式来减少请求数。
设置合理的HTTP缓存，缓存的力量是壮大的，恰当的缓存设置可以大大的削减HTTP请求。以网站的首页为例，当浏览器没有缓存的时候访问一共会发出几十个请求，共600多K数据，而当第二次访问即浏览器已缓存之后访问则仅有10个请求百度快照排名，共20多K数据。能缓存越多越好，能缓存越久越好。例如，很少转变的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；转变不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。
减少DOM元素数量复杂的页面不仅下载的字节更多，JavaScript DOM操作也更慢。例如，同是添加一个事件处理器，500个元素和500个元素的页面速度上会有很大区别。
所述CSS优化把样式表放在<head>中，把样式表放在<head>中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。如果把样式表放在页面底部，一些浏览器为减少重绘，会在CSS加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。使用<link>替代@import。
JavaScript优化为将脚本放在页面底部和使用外部JavaScript和CSS。浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。一些特殊场景无法将脚本放到页面底部的，可以考虑<script>的以下属性：
defer属性；
HTML5新增的async属性。
外部JavaScript和CSS文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。实际中也需要考虑代码的重用程度。如果仅仅是某个页面使用到的代码，可以考虑内嵌在页面中，减少HTTP请求数。另外，可以在首页加载完成以后，预先加载子页面的资源。
图片优化为优化图片和优化CSS Sprite。
优化图片为尝试把GIF格式转换成PNG格式，会节省不小的空间。
优化CSS Sprite为水平排列Sprite中的图片。Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以适用PNG8格式。
服务器优化为使用CDN、Ajax请求使用GET和避免图片src为空。
网站80-90％响应时间消耗在资源下载上，减少资源下载时间是性能优化的黄金法则。相比分布式架构的复杂和巨大投入，静态内容分发网络(CDN)可以以较低的投入，获得加载速度有效提升。
内容分发网络(CDN)是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数(hop)最少的或者响应时间最快的服务器。
Ajax请求使用GET，浏览器执行XMLHttpRequest POST请求时分成两步，先发送Http Header，再发送data。而GET只使用一个TCP数据包(Http Header与data)发送数据，所以首选GET方法。
避免图片src为空，虽然src属性为空字符串，但浏览器仍然会向服务器发起一个HTTP请求：IE向页面所在的目录发送请求；Safari、Chrome、Firefox向页面本身发送请求；Opera不执行任何操作。
Cookie优化为减少Cookie大小和静态资源使用Cookie域名。
Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送，减少Cookie大小可以降低其对响应速度的影响。
去除不必要的Cookie；
尽量压缩Cookie大小；
注意设置Cookie的domain级别，如无必要，不要影响到sub-domain；
设置合适的过期时间。
静态资源使用无Cookie域名静态资源一般无需使用Cookie，可以把它们放在使用二级域名或者专门域名的无Cookie服务器上，降低Cookie传送的造成的流量浪费，提高响应速度。
本发明的于Web前端网站的显示优化系统，包括页面内容优化模块、CSS优化模块、JavaScript优化模块、图片优化模块、服务器优化模块和Cookie优化模块。
其中页面内容优化模块用于减少HTTP请求数，包括合并JS/CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。
图片优化模块用于优化图片和优化CSS Sprite。
Cookie优化模块用于减少Cookie大小和静态资源使用Cookie域名。
以上所述的实施例，只是本发明较优选的具体实施方式，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。

Claims (10)

1.一种基于Web前端网站的显示优化方法，其特征在于：包括页面内容优化、CSS优化、JavaScript优化、图片优化、服务器优化和Cookie优化。
2.根据权利要求1所述的基于Web前端网站的显示优化方法，其特征在于：所述页面内容优化为减少HTTP请求数，包括合并JS/CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。
3.根据权利要求2所述的基于Web前端网站的显示优化方法，其特征在于：所述JavaScript优化为将脚本放在页面底部和使用外部JavaScript和CSS。
4.根据权利要求3所述的基于Web前端网站的显示优化方法，其特征在于：所述图片优化为优化图片和优化CSS Sprite。
5.根据权利要求4所述的基于Web前端网站的显示优化方法，其特征在于：所述服务器优化为使用CDN、Ajax请求使用GET和避免图片src为空。
6.根据权利要求5所述的基于Web前端网站的显示优化方法，其特征在于：Cookie优化为减少Cookie大小和静态资源使用Cookie域名。
7.一种基于Web前端网站的显示优化系统，其特征在于：包括页面内容优化模块、CSS优化模块、JavaScript优化模块、图片优化模块、服务器优化模块和Cookie优化模块。
8.根据权利要求7所述的基于Web前端网站的显示优化系统，其特征在于：所述页面内容优化模块用于减少HTTP请求数，包括合并JS/CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。
9.根据权利要求8所述的基于Web前端网站的显示优化系统，其特征在于：所述图片优化模块用于优化图片和优化CSS Sprite。
10.根据权利要求9所述的基于Web前端网站的显示优化系统，其特征在于：所述Cookie优化模块用于减少Cookie大小和静态资源使用Cookie域名。
CN202110308112.3A 2021-03-23 2021-03-23 一种基于Web前端网站的显示优化方法及系统 Pending CN112989241A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110308112.3A CN112989241A (zh) 2021-03-23 2021-03-23 一种基于Web前端网站的显示优化方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110308112.3A CN112989241A (zh) 2021-03-23 2021-03-23 一种基于Web前端网站的显示优化方法及系统

Publications (1)

Publication Number Publication Date
CN112989241A true CN112989241A (zh) 2021-06-18

Family

ID=76333101

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110308112.3A Pending CN112989241A (zh) 2021-03-23 2021-03-23 一种基于Web前端网站的显示优化方法及系统

Country Status (1)

Country Link
CN (1) CN112989241A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104182547A (zh) * 2014-09-10 2014-12-03 北京浩瀚深度信息技术股份有限公司 一种服务器优化页面渲染的方法及web cache服务器
CN104933078A (zh) * 2014-03-20 2015-09-23 中标软件有限公司 一种Web应用页面渲染优化方法
CN104991942A (zh) * 2015-07-10 2015-10-21 沈文策 一种web前端性能优化的方法
CN108804515A (zh) * 2018-04-25 2018-11-13 网宿科技股份有限公司 一种网页加载方法、网页加载系统和服务器
CN110489697A (zh) * 2019-08-07 2019-11-22 广东省科技基础条件平台中心 一种提升网站页面加载速度的方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104933078A (zh) * 2014-03-20 2015-09-23 中标软件有限公司 一种Web应用页面渲染优化方法
CN104182547A (zh) * 2014-09-10 2014-12-03 北京浩瀚深度信息技术股份有限公司 一种服务器优化页面渲染的方法及web cache服务器
CN104991942A (zh) * 2015-07-10 2015-10-21 沈文策 一种web前端性能优化的方法
CN108804515A (zh) * 2018-04-25 2018-11-13 网宿科技股份有限公司 一种网页加载方法、网页加载系统和服务器
CN110489697A (zh) * 2019-08-07 2019-11-22 广东省科技基础条件平台中心 一种提升网站页面加载速度的方法

Similar Documents

Publication Publication Date Title
CN101894136B (zh) 基于移动终端的页面刷新处理方法及其系统
AU2015401229B2 (en) Website access method, apparatus, and website system
CN102325188B (zh) 在移动终端上实现网页浏览的方法和系统
US10015226B2 (en) Methods for making AJAX web applications bookmarkable and crawlable and devices thereof
CN102438045B (zh) Web页面的预取方法、系统以及访问web页面的方法
CN102446222B (zh) 一种网页内容预加载方法、装置及系统
CN100562873C (zh) 获取网页中网页元素的系统及方法
CN106294648A (zh) 一种针对页面访问路径的处理方法及装置
CN103383687B (zh) 一种页面处理方法和装置
CN101763357A (zh) 一种用于浏览器加载互联网资源的方法及系统
CN101674329B (zh) 一种互联网访问方法和互联网访问系统
CN101539932A (zh) 转化页面的同期访问技术
CN105095280A (zh) 一种浏览器缓存方法和装置
RU2316131C2 (ru) Способ хранения страниц в памяти мобильного устройства (варианты) и мобильное устройство для его осуществления
CN103338249A (zh) 缓存方法及装置
CN103324756A (zh) 一种提高浏览器访问速度的方法及装置
CN101957842A (zh) 一种基于WebKit浏览器的网页缓存控制方法、装置及系统
CN104572777A (zh) 基于UIWebView组件的网页加载方法及装置
CN102346738A (zh) 客制化网页处理装置及方法
CN106557584A (zh) 一种网址收藏方法及装置
CN104615597A (zh) 浏览器中清除缓存文件的方法、装置和系统
CN105279156B (zh) 网络信息通信方法及网络信息浏览装置
CN105282238B (zh) 一种资源管理方法
CN102681996B (zh) 预读方法和装置
WO2010149398A1 (en) Requesting computer data assets

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: 20210618

RJ01 Rejection of invention patent application after publication