preface

I’m really late… I thought the internship was a senior year of college, but I stayed at home during the summer vacation. One day in early March, I was chatting with a classmate who was also a grade 17 student, when I suddenly realized that he had arrived at the end of ByteDance’s front end. I was surprised to learn that there was such a thing as summer internship! And still be limited to 3 years only (grind 2)! So quickly began to review the front-end foundation and review the previous project. The plan was something like this:

  • For non-academic courses, the weakness of computer foundation, I have only prepared some algorithm and data structure, and about 30 lcquestions.
  • No social internship experience, but a lot of project experience, PC/ small program/back-end have complete projects. Key points in the recovery of the difficulties.
  • Interested in infrastructure/engineering/intelligence, implemented graphQL-based BFF, CI/CD/Docker/Serverless/ error monitoring/buried point practice… “, focus on preparation and use it as a resume highlight (this turns out to be really important).

After determining the plan, I began to prepare for 8107. I submitted my resume between March and 18th, and successfully landed after 20 days, 5 rounds of technology and 1 round of HR.

One side

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

  • TCP three-way handshake/four-way wave/wait 2MSL meaning/The connection is established but the client fails

    I also mentioned handshake failure/flood attack /RST package, etc

  • TCP slow start/congestion control, fast retransmission/fast recovery, this is also I prepared more, after all, I did not touch before.

  • TCP UDP QUIC(QUIC is the underlying protocol of Http3)

  • What does Http2 add to Http1.1, mainly channel multiplexing and the like?

  • The browser rendering process, note just the rendering process, is the process from parsing the DOM tree to displaying it on the screen

    Tokenization/tree building/collection of stylesheets/layout rendering trees/Drawing lists/Rasterization/drawing blocks /… Here’s how the recommended reading browser works: Behind the Scenes of the New Web Browser

  • Strong cache and negotiated cache, mainly talking about e-tag and last-Modified and the corresponding identifier, strong cache and negotiated cache scenarios, such as index.html which should be used?

  • CSS horizontal center and vertical center, this because I usually write CSS is not much, usually in the UI library based on fine-tuning, only answered the previous record of the program.

  • Mobile 1px, same old problem.

  • We use Git Flow to separate the Master and Dev branches. We use Git Flow to separate the Master and Dev branches. We use Git Flow to separate the Master and Dev branches. However, the following feature has been tested to advance into the trunk, how to deal with this situation?

  • React: Old and new lifecycle issues, why the old version was discarded (constrained developers and Fiber architecture might break it), what is the new version’s character (getDerivedStateFromProps(nextProps, prevState), this method is static, You can’t get this, and prevState is used to separate the props from state. And I think it’s fun getDerivedStateFromErrors and componentDidCatch collaboration.

  • React: PureComponent, shallow comparison. I mentioned shallow comparison in my previous post on useSelector. ShouldComponentUpdate shallowEuqal shouldComponentUpdate shallowEuqal

      const hasOwn = Object.prototype.hasOwnProperty;
  
  function is(x, y) {
    if (x === y) {
      returnx ! = =0|| y ! = =0 || 1 / x === 1 / y;
    } else {
      returnx ! == x && y ! == y; }}export default function shallowEqual(objA, objB) {
    if (is(objA, objB)) return true;
    if (
      typeofobjA ! = ="object" ||
      objA === null ||
      typeofobjB ! = ="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 the code

  • React: setState does not React to a batch update, and does not React to a native asynchronous event. It is synchronous in nature. ParticalState = setState; setState = setState; setState = setState; setState = setState; setState = setState; setState = setState; setState = setState Is called when the setState call completes and the component starts rerender.

  • Node: stream and Buffer. I remember the four streams (writable/readable/writable/readable/transformable) and some pipe methods.

    The main thing about Buffer is that it is out-of-heap memory (V8’s resident memory is made up of code area/stack/heap/out-of-heap memory).

  • Node: The insane, the Scavenge algorithm, the From/To space, tag scavenging, tag collation, and the avenge avenge avenge avenge avenge avenge avenge avenge avenge avenge Incremental marking (the marking stage is broken down into small steps controlled within 5ms and executed at intervals to improve program fluency.)

One side of the main questions are basic, the interviewer gave me the feeling like a senior! And he answered a bunch of poorly answered questions. One time about an hour, I feel the questions are asked to my heart? I just didn’t ask the wrong questions.

  • Web security, XSS and XSRF attacks. There’s a little bit of AxiosX-XSRF-TOKENMechanism. Unfortunately only saw Hu Yu greatly after the interviewPredict the SameSite property of cookies in a recent interviewOr you can add a wave fraction?

Second interview

Maybe because the resume is written more engineering, two, three and four asked more engineering things.

  • Wechat small program, this is one of the key questions of the second, including the following aspects:

    • Lifecycle, both application-level and page-level.
    • Architecture, view-native JavaScript hierarchy, system-level capabilities, such as wechat open capability/offline storage/network request, etc. For view layer, Android is equipped with Blink X5 kernel independently developed by Tencent, while IOS is equipped with Webkit-WebView
    • With async/await, it seems that the small program cannot support async/await syntax natively at present, so it needs to introduce the Regenerator library of FB. Speaking of which, I’m curious as to how Taro/Remax deals with async/await, downgrading to Promise?
    • Authentication, code2session this API, usesessionKeyGenerate token, openID as the main input database, and then return the custom login status id.
    • The differences with H5/RN/Flutter/PWA are mainly with H5/PWA. I don’t really agree with the idea that PWA is the father of small programs, or even one property, but their purpose/play is similar.
    • WXS, I mention it by the way, because small programs were also used at that time. The main feature is the logic that runs on the View layer, and because JavaScript runs on JSCore in IOS and V8 in Android, WXS can achieve tens of times the performance of JS on IOS. But it’s on par with JS on Android.
    • SetState, which is amazing: data changes synchronously and view updates asynchronously, is also largely due to the architecture mentioned above. If you are interested, you can consult relevant information again.
    • Applets don’t provide a Dom /BOM API, and they don’t get Window objects in packaged and compiled JS.

  • @penumbra /cli, this is a scaffolding that I wrote myself similar to Feflow. It is also a combination of scaffolding core + template plugin package + builder. The front end contains Webpack/Parcel + TypeScript/JavaScript and the back end contains Koa/Egg + RESTFul/GraphQL. The main questions were:

    • Why do we need this thing? What problems does it solve?
    • What benefits did it bring?
    • Why was it addedParcel, this is mainly because some small projects small demoParcelIt’s really simple, like this one I built myselfParcel-Tsx-Template.True – out of the box.True – Zero configurationBut if you want to write any formal projects, still Webpack honestly.

  • Parcel and Webpack (with built-in HMR and code split, preconfigured) also have a Loader and Plugin for Parcel. It’s called @parcel /transformer- XXX. There is also the fact that a Parcel does a resource tree optimization before it is packaged, and it is too black box, with a set of configurations written inside (like config.json).

  • I personally think Umi is “the framework of the framework “, that is, on the basis of Webpack, a set of configurations with optimized performance to the limit and an ecosystem that meets most development needs (plug-ins), etc.

  • Error monitoring, we currently use Sentry and upload source-Map files at Release. React is an outer
    component that uses getDerivedStateFromError and componentDidCatch to catch errors.

  • Https Encryption Mechanism

  • Git Rebase and Git Merge

  • Flutter and React Native – I’m only talking about the Skia engine, because Flutter hasn’t been written yet.

  • Serverless, THIS part I mainly talked about FaaS and BaaS, as well as the meaning of Serverless to the front end, this problem is thousands of people, my own understanding is not necessarily right, SO I will not expand on it.

The second interview mainly asked questions about the project. It has to be said that it was the senior, and many blind spots of the project were found out. Fortunately, I did take time to think about it before answering it. It is suggested that you can find an experienced student to help you think about the Angle from which the project will be asked, after all, it is a fan.

Three sides & four sides

The three and four sides of the question and the Angle of the question is similar, so put together.

  • Introducing projects, I usually ask the interviewer if they are more interested in a business project or a facility project, with applets for business and @penumbra/CLI for facilities.

  • Since the UI/ interaction/front and back ends of the applet are built by ourselves, we can talk a lot about it, but we usually focus more on the business scenario of the applet (integration of book resources), which I think is a better way to introduce the project:

    Do not pull a point in the east and the west, in order to technical stack -> business scene -> highlights -> difficulties -> extract summary -> self improvement these steps to describe will be more coherent, among which highlights/difficulties to STAR law to introduce the best.

  • @penumbra /cli This one, already mentioned above, will not be repeated. The main purpose is to reflect the cumbersome establishment of the new project directory -> should be unified among members of the directory structure of this awareness.

  • GraphQL, it’s a rare thing to ask, because I put it as a resume highlight, but no one asked… , mainly introduced the following:

    • The meaning of GraphQL, and the difference between RESTFul
    • Impact on the back end, actually I don’t think it’s going to work right nowGraphQLAs the main API of the application (unless there is a database generated for schema query, as for the GraphQL API of FB and GitHub, I think it has its own internal development scheme), that is, let the backend students do the micro-service for most scenes, and then the front-end students write a BFF layer as the interfaceAggregation/cleaning/authenticationWait, so it’s not like “The world is full of pressure on the back end, when is the back end going to stand up and chill?” HHHH. Since the front-end write, it must be using Node, at this pointApolloThese solutions really smell good (more on that below).
    • Apollo Ecology, here I would like to make a bold guess that the future BFF layer must include these three things:Apollo-Server & TypeGraphQL & Apollo-Rest-DatasourceIf you’re interested in what they are, you can look them up. Apollo provides both server-side support and client-side support, i.eApollo-ClientAt the same timeServerandClientBuilding an app really works like 1+1>2, because they’re like one.
    • Promotion resistance, in fact, as long as a team is young, there is no resistance, mainly there may be a certain amount of learning/development/maintenance costs.

  • Webpack performance tuning, I started from three aspects of package speed/package size/interactive friendliness, here are a few of the plugins I think are more useful/interesting:

    • Friendlys-errors-webpack-plugin, which is commonly used in the CLI, is an interface optimization for throwing errors.
    • Speed-measure-webpack-plugin: measures the packaging time of each link and finds out which loader/plugin takes the longest time.
    • JS terser – webpack – the plugin, compression
    • Webpack-bundle-analyzer, which analyzes packaged products
    • The Webpack-Visualizer-plugin is also an analysis package, but more intuitive
    • Webpack-parallel-ugliffe -plugin, parallel compression, seems to duplicate terser functionality.
    • webpackbar, highly recommended! There is a progress bar (VuePressUse this one.)
    • Preload – webpack – the plugin, preloading

  • For example, if you configure extension in resolve, exclude in loader, and Tree-Shaking in build code, you can configure extension in resolve, exclude in Loader, and Tree-Shaking in build code CSS can also do tree shaking), code splitting (dynamic loading and huge modules like Lodash/Antd), source-Map mode, compressed code, etc.

  • React functional components, I think will be the mainstream?

  • React Hooks:

    • useState

    • UseEffect, not passing deP and passing [], respectively, which life cycle of the class component.

    • useLayoutEffect

    • React Forwarding Refs Forwarding Refs React Forwarding Refs

      • UseRef enables functional components to also enjoy the ability to retrieve DOM elements or custom components, and the parent component to retrieve child component references and call child component methods, such as focus.

      • The parent component’s parent ref instance can be used as a parameter (the same as props) of the parent component.

      • UseImperativeHandle (usually used with the forwardRef) controls the properties and methods exposed to the parent component. The first parameter is the parent component ref instance that the forwardRef wraps.

    • UseMemo and useCallback

      I didn’t use the rest of it and I don’t remember.

  • The React ecosystem is embracing Hooks, like the react-Redux useSelector and useDispatch mentioned above, react-Use, Umi-hooks, etc.

  • Node Cluster module, master/slave mode, underlying Libuv.

  • CI/CD, our studio has commitlint -> Husky + Lint-staged + Code Review* N + ZEIT/ NOW test environments, and then Gitlab pipeline to OSS.

  • Burial point, which I have researched before, you can read my previous article about some thoughts on burial point, mainly one-click burial point scheme represented by GA, visual burial point represented by MixAlpha/ divine data, etc.

  • Tests, Jest/Enzyme/Puppeteer write unit/integration /E2E tests. Slightly asked the single test coverage, very unconfident said that may be less than 50% HHH.

  • Flutter feels that this is not a good technique to put on a resume. For example, I can only write simple widgets and pages with Flutter, so I don’t ask too much.

Five surface

The interviewer may be busy, so the whole interview will take about 20 minutes. The interviewer should be a high P and focus on my role in the team. My definition of myself focuses on participating in the selection of front-end technology stack & promoting the new front-end architecture & participating in the training and guidance of new recruits, etc. This part is also based on my own experience. If you are a lone ranger, Talk about your contributions to the community. Don’t just say you like to do it all by yourself.

HR side

This is a common problem:

  • University grade
  • Interests and hobbies
  • Do you have a career plan for both of your girlfriends
  • Personal Career Planning
  • A sense of achievement
  • Team work experience
  • From small to big smooth or rough (?)
  • Why learn the front end
  • Do you have other offers
  • Why want to Ali, of course, because Ali is the front of the treasure

These questions are subjective, so I will not give my own answers to avoid misdirection.

Summary & future front end outlook

Let’s just say that interviewing is really metaphysical, and if you can meet someone on each side who is a good match for you, the whole process will be really fun. Spring recruitment is drawing to a close, and I hope everyone can get their own satisfaction with the offer, but also in the interview students can read the front end of my finishing foundation, feel useful if you click ⭐ ~

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

  • Multiterminal schemeWith the development of 5G and the gradual maturity of iot devices, there may be more screens for front-end programmers to adapt. I think there might be a real one in the futureMulti-terminal solutionThat is, more comprehensiveRaxorTaro, a real authoring runs everywhere. Of course, the ideal is good, before it is not in the arrival of colorful auspicious clouds, or concentrate on learning each end ~
  • Into the backend.ServerlessIs undoubtedly the next outlet of the front-end, it gives us the ability to move to the back end, let us “and their own tune “, without having to worry about their own written services being blown up by traffic. The back-end students are free to do more meaningful things.
  • 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 operating mm 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 is front-end students, direct design map generation UI code (dream or some). Although the industry has some plans, but there are still more or less problems. That’s one of the directions I’m most interested in.