In the interview process of every front-end job candidate, there must have been cases where the interviewer was asked about the difficulties in the project, but could not answer. In order to allow everyone to prepare more adequately before the front-end interview, the editor has prepared some easily overlooked and difficult front-end interview questions, hoping to help you complete the job search more smoothly and find your own satisfactory job.
In the front-end interview, what are the difficulties in the project?
1. How to realize the flow layout and how to realize the responsive layout?
Flow layout: also called fluid, when the space of the upper line is not enough to accommodate the new TextView, the space of the next line is opened. Scenario: It is mainly used in scenarios such as keyword search or popular tags; it is mainly adapted and adjusted according to the width of the page elements according to the screen resolution, but the overall layout remains unchanged. The width is defined by %, and the height is mostly fixed by px , Can be adjusted according to the real-time size of the visible area and the parent element to adapt to various resolutions as much as possible.
Responsive layout: mainly to achieve different display methods for browsing web pages on terminals with different screen resolutions. Through responsive design, the website can have a better browsing and reading experience on mobile phones and tablets; first set meta tags and query through media To set the style Media Queries, and then set a variety of trying width.
2. What is "use strict" and what are the advantages and disadvantages?
ECMAscript 5 adds a second mode of operation: "strict mode". As the name suggests, this mode makes Javascript run under stricter conditions.
Benefits: Eliminate some unreasonable and imprecise aspects of Javascript syntax, reduce some weird behaviors; eliminate some unsafe aspects of code running, and ensure the safety of code running; improve the efficiency of the compiler and increase the running speed; it is a new version of the future Javascript sets the stage. Note: After testing, IE6, 7, 8, 9 do not support strict mode.
Disadvantages: Now the JS of the website will be compressed, some files use strict mode, while others do not. At this time, these files were originally in strict mode. After they were merged, the string reached the middle of the file. Not only was there no indication of strict mode, but bytes were wasted after compression.
3. Introduce websocket.
Websocket is a network communication protocol. It is a protocol that HTML5 began to provide for full-duplex communication on a single TCP connection. Compared with the http protocol, the http protocol is a stateless, connectionless, single The communication request can only be initiated by the client, and the server responds to the request.
The http protocol cannot enable the server to actively initiate a message to the client. The Websocket connection allows full-duplex communication between the client and the server, so that either party can push data to the other end through the established connection. WebSocket only needs to establish a connection once, and it can stay connected all the time.
4. How does jquery bind events, there are several types and differences?
The methods for jquery to bind events are: bind(), live(), delegate() and on(), like bind(), live(), delegate(), which have been removed with the update of the jquery version. Note: bind() was removed after version 3.0. Now on() is the most used one. On() can bind a single event, multiple events, or delegate events.
Difference: The bind() event binding is only valid for the selected element on the current page. There is no way to achieve the effect for the dynamically created element bind() event, while the other three can.
5. What are the SEO solutions for single-page applications?
Reason: Compared with traditional pages, single-page applications need to download the frame (data/template) before starting to load the data.
Program:
Server-side rendering of the first screen (SSR server-side download based on vue); let the server render the data of the first screen on the page; compile and merge the basic CSS template js; reduce the number of requests, use the gulp tool to package the css into A file, js is packaged into a file, the template is packaged into a js file ($templateCache) can be packaged together with the js file (prompting the template JS file and JS file to request one-time request); the code is divided into blocks, if the block is not needed on the first screen , There is no need to load; routing components are lazily loaded.
When building an application by packaging, the Javascript package becomes very large, affecting page loading. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the routes are accessed, it will be more efficient; if there are a large number of images, use lazy loading.
The above is the difficulty of the front-end interview being asked about the project.