Front-end common interview questions (two) ---- front end

Little mention during the interview, the interviewer like to see your project practice, to see what items you have done, if one does not write, could kneel, then ask around your project details. ( Yourself doing some project is very important)

Body parts:

1.var, let, const difference:

(1) .var variables can enhance: what is a variable lift?

var a=10   //全局变量
function fn() {
  console.log(a);//输出undefined
  var a=20;//var会把a这个声明提到作用域的顶端，var a；
  console.log(a);//20
}
fn()
console.log(a);//10

//上面的代码与下面的等同！

var a=10   //全局变量
function fn() {
  var a;  //只是声明放在顶端，值还在原来的位置！！！！而且以声明就把a局部重置了！！！
  console.log(a);//输出undefined，a局部重置了，重置了还没有值！！！
  a=20;//var会把a这个声明提到作用域的顶端，var a；
  console.log(a);//20
}
fn()
console.log(a);//10

Variable lift: just to mention a statement, not to mention value!

Note: The class declaration class, variable lift does not exist.

(2) .let declared const and only block the effect of which he has declared.

Can not be modified after (3) .const declaration that will be assigned!

NOTE: const declaration of an object, you may be used Object.freeze () to lock the value.

2.js basic data types:

boolean，null，number，underfined，string，Object，symbol（es6新增）

Then the symbol is Shane?

Represent a unique value
Declared parameters can be added, and in the description
It can not be traversed as a key

3. How mobile terminal adaptive?

bootstrap framework and other ui
rem
vw and vh

4. You learn is how the front end, how did you learn certain techniques (vue) of?

This should be a general problem to see if you are not out of the training course. In fact, I do not know, they ask this specific meaning.

5. How to solve cross-domain problems:

Cross-domain problem is that each separate front and rear end will encounter.

Usually can not be cross-domain error: . . . cors. . . .

Description cors That is the problem. Mainly through the setting, access-control-allow-origin to achieve.

I use the node, it relies by installing cors.

//cors跨域问题
const cors = require('cors');  
app.use(cors({  
    origin:['http://localhost:8080'],
    methods:['GET','POST'],
}));

//跨域问题解决方面
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
　next();　
});

Both are good, you are not sure to use it together.

6.xml and json difference:

People like json, data concise, and fortunately calls, applets, web applications, websites using this data easy.

Volume: json xml respect, a smaller, faster transmission.
Interaction: json and js interaction more convenient and easier analysis processing, better data interaction.
Level: xml heavyweight, json is lightweight.
Description: json difference data descriptive of the ratio xml.
Analytical: json available jackson, gson other analytical methods, xml available dom, sax, demo4j parse the like.

Which instructions 7.Vue there?

v-html，v-show，v-if（v-else-if，v-else），v-for，v-cloak，v-text，v-bind，v-model，v-pre

8. How to optimize front-end website performance?

Reducing the number of HTTP requests
- CSS Sprites: domestic commonly known as CSS sprites, which is to merge multiple images into one picture to reach a solution to reduce HTTP requests, picture content can be accessed through the CSS background properties. This approach also can reduce the total number of bytes in the picture.
- The combined CSS and JS files: now there are a lot of front-end engineering packaging tools, such as: grunt, gulp, webpack and so on. To reduce the number of HTTP requests, these tools can be released again before the plurality of CSS or combined into a plurality of JS file.
- Using lazyLoad: commonly known as lazy loading, you can control the content on the page without loading at the outset, without requesting, until the user really needs an immediate operation to load the contents. This one-time request to control the number of web resources.
Control resource file load priority
- The browser when loading HTML content, the HTML content is from top to bottom in order to resolve, resolve to link or script tag will load the corresponding link href or src content, for the first time to show the page to users, you need to load the CSS advance Do not load by JS influence.
- Under normal circumstances are at the head of CSS, JS at the bottom
DOM manipulation and reduce the use of icons iconfont instead. Multi-use browser cache.

9. After the front end of their career path, how planning?

This stuff is free to play, it may be a good point to say can be added brownie points.

10. What are the three layers of the front page, what are they? What is the role?

Structural layer Html, presentation layer CSS, behavior layer js.

11. What are the elements in the line? What? CSS box model of block-level elements have?

Block-level elements: div p h1 h2 h3 h4 form ul
inline elements: span I INPUT SELECT br ab &
Css box model: content, border, margin, padding

About 12 box model:

CSS box model, there are two: IE box model, standard model W3C box model
box model: content, padding, margins (generally not included in the actual width of the box), the border

13.Sass, what LESS that? Why do we have to use them?

They are the CSS preprocessor. They are an abstraction layer on CSS. They are a special syntax / language compiled into CSS.
Less example is a dynamic language style. The CSS characteristics given dynamic languages, such as variables, inheritance, operations, functions. LESS may be run (support IE 6+, Webkit, Firefox) on the client, it may be in a The server runs the (aid Node.js).
Why use them?
Clear structure, easy to extend.
It can be easily shielded private grammar browser differences. Needless to say this, the package of the differences in syntax browser repetitive processing, meaningless reduced mechanical work. You can easily achieve multiple inheritance.

Fully compatible with CSS code can be easily applied to the old project. LESS CSS syntax is made only on extended, so the old CSS code can be compiled together with LESS code.

14.CSS difference between the link and @import are:

Link belongs to html tags, and CSS @import is provided
when the page is loaded, link will also be loaded, and CSS @import cited references will only be loaded after the page has finished loading the CSS
@import only just above ie5 can be identified, and the link is the html tag, browser compatibility problems do not exist
right style Link introduced significant references @import in the (@import is to import the referenced style to the current page)