Unlock instant, AI-driven research and patent intelligence for your innovation.

Display optimization method and system based on Web front-end website

An optimization method and website technology, applied in the front-end field, can solve the problems of performance optimization research and insufficient attention, and do not pay attention to Web front-end performance optimization, etc., to achieve good promotion and application value, friendly experience, and reduce the bandwidth occupied by requests.

Pending Publication Date: 2021-06-18
SHANDONG LANGCHAO YUNTOU INFORMATION TECH CO LTD
View PDF0 Cites 0 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

For Web site optimization, background optimization technologies are relatively mature, such as database optimization and background code optimization, but the research and attention to Web front-end performance optimization is far from enough. As far as domestic conditions are concerned, most sites It does not pay attention to the performance optimization of the Web front end, and there are few studies in this area, and further improvement is needed

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Examples

Experimental program
Comparison scheme
Effect test

Embodiment

[0042]本发明的基于Web前端网站的显示优化方法基于Web前端网站的显示优化方法，包括页面内容优化、CSS优化、JavaScript优化、图片优化、服务器优化和Cookie优化。

[0043]其中页面内容优化为减少HTTP请求数，包括合并JS / CSS文件、设置合理的HTTP缓存、合并CSS图片和减少DOM元素数量。

[0044]合并JS / CSS文件时，服务器端(CDN)自动合并，基于Node.js的文件合并工具，通过把所有脚本放在一个文件中的方式来减少请求数。

[0045]设置合理的HTTP缓存，缓存的力量是壮大的，恰当的缓存设置可以大大的削减HTTP请求。以网站的首页为例，当浏览器没有缓存的时候访问一共会发出几十个请求，共600多K数据，而当第二次访问即浏览器已缓存之后访问则仅有10个请求百度快照排名，共20多K数据。能缓存越多越好，能缓存越久越好。例如，很少转变的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；转变不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

[0046]减少DOM元素数量复杂的页面不仅下载的字节更多，JavaScript DOM操作也更慢。例如，同是添加一个事件处理器，500个元素和500个元素的页面速度上会有很大区别。

[0047]所述CSS优化把样式表放在中，把样式表放在中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。如果把样式表放在页面底部，一些浏览器为减少重绘，会在CSS加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。使用替代@import。

[0048]JavaScript优化为将脚本放在页面底部和使用外部JavaScript和CSS。浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。一些特殊场景无法将脚本放到页面底部的，可以考虑的以下属性：

[0049]defer属性；

[0050]HTML5新增的async属性。

[0051]外部JavaScript和CSS文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses a display optimization method and system based on a Web front-end website, and belongs to the technical field of front ends. The display optimization method based on the Web front-end website comprises the steps of page content optimization, CSS (Cascading Style Sheet) optimization, JavaScript optimization, picture optimization, server optimization and Cookie optimization. According to the display optimization method based on the Web front-end website, page loading can be faster, operation response to a user is more timely, more friendly experience is provided for the user, and good application and popularization value is achieved.

Description

technical field [0001] The invention relates to the field of front-end technology, and specifically provides a display optimization method and system based on a Web front-end website. Background technique [0002] An important indicator of front-end performance is page load time, which is not only related to user experience, but also a factor considered by search engine rankings. According to data from Google, if a page with 10 pieces of data can be loaded in 0.4 seconds, after 30 pieces of data are loaded in 0.9 seconds, traffic and advertising revenue will drop by 90%. After the Google Map home page file size was reduced from 100KB to 70-80KB, the traffic increased by 10% in the first week, and increased by 25% in the next three weeks. According to Amazon, a 100ms increase in loading time leads to a 1% drop in sales. The above data also shows that "loading time is money", and front-end optimization is mainly carried out around improving loading speed. [0003] The rapid...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F16/957
CPCG06F16/9574
Inventor 吕茹花孟潜
Owner SHANDONG LANGCHAO YUNTOU INFORMATION TECH CO LTD