CN104991942A - Web front end performance optimization method - Google Patents
Web front end performance optimization method Download PDFInfo
- Publication number
- CN104991942A CN104991942A CN201510403762.0A CN201510403762A CN104991942A CN 104991942 A CN104991942 A CN 104991942A CN 201510403762 A CN201510403762 A CN 201510403762A CN 104991942 A CN104991942 A CN 104991942A
- Authority
- CN
- China
- Prior art keywords
- web
- css
- end performance
- performance optimization
- picture
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
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
The present invention provides a web front end performance optimization method which comprises: merging background images required by a webpage into a large image by using a CSS Sprites technology; placing an HTML element at required position in images by a background-position attribute of CSS; and by movably merging the positions of the images, displaying a current required image. Use experience is greatly improved and webpage buffering time is reduced.
Description
Technical field
The present invention relates to a kind of method of web front-end performance optimization.
Background technology
Front end optimization is a part for WEB application prioritization scheme, the optimization referring to and browser is transmit a request to the process that backstage resource dynamic generates is optimized in front end, and the web page resources on backstage comprises html page, JavaScript script, CSS document, Flash and picture etc.WEB application is in order to promote page utilization factor and user-interaction experience, continue to increase webpage capacity and in webpage, apply a large amount of JavaScript code and framework technology thereof, this not only adds webpage analyzing efficiency in a browser, increase the flow of client, postpone the load time of webpage especially.Abroad web system front end optimization method is paid much attention to, and done much relevant work and research, and domestic state of development major part still rests on content and the correctness aspect thereof of web page.
Summary of the invention
The technical problem to be solved in the present invention, is a kind of method providing web front-end performance optimization, reduces the load time of webpage and improves the buffer efficiency of webpage.
The present invention is achieved in that a kind of method of web front-end performance optimization, comprise: use CSSSprites technology, background picture needed for webpage is merged into a figure greatly, by the background-position attribute of CSS, html element element is placed in picture on desired position, shows current required picture by the position of mobile composing picture.
Further, also comprise: the form in web and script are carried out merging and compressing.
Further, also comprise: the optimization of web page element: use the outer chain of semantization label, CSS and JavaScript file, CSS file is placed on the top of the page and JavaScript file is placed on bottom the page.
Further, also comprise: Web cache optimization, add the life cycle that Expires field increases Web object; Use CDN technology to add new one deck network architecture in the middle of existing website, Web site by resource dissemination in this layer of new network architecture.
Tool of the present invention has the following advantages: the method for a kind of web front-end performance optimization of the present invention, and the load time accelerating webpage largely, the loading effect of webpage is more friendly, and the experience property of user has had great lifting.
Embodiment
The method of web front-end performance optimization of the present invention, comprise: by CSS Sprites technology, background picture needed for webpage is merged into a figure greatly, by the background-position attribute of CSS, html element element is placed in picture on desired position, shows current required picture by the position of mobile composing picture; Form in web and script are carried out merging and compressing; The optimization of web page element: use the outer chain of semantization label, CSS and JavaScript file, CSS file is placed on the top of the page and JavaScript file is placed on bottom the page; Web cache optimization, adds the life cycle that Expires field increases Web object; Use CDN technology to add new one deck network architecture in the middle of existing website, Web site by resource dissemination in this layer of new network architecture.
A kind of embodiment of the present invention is as follows:
(1) by CSS Sprites technology, background picture needed for webpage is merged into a figure greatly, by the background-position attribute of CSS, html element element is placed on the position expected in picture, current required picture is shown by the position of mobile composing picture, decrease Http request number of times on the one hand, reduce concurrent request, reduce the picture size of the entirety of request on the other hand, greatly reduce the time of loading.
(2) style sheet and script merge compression, browser client first Web page loading time, CSS and JavaScript file is not buffered, thus each file will carry out once independent Http request, then merge these files and just can reduce the quantity introducing file, thus reduce Http number of requests.To the compression of CSS and JavaScript file, can the size of minimizing file of high degree, concrete method comprises changes long variable name, deletes dead code; The space of Delete superfluous, annotation and unnecessary branch; Merge into a line etc.Certainly there are some special tools of compression at present, perform also more convenient.
(3) optimization of the optimization of web page element: HTML, uses the outer chain of semantization label, CSS and JavaScript file, CSS file is placed on the top of the page, is placed on bottom the page by JavaScript file.
(4) Web cache optimization, not every Web resource all can be buffered, and what the angle thus optimized was to improve Web resource can buffer memory.Add the life cycle that Expires field increases Web object; Use CDN technology and content distributing network, its principle adds new one deck network architecture in the middle of existing website, Web site by resource dissemination in this layer of new network architecture.Make these resources from user more close to, improve the response speed of user access websites.
Although the foregoing describe the specific embodiment of the present invention; but be familiar with those skilled in the art to be to be understood that; specific embodiment described by us is illustrative; instead of for the restriction to scope of the present invention; those of ordinary skill in the art, in the modification of the equivalence done according to spirit of the present invention and change, should be encompassed in scope that claim of the present invention protects.
Claims (4)
1. the method for a web front-end performance optimization, it is characterized in that: comprising: by CSS Sprites technology, background picture needed for webpage is merged into a figure greatly, by the background-position attribute of CSS, html element element is placed in picture on desired position, shows current required picture by the position of mobile composing picture.
2. the method for a kind of web front-end performance optimization according to claim 1, is characterized in that: also comprise: the form in web and script are carried out merging and compressing.
3. the method for a kind of web front-end performance optimization according to claim 1, is characterized in that: also comprise: the optimization of web page element: use the outer chain of semantization label, CSS and JavaScript file, CSS file be placed on the top of the page and be placed on bottom the page by JavaScript file.
4. the method for a kind of web front-end performance optimization according to claim 1, is characterized in that: also comprise: Web cache optimization, adds the life cycle that Expires field increases Web object; Use CDN technology to add new one deck network architecture in the middle of existing website, Web site by resource dissemination in this layer of new network architecture.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510403762.0A CN104991942A (en) | 2015-07-10 | 2015-07-10 | Web front end performance optimization method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510403762.0A CN104991942A (en) | 2015-07-10 | 2015-07-10 | Web front end performance optimization method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104991942A true CN104991942A (en) | 2015-10-21 |
Family
ID=54303757
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510403762.0A Pending CN104991942A (en) | 2015-07-10 | 2015-07-10 | Web front end performance optimization method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104991942A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106055575A (en) * | 2016-05-19 | 2016-10-26 | 天脉聚源(北京)传媒科技有限公司 | Method and device for optimized loading of website page |
| CN107633057A (en) * | 2017-09-19 | 2018-01-26 | 深圳市茁壮网络股份有限公司 | A kind of image display method and device |
| CN109359253A (en) * | 2018-08-29 | 2019-02-19 | 浙江工业大学 | A web front-end performance optimization method |
| CN112989241A (en) * | 2021-03-23 | 2021-06-18 | 浪潮云信息技术股份公司 | Display optimization method and system based on Web front-end website |
| CN113836456A (en) * | 2021-09-23 | 2021-12-24 | 桂林长海发展有限责任公司 | Method, device and storage medium for optimizing performance of WEB front-end webpage |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102185923A (en) * | 2011-05-16 | 2011-09-14 | 广州市动景计算机科技有限公司 | Webpage browsing method for mobile communication equipment terminal |
| US20120079057A1 (en) * | 2009-08-03 | 2012-03-29 | Limelight Networks, inc | Acceleration and optimization of web pages access by changing the order of resource loading |
| CN104461543A (en) * | 2014-12-11 | 2015-03-25 | 武汉噢易云计算有限公司 | Implementation method of top-speed rendering for web page browser |
-
2015
- 2015-07-10 CN CN201510403762.0A patent/CN104991942A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120079057A1 (en) * | 2009-08-03 | 2012-03-29 | Limelight Networks, inc | Acceleration and optimization of web pages access by changing the order of resource loading |
| US20120297291A1 (en) * | 2009-08-03 | 2012-11-22 | Limelight Networks, Inc. | Acceleration and optimization of web pages access by changing the order of resource loading |
| CN102185923A (en) * | 2011-05-16 | 2011-09-14 | 广州市动景计算机科技有限公司 | Webpage browsing method for mobile communication equipment terminal |
| CN104461543A (en) * | 2014-12-11 | 2015-03-25 | 武汉噢易云计算有限公司 | Implementation method of top-speed rendering for web page browser |
Non-Patent Citations (3)
| Title |
|---|
| 朱聚豹: "移动Web前端性能与图片优化的研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
| 杨颖: "CSS Sprites 网页背景定位技术的研究及应用", 《电脑知识与技术》 * |
| 王成 等: "Web 前端性能优化方案与实践", 《计算机应用与软件》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106055575A (en) * | 2016-05-19 | 2016-10-26 | 天脉聚源(北京)传媒科技有限公司 | Method and device for optimized loading of website page |
| CN107633057A (en) * | 2017-09-19 | 2018-01-26 | 深圳市茁壮网络股份有限公司 | A kind of image display method and device |
| CN109359253A (en) * | 2018-08-29 | 2019-02-19 | 浙江工业大学 | A web front-end performance optimization method |
| CN112989241A (en) * | 2021-03-23 | 2021-06-18 | 浪潮云信息技术股份公司 | Display optimization method and system based on Web front-end website |
| CN113836456A (en) * | 2021-09-23 | 2021-12-24 | 桂林长海发展有限责任公司 | Method, device and storage medium for optimizing performance of WEB front-end webpage |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104991942A (en) | Web front end performance optimization method | |
| CN109582899B (en) | Page loading method and device, computer equipment and storage medium | |
| US10762282B2 (en) | Content rendering | |
| US9253013B1 (en) | Efficient delivery of content by virtualization of dynamic interaction with the document object model | |
| CN103488636B (en) | A kind of method of browsing web pages in offline state and device | |
| CN104283777B (en) | The method and apparatus of message compression | |
| CN101079709A (en) | Single-node-to-multi-node concurrent download system and method | |
| Pande et al. | Enhanced web application and browsing performance through service-worker infusion framework | |
| CN102929604A (en) | Screen capturing apparatus and method | |
| CN103530160A (en) | Page loading method and device | |
| CN111339057B (en) | Method, apparatus and computer readable storage medium for reducing back source request | |
| CN103227826A (en) | Method and device for transferring file | |
| CN104391748A (en) | Mapreduce calculation process optimization method | |
| CN104572777A (en) | Webpage loading method and device based on UIWebView component | |
| CN103716413B (en) | Acceleration method for mass small document IO operation transmission in distribution type document system | |
| CN104361025A (en) | Method for fusing and integrating multi-source spatial data | |
| CN203313219U (en) | Caching acceleration system for local area network | |
| KR102289996B1 (en) | Data storage method and device | |
| CN115357825A (en) | A first-screen loading optimization method, device, electronic equipment, and computer-readable storage medium | |
| CN105095250A (en) | Page scheduling processing method and device | |
| CN104516913A (en) | Webpage browser based on multiple kernel technologies | |
| CN102075584B (en) | Distributed file system and access method thereof | |
| CN105119955B (en) | The method and system that catalogue multipage is supported are read in a kind of distributed file system | |
| CN117201477A (en) | A browser-based image resource downloading method and device | |
| CN104298723A (en) | Method for achieving page staticizing in website |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20151021 |
|
| RJ01 | Rejection of invention patent application after publication |