More and more developers are joining the front-end development team. But the front-end knowledge is constantly updated, everyone’s understanding of it is also different, today for you to interpret, learning web front-end which seven misunderstandings. Myth 1: The front end is just JavaScript but I will say this: the front end is not just JS. What is front-end development? I think of all presentation oriented work as front-end development. In the front-end development, in addition to JS, there are a lot of need to master, such as browser principle, HTML5, CSS3 and so on. When I was interviewing someone, I asked him how to make a turntable on a touch screen. He shook his head. I took a step back and said it would be okay to talk to him about your ideas. He thought about it, but he couldn’t. Do turntable, seemingly simple, but represents the comprehensive application of front-end knowledge. You don’t have touch screen experience, you don’t know CSS3 or Canvas, you don’t know web optimization, you can’t do it. The front end is the application of comprehensive technology, only JS can not solve the problem. Sixty percent of the people I meet have no actual experience working with H5 and CSS3, or have even heard of the terms rather than studied them. When asked why, most of them said their previous jobs were not available, and a few said they didn’t have the time. When asked about the implementation of some animations, some interviewees still use the CSS2 property of the DOM frequently changed to implement. The reason for this situation may be related to the work content. At present, some mobile terminal web pages in China are relatively regular, and product managers rarely have unconventional requirements for front-end implementation. Some front-end developers are tasked with rendering back-end data, which CSS2 can do as well. But this is not an excuse not to use new technology. One day they will be obsolete. Misconception three: the front end does not need to understand the back-end knowledge is also, the front end to do a good front bai, tube back end why. But the industry is evolving, and the front end is getting more powerful. Offline database can provide data storage and management functions, but can not write SQL statements to play? WebSocket can provide instant communication, but do not understand the difference between socket and WebSocket, and can be built with backend development (many backend development only socket technology)? Speeding up page display is not only a front end analysis, but also a back end consideration. Using back-end technologies such as Keep Alive and caching can make pages open faster. Misconception 4: think the boss requirements are very difficult ah, can push push do not exclude their unconventional needs, their strange needs may become an important competitiveness of the enterprise. (Well, that shifts to the perspective of the people who run the company.) Users are becoming more and more focused on performance, and instead of bombarding them with simple list pages and detail pages, they may become loyal users because of the good user experience. When encountering an unusual requirement, first figure out how to implement it using your front-end knowledge, and if you can’t, discuss it with your peers. In short, it is the developer’s responsibility to fulfill the requirements, and it is not easy to say that we cannot fulfill the requirements.

! [7 front-end novice common errors, be sure to avoid] (https://p1-tt.byteimg.com/origin/pgc-image/f95bc7742e634ce0ab4a8a58171e327c?from=pc)

Most front-end rendering uses the DOM, but too much DOM can cause performance problems. Now it’s popular to pull up the bottom of a list page to load more, but there’s very little front-end focus on the extreme issue of loading. What happens if I pull down a page many times and load thousands of DOM’s? The answer is that the page responds slowly at best and the browser blinks at worst. Another example: LocalStorage is really convenient to use, many enterprises rely heavily on it, and even well-known front-end development frameworks rely on it. However, it has a disadvantage — it has a capacity limit (2.6m -10M), we have to consider the extreme case, when LocalStorage space is running out, how to handle. Or architecturally avoid such extremes. Misunderstanding six: page to the user, the user can use good to see your page, not only the user, there are robots good! Web apps have been coveting the position of Native apps, and there is no difference between some Web apps and Native apps. Web apps are all the rage, and various front-end MVC frameworks are all the rage, but the problem with all of them is that it’s almost impossible to do SEO because search engines ignore JS. Flow is the life of the enterprise, SEO can attract a lot of traffic, so the front end or have to consider THE SEO problem. Don’t Use/Push New technology God gave you wings and you baked them. Ask yourself a few questions, does the page use CSS3 animation? Does the page support multi-touch? Range sensors, motion sensors. Did you use them? This is not about using new technologies for their own sake. We want to say, we have new technology, don’t waste it, it’s time to change the old web and the old way of doing things. Use these features to make the user experience better. Some of the product managers or designers are still in the HTML4 era of the front end, so it’s worth updating their knowledge. The above is the summary of learning points for you today, I hope to help you!