1. IconFont: This is a new and popular technology in recent years that uses fonts instead of images. It can adapt to any resolution without image blur problem, compared with pictures it has a smaller capacity, higher flexibility (like font can set icon size, color, transparency, hover state, inversion, etc.), IE8 browsers above all support this technology. Before using IconFont, you should first make sure that your chosen font library is paid for.

 

2. StyleCombine, a performance optimization engineering product in the PC era

StyleCombine is what we call a server side module loader, and is an extreme product for front-end performance. Automatically implements 10 of yahoo’s 34 rules in an engineered way and can be easily deployed to Nginx/Apache servers regardless of your application type (Java, PHP, NodeJS all work).

The ultimate in this is that it can even resolve AMD/CMD module dependencies on the server side and automatically merge requests with urls of submodules.

Its acme is that it has been developed as the default configuration module of 1688 backend server, which has experienced the repeated test of hundreds of billions of visits. How many front-end products can have such a profound impact on the back-end architecture?

This is a front-end engineering product worthy of our pride, but also worthy of our continuous optimization and improvement!

StyleCombine system schematic diagram:

 

 

3. Performance Optimization engineering products in the wireless era — H5 incremental package mechanism & Style Diff Center

Performance experience is the lifepin of wireless products, but after the PC end performance optimization engineering tempered, we are not satisfied with the performance of a single page tinkering, and the goal is the performance optimization results of the framework sinking and engineering reuse. Therefore, the H5 incremental package mechanism and the Style Diff Center came into being, and the engineering idea was finally completely sunk into the 1688 main-guest Wing frame.

However, we are only at the beginning of the engineering road of wireless H5 application performance optimization, and we are far from the ultimate. When you see this bite-level incremental update mechanism of Tencent students, I believe you will be amazed at the extreme, but also realize that we can do a lot of things…

Attached is the working principle diagram of H5 incremental update mechanism:

 

 

4,

  • Asynchronous loading of modules, and priority loading of key modules
  • Lazy loading of images, loading when the user slides, image size control

 

In order for the page to be able to render smoothly, a bit of technical effort is necessary! Stand in the perspective of user experience to think, in fact, many problems will be solved:

  • The first screen must be fast
  • Scrolling must be smooth
  • Don’t load what you can’t load
  • Don’t execute what you can’t
  • Gradual display, smooth display

 

Reference article:

1. Advanced engineering of front-end performance optimization

2. Advanced way of Web front-end performance optimization

3. Taobao home page performance optimization practice

Take a look at the individuation of taobao home page