Article introduction of Wulin.com (www.vevb.com): How deep is the water on the front-end page?
Anyone who works on the Internet basically writes a few lines of html. People who have used Word can also make regular pages with Dreamweaver, so most people will naturally think that the development of pages does not have much technical content and is very simple. Not only does this common understanding, but there are also many doubts for practitioners: there is no problem in implementing the front-end page; compatibility, small cases; image integration, and it has been used all the time... What other problems can be found? Bottlenecks, ceilings, transformations, and ways out are widely discussed among practitioners. Is there really no problem? NetEase Email Front-end Technology Center has been established for several years, and it seems that there are endless topics to discuss, and there are often new ideas to cheer everyone up. So what are the requirements for page development and what else to do, and how deep the water is here, let's scoop it.The perception of the front end of the page seems to be varied at different times. In the early days of the Internet, small cars were still more expensive than houses, and sesame cakes and vermicelli were only used to eat, and chrysanthemums were only used to make tea. At that time, the page design style was relatively single, and the corresponding page requirements were relatively simple. The browser at that time was basically the world of IE6. Javascript was just synonymous with web page special effects. The HTML page itself did not attract much attention. It seemed that as long as you can use div or even table to add css to the auxiliary positioning of the image, it would be OK to reserve the page content, and this concept existed for a long time. With the enrichment of page content, the development of design style, the increase in interaction complexity, the application of AJAX and the update of browsers have made everyone pay attention to the most basic page itself again. Then what is hotly discussed is browser compatibility. When encountering problems, the most passionate thing is to search for hacks on the Internet, and then scold IE6 and 7... After doing all these, it seems that I have encountered a bottleneck again and started to find a way out. Let's start with this stage.
Implementing renderings is the most basic job
The visual draft is expressed through page code, which includes two basic demands: 1. It can truly reflect the visual draft; 2. It can be compatible through the browser. To achieve these two demands, we need to have a pursuing detail attitude and a certain degree of page skills. If we can complete these two contents, we can enter the ranks of practitioners at the front end of the page, but this means that we can be competent for page development? No, it's just beginning!
Communication with designers and project participation
Communication is important. Let me ask a few questions first: Have we discussed with designers that some effects have a greater impact on the rendering efficiency of low-end browsers? Have you ever discussed some effects that can be implemented in CSS3 to make the structure more concise and clear? Have you ever pursued balance in code and vision? The development of the front-end of the page is for basic users, and the code written is also directly applied to the browser. We are obliged to be responsible for the stability and rendering efficiency of the page. We also often encounter the design of the project under the overall progress pressure and the design is carried out simultaneously with the front-end development of the page. At this time, it is more necessary to obtain as much project information as possible and understand what we need to do. These can help us fully consider reuse and framework expansion.
Good page structure
The writing of page structure is like building a building foundation. The quality of the CSS code, js development, background development, and future page expansion, iteration and page adjustment. After you get the visual draft, don’t be busy starting, observe and think more. First analyze the layout, divide the framework, then plan the structure, and write the code. Especially in large-scale projects, the rational use of modular development has considerable benefits whether it is carried out in the overall or expanded maintenance.
About hack
Many students search the most online for hacks when developing pages. Whether we rely entirely on hacks to achieve page compatibility, the answer is no. People often describe IE6 as saying that we have told us a lie, but we have to tell another hundred more lies to fulfill this lie. Not denying that IE6 often makes us vomit blood in our mouths, but it does not mean that we can feel at ease by using more lies to make up for it. In most cases, you can adjust the HTML structure by changing your ideas, or use some css that are unexplained but relatively safe to kill hacks. No one can predict when using hack will cause us to fall into a big blow. For example, triggering layout or position:relative can help solve many IE6 problems.
Beautiful code
Nowadays, many web projects have complex functions and their code scale will become huge. How to better collaborative development and maintenance is a problem we face. We need to consider improving unified planning, and we must develop good code development habits in order to be at ease when facing various situations. Looking through the page code, seeing reasonable label usage, good annotations, clear code structure, and accurate CSS are not only like appreciating a work of art, but also reducing the communication costs for downstream development and collaborative development. What reason do we have not to do this? To give a negative example: div abuse is a typical problem now. Count to see how many tags you use? Different semantics should use the corresponding tag code, especially HTML5 provides richer semantic tags. They are all waiting for the charge on the battlefield. Let us liberate them!
Accessible page development
Accessibility and ease of use are very subjective and user-friendly things. Pages that ordinary people look perfectly presented may not necessarily appear so considerate among special groups. We should feel guilty when blind people use screen reading software to get into a loop within a certain area of the page. It can only be said that domestic websites currently pay far less attention to this, which requires us to work together to let more people feel our enthusiasm. >
Ensure efficiency
As a relatively frontier part of project development, page development may need to be completed as early as possible to gain time for the project, which requires us to improve efficiency as much as possible. If you want to do it well, you must first sharpen your tools. In addition to the formation of practical experience and code habits that can help us improve efficiency, if you want to improve your ability to control the progress of your own development, there are many auxiliary tools that can help us develop pages. For example, using Less or Sass can help us expand and organize CSS, greatly improving the writing efficiency of CSS and increasing maintainability. For example, you can use zen coding's automatic completion and custom code blocks to allow you to point your sword as if you are flying. I have even seen code block keywords that improve development speed through custom input methods. If you explore more, you will definitely find the most suitable tool for yourself.
Optimization for servers
Page development also requires understanding server optimization and minimizing the burden on the server. For example, css sprite is a typical example of reducing the number of server requests. In the front-end development of NetEase Email, we are constantly doing various optimizations, such as constantly seeking a balance between file size and server request count; in order to improve cache utilization as much as possible, we use patch upgrades; confusion and compression of class names to avoid excessively long naming; use base64 to reduce the number of requests and other measures. These are the results of comprehensive trade-offs and overall optimizations need to be considered in all aspects. Because when the number of page visits reaches a certain order of magnitude, even the smallest optimization will achieve considerable results, and even the smallest problem may form a huge disaster.
Embrace HTML5
This is an era full of opportunities. The advent of the HTML5 era has created greater opportunities with the rise of the mobile Internet, and there are so many things worth learning and discovering. HTML5 provides a rich JS API interface, which we need to study; CSS3's splendor has attracted enough attention, which we need to study; how to develop more adaptable pages on mobile devices requires us to study...
Stay Hungry, Stay Foolish
The more I scooped the water, I found that the bottom was still deep and the bottom was not bottomed out. The more I studied the above content, the more I found that more mountains and rivers needed to be climbed. Stay hungry, use your eyes to discover and discover, and constantly enrich your skills to find the position and break through bottlenecks. As the saying goes, only by building a high-level house can you achieve natural results. This article was formed because I discussed the bottleneck issue with my colleagues before. I wanted to find the positioning for myself and the students at the front end of the page to sort out my ideas. Take a sentence from Apple CEO’s speech at Stanford, Stay Hungry and Stay Foolish and share it with everyone.