What web front-end engineers need to know

With the rapid development of the Internet, web front-end engineers are becoming more and more hot, want to learn web front-end development? What do you need to know to be a web front-end engineer? Today's small compilation summarizes all the knowledge that a Web front-end engineer needs to master.

First, the basic

1. H5 Label

1.1, H5 introduced some new tags, need to pay attention to article, header, footer, aside, nav and HTML title structure

1.2, understand the browser parsing HTML process, understand the DOM tree structure, and the corresponding API

1.3. Understand the default style (proxy style) of HTML tags on each browser and understand the concept of resetting style sheets in CSS

1.4, understand the canvas, SVG, video and other functional tags

1.5, understand the form, IFRAME tags, understand the file submission process

2. CSS Knowledge

2.1, learn the basic knowledge, including most common attributes, selectors use, understand most of the basic concept of tags

Learn about browser compatibility issues, know the main issues of compatibility and how to solve them

2.2, in-depth understanding of the box model, distinguish between block-level elements, inline elements, some important attributes: display, float, position, must distinguish between box, in-line box concept

You can also learn some simple precompiled languages: sass, less

2.3, learn the common framework, you can use bootstrap to build projects

2.4, learning framework of the Code organization Way

Includes: 12 grille systems, components, styling of components, etc.

2.5. Learn the new features of CSS 3, especially animation effects, selectors

2.6, learn some CSS object thinking, learn to write concise, high reusability, high robustness of CSS

2.7, you can look at the flat design, but also the simplicity of

2.8. Understanding Cssom, Render, reflow, CSS performance, CSS blocking concepts

Learning methods:

Look at other people's code, excellent design site

Learn to use grunt, gulp compression css

Display + position + float can combine complex effects, multi-practice box models

Try to achieve equal height, equal width and other layouts without float and position not for absolute

3. In-depth study of JavaScript

3.1. Re-learning JS syntax, NOTE: expressions, statements, types

Mainly in favor of "native" JS Oh, do not use frame

3.2, in-depth understanding of JS "primary function", Object, class concept

Learn to use functions to construct classes, closures, and learn to organize code in an object-oriented way

3.3, in-depth understanding of the scope of JS, scope chain, this object

Understand the various invocation methods of functions (call, apply, bind, etc.)

3.4, understanding the concept of objects, arrays

Understanding the object's "[]" call, understanding that the object is a "special array"

Understanding the use of a for statement

In-depth understanding of the original value of JS, the concept of packaging objects (important)

3.5, to learn some common use of the framework of methods, including: JQUERY, underscore, ExtJS, more advanced: Backbone, ANGULARJS, Ejs, jade Comparison of the use of multiple frameworks, summarize common usage, Improve learning speed Learning modular development (using Require.js, sea.js, etc.)

3.6, appropriate to see some of the famous framework of the source code, such as jquery is important to learn the framework of the Organization of codes, that is, design patterns

3.7, understand JS interpretation, operation process, understand the single-threaded concept JS

Deep understanding of JS events, asynchronous, blocking concepts

3.8, understand the browser components, understand the concept of V8

The explanation of learning V8-the process of running

Learn how to improve JS performance on the basis of V8

Learn to use Chrome's profile for memory leak analysis

Learning methods:

Raise your demands on yourself

Look at the source of the excellent framework, especially the framework model, design pattern

Multi-Learning Design patterns

Learn native JS, DOM, BOM, Ajax

4. Cross-terminal

Understanding the concept of hybrid apps

Understanding the performance of Web pages on various terminals

Understanding Web pages and native apps in the same area, heavy on the constraints

Understanding a single page site, especially to avoid the page memory leak problem

Get started Nodejs, have a basic concept of it

5. Tools

Learn to use grunt for JS, CSS, HTML compression, especially in the modular JS development time Compression

will use PS to transduction, save icon

Start Sublime, Webstorm

Learn to use the Chrome debug panel, especially: console, network, profile, element

Second, Advanced:

1. Performance

1.1. Understanding the process of resource loading

Includes: TCP handshake connection, HTTP request message, HTTP reply message

1.2. Understand the performance constraints of resource loading, including: TCP connection limit, TCP slow start

1.3, understand the CSS file, JS file compression, understand the different files placed in different locations after the impact on performance

1.4. Understanding CDN Acceleration

1.5, learn to use HTTP Header control resource cache, understand the Cache-control, expire, max-age, ETag impact on the cache

1.6. In-depth understanding of the browser's render process

2. HTTP and TCP protocol families

2.1. Learn HTTP protocol, understanding HTTP request-Response mode

2.2, understanding HTTP is the application layer protocol, it is built on the TCP/IP protocol

2.3. Understanding HTTP messages (Request-response messages)

2.4, understand the HTTP proxy, cache, gateway and other concepts, specify how to control the cache

2.5. Understand HTTP protocol content, including: status code, HTTP header, long connection (http1.1)

2.6, learning the working model of the HTTP server, the static file, CGI, DHTML processing process has a general concept

3. Security

XSS, SQL injection

What web front-end engineers need to know