1. The introduction

Students graduating from the class of 2022 should take advantage of this opportunity if they want to have internship experience on their resumes. Recently, my classmates have received interviews one after another, but MY level is limited, which is very contradictory. But always face it. So first to prepare a set of ‘connect hair’, for self-study and everyone reference.

  • Take an interview
  • Change: change knowledge
  • Hair: find the problem

2. Injection of chicken blood

I’m sure many of you, like me, feel poorly prepared when you read online interview questions, read unfamiliar but frequently tested knowledge points, see projects you’ve failed at, etc. This may be true, but you need to dare to interview, because it can give you something that you would not be able to learn on your own.

  • And most importantly,In constructionInterview after interview can improve your mental strength and ability to resist blows, just like falling in love. When you first fall in love, contact with each other will make you excited and nervous. But when you get married, you feel flat. After a time of torture, gradually adapt to the heart let youA more soberCan think of moreShould not be forgottenThe answer to. If the quality of mind is really low, you can do some normal things will feel nervous exercise. Don’t be too blind. The earlier the psychological construction, the better
  • ascensionPresentation skillsThis can include the way you communicate with the interviewer, the way you answer questions, the words you use, tone, speed, articulation, etc. First of all,Polite to mention itSpeak in a steady, normal, clear and standard pace. Ask your interviewer after the first stage of your introduction if there were any areas of your presentation that upset him or her. Language appropriate life, to create a good atmosphere. When you answer a question, first of allMust be honestWe should not prevaricate. Points, pointsFamiliarity and importanceIn order and in order. At the end of the interview, you canAsk the interviewerAdvice on your presentation. Your ability to express yourself should improve during multiple interviews.
  • Fill in the gaps and find the hot spots: Yes, you may not need an interview to know that your knowledge network is broken, but the interview experience will show you your real holes. Not only will it provide you with terms you didn’t know you had before, but it may also cause you to lose your dreams in areas of yourself that you were quite confident about. The interview is about discovering the new world, about cutting corners on the ground on which you stand. When you come out of the interview, summarize. These lessons may be etched into your DNA, and the most memorable ones will last longer. Only the summary will let you experience a kind of company, a kind of knowledge ‘hot’
  • Motivation: The first thing to ask yourself is,Are you really studying hard? Do your efforts have any effect? The interview can really kick your ass and embarrass you. Push will drive you further. (Stop cursing, I’m numb😭)

Here is a methodology to share: the McKinsey Method of Learning: State the question (is this ready?) -> Analyze problems (lack of knowledge, lack of ability) -> remove all non-key issues (love, games, unnecessary social, psychological fear) -> review (summarize after the interview) **

3. Change: ‘five’

This set of interview questions is I accidentally learned, a brief summary.

1. Write several ways to track users in a session

At first, I was puzzled by this question. It seemed that I had never heard it before, and I didn’t even know what conversation was. Remember the basic concepts.

  1. A session is when a client connects to a server and sends a request and the server responds to the requestThe whole process of. A total ofFour kinds ofCommon methods.
  2. The first kind ofThe URL rewrite: Adds an additional session ID to the end of the URL to identify the session
  3. The second,Hide form fields: Adds the session ID to the HTML form element for submission to the server
  4. The third kind ofCookieCookie Stores user information, wraps cookies each time a request is sent, and identifies the user
  5. A fourthsession: Each user has a different session. The server creates a session object, generates a sessionID to identify the session object, and sends the sessionID in a Cookie to the client
  • Extensions: This may lead to several attributes of cookies and network security, browser four storage differences, browser caching and other issues. Check out the previous articles.
2. There are several HTTP methods and their meanings.

Very many, may not remember all, classification, as far as possible to simplify the benefit, according to English guess Chinese, some can compare.

Getting a Resource Class

  • GET: Requests the page resource and returns the body
  • POST:With the data(for example, parameters) request, returnTo deal withResource information of
  • HEAD: request page that returns the response bodyThe first

Operation:

  • PUT: Data sent from the client to the serverreplaceThe contents of the specified URL
  • DELETE: requests the server to DELETE the specified page
  • CONNECT: Let the server be the userThe agent, visit other pages (VPN). Don’t often

Information:

  • OPTIONS: allows clients to view server performance
  • TRACE: Protocol debugging method that causes the server to return as-is anything requested by any client.

Extension: This may lead to the similarities and differences between POST and GET, and issues related to the Http protocol.

3. What are the meanings of User-Agent and Referer in HTTP request packets

The meaning and function of the message field are often examined

  1. Referer: A request header in the HTTP protocol that tells the server where the resource came from. For example, if you click on a page from a Baidu search result, the url in the HTTP request is the address of the search result page. If your blog refers to an image from somewhere else, the HTTP request for that image will refer to the address of your blog.

  2. User Agent: a part of the Http protocol and a component of the header domain. User Agent is also referred to as UA. It is a special string header that provides information about the type and version of the browser you are using, the operating system and version, the browser kernel, and so on

Extension: HTTP request header field interpretation

4. How to optimize website performance

Too many, too many, each detailed introduction is difficult, for this kind of problem, to design baggage, attract the attention of the interviewer, deepen the impression of you. Introduce something simple or unclear, and when he asks further, elaborate on what you know. Learn to categorize while memorizing. This is just a preliminary introduction.

  • Reduce requests and use caching classes
  1. Reduce HTTP requests: reduceHTTP requests and the number of concurrent requests, the main means ismergeCSS, merge javascript, merge images. Combine the javascript and CSS required for a single browser access into a single file so that the browser only needs to request it once.
  2. useThe local storeCaching: cookies, LocalStorage, SessionStroage, IndexDB. You can see the difference in one of my articles
  3. Set up HTTP caching properly.Strong cacheAdd Expires and cache-control headers to the response returned by the Web server,Negotiate the cache: Use last-modified, if-modified-since and ETag, if-none-match to manage the headers respectively.
  • Compression type
  1. Enable compression: Compress files on the server and decompress files on the browser, reducing the amount of data to be transmitted. If possible, combine external scripts and styles into one. Webpack is a typical front-end tool
  • Class pictures
  1. CSS Sprites, Base64 format: The Sprite image uses an image, capturing the various parts of the image to use. Converting the image format to Base64 can significantly reduce the number of image bytes
  2. Lazy loading (key, may alsohandwritten) : For images, only the first screen can be loaded when the page is loaded, and subsequent images can be loaded when the user continues scrolling. The main idea is that instead of using the SRC attribute of img directly, useData - url in the SRC, judge the picture isNo appears in Windows.Listen to scroll bar, appear to letsrc=data-srcFor detailed explanation, digging gold search, find their own understanding can.For example,: @ Clouds dancing with the wind
let imgList=[...document.querySelectorAll('img')] let length =imgList.length; const imgLazyLoad=function(){ let count =0; return (function (){ let deleteIndexList=[]; imgList.forEach((img,index)=>{ let rect=img.getBoundingClientRect() if(rect.top<window.innerHeight) { img.src=img.data-src deleteIndexList.puah(index) count++ if(count===length) { document.removeEventListener('scroll',imgLazyLoad) } } }) imgList=imgList.filter((img,index)=>{ ! deleteIndexList.includes(index) }) }) }Copy the code
  • Perform class
  1. CSS is placed at the top of the page, javascript is placed at the bottom of the page: priority page rendering,Avoid JS clogging
  2. Minimize the use of external scripts, reduceThe DNS queryTime (really hard to classify)

Expansion: the sea is wide by the fish, the sky is high as birds fly…

5. The display, float, the relationship between the position

When I first saw it, I didn’t think they could be related to each other, and then I thought they could be similar, or they could be repelled. Right

  1. The display attribute specifies the box model used by a DOM element. The type of box the element should generate; The float property defines in which direction the element floats. Floating elements generate a block-level box; The position attribute indicates how an element is positioned

  2. CSS box (box model) model everything for box, no display, no float and the position, the display: none, float, the position of failure

  3. Float and positiond mutex, the display of none, position: absolute | | fixed (absolute positioning), flex, display the value of the attribute automatically calculate according to the following table. The position of the box depends on the properties top, right, bottom, left, and box’s container

  • Display,position is fixed and does not affect float, the value of float and whether the element is root

  1. Display is not none, position is not absolute, fixed, float is not none, then box is floating

  2. Display is not none, position is not absolute, fixed, float is none. If the element is the root element, display is calculated according to the following table.

  3. Display is not none, position is not absolute, fixed,float is none, is not the root element, box is displayed according to the specified display property value.

Conversion table (remember a little bit):

The inline – table – > by Tate inlene,

Table – * * – * * – > block

Extension: Box model @ clack good author, examples and comparisons of block-level elements and interlinked elements; Flex: 1, 1, 3 @lovi; The way to clear the float

6. What are cross-domain problems and how to solve them

Front-end network knowledge about cross-domain issues is very common and is a focus.

1. Prerequisites for spanning: The same Origin policy means that the protocol, domain name, and port are the same. Cross-domain meaning: Affected by the browser’s same-origin policy, non-same-origin scripts cannot operate objects under other sources. To manipulate objects from another source, you need to cross domains.

Solution:

  1. JSONP takes advantage of the SRC attribute of some HTML tags and adds the parameter callback=*** * to the requested URL, which is the name of the handler that receives the resource text returned by the server wrapped in callback{}, which processes the text into code.

  2. Cors: Cross-origin resource sharing; The key to CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible.

  • Simple requests: Head, GET, POST. When the browser realizes that the cross-source AJAX request is simple, it automatically adds one to the headerOrigin field. The Origin field indicates the source from which the request came. Based on this value, the server decides whether to approve the request or not.
  • Complex requests: PUT and DELETE In addition to the Origin field, the precheck request header contains two special fields.Access-Control-Request-Method, which lists which HTTP methods are used for browser CORS requests;Access-Control-Request-HeadersTo specify the additional header fields that the browser CORS request will send.

  1. The HTML 5 postMessage

  2. window.name

  3. location.hash

Extension: recommended reading @jingda beauty classmate, 360 big guy, can pay more attention to 😏

4. Summarize your weaknesses

  • The upper part of HTTP related knowledge is more, computer network and JS foundation is the pillar of the front end, mine is obviously not strong enough, need to deepen learning
  • CSS is not much of a write-down, watch flex, translate,display, clear float, etc.
  • The foundation is still very weak, some problems need to query a lot of information, knowledge breadth is not enough.

In a word: learn. N words: as long as you learn not to die, learn to die.

But I’m still afraid of the interview!! What to do.

The next chapter focuses on the understanding of the VUE technology stack. Interested partners can click a like and follow. In a few days to meet

I am a junior, looking for an internship, and your mutual encouragement. I have a book, hope to correct.

Whisper: the students who follow me for a long time may know that I like TS very much. Those who like TS but have not bought a new one can communicate privately