[发明专利]一种基于Web前端网站的显示优化方法及系统

说明书

本发明公开了一种基于Web前端网站的显示优化方法及系统，属于前端技术领域。本发明的基于Web前端网站的显示优化方法包括页面内容优化、CSS优化、JavaScript优化、图片优化、服务器优化和Cookie优化。该发明的基于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个元素的页面速度上会有很大区别。