Introduction: A programmer who graduated in 16 years, has been working in a company in Shanghai after graduation, the group atmosphere and colleagues are very nice, but the business line development is not good, after coming back, was cut, do not want to transfer to other departments, so join the tide of looking for work. This job hunting experience is very important to me. It makes me suddenly aware of many technical problems in the process of preparation, and I want to record this experience.

Most of them were invested in Boss Zhipin Plus internal push (internal push is really reliable, so you can know the news in advance and avoid going to marginal departments), and I didn’t invest in many companies. At the beginning, I went to big factories. Now the company is not big factories and is divided into groups according to business lines, so we developed a product with several team members. I was always in charge of the front end, so I always wanted to try dachang.

About XXXXXXXXXXX (interview company has been deleted, go to which are moving the stone, not much difference), is also from the beginning of the interview speech is a little bit not confident, to the back of the confidence to talk to the interviewer, mentality changed a lot.

I forgot how long the preparation took. Actually, the company doesn’t work overtime at present, but I stayed until 8 or 9 o ‘clock in the evening to read and write the questions. I even finished reading the offer of sword finger THAT I wanted to read before, and followed it if I didn’t understand. Reached the beginning of the algorithm is not thinking to the algorithm is no longer afraid to know where to start from the level, many companies interview algorithm is not so high, especially the front end, but also to their own higher requirements.

Because I just came back from a trip, I am not quite clear about the interview topic of the specific company. The following are my interview contents, hoping to be helpful to others:

css

1. Three-column layout

  • float
  • bfc (set middle area overflow is hidden)
  • position: absolute
  • Twin wing layout
  • flex
  • table

2. Center vertically

Personally, I feel this is a lot of questions, I generally answer the following:

  • line-height: heightSome people were asked if the value is equal to the value set by height, but they didn’t answer well. Back testing found that it is related to the box model, requiring computed height
  • absolute + transformThe question of why transform should be used for center (why not marginLeft/Top) is a redraw and rearrange.
  • flex + align-items: centerI went through the Flex container and every CSS property of a Flex project and wrote a little demo.

3. The box model

4. BFC

  • concept
  • How to trigger
  • How to apply

5. CSS preprocessor

General answer variable/nested/automatic prefix/conditional statement/loop statement

I have always appreciated zhang Xinxu’s thorough research on CSS, but in summary, CSS is generally not very deep, the industry’s concentration on CSS is not enough, including I personally did not invest a lot of time and energy in CSS, if there is a deeper understanding of course it would be better.

JS

1. The prototype

In fact, I was studying advanced programming when I graduated, and I was still taking this test three years later.

  • Closure/scope/this points to
  • Implementation inheritance
  • Es5 implementation class
  • Es5 implement new

2. var let const

Let /const also has variable declaration enhancement, but does not initialize allocated memory. A variable has three operations: declare (mention the top of scope), initialize (assign default values), and assign (continue to assign values).

  • varThe variable declaration is initially promoted, and then initialized to undefined, and then assigned when the code executes on that line.
  • letThe first variable declaration is promoted, and then the memory allocation is not initialized, and the code executes to that line to initialize, and then continues to operate on the variable to assign. An error is reported because there is no initial allocation of memory. This is a temporary dead zone.
  • constThere are only declarations and initializations, no assignment operations, so it is immutable.

Const only ensures that the referenced memory address is unchanged, not the internal data structure. Make sure it is not replaced by other types of values.

3. Realize the promise

When I faced TX, I realized the promise by hand, because I had read bluebird’s source code, so it was ok for me. Stop me in the middle of it, and I’ll explain it as I go along, and I’ll start by putting the frame together, for example

class Promise {
    constructor(executor) {
        // Set the property status Value resolveCbs rejectCbs
    }
    then(onResolved, onRejected) {}
    catch (cb) {
        return this.then(null, cb)
    }
}
Copy the code

Fill it in slowly. This will initially give the impression that you are on the right track and know the promise syntax.

4. Promise chain

Promises = [], for example, promises must be completed asynchronously before going to the next task. I wrote two scenarios:

/ / 1.
const template = Promise.resolve();
promises.forEach((p) = > {
    template = template.then(p)
})
// 2
Copy the code

Personally, I feel that I have asked many questions about promise and async/await, including the popular questions about printing order and the problem of catching exceptions. As long as I am very familiar with the syntax and a little understanding of implementation details, there is no problem.

5. Implement the bind

6. Implement eventEmitter

As with the Promise class, build a framework:

class EventEmitter {
    constructor() {
        this.events = {} } emit (eventName, args) {} on (eventName, callback) {} off (eventName, callback?) {}}Copy the code

I have written about event system before, but I did not consider method like once, which is also what the interviewer said needs to be supplemented a little bit.

7. Handwrite Proxy/object.defineProperty

8. Event delegation

9. Event Loop

JS execution is single threaded and is based on event loops. The event cycle can be roughly divided into the following steps:

(1) All synchronization tasks are executed on the main thread, forming an execution stack.

(2) Besides the main thread, there is also a “task queue”. Whenever an asynchronous task has a result, an event is placed in the “task queue”.

(3) Once all synchronization tasks in the “execution stack” are completed, the system reads the “task queue” to see what events are in it. Those corresponding asynchronous tasks then end the wait state, enter the execution stack, and start executing.

(4) The main thread repeats step 3 above.

Basically, the event loop will be asked every time, which generally means the running process of micro task or macro task. The above is a relatively written answer, and I don’t remember myself.

10. Webpack

  • The difference between loader plugin and loader plugin is a bit surprising when asked at first.
  • tree-shakingThe working principle of
  • code splittingWhat plug-ins are used
  • How to speed up webPack components
    • usingDllPluginPrecompile the resource module
    • useHappypackSpeed up code building

I’ve written a lot of small projects, so I’ve configured webpack a lot, from V2 to V4, but WebPack generally doesn’t ask much.

11. Front-end performance is improved

Generally, I will answer the questions in the following aspects, which will be extended to network and cache:

Server:

  • Use the CDN
  • Reduce unnecessary data returns
  • Using gzip
  • Caching (etag/Expires…)

Content:

  • Reduce HTTP requests (CSS Sprites/Inline Image)
  • Different resources in different domains (http1.1)
  • Deferred loading/deferred execution (download now, defer execution [before DOMContentLoaded]defer)/preload (preload)
    • Async, a Boolean property that indicates whether the browser is allowed to execute the script asynchronously. This property has no effect on inline scripts (that is, scripts without the SRC attribute).
    • deferThis Boolean property is set to inform the browser that the script will fire when the document is parsedDOMContentLoadedExecute before event.
  • Simplified HTML structure
  • Compressing resources

css:

  • in head
  • Fewer levels (I was asked before whether there was any statistical analysis of the actual impact of more or less levels on performance. In fact, I have not done such a study, so I know the conclusion but not the process.)

js:

  • before
  • Reduce DOM access (whether JS code placed inside the body can access the body tag)

webpack:

  • Tree Shaking removes unused code
  • Extract public package, have been asked
  • Split modules and load them on demand
  • Optimize the image and use Base64 instead of small images
  • file name with hash (etag)

12. Vue

Because I mainly write Vue, I only write Vue on my resume instead of react and other frameworks. I am usually asked about Vue.

  • Parent-child component communication
  • The life cycle
  • Data response (data hijacking) The implementation of a data response consists of two parts:Watcher ε’Œ Dependency collector (Dep), its core isdefinePropertyThis method, it overrides the property’sget 与 setMethod to complete listening data changes. Familiarity with the principles of how things work, from parsing to collecting dependencies to notification, is generally required. I probably understand, followed read some source code, but still did not speak very clearly, unfortunately did not perform well.
  • Virtual DOM, DOM diff
  • nextTick

JS is certainly the focus of the inspection part, object, inheritance as long as read through the elevation and write a few demo to master the details, ES6 I have always turned ruan Yifeng wrote ECMAScript 6 entry, Vue words first master the content of the official website, and then read some blogs or directly on the source code is also possible.

HTTP

1. Cross domain

Generally, I will say CORS and JSONP. CORS will distinguish simple requests from non-simple requests, and then explain the meaning of options requests.

2. HTTP message

Request line + header + blank line + body = headers + headers + body = headers + header + blank line + body = headers + header + blank line + body = headers + header + blank line + body = headers + header + blank line + body I hope someone knows and can tell me. But maybe I misheard the question. After all, it was a telephone interview.

3. cookie session

SessionStorage, localStorage, cookie

4. From entering the URL to loading the page

Generally, I will answer most of the steps of the link. According to my understanding, the points I was asked are:

  • Caching, strong caching, protocol caching, generally asked about 304 performance, and then extended to 301 302 difference, I will say 307 difference.
  • Three-way handshake
  • How HTTPS works
  • How CDN works, and how cache refresh works.
  • Steps for browser rendering
  • The concept of redrawing and rearranging, and best practices. I have always known that transform should be used instead of margin, but I was not quite clear when I was asked about the principle. I checked the data and found that it is GPU acceleration for translate3D elements.
  • Blocking is asked because JS is single-threaded, extending to properties such as async defer.
  • What does status code have? We design interfaces in strict accordance with restful specifications, so I always think this question is very simple, but I have been asked many times. I remember the written test of Qutoutiao has it. I will classify the ones I have used according to 2XX (200, 201, 204, 206) 3XX (301, 302, 304, 307) 4XX (400, 401, 403, 405) 5XX (500, 502, 504). I write about Rails occasionally, so I am familiar with Posting a list of Rails status codes
  • DNS Resolution Process

5. XSS, CSRF

  • XSS injection attack
    • escape
  • csrf (cross site request forgery)
    • Get requests have no side effects
    • cookie httponly
    • Cors (Origin not *)

I know more about security by reading this article. I recommend it.

6. sse( server sent event)

Since I wrote a plug-in related to SSE, I was asked how to use the API of EventSource.

A backend is asked to access an address from the browser, from the network TCP/IP protocol, chat to operating system IO, memory management, process management and file management, When it comes to load balancing, traffic limiting algorithms, and distributed transactions, the front end is really much simpler in comparison, but a lot of knowledge is definitely useful.

algorithm

Algorithms are generally not difficult to test, but basically every interview will be tested, I remember being tested algorithm questions are:

  • Hierarchy traverses a binary tree (this is the only reference to the title on the offer, the simplest πŸ˜‚)
  • Find the longest and most repeated substring in the string

If I want to list a lot of them, I have forgotten them. I feel that the title referring to offer will rarely appear directly, and I will not directly ask how to write a certain sorting algorithm. This is my personal experience, just for reference. It’s useful to brush them.

Git

  • Basic operation

  • git rebase vs git merge

    • git merge
      • Record merge actions and most of the time this merge action is junk information
      • The original COMMIT ID is not changed
      • Conflicts are resolved only once
      • The branches don’t look neat, but you can see the order of the merge
      • The actual COMMIT is recorded, including details for each branch
    • git rebase
      • Change the location of current branch branch out
      • Get a more concise project history
      • Each COMMIT requires conflict resolution
      • Change all commit ids

    I did not answer many questions when I answered, which was the summary at the end. I deeply found the necessity of daily summaries. I always thought I had a good understanding of them, but I did not find some points clear until the summary.

  • Modify the commit message

No deep ask, just a little more basic operation. If you’re developing with Git on a daily basis, it’s generally a breeze.


Summary: The above are my interview questions, not complete interview preparation content, I also forgot a lot of questions, if I do not write down, I will probably forget more. Are generally ask specific technical issues and project experience, because I do here is technology more than business, and now I was the only one responsible for all the front end of the content, so very familiar with each project, suggest to write on your resume projects, to avoid ambiguity when asked awkward scene.

As for why the title “cold winter” add double quotation marks, I think the explanation for the cold winter is individual rather than entirely environment influence, a gut feeling, every company is short of people, hung up the goose plant HR to me after the interview evaluation and help me to vote for the other departments again, just contact me during my travel, already answered the offer can’t continue to surface.

My experience of looking for a job this time is generally like this. It is not bad or pleasant, and there is a lot of pressure in the process. However, it is just like this when changing a job.

This is the first blog I wrote, it has received some attention, just because I read some sutras in Juejin, so I want to write another blog, actually I don’t have the habit of writing blog, so I can follow it. Some front-end technology exchange is welcome.