Shulou(Shulou.com)06/02 Report--

This article mainly explains the "web page reconstruction and front-end performance optimization method is how", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "web page reconstruction and front-end performance optimization method is how" it!

Web page reconstruction, without changing the external behavior, simplifies the structure, adds readability, and maintains consistent behavior at the front end of the website. In other words, the website is optimized without changing the UI to maintain a consistent UI while expanding.

What does web page reconstruction look like?

For traditional websites, refactoring is usually:

Table (table) layout changed to div+css

Make the front end of the website compatible with modern browsers (for substandard css, such as IE6)

Optimization of mobile platform

Optimize for seo

Aspects that should be considered in deep-seated website reconstruction

Reduce coupling between code

Keep the code flexible and write the code strictly according to the specification

Designing Extensible API

Replace old frameworks, languages (such as VB)

Enhance user experienc

Generally speaking, the optimization of speed is also included in refactoring.

Compress js, css, image and other front-end resources (usually solved by the server)

Performance optimization of programs (such as data reading and writing)

Using CDN to speed up resource loading

Optimization for jsDOM

File caching for HTTP server

What is the optimization method of web page reconstruction?

(1) reduce the number of http requests: cssSprites,js, css source code compression, image size control is appropriate; web Gzip,CDN hosting, data cache, picture server.

(2) js+ data of the front-end template to reduce the bandwidth waste caused by html tags. The front-end uses variables to save the results of AJAX requests. Each time the local variables are operated without requests, the number of requests is reduced.

(3) innerhtml is used instead of DOM operation to reduce the number of DOM operations and optimize JavaScript performance.

(4) when there are a lot of styles to be set, set className instead of directly manipulating style.

(5) use less global variables and cache the results of DOM node search. Reduce IO read operations.

(6) avoid using cssExpression (css expression), also known as Dynamicproperties (dynamic attribute).

(7) preload the picture, put the stylesheet at the top and the script at the bottom with a timestamp.

(8) avoid using table,table in the main layout of the page until the content is fully downloaded, which is slower than the div+css layout. There is a unified idea for ordinary websites, that is, to optimize to the front end as far as possible, reduce database operations, and reduce disk IO. Optimization to the front end means that without affecting the function and experience, do not execute on the server what can be executed in the browser, do not go to the application server that can be returned directly on the cache server, do not obtain the results that can be directly obtained by the program, do not remotely fetch the data that can be obtained from the local machine, do not fetch from the disk what can be accessed from memory, and do not query the database for some of the results that can be obtained from the cache. Reducing database operations means reducing the number of updates, caching results, reducing the number of queries, allowing your program to complete database operations as much as possible (such as join queries), reducing disk IO means not using the file system as cache as far as possible, reducing the number of reading and writing files, and so on. Program optimization always needs to optimize the slow parts, and it is impossible to "optimize" in different languages.

Thank you for your reading, the above is the content of "web web page reconfiguration and front-end performance optimization method". After the study of this article, I believe you have a deeper understanding of how web web page reconfiguration and front-end performance optimization method is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.