preface

It’s job-hunting season again. I am a front-end rookie in the industry for more than a year. Last summer, I began to consider changing my job and interviewed several small and medium-sized companies successively. I usually record the interview so that I can review it at the end. I sorted out the notes of several interviews, hoping that it would be helpful to those in similar situations “and convenient for them to recall in the future”, hoping that everyone could find their favorite jobs.

General situation of

  • Company: Shanghai, education industry, front-end team of 20 + people.
  • Interviewer: The head of the front end, the former Ali P7 big shot, graduated from the master’s degree to enter Ali.
  • Technology stack: The team is currently using VUE and plans to adopt React in the future.
  • Result: Failed o(╥﹏╥) O.
  • Interview experience: The interviewer was kind and gave appropriate guidance to the problems he could not solve. Finally, he gave suggestions to improve the interview, which made me feel full of harvest. I mean, I’m pretty fucked up, but I’m still happy.

The interview questions

✔ The number at the end of the question represents your grade for your response.

  1. Career change reason
  2. What is the difference between React and vue? 2 ✔
  3. How does vUE two-way data binding work? Array update. 8 ✔
  4. How do components communicate with each other? How does VUEX work? State changes, how do I make my view change? 6 ✔
  5. Why uni-app? 8
  6. (after searching and viewing the e-commerce mini program) what parts did you do? The intersection Observer is not used as well. Intersection Observer is built into the browser. 7 ✔
  7. Why do you want to make live plug-in? 8
  8. What project optimization have you done? 5 ✔
  9. Webpack configuration, loader and Plugin difference. How to get rid of redundant code? Tree-shaking implementation principles. 5 ✔
  10. A new route, how to know to download the corresponding file? (extension: dynamic way to insert JS.
  11. Load on demand? What are the ways? What was chosen? 5
  12. Cache, strong cache, who set it up? Will HTML files be cached? 4 ✔
  13. CDN content distribution system? Why is the static resource file of your project not put on CDN? 5 ✔
  14. What are the difficulties in using Tencent Cloud’s mobile live broadcast and INSTANT messaging SDK? 4 ✔
  15. Sentry error monitoring, how are errors collected and reported to the platform? (HTTP, websoket, cross-domain
  16. Xx project (resume), specific explanation? 8
  17. Difficulties and challenges encountered in the project. 4

Question 2. Vue vs React

Similarities:

  1. Virtural DOM + Diff algorithm was used.
  2. The idea of componentization.

Difference:

  1. React renders templates using JSX, vue renders templates using extended HTML syntax. For example, react interpolation, conditions, and loops are implemented with JS syntax, while Vue is implemented with instructions V-bind, V-if, and V-for.
  2. Vue uses getters and setters to hijack data changes, while React compares references. Vue uses reactive data, while React is immutable data. React calls the setState method (replacing the old state with the new state).

Question 3. Vue responsive principle

Level1: vue2.0, the core of the reactive implementation is ES5 object.defineproperty (obj, prop, descriptor). Object.defineproperty () hijacks the getters and setters for the properties of data and props. The getters do dependency collection, and the setters distribute updates. Overall, it is a data hijacking + publishing-subscriber model.

Level2: Specifically, in the vue initialization stage (beforeCreate after create), iterate over the data/props and call Object.defineProperty to add getters and setters to each property. (2) Each component, each computed object instantiates a Watcher (and of course each custom Watcher), subscribing to the data/props/computed object used for rendering/calculation. Once the data changes and the setter is called, The rendering Watcher will be notified to recalculate and update the components.

Problem 4 vUE component communication

level1: Props + events parent-child communication components (parent/parent/parent/children), communication, any component vuex emit events center/emit/emit/on any component of the communication, Attrs/attrs/attrs/listeners offspring (dojo.provide/inject) of communication.

Level2: Vuex mechanism: Vuex state acts as a repository for data-driven Vue component rendering. The view dispach sends out actions. You can do some asynchronous actions in actions. Actions or views are submitted to mutations, mutation to change state via commit.

Level3: Source code analysis: Vuex is a vuue. js plug-in, plug-ins need to provide an install method, the install method call will be passed Vue as an argument. Vue.user(plugin) installs the plug-in, that is, executes the install method of the plug-in. A beforeCreate hook function is incorporated globally to Store the example Store in this.$Store for all components.

Level4: mutation state triggers a view change. Implemented via VUE, [instantiate VUE, state as a data property. ↔ ️ core

let Vue function install(_Vue) { Vue = _Vue function vuexInit() { const options = this.$options console.log('vuexInit ->  this.$options', This.$options) if (options.store) {// // Root instance this -> Vue this.$store = typeof options.store === 'function'? options.store() : Options. store} else if (options.parent && options.parent.$store) {// This --> VueComponent, such as APP, Home, About... this.$store = options.parent.$store } } Vue.mixin({ beforeCreate: vuexInit }) } class Store { constructor(options = {}) { const { state = {}, mutations = {}, Getters = {}} = options this._mutations = mutations // getter Implementation of const computed = {} this.getters = {} for (let [key, fn] of Object.entries(getters)) { computed[key] = () => fn(this.state) Object.defineProperty(this.getters, key, { get: () => this._vm[key] }) } this._vm = new Vue({ data: { $$state: Mutations [type]) {this._mutations[type] {this._mutations[type](this.state, payload) } } get state() { return this._vm._data.$$state } } export default { Store, install }Copy the code

Question 6. Intersection Observer

Level1: Cross viewer to infer whether and to what percentage nodes are visible to the user. It’s also in the Web API.

IntersectionObserver in level2 stores: a small program on the basis of Web, made some encapsulation, through createIntersectionObserver returns a IntersectionObserver instance. The instance methods include relativeTo, relativeToViewPort, Observer, and Disconnect. RelativeTo and relativeToViewPort, the specified position relativeTo the specified element or viewport. Observer (selector, CB) that observes a specified node and fires a callback when the visibility changes.

Level3: Web API, new IntersectionObserver(cb, options). RelativeTo and relativeToViewPort methods can be used to configure root and rootMargin in options. In addition thresholds property is also interesting, in the specified number of intersection ratio trigger a callback.

Question 8. Project optimization

  1. Remove console printing in production. There are many schemes, such as esling+pre-commit and automatic removal by plug-ins, including babel-plugin-transform-remove-console, Uglifyjs-webpack-plugin and terser-webpack-plugin. The terser-webpack-plugin is used to enable caching and multithreading packaging. There is no need to install additional plug-ins, just set the Drop_console of the Terser plugin to true in configureWebpack. It’s best to develop good code habits and remove useless consoles after development is basically complete. Vscode turbo console works fine.
  2. On-demand loading of third-party libraries. Echarts, which is officially documented as using modules specified by configuration files, and babel-plugin-equire, which is loaded on demand. Element-ui uses babel-plugin-Component for on-demand import.
  3. Common styles, such as uniform adjustments to the styles of elements in the Element-UI component (such as pop-ups, tables, drop-down boxes, etc.). Common components, such as date-picker, upload-file, and so on, are basically further encapsulated in the element UI component. Custom components include preview-file, search box, and so on.
// babel.config.js is configured as follows: ['equire'] // echarts.js const echarts = equire(['line', 'tooltip', 'legend', 'dataZoom', 'grid']); export default echarts;Copy the code

In terms of data exchange at the front and back ends, I promoted the project team to use blue Lake and interface documents, and negotiated with students at the back end to standardize the return of background data.

Yahoo catch-22 mentioned, avoid CSS expressions, filters, less DOM operations, optimize pictures, Sprite graphs, avoid empty links, etc.

Performance issues: page loading performance, animation performance, operational performance. Performance API to record Performance data.

Technical solution of Winter relearning front-end optimization:

  1. Caching: Client-controlled strong caching policy.
  2. Reduce request cost: The DNS is controlled by the client and proactively requests for domain name IP addresses from time to time without going through the system DNS. TCP/TLS connections are multiplexed, servers are upgraded to HTTP2, and domain names are merged whenever possible.
  3. Reduce the number of requests: JS and CSS are packaged into HTML. JS control image asynchronous loading, lazy loading. Use data-URI for small images.
  4. Less transfer volume: Try to use SVG\gradient instead of images. Control image sharpness according to model and network condition. Sharpen low definition images to enhance the experience. Avoid large background images by design.

Question 9 Loader, plugin, tree shaking

loader

Convert the source code of the module, convert different languages to JS, or convert inline images to data urls. For example, file, url-loader and file-loader. Conversion compilation, babel-loader, TS-loader. Template, htMl-loader. Style, style-loader, CSS-loader, less-loader. Cleanup, eslint-loader. Framework, VUe-loader.

plugin

Resolve other things that loader cannot implement. Such as HtmlWebpackPlugin, CleanWebpackPlugin, webpack – bundle – analyzer, DllPlugin, HotModuleReplacementPlugin.

tree shaking

Eliminate useless JS code (remove parts of a module that are not exported or referenced). Only the ES Module static import mode is supported. The require runtime dynamic import mode is not supported.

The INTRODUCTION of ES6 modules is statically analyzed, so you can correctly determine which code to load at compile time.

There is a limit to what can be removed. Webpack with the uglifyJS package, you can only shake parts of your code, such as module code that has side effects, functions that execute immediately, etc. UglifyJS does not carry out program flow analysis, but simply determines whether variables are referenced or modified later, and does not exclude code that may have side effects. Also, for example, router.js references page components in a project, but they are not used in route rendering and cannot be shaken off.

Webpack-deep-scope-analysis-plugin: Use WebPack to parse AST of modules, use Scoped to parse reference relationships, and exclude unused modules.

1. Configure babel.config.js to analyze file module dependencies and keep ES6 stationary while generating AST. { "presets": [ ["env", { "modules": false }] ] } 2. Import {Button} from 'antd'; Import {Buttion} from 'antd/lib/button'; import 'antd/lib/style'; Tree-shaking is very different in these two ways. The babel-plugin-import-fix plugin iterates through the AST to find structures like import {Button} from 'antd' and transforms them to regenerate code. 3. CSS tree - shaking < https://juejin.cn/post/6844903808397475847 > way 1: the mini - CSS - extract - the plugin + purifycss webpack way 2: Webpack - CSS - treeshaking - the plugin. Use the parser provided by postCSS to parse CSS into AST, traverse to get selector matching JS and HTML code, delete the mismatch, return to AST, and generate code again.Copy the code

Problem 10 Lazy route loading

Vue – Router implementation principle

level1:

  1. Pack submodules that need lazy loading into separate files. ES6 import ().
  2. When hashChange, specific functions are executed based on the hash change and submodules are loaded.

Level2: Three implementations: location.hash + hashChange(), HTML5 specification pushState(IE10) + popState event listener, abstract NodeJS default.

** Level3: ** source analysis. Route installation, use mixin to inject beforeCreated and DeStory hook functions to each component, define route and route and Route and Router on Vue prototype, and carry out responsive processing, define global Roter-link and router-view components. Create mappings based on route configurations. A new path is calculated according to the incoming path, and a series of navigational guard functions are executed to change the Url and render the corresponding components in the process of road force switching.

Problem 12 cache

HTML files are also cached. Index.php is used in the project, and the back end returns HTML content that is not cached.

Browser cache policy:

  • Forced caching :(for a specified period of time, the browser directly uses strongly cached content)

    Expires: Thu.21 Jan 2019 23:59:59 GMT; (HTTP1.0)

    Cache-control: max-age=3600 (HTTP1.1, higher priority)

    [Cache directive: no-cache requires negotiation of cache to verify expiration; no-store does not cache; public client proxy servers can cache; private client can cache]

  • Negotiated cache :(negotiates with the server to determine whether the resource is updated)

    21 Jan 2018 23:59:59 GMT; (HTTP1.0)

    If- modified-since

    Etag (delivered by the server); (HTTP1.1)

    If-none-match (browser query)

Question 13 CDN

CDN (Content distribution network) is a virtual distributed network based on the re-hosting network, which can cache source content to node servers nationwide or globally. Users can obtain content from nearby sites, which increases the speed of resource access and shares the pressure of source sites.

Use DNS domain name resolution to guide users to access the cache server.

Question 14. Difficulty in Tencent Cloud SDK

Encapsulate IM classes, create SDK instances on IM classes, login/exit, group join/exit, IM event listening and removal.

  1. Mobile live streaming SDK. At the beginning did not do small program anchor end, using APP to push the flow. Mainly do PC and H5 pull flow this piece of content.
  2. There are several live broadcast agreements… .
  3. At the beginning, THE HLS protocol was used and tC-Player provided by Tencent Cloud was used as the Player. Problems encountered with high latency.
  4. Consider changing the protocol, but mobile browsers do not support FLV and RTMP.
  5. Tencent Cloud Web side pull stream provides tC-Player plug-in, tC-Player is essentially made by using the browser’s own video label.
  6. Use FLV as the live broadcast protocol, but do not play directly in FLV format. Github has two solutions. One is Bilibili Flv.js, which can reuse FLV files into MPE files and play video through Media Source Extensions API. Another solution is to draw every frame of the video on CANVAS.

Question 15 sentry

Sentry error logs are sent to Sentry’s Web site over HTTPS. Cross-domain implementation using CORS.

  1. Application program (Sentry client SDK) messages are reported to the Web terminal
  2. Message processing on message queue (Redis/Rabbitmq)
  3. The worker fetches data from the message queue for processing
  4. Finally, PostgresQL does the message storage
**request headers:**
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross site
**response headers:**
access-control-allow-origin: <http://localhost:8080>
access-control-expose-headers: x-sentry-error, retry-after, x-sentry-rate-limits
Copy the code

After being abused in the interview, I began to brush up on the interview questions, and did a tidy up, and share it with you for free, hopefully bring good luck.

Due to limited space, only part of the interview questions can be shared, more questions and answers are available【 Click on me 】Read download oh ~ free to share with you, is a Thanksgiving feedback bar