A few front-end practice summaries of Alipay's new homepage

The key point to focus on when applying tags is the communication of their semantics. Tags like <header> and <footer> are easy to understand, but tags like <section> and <aside>, as well as tags like <small> that use new semantics, are all worth further study. I have also emphasized this aspect in the revision of the new homepage, but the implementation is not very ideal. Next I will do some research in this area. If you are interested, you can join my team.

It is worth mentioning that one of the characteristics of HTML5 is "tolerance makes it great", and tags can be used very flexibly. For example, you can use "block-level" links. People who are used to writing XHTML will definitely not be used to the following code, and may even find it unreasonable, but this is what HTML5 allows.

In fact, it is something that everyone can experience. The general feeling is that the homepage has more things than the previous version, but the speed is surprisingly much faster. Another obvious feeling is that the pictures are the last ones to come out. Yes, that's why it's still fast despite so many requests.

The so-called delayed loading is to record the image address of all images with corresponding tags, then use JS to create an img and change the src value to the address that has been marked in the page. There are two advantages to doing this. First, the text content is displayed first, and then the image is loaded. This process of loading the images in sequence will comfort the user psychologically and make him feel that the page is loading. Second, the images are loaded in parallel, which actually speeds up the page.

But there is a risk in doing this. When JS is not enabled, users cannot see the image. Therefore, we need to further enhance the usability of the page so that it can be displayed even without JS. What came to mind at the time was the <noscript> tag, a tag designed specifically for no JS. Now, disable JS in your browser and visit the Alipay homepage again. Right, they are all displayed, right? The purpose has been achieved. The method is as follows: follow the structure of noscript > img, and wrap a <noscript> tag outside each <img> tag. When there is JS, use JS to move the <img> outside the <noscript>.

In terms of technical implementation, there is a relatively troublesome problem: the innerHTML obtained from noscript is escaped text in advanced browsers such as Firefox, but it is not escaped in IE. The most important thing is that it cannot be obtained at all using innerHTML in IE7. Escaping is a trivial matter, and you can write a Hack to achieve it, but not being able to obtain it is the biggest problem. So, we have to write an img in this way:

I strongly recommend you to take a look at Google's suggestions. Almost all my optimizations are based on this: http://code.google.com/speed/page-speed/docs/overview.html

Conclusion

Okay, that’s all I have to say. There are only two major points, and the others are mixed in without being fully elaborated. There is much more being worked on. I've just been very lazy recently, and a lot of things have happened. So I am too tired to write blogs. People should still write blogs and summarize things occasionally, otherwise it is easy for their brains to stop working and they won’t be able to string words together into a complete sentence. For this revision, most of the HTML/CSS codes were written by interns, which I also mentioned on Weibo last time. I am mainly responsible for JS, the overall grasp and optimization aspects. I find that the current interns are all very good. When I was a junior, I couldn’t even write code. Ha ha…