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

This article mainly explains the "junior Web front-end engineers need to master what knowledge points", 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 "junior Web front-end engineers need to master what knowledge points" bar!

What is a junior web front-end engineer?

Junior front-end engineer: the first thing to know is how to handle the compatibility of various browsers (for example, what are the differences in createElement in IE browsers, etc.). Now almost every company will require proficiency in html5, css3, javascript, which means to be proficient in it.

I will talk about what the junior front-end engineers should learn in detail below, and then they should understand the preprocessors and post-processors of various css, as well as the common front-end MV* frameworks (angularjs, backbone,reactjs, etc.) and the principles of these frameworks, in addition, they should be proficient in using nodejs, using various front-end construction tools based on node (grunt,gulp, etc.), and proficient in using github or gitlab. Have an in-depth understanding of modularization, componentization, engineering and semantics, and finally know how to develop mobile pages

Here the editor has built a front-end learning and exchange QQ group: 132667127, I have sorted out the latest front-end materials and advanced development tutorials, if you want, you can join the group to learn and communicate together.

How to optimize the performance of a page

Technical system of junior web front-end engineer

1. HTML part

First of all, it is necessary to master the use of some commonly used tags and their various attributes. I have summarized these commonly used tags as follows:

Html: the root element of the page.

Head: the header tag of the page, which is the container for all header elements.

Body: the body tag of the page, where the content displayed on the page is placed.

Title: the title of the page.

Meta: located at the head of the document, it provides meta-information about the page, including keywords, descriptions, and so on.

Link: defines the relationship between documents and external resources. The most common use is to introduce stylesheets.

Script: script tag in which you can place js script code or introduce an external tag using the src attribute of this tag.

Style: a style tag in which you can write css code.

A: hyperlink, the href attribute represents the place to link to, and the target attribute represents the opening method.

Img: image tag, and the src attribute indicates the location of the picture.

Form: form element, its internal input, select, textarea and other tags are more important.

Div: define partitions or sections in a document, and you can use div for operations such as page layout.

In addition, there are ul, li, p, button, iframe, p, table and other tags are also very commonly used, nav, section, article, header, aside, footer and other semantic tags also need to know.

In addition to understanding the above tags, you also need to have some knowledge of the API of some new HTML5:

Audio, video tags.

Canvas: define graphs, such as charts and other images.

The accept attribute of the input tag, email, phone, url, and so on.

GetElementByClassName gets an element node based on the class name.

Multiple file selection multi-file selection attribute.

Import and template of html

Process tags, webGL and other content.

There are also some knowledge points to know:

The role of 1.doctype.

The principle and difference of 2.unicode, utf8 and other coding.

3. How to optimize page performance.

Different advantages of 4.png, jpg, webp, gif and other picture formats.

The difference between 5.HTML inline elements and block-level elements.

6. Common head tags are developed on mobile web side.

7.web is semantic.

8. Caching principle in browser

2. CSS part

With regard to css, my opinion is to download a reference manual of css in chm format and click on it one by one according to the manual.

Css is generally divided into the following knowledge points:

① positioning layout

What are the functions and differences of the seven values of the 1.position attribute (static | relative | absolute | fixed | center | page | sticky)?

two。 Realize the product glyph layout or three-column layout (the left and right width is fixed, the middle adapts to the screen).

3. Floating and clearing floating methods, flex layout, grid layout.

② box model

1.margin, padding, and border.

two。 Telescopic box related content.

3.Multi-column Layout Module multi-column layout model.

③ text font

1. Force line wrapping and no line wrapping, clear white space.

two。 Text alignment, size (how to set fonts where chrome is less than 12px), indentation, conversion.

3. Unit (em, rem, px, etc.), color (rgb, rgba,hls).

④ transformations, transitions, and animation

The function and compatibility of various values of 1.transform.

The animation type of 2.transition transition, the principle of Bezier curve.

Various settings for 3.animation animation, @ keyframes rules.

4. Redrawing and rearrangement of browsers.

⑤ selector

1. The classification, weight and priority of the selector.

two。 Which attributes can be inherited and which cannot be inherited.

3. What are pseudo-classes and pseudo-elements, and what are their functions?

These are the basics. In addition to these basics, you need to know Less, Sass, stylus and other css preprocessors, which will greatly improve your css development efficiency, and you also need to know about Autoprefixer, PostCSS and other css post-processors.

3. JavaScript part

Leaving aside the basics of js here, I divide js into two parts according to the level of syntax and usage.

At the grammatical level:

The first is the object-oriented aspects of javascript: implementing encapsulation, inheritance, and polymorphism in javascript.

① encapsulation: encapsulation can be achieved through closures, scopes and scope chains in js, the role of const and let of ES6.

② inheritance: inheritance based on prototype chain, constructor-based inheritance, combinatorial inheritance, parasitic inheritance, etc., plus ES6's class keywords, prototype and _ _ proto__.

③ Polymorphism: in javascript, Polymorphism is implemented using arguments, and there are a lot of things about arguments:

The function of 1.arguments 's caller, callee and other methods.

two。 The functions of apply and call of the method are different.

3. Use

Array.prototype.slice.call to convert an array object into an array.

Various methods of 4.array, such as shift, splice, push, filter, map, reduce, forEach and so on.

Then there is the design pattern of Js, such as the three factory patterns, the builder mode, and so on.

Finally, what the this stands for in different situations.

In terms of the level of use:

First of all, the most important is the principle of ajax,ajax, ajax cross-domain approach: jsonp, location.hash using iframe, postMessageAPI, websocket, server proxy, and so on.

Then there are the protocol headers and status codes of tcp protocol, udt protocol and http protocol. Browser cache, client storage content: localstorage, sessionstorage, indexDB, cookie and so on.

Thank you for your reading, the above is the content of "what knowledge points do junior Web front-end engineers need to master". After the study of this article, I believe you have a deeper understanding of what knowledge points junior Web front-end engineers need to master, 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.