preface

I believe that a lot of people will have a dream into Dachang, this article will talk about the front end of Ali Tao Department “dream”. There are a total of 5 +HR faces, and the end will separately talk about the prospect of the future front end. A good interview is also an opportunity to make progress. It allows you to dig deeper into questions you might not understand. It also exposes your pain points, which can be rewarding.

One side

This side mainly asks the basic part, some questions I will take the hint

  • TCP 3 handshakes / 4 waves/waits for 2MSL meaning/establishes connection but client fails
  • TCP slow start/congestion control, fast retransmission/fast recovery
  • TCP UDP QUIC(QUIC is the underlying protocol of HTTP3)
  • What is new in HTTP2 compared to HTTP1.1, mainly channel multiplexing and the like

  • The rendering process in the browser, notice it’s just the rendering process, from parsing the DOM tree to displaying it on the screen

    Mainly tokenize/build trees/collect stylesheets/lay out render trees/draw lists/rasterize/draw blocks /… These processes, recommended reading how the browser works: Behind the scenes of the new web browser

  • Strong cache and negotiated cache, mainly discussed in the nextE-TagandLast-ModifiedAnd the corresponding identification, strong caching scenarios and negotiated caching scenarios, such asindex.htmlWhich one should I use?
  • Horizontal and vertical center of CSS
  • Mobile 1px, old problem
  • We use Git Flow, and we can distinguish Master branch from Dev branch. I mentioned a scene where Git Flow cannot handle, that is, a feature has not yet been incorporated into Master. However, a later feature has already been tested and will be integrated into the main body. How to deal with this?
  • React: New and Old Lifecycle Issues, Why Discard the Old Version of (Constraint developersAs well asFiberArchitecture may interrupt), what are the features of the new version (getDerivedStateFromProps(nextProps, prevState), this method is static,That means you can’t get this in there, and the input parameter isprevStateThat’s a guaranteestateandpropsThere is also what I think is very funnygetDerivedStateFromErrorsandcomponentDidCatchCollaboration.

  • ShouldComponentUpdate Shalloweuqal ShouldComponentUpdate Shalloweuqal ShouldComponentUpdate Shalloweuqal ShouldComponentUpdate Shalloweuqal ShouldComponentUpdate

    const hasOwn = Object.prototype.hasOwnProperty; function is(x, y) { if (x === y) { return x ! == 0 || y ! == 0 || 1 / x === 1 / y; } else { return x ! == x && y ! == y; } } export default function shallowEqual(objA, objB) { if (is(objA, objB)) return true; if ( typeof objA ! == "object" || objA === null || typeof objB ! == "object" || objB === null ) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length ! == keysB.length) return false; for (let i = 0; i < keysA.length; i++) { if (! hasOwn.call(objB, keysA[i]) || ! is(objA[keysA[i]], objB[keysA[i]])) { return false; } } return true; } Copy code
  • React: What happened after setState.

    Multiple setState mergings and fetches the latest state, both of which are actually the same codeparticalState), internal to the parameterObjectThe type andFunctionThe type is handled differently. In the case of a function, it is called when the setState call is completed and the component starts reRender.

  • Node: Stream and Buffer. I wrote about streaming file uploads shortly before the interview, so I still remember them. I answered four streams (Writable/Readable/Writable/Readable), as well as several pipe methods commonly used

    V8’s permanent memory is made up of code area/stack/heap/out-of-heap memory.

  • Node: The main key words are the new generation/old generation hypothesis, Scavenge algorithm, From/To space, tag Scavenge, tag Scavenge, tag Scavenge, tag Scavenge, and tag Scavenge. Incremental marking (the marking phase is broken down into small steps controlled within 5ms and executed at intervals to improve program fluency.)

Second interview

  • WeChat applet, this is one of the key questions in the second panel, including the following aspects:

    • Lifecycle, both application-level and page-level
    • Architecture, View-Native JavaScript hierarchy, system level capabilities, such as WeChat open capabilities/offline storage/network requests, etc. For the view layer, the X5 kernel based on Blink independently developed by Tencent is used for Android, and the Webkit-WebView is used for iOS
    • Using async/await, applet does not seem to be able to support async/await syntax natively at present, need to introduce FB Regenerator library. Speaking of this, I’m curious how Taro/Remax will handle async/await and downgrade to Promise.
    • Authentication, Code2Session API, usingsessionKeyGenerate Token, OpenID as the primary typing database, and then return the custom login status identity
    • The differences with H5/RN/Flutter/PWA, and mostly with H5/PWA, I don’t really agree with the idea that PWA is the master of small programs, not even a nature, just that their purpose/play is similar
    • WXS, small programs were also used at that time, the main feature is the logic running in the View layer, and because JavaScript runs in JScore under IOS, Android runs in V8 reason, on IOS WXS can reach dozens of times the performance of JS, but on Android and JS flat.
    • SetState. The magic thing is that data changes synchronously while views are updated asynchronously, mainly because of the architecture mentioned above. Interested can consult the relevant information again
    • How can a applet block access to the DOM? I understand that the applet does not provide a DOM/BOM API at all, and can not get the Window object in the packaged compiled JS

  • @penumbra /cli, a scaffold with a similar idea to Feflow, is also a combination of scaffold core + template plug-in pack + builder, the template plug-in pack contains Webpack/Parcel + TypeScript/JavaScript combination, The back end contains a combination of Koa/Egg + RESTFul/GraphQL. The main questions were:

    • Why did I do this thing? What problems did I solve?
    • What benefits did it bring?
    • Why is it addedParcel
  • Parcel and Webpack
  • Error monitoring, the way we currently use itSentryAnd upload it on ReleaseSource-MapThe React approach is primarily an outermost one<ErrorBoundry />Components, with the help ofgetDerivedStateFromErrorwithcomponentDidCatchTo catch errors.
  • HTTPS encryption mechanism
  • Git Rebase with Git Merge
  • Flutter and React Native substrates
  • Serverless, we can talk about thatFaaSAs well asBaaS, as well asServerlessAs for the front-end meaning, this question has many aspects, so I will not discuss it in detail.

Three sides & four

The three sides and four sides ask questions from similar angles and questions, so they are put together.

  • 1. Introduce a project, usually asking the interviewer if he or she is interested in a business project or a facility project, such as a small program for a business project and @penumbra /cli for a facility project

    Do not pull a bit from the east to the west, the technical stack -> business scene -> highlights -> difficulties -> summary -> self-improvement steps to describe more clearly, the highlights/difficulties with STAR rule to introduce the best

  • @Penumbra/cliThis, which has been introduced above, will not be repeated. Mainly to showThe establishment of new project catalog is tedious -> The directory structure should be unified among membersThis consciousness

  • Graphql, which introduces these:

    • The meaning of Graphql differs from that of RESTful
    • The impact on the back end
    • Apollo Ecology. Here I would like to make a bold guess that the future BFF layer must have these three things:Apollo-Server & TypeGraphQL & Apollo-Rest-DatasourceIf you are interested in what they are, you can look them up. Apollo provides not only server-side support but also client-side support, i.eApollo-ClientAt the same timeServerandClientIt’s really 1+1>2 because the two are like one
    • Promotion resistance, in fact, as long as a team is relatively young, there is no resistance, mainly may have a certain learning/development/maintenance costs ~ Shouting “can’t learn” in the front end of the world may really be difficult to do anything

  • Webpack performance tuning, from the packaging speed/packaging size/interaction friendly three aspects, here are a few I think more useful/interesting plugins:

    • Friendly-errors-webpack-plugin, which optimizes the interface for thrown errors, is used by many CLIs
    • Speed-measure-webpack-plugin measures the packaging time of each link and can also find out which loader/plugin takes the longest
    • JS terser – webpack – the plugin, compression
    • Webpack-Bundle-Analyzer, which analyzes the packaging artifacts
    • Webpack-visualizer-plugin, which is also an analysis package artifact, but is more intuitive
    • Webpack-parallel-uglify-plugin, which uses parallel compression, seems to duplicate the terser functionality
    • webpackbar, highly recommended! There will be a progress bar when packing (VuePressJust use this one.)
    • Preload – webpack – the plugin, preloading
  • As far as configuration is concerned, it’s mainlyReduce file lookup timeandReduce the build code size, the former can go throughresolveField configurationextension, is configured in the loaderexclude, the latter is mainlyTree-Shaking(Note that CSS can also be tree-shakers), code splitting (dynamic loading and huge modules like Lodash/Antd), source-map patterns, compressed code, and more.
  • The React functional component

  • React Hooks:

    • useState
    • UseEffect, without passing dep or passing [], marks the lifecycle of the class component.
    • useLayoutEffect

    • UserRef, and UseImperativeHandle and ForwardRef

      • UserRef, which enables functional components to get DOM elements or custom components, and parent components to get child component references and then call child component methods, such as Focus, etc
      • ForwardRef (props, props, props, props, props, props, props, props, props, props, props)
      • UseImperativeHandle, often used in conjunction with ForwardRef, controls the properties and methods that are exposed to the parent component. The first parameter is the parent Ref instance that is wrapped with ForwardRef
    • UseMemo and useCallback
  • Hooks ideas, such as the new VUE3 API, are also being embraced by the React ecosystem, such as the one mentioned aboveReact-ReduxtheuseSelectoranduseDispatch.React-UseThere areUmi-Hooks, etc.
  • Node Cluster module, master-slave mode, underlying Libuv
  • CI/CD
  • The burying point is mainly the one-button burying point scheme represented by GA and the visual burying point represented by Mixalpha/Shenze data
  • Test, JEST /Enzyme/Puppet write unit/integration /E2E tests
  • Flutter

Five surface

Five interviewers may be busy, so the whole interview process should take about 20 minutes. Focus on your own experience, if you’re a loner, talk about your contributions to the community, etc., don’t just say you like to work on your own.

HR side

This is the common question:

  • University grade
  • Interests and hobbies
  • Have girlfriend two people later career planning
  • Personal Career Planning
  • A sense of achievement
  • Teamwork Experience
  • Was it smooth or bumpy from childhood to adulthood (?)
  • Why Learn the Front End
  • Do you have other offers on hand
  • Why want to Ali, of course, because Ali is the treasure of the front end

These are subjective questions, so I won’t go into them to avoid misleading you

Summary & Future Front-end Outlook

The prospect of the future front end is the question asked in the second interview. My personal thoughts are mainly divided into the following three points:

  • Multiterminal schemeWith the development of 5G and the gradual maturity of Internet of Things devices, how many more screens will front-end programmers have to adapt to? I think there may be real ones in the futureMulti-terminal solutions“, that is, more comprehensiveRaxorTaro“, a true one – write run everywhere. Of course, the ideal is good, in it has not ridden the colorful auspicious clouds before, or to concentrate on learning each end of it ~
  • Into the backend.ServerlessUndoubtedly is the front end of the next tuyere, it gives us the backward end of the ability to move forward, let us “oneself and oneself combined tune “, also need not worry about their own written services are traffic hit explosion. The back-end students are freed up to do something more meaningful (it’s not really a food grab).

  • Intelligent, although now everywhere is assigned to this concept, but I still think, one of the ultimate front-end is assigned to other jobs, make operation can take active page they want, dad what choice to make product control/events/indicators buried point, let don’t want to the backend directly from a zero pre-school drag drag drag with an interface, There are front-end students, direct design diagram generated UI code (dream or some). Although now the industry has some solutions, but there are still more or less problems. This is also one of the directions I am most interested in.

    96 web front end questions

    After speaking about the interview experience, the interview questions can not be less. I sorted out 96 questions from the interview questions asked by myself and my partners, and listed some of the questions in the length of the reasons:

  • What is the colitization of functions?
  • How many ways are there to create objects?
  • How do I declare a class with ES5 and ES6?
  • What are the similarities and differences between call and apply?
  • Using JavaScript to achieve object inheritance, inheritance of several ways, the advantages and disadvantages of these several ways?
  • What is your understanding of scope chains?
  • Talk about the point of this in various situations?
  • What are the characteristics of closures?
  • What are the closure application scenarios?
  • How are closures used in real-world development?
  • How to understand single thread in JS?
  • Why is js single threaded?
  • What is the difference between synchronous and asynchronous? What’s an example of synchronous versus asynchronous?
  • What is a task queue?
  • What’s the difference between stack and queue?



The full version of
96 web front end questions directly click here for free ohCome on for our dream!

Finally, I want to say that the interviewer of Tao Department is very NICE, personal interview style is relatively small talk that kind of, so the interview feeling is very matching. Interviewers ask questions are relevant, may be it will take you on the answer of question answering questions, gives you a great play space, allows you to make full use of the knowledge system of you answer, for you some questions, don’t also won’t ask too much, guides you, at the same time he also reflects the respect for you.