Face after - Tencent front-end development engineer

<- experienced torture ->

The present results do not know, to be a record, it is not obliged to go the front, long way to go, learning companion

Technology is not the technology but test test your attitudes to things, there is always paid every bit of return

This article has many shortcomings, welcome that

Here Insert Picture Description
Here Insert Picture Description

==============================================================================

<–JS–>

Single-threaded interpretive language

Scope:

what: When a function is executed, it creates a called context of the implementation of internal objects. Unique, top-down, destroyed immediately after execution

Find variables :

From the top of the scope chain ends sequentially searches downward

prototype:

what:

Attribute is a function object that defines a constructor to create the object common ancestor . This constructor is generated by the object can inherit attributes and methods of the prototype. Prototypes are objects.

where :( with where)

Using the prototype features and concepts may be extracted public property

Chain prototype: Prototype plurality of connected chain

call 、bind 、 apply

Are used to change this point, this first parameter is the pointing object

The call is to go directly into the parameter, the second and third n-th argument all separated by commas, directly into the back obj.myFun.call (objec, 'Chengdu', ..., 'string').

All parameters apply must be placed inside the array pass in a obj.myFun.apply (objec, [ 'Chengdu', ..., 'string']).

In addition to returning a function other than bind, its parameters and the same call.


Precompiled:

what:

It occurred at the moment of execution prior to compilation function, but does not have a real impact on the function execution

how:

AO create objects

Get parameter and variable declarations, and parameter variables as AO attribute name, value is undefined

The parameter values ​​and actual parameters unified

Find a function declaration in the function body, assigns the value of the function body

supplement:

imply global imply a global variable: any variable and, if variable is undeclared on assignment, this variable becomes all global variables. (Undeclared variables within a function, into a window attribute)

Declare all global variables, all window properties

JS closure mechanism

what:

However, all the function returns to the inside of the outer closure will produce

why:

Each function is finished will only destroy their AO, and the scope chain took office and then there is the function of the internal function of a function of AO

how:

Closure would lead to the original scope chain does not release, will be a memory leak (memory or occupied)

where (in what used):

Achieve public variable (totalizer function), you can do the cache (storage structure),

Package can be achieved, properties privatization, modular development, prevent pollution of global variables


es3.0, es5.0, es6.0

what:

penGL ES OpenGL cut from custom come, in addition to many non absolutely necessary characteristics glBegin / glEnd, quadrilateral (GL_QUADS), polygons (GL_POLYGONS) and other complex entities and so on. It is a subset of the OpenGL 3D graphics API for mobile phones, PDA and game consoles and other embedded devices are designed.

es5.0 strict mode

"Use strict" // string, does not complain, backward compatibility

, Then part of the conflict currently most browsers + es3.0 new method based on the use of es5.0 is to use es5.0 otherwise it will use es3.0

1, es5.0 does not support arguments.callee, function.caller

2, es5.0 no longer compatible with () {} syntax

with (obj) {
  will change the scope chain - to use attribute of obj directly within the code - the loss of efficiency, consume a lot of resources  
}

3, undeclared variables es5.0 not allowed

4, es5.0 local window but this is no longer directed undefined
. 5, es5.0 reject duplicate properties and parameters, (the browser repeats attribute is not given)

6, es3.0 does not support eval

And let the difference between the var

ES6 added let command, used to declare local variables. Its usage is similar to var, but variables declared valid only in the block where the let command, and constrained temporary dead zone.

ES6 let's let js really have block-level scope, but also to this safer and more standardized way to go, though added a lot of constraints, but are designed to make us safer to use and write code.

==============================================================================

<–HTTP–>

HTTP process can be divided into four steps:

1) First, the client and the server needs to establish a connection. Just click on a hyperlink, HTTP work began.

2) After the connection is established, the client sends a request to the server, the request means the format: Uniform Resource Identifier (URL), protocol version number, the back is a MIME message includes a request modifiers, client information and possible content.

3) server upon request, to give the corresponding response information, the format of a status line comprising a protocol version number information, a success or error code back is a MIME information includes server information, entity information and possible content.

4) The client receives the information returned by the server on the user's screen displayed by the browser,

  1. The client then disconnected from the server.

https (HTTP + TLS + LLS) communicating advantages:

Key 1) generated by the client only to the client and the server can be obtained;

2) the encrypted data only to the client and the server to get the plaintext;

Communication 3) client to the server is safe.

HTTP / 1.0 and HTTP / 1.1 Comparative

HTTP / 1.0 each request need to establish a new TCP connection, the connection can not be reused.

HTTP / 1.1 is a new request may be established in the last connection to send the request over TCP connection can be reused. The advantage is to reduce the overhead repeated TCP three-way handshake, and improve efficiency.

In HTTP1.1 Request message header inside more than a Host field, HTTP1.0 do not have this field.

2.0 What is HTTP
HTTP / 2 (Hypertext Transfer Protocol version 2, originally named HTTP 2.0), it is the second major version of the HTTP protocol, the use of the World Wide Web. HTTP / 2 is the HTTP protocol Since 1999 HTTP 1.1 release of the first update is mainly based on SPDY protocol (TCP-based application layer protocol to minimize network latency Google developed to enhance the network speed, optimize network using the user's experience).

Compared with HTTP 1.1, including the main difference
HTTP / 2 rather than a binary format text
HTTP / 2 is fully multiplexed, instead of an orderly and blocks - just a parallel connection can be realized
using the header compression , HTTP / 2 reduces the overhead
HTTP2 support for server push

Why HTTP2.0 is binary?
Compared to like HTTP / 1.x protocol such as text, binary protocol analysis it more efficient, "the line" more compact, more importantly, fewer errors.

Why HTTP2.0 need multiplex?
HTTP / 1.x there is a problem called line blocking (head-of-line blocking) , it refers to a connection (connection) once only submit a request for more efficient, and more it will slow down. HTTP / 1.1 tried pipeline (PIPELINING) to solve this problem, but the effect is not over (the amount of data is large or slow response, will hinder the request came in behind him). Further, since the network medium (intermediary) and not well supported server line, resulting in difficult to deploy. And multiplexing (Multiplexing) can solve these problems, because it can simultaneously process a plurality of request and response messages; even a dopant together with another message during the transmission. So the client only needs a connection will be able to load a page.

5. Why do you need header compression?
Assume that a page has 80 resources need to load (the number of terms for today's Web is still very conservative), but each request has a 1400-byte header (the same is not rare, because there are things such as Cookie and references), to be at least 7-8 to go back "on-line" access to these headers. This does not include response time - it was just there to obtain from the client to the time they spent it. This is all due to the slow TCP startup , it will be based on known how many packages, but also to determine which packets get to go back - this obviously limits the number of packets of the first few that can be sent back and forth. In contrast, even a slight compression of the head may be requested only for those who can get a round trip - and sometimes even a bag on it. This cost can be saved , especially when you consider mobile client application time, even under favorable conditions, the general will see a few hundred milliseconds round-trip delay.

6. What are the benefits of server push is?
When a browser requests a page, the server will send back HTML, JavaScript on the server starts sending, before pictures and CSS, the server needs to wait for the browser parses HTML and request all embedded resources. Server push service through the "push" content to those it considers the client will need to cache clients in order to avoid the round-trip delay.

7, web hosting

Is the same WEB server, provide services for different site's domain name technology. Apache, Tomcat, etc. can achieve this functionality through configuration.

8, http proxy server's main features :

1) break their own IP access restrictions, access to foreign sites.

2) units or groups access to some internal resources, such as a university

5) Hide the real IP

4) improve access speed

The most common HTTP request header as follows:

The Accept : Browser acceptable MIME type;

The Charset-the Accept : Browser acceptable character sets;

-Encoding the Accept : browser capable of decoding data encoding, such as gzip. Servlet able to return after a gzip-encoded HTML pages to browsers support gzip. In many cases this can be reduced by 5 to 10 times of download time;

Language-the Accept : Browser desired types of language, when the server is able to provide more than one language version to use;

The Authorization : Authorization information, usually in the WWW-Authenticate response header transmitted to the server;

Connection : Indicates whether the need for persistent connections. If here the value Servlet see "Keep-Alive", or see the request using HTTP 1.1 (HTTP 1.1 persistent connections default), it can take advantage of persistent connections, when the page containing a plurality of elements (e.g. Applet, pictures), significantly reducing the time required to download. To achieve this, Servlet need to send a Content-Length header in the response, the easiest method is to achieve: first write the contents of ByteArrayOutputStream, and then calculate its size before the formal written content;

The Length-the Content : indicates the length of the message body of the request;

The cookie : This is one of the most important request header information;

The From : email address of the sender's request, used by some special Web client, the browser does not use it;

Host : the URL of the initial host and port;

Modified-Since-IF : only when the requested content at a specified date and modified only to return it, otherwise return 304 "Not Modified" response;

Pragma : designated "no-cache" value indicates that the server must return the document after a refresh, even if it is a proxy server and already have a local copy of the page;

Referer : contains a URL, the page of the user from accessing the page URL represents the current request.

Agent-the User : browser type, if the contents of the return Servlet browser type related to the value is useful;

Pixels-the UA *, ** Color-the UA, the UA-** the OS, the CPU * the UA-: request header by certain non-standard versions of IE is transmitted, it represents a screen size, color depth, and operating systems CPU type.

The most common HTTP response header shown below:

The Allow : that the server supports the request method (e.g., GET, POST, etc.);

Encoding-Content : document encoding (Encode) method. Only after decoding can get content types Content-Type header specified. Use gzip compressed files can significantly reduce the download time of HTML documents. Java's GZIPOutputStream gzip compression can be easily, but only Netscape and IE on Windows on Unix 4, IE 5 is supported it. Therefore, Servlet should be by looking at the Accept-Encoding header (ie request.getHeader ( "Accept-Encoding") ) to check whether the browser supports gzip, gzip compressed by the return HTML pages to browsers support gzip, return to normal as other browsers page;

The Length-Content : representing the content length. Only when this data is required if the browser is using a persistent HTTP connections. If you want to take advantage of persistent connections, you can write the output document ByteArrayOutputStram, after the completion of view of its size, and then put that value into the Content-Length header, and finally sent content via byteArrayStream.writeTo (response.getOutputStream ();

Type-Content : indicates that the following documents belong to what MIME type. Servlet default is text / plain, but usually need to explicitly specify text / html. Since often provided Content-Type, thus providing a dedicated HttpServletResponse method setContentTyep. You may be configured in the web.xml file extension and MIME type corresponding relationship;

DATE : current GMT time. You can set this setDateHeader head to avoid the trouble of converting time formats;

The Expires : specify what should be considered when the document has expired, so that it is no longer the cache.

Modified-Last : The last time the document changes. Customers can provide through the If-Modified-Since request header a date, the request will be considered as a condition GET, only changes to documents later than the specified time will be returned, otherwise state a 304 (Not Modified). Last-Modified setDateHeader method can also be provided;

LOCATION : indicates that the client should go to extract the document. Location usually not directly, but through sendRedirect HttpServletResponse method, the method and set status code 302;

Refresh : represents the browser should refresh the document after how much time, in seconds. In addition to refreshing addition to the current document, you can also setHeader ( "Refresh", "5 ; URL = http: // host / path") let the browser reads the specified page. Note that this feature is typically achieved by setting the HTML page HEAD area, this is because the automatic refresh or redirect those HTML authors can not use CGI or Servlet is very important. However, Servlet, the head directly Refresh easier. Note Refresh is the meaning of "after N seconds or refresh the page to access the specified page" instead of "every N seconds or refresh the page to access the specified page." Therefore, the continuous refresh required each time to send a Refresh header, and send 204 status code, you can prevent the browser continues to refresh, use the Refresh whether or head. Note Refresh header is not part of the official HTTP 1.1 specification, but rather an extension, but Netscape and IE support it.

==============================================================================

<- front-end security ->

Interviewer: Are you learn network security bars, these very familiar with it?

Me: ... not ah

About CSRF attacks

CSRF (Cross-site request forgery), Chinese name: cross-site request forgery, also called: one click attack / session riding, abbreviated: CSRF / XSRF. CSRF attacker after the user has logged in the destination site, an attacker convince a user to visit a page, using the user's trust in the target site, a user initiates a request forgery user actions on the target page website in the attack, to attack the purpose.

Cross-domain

Domain where the domain of the current resource request initiated by the request is directed not at the same time of the request. Domain here refers to such a concept: We believe that if the "protocol + domain + port number" are the same, then that is the same domain.
1) Resource Jump: A link to be redirected, form submission
2.) embedded resources: link script img frame like dom labels, as well as the style background: url (), @ font -face () and other documents outside the chain
3 .) script requests: js initiated ajax request, cross-domain operations dom and js objects etc.

Same Origin Policy (Same origin policy)

Is a convention, it is the browser most central and most basic security features. For security reasons, restrict cross-source browser HTTP request originated from JS script. For example, XMLHttpRequest and Fetch API follows the same-origin policy. Domain name, protocol, port there is not a different origin, the same three caught, these two sites is homologous
1) DOM level of the same origin policy: limits from different sources "Document" object or JS script for the current read or set some properties "document" object
2) Cookie and XMLHttprequest levels of the same origin policy: Ajax prohibit direct to initiate cross-domain HTTP request (you can actually send the request, the result was intercepted browser, does not display), while Ajax source request can not carry this site different Cookie.
3) non-absoluteness of the same origin policy:

Security risks

Due to limitations of the same origin policy, cross-domain ajax request will not bring the cookie, however, script / iframe / img other labels is to support cross-domain, so when the request will bring the cookie.

Prevention

For web sites do not use persistent authorization method (e.g., cookie or HTTP authorization, authorization method instantaneous switching)

Double encryption

Each needs to verify the identity of an explicit request to be on the Strip token value

XSS vulnerabilities Profile

Cross-site scripting attack is a malicious attacker to insert malicious Web page using Script code, when a user browsing the page, embedded inside a Web Script code is executed, so as to achieve the purpose of malicious users.
xss vulnerability is usually a function of the output through the output php javascript code to html page, so xss vulnerabilities key performed by the user is looking for a local browser parameters unfiltered output function.
Common output functions are:

echo printf print print_r sprintf die var-dump var_export.

What is SQL injection?

SQL injection (SQLi) is an injection attacks ,, can execute malicious SQL statements. It does this by arbitrary SQL code into a database query, allow an attacker to take complete control of the database server behind a Web application. An attacker can use the SQL injection vulnerability to bypass application security measures; could bypass the Web page or Web application identity authentication and authorization, and retrieve the contents of an entire SQL database; SQL injection can also be used to add, modify and delete database recording.

==============================================================================

<–get 、post、 status code–>

GET and POST method with the following differences:

GET way: by way of an entity to obtain information resource specified by the request URI

POST method: used to issue to the destination server request to accept the entity enclosed in the request, and treat it as a new subordinate of the request queue in the request URI specified resource

(1) In the client, the data submitted by the Get URL manner, data can be seen in the URL; the POST mode, data is placed in the HTML HEADER submitted.

Data (2) GET submission can only have a maximum of 1024 bytes, while POST is no such restriction.

(3) security issues. As in (1) mentioned that the use of Get, the parameters will be displayed in the address bar, and the Post will not. So, if these data are Chinese data and non-sensitive data, then use the get; if the user input data is not Chinese characters and contain sensitive data, or use the post as well.

GET and POST there is a significant difference,

Simply put: GET generate a TCP packet; POST generates two TCP packets.

It said long: the GET request, the browser will http header and data sent together, the server response 200 (return data);

For POST, the browser transmits the first header, the server response 100 continue, the browser then transmits data, in response to the server 200 ok (return data).

HTTP status code

(English: HTTP Status Code) is a 3-digit code to indicate the page is a hypertext transfer protocol server response status. The first digit of all state codes represents one of the five states of the response.

Here Insert Picture Description

Here Insert Picture Description

Here Insert Picture Description

==============================================================================

<- Computer Network ->

Interviewer: Are you learn it the network, these very familiar with it?

Me: ... this to me, I know

Interviewer: Then do not ask

I:…

What is DNS resolution:

Most network communication is based on TCP / IP, and TCP / IP is based on IP address, IP address can only identify as "202.96.134.133" like the computer to communicate on the network and fail to recognize the domain name, and when to request resources through URL, URL of the domain name resolved to an IP address needs to establish a connection with the remote host, how to resolve a domain name into an IP address belongs to the scope of work of DNS resolution.

img

DNS records are divided into :

A records, MX records, CNAME records, NS records, TXT records

  1. A record: A for the Address, to specify the IP address corresponding to the domain name, A DNS record to allow a plurality of IP addresses, but not a domain name to multiple IP.

  2. MX record: MX is representative of the Mail Exchage, is a mailbox server in a domain name can point their Mail Server

  3. CNAME record: CNAME refers to the Canonical Name, is an alias to resolve, you can specify the domain name resolves to the other domain names, domain name and other domain names is to specify an alias, the entire resolution process called alias resolution.

  4. NS record: a domain name is to specify a particular DNS server to resolve.

  5. TXT record: setting a specific explanation for a host name or domain name.

TCP three-way handshake

img

==============================================================================

<- Operating Systems ->

I did not expect Examination

The difference between processes and threads

  1. A thread is the smallest unit of program execution, and the process is the smallest unit of the operating system of allocating resources;

  2. A process consisting of one or more threads, the thread is a different process to implement the road code

  3. Between processes independent of each other, but the program memory space shared between threads in the same process (including code segments, data sets, stack, etc.) and some of the process-level resources (such as open file and channel

Number, etc.), threads within a process is not visible in the other process;

  1. Scheduling and switching: thread context switching is much faster than the process context switch

    Why not use multi-process but the use of multiple threads?

    Cheap thread, the thread start faster, faster exit, the impact on system resources is relatively small. Thread each other and share the majority of core object (File Handle) ownership

    If you use multiple processes, however unpredictable and difficult test

==============================================================================

<- Miscellaneous ->

Front-end performance optimization can be divided into two categories namely,

Page level optimization contains a number of http requests and inline script location optimization,

DOM code level optimization comprises optimization operation, CSS selectors image optimization and optimization

Front and rear ends FBI

After a good agreement api backend interface to the front, synchronous development, there is no data to support front-end, resulting in a blockage.

This time only the tip generally false data (point professional called mock data, _ ) can be mapped between good api path and data definitions ideally. But this is the first question there.

Whether the front need to write local data? If you write local data, then it means to write a local relative path, that if you want to modify the interface to the last of it? (If the background that developed slowly, and finally how many interfaces you want to modify it.

mock data, there are many methods, gulp, webpack, fekit, more distal automated build tool.
Absolute path to it, just do a host mapping ok.

Front-end framework

learning

Published 40 original articles · won praise 2 · Views 2386

Guess you like

Origin blog.csdn.net/qq_42404383/article/details/105073715