Recently interviewed a lot of 1-2 years of front-end, mobile phone online some questions and answers, issued to hope to help you ~

CSS article

IOS mobile browser font gear

Modify – webkit-font-Smoothing attribute

Result: its – the font – smoothing: none: no anti-aliasing – its – the font – smoothing: antialiased | subpixel – antialiased | default: gray smooth

How to make Chrome support text smaller than 12px?

What we do is:

Transform: Scale () for chrome kernel, add webKit prefix, scale with transform:scale()! p span {font-size:10px; – its – transform: scale (0.8); display:block; }

CSS Preprocessor (Sass/Less/Postcss)

The CSS preprocessor works by converting csS-like languages into real CSS that browsers can read through Webpack compilation.

On top of this layer of compilation, CSS can be given more powerful functions, common functions: nested variables loop statements conditional statements automatic prefix unit conversion mixin reuse

JS

How to compress website JS and CSS? What are the methods?

Compressing JS/CSS online

HTTP request question: What are the three parts of HTTP request information?

  1. Request method URI protocol/version (e.g. GET/ haorooms.jsphttp /1.1)
  2. Request Header (Request Header) (for example: the Accept: image/GIF image/jpeg./Accept-language: zh-CN Connection: keep-alive Host:localhost etc.)
  3. Request body

Front-end performance optimization, how do you deal with front-end performance?

www.haorooms.com/post/web_xn… And front-end performance optimization supplement

The simplest way to write JS is to remove heavy objects.

  • Es6’s New Set() method
let array = [0, 3, 4, 5, 3, 4, 7, 8, 2, 2, 5, 4, 6, 7, 8, 0, 2, 0, 90];
[...new Set(array)]
Copy the code
  • Es5 Array filter ()
[1.3.4.5.1.2.3.3.4.8.90.3.0.5.4.0].filter(function (elem, index, Array) {
  return index === Array.indexOf(elem);
})
Copy the code

Google Chrome run the following code and explain!

[].forEach.call(? ("*"), function (a) {
  a.style.outline = "1px solid #"+ (~ ~ (Math.random() * (1 << 24))).toString(16)})Copy the code

When you run the code above, you’ll see that the HTML layers are highlighted with a different color border. Why is that?

  • Principle analysis:
  1. ? (" * ")Returns all elements of the page as an array
  2. The forEach. This is a kind of shorthand, complete wording should be like this: Array. Prototype. ForEach. Call (...). ; Obviously, the shorthand is more convenient.
  3. .call is a prototype JavaScript function built in. The.call replaces this with its first argument, which is the array you want to pass to
  4. Therefore, [].foreach.call () is a quick way to access forEach and replace the this of the empty array with the list you want to iterate over.

How do I handle caching? How to clear the cache.

Ajax random numbers, Ajax parameters, meta Settings, etc. Take a look at some of the ways I wrote js to clear the browser cache

  • Meta method
/ / no cache<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
   <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
   <META HTTP-EQUIV="expires" CONTENT="0">
Copy the code
  • Jquery Ajax clears browser cache
If modified-since and cache-control are included in the request header, then the following is true:function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since"."0"); 
        xmlHttp.setRequestHeader("Cache-Control"."no-cache"); }, 2.false3. Use random numbers. Random numbers are also a great way to avoid caching! The URL parameter is appended"? ran="+ Math.random(); 4. Use random time, just like random numbers. Append to the URL parameter"? timestamp=" + new Date().getTime();
Copy the code

Websocket

Websocket is a persistent protocol that is based on HTTP and can be actively pushed by the server

  • Compatible with:

FLASH Socket long poll: timing send ajax long poll: send –> Response when there is a message

 let ws = new WebSocket(url);
 /* Received message callback */
  ws.onmessage = onMessage;
  /* Connection down callback */
  ws.onclose = onClose;
  /* Successful connection callback */
  ws.onopen = onOpen;
Copy the code

Resolve cross-domain problems

  1. Json:<script>Tags are cross-domain free, with the disadvantage that they can only support GET requests
  2. The server sets the request header:CORS: Access - Control - Allow - Origin: *
  3. postMessage

Frame: Vue family bucket

vue-routerHow to do history return prompt?

Check out my previous post

vue-routerHow to do user login permission?

Router. beforeEach is used to register a global hook with router.beforeEach

Vue component communication

Many people say incomplete, do not know is not important or not. This post is very thorough

  1. Props and $emit
  2. listeners
  3. Central event bus
  4. Dojo.provide and inject
  5. v-model
  6. children
  7. Boradcast and dispatch
  8. Vuex handles data interaction between components

Vue server rendering

Vue performance optimization

vue-routerThe modulerouter-linkComponents.

Official website Details

vue-routerWhat kinds of navigation hooks are available?

Three types:

  1. Is a global navigation hook: router. BeforeEach (to,from,next), intercepts before jumping.
  2. A hook within a component
  3. Separate routing proprietary components

What is SCSS? What are the installation steps in vue.cli? What are the major features? Precompilation of CSS.

Use steps:

  • Sass-loader, CSS-loader, Node-sass
  • Step 2: Find webpack.base.config.js in the Build directory and add an extension to the extends property
  • Step 3: Configure a Module property in the same file
  • Step 4: Then add the lang attribute to the component’s style tag, for example: lang= “SCSS”

What are the major features:

  1. You can use variables, for example ($variable name = value)
  2. You can use a mixer, for example ()
  3. Can be nested

What is the principle of two-way data binding for Vue? # # #

Vue. js adopts data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty() to publish messages to subscribers when data changes and trigger corresponding listening callback.

Can you elaborate on your understanding of the VUE lifecycle?

There are 8 stages: before/after creation, before/after load, before/after update, and before/after destruction

  1. Before/After creation: In the beforeCreated phase, the mount element $EL and the data object data of the VUE instance are both undefined and not initialized. In the Created phase, the vue instance’s data object data is available, but $EL is not.

  2. Before/After loading: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the previously virtual DOM node is still mounted, and data.message has not been replaced. In mounted phase, vue instance is mounted and data.message is successfully rendered.

  3. Before/After update: When data changes, the beforeUpdate and updated methods are triggered.

  4. Before/after destroy: Changes to data do not trigger periodic functions after destroy, indicating that the vue instance has been unbound from event listening and the DOM structure still exists

Name the use of each folder and file in the SRC directory in vue.cli project.

  • The assets folder contains static resources.
  • Components;
  • Router defines routing configurations.
  • View;
  • App. vue is an application main component;
  • Main.js is the entry file

Test automation related, mock data related, Webpack related

This tests your understanding of Webpack in terms of usage.

For example, you might examine the following knowledge points:

  1. Hash (contenthash, chunkhash)
  2. Multi-page configuration
  3. Release and Online process
  4. How to speed up packaging and reduce packaging volume
  5. The difference between and other tools (grunt, glup, a rollup, parcel, Browserify)

If you can see the friends here are very good ~

Front-end interview basics (1 year for domestic demand)

Have get to help, can circle ~ thank!