Junior front-end interview questions (1) html/css/js

Table of contents

1. HTML

1. How to understand the semantics of HTML?

2. What are the HTML tags?

3. The difference between Canvas and SVG

2. CSS 

1. What is BFC?

2. How to achieve vertical centering?

3. How to determine the priority of css selector?

4. How to clear float?

 5. What is the difference between box models?

6. What is the difference between display block, inline and inline-block?

7. Understanding of CSS engineering?​ 

3. Extension

3.1 Adaptive, the difference between rem, em and vw

3.2 Let’s talk about HTML5 drag API 

3.3 What features do preprocessors generally have?​ 

4. JavaScript

1. Basic types

 2. How to detect data type

3. The difference between null and undefined

4. How to determine whether an object is an empty object?

5. What is the prototype chain?

6.Pointing to this

7. What did new do? 

8. Execute the function immediately

9. Closure

10. How to implement classes in js

11. The difference between v-if and v-show

---

1. HTML

1. .How to understand HTML language?

      Semantic tags are a methodology for writing HTML. For example, use P for paragraphs, h1--h6 for titles, main for content, etc. The HTML writing specifications are clarified, suitable for search engines to retrieve, suitable for us to read, and beneficial to team maintenance.

2. What are the HTML tags?

header, footer, main, video, etc.

3. The difference between Canvas and SVG

   Canvas mainly uses brushes to draw 2D graphics, and SVG uses labels to draw irregular vector graphics.

The same thing: they are both used to draw 2D graphics.

difference:

• Canvas draws bitmaps, and SVG draws vector images;
• SVG renders slowly when there are too many nodes. Canvas has better performance, but it is more complicated to write;
• SVG supports layering and events, Canvas does not support it, but it can be implemented using libraries.

---

2. CSS 

1. What is BFC?

BFC, block-level formatting context.

1. Conditions for triggering BFC [5]

•  Floating elements
• Absolutely positioned elements
• inline block element
• The overflow value is not visible block element/overflow:hedden
• Flexible element, display:flex

2. What problem was solved?

• clear float
• Prevent vertical margin merging

2. How to achieve vertical centering?

• flex layout [Highest priority, most used]
• margin-top:50%
• translate:50%
• absolute margin auto
• table has its own attributes;
• div is installed as table; (display: table)

3. How to determine the priority of css selector?

• The more specific the priority;
• With the same priority, the later ones override the previous ones;
• have! important has the highest priority

4. How to clear float?

 4.1 Add .clearfix to the parent element

.clearfix:after{
  content:'';
  display:block;
  clear:both;
}

4.2 Add: overflow:hidden to the parent element 

 5. What is the difference between box models?

The standard box model is content-box, total width=width+margin+padding+border;

The second is the IE box model border-box, and the total width is width.

Same point:

 are used to specify the width

difference:

 border-box is better to use

6. What are the differences between block, inline and inline-block in display?

(1) block: It will occupy one line exclusively, and multiple elements will start a new line. You can set the width, height, margin and padding attributes;

(2) inline: The element will not occupy a line alone, and setting the width and height attributes is invalid. However, the horizontal margin and padding properties can be set, but the vertical padding and margin cannot be set;

(3) inline-block: Set the object as an inline object, but the content of the object is presented as a block object, and subsequent inline objects will be arranged in the same line.

7. Understanding of CSS engineering?  

CSS engineering is to solve the following problems:

1. Macro design: How to organize CSS code, how to split it, and how to design the module structure?

2. Coding optimization: How to write better CSS?

3. Build: How should I process my CSS so that its packaging results are optimal?

4. Maintainability: Once the code is written, how to minimize its subsequent change cost? How to ensure that any colleague can easily take over? I usually use preprocessors: Less, Scss, etc.

3. Extension

3.1 Adaptive, the difference between rem, em and vw

All are relative units.

difference:

• Compared with HTML, rem bypasses the complex hierarchical relationship.
• em relative parent trouble
• vw visual window 1%

3.2 Let’s talk about HTML5 drag API 

• dragstart: The main body of the event is the element being dragged and dropped, and it is triggered when the dragged element starts to be dragged and dropped;
• darg: The event subject is the dragged element, which is triggered when the dragged element is being dragged;
• dragenter: The event subject is the target element and is triggered when the dragged element enters an element;
• Dragover: The event subject is the target element, which is triggered when it is dragged and moved within an element;
• dragleave: The event subject is the target element, and is triggered when the dragged element moves out of the target element ;
• drop: The event subject is the target element and is triggered when the target element completely accepts the dragged and dropped element;
• dragend: The event body is the element being dragged and dropped, and is triggered when the entire drag-and-drop operation ends.

3.3 ​​ What features do preprocessors generally have?  

• The ability to nest code to reflect the hierarchical relationship between different css attributes through nesting;
• Support defining css variables;
• Provide calculation functions;
• Allows extend and mixin of code snippets;
• Supports the use of loop statements;
• Supports modularization of CSS files for reuse.

4. JavaScript

1. Basic types

number、boolean、string、null、undefined、object、symbol、bigint

ps: If the object is empty, use unll; if the non-object is empty, use undefined.

 2. How to detect data type

• typeof

其中 数组、对象、null 都会被判断为object

• instanceof
• constructor
• Object.prototype.toString.call()

3. null和undefined的区别

undefined means undefined, null means an empty object.

4. 如何判断某对象是空对象？

• Use JSON’s own stringify 

if(JSON.stringify(aObj)=='{}'){
  console.log(aObj,'是一个空对象');
}

• Use the ES6 method Object.keys()

if(Object.keys(bObj).length<0){
  console.log(bOnb,'是空对象');
}

5. 原型链是什么

A prototype is an object template that defines some public properties and public methods for object instances. 

Prototype chain: It is a collection of multiple prototypes, or the prototype chain is the historical record of the creation process of prototype objects.

•  What problem was solved?

Implement [inheritance] without class

• shortcoming

Private properties are not supported. calss support.

6.this的指向

Simply speaking, this is the first parameter of call.The arrow function does not have this.

global scope	oriented window
in method	Point to the object it belongs to
Constructor calling	Pointer to the instantiated object

• func(p1,p2) ==func.call(undefined,p1,p2)
• obj.child.method(p1,p2) ==obj.child.method.call(obj.child,p1,p2)

var obj = {
  foo: function(){
    console.log(this) //obj
  }
}

obj.foo()  

obj.foo() 等价于obj.foo.call(obj),所以，这里的this 指向obj

7. new 做了什么 

this is a property in the execution context that points to the object on which this method was last called.

• Create temporary object/new object
• Binding prototype
• Specify this=temporary object
• Execute constructor
• Return temporary object

8.立即执行函数

 Declare an anonymous function and execute it immediately. This approach is to execute the function immediately.

Executing the function immediately creates a local variable.

Advantages: Good compatibility.

9.闭包

       Closure is a grammatical property. All functions in js support closures. The sum of "function" and "variables accessible within the function" is a closure.

What problem was solved?

• Avoid polluting the global environment;
• Provides indirect access to local variables;
• Maintain variables so that they are not garbage collected.

Improper use may cause memory leaks.

10. js如何实现类

There are two methods, one is to use prototype and the other is to use calss

class Dog {
  static kind = '狗' // 等价于在 constructor 里写 this.kind = '狗'
  constructor(name) {
    this.name = name
    this.legsNumber = 4
    // 思考：kind 放在哪，放在哪都无法实现上面的一样的效果
  }
  say(){
    console.log(`汪汪汪~ 我是${this.name}，我有${this.legsNumber}条腿。`)
  }
  run(){
    console.log(`${this.legsNumber}条腿跑起来。`)
  }
}
const d1 = new Dog('啸天')
d1.say() 

11. v-if 和v-show 的区别

1. Similar points: they both control display and hiding.

2. Differences:

    (1) Different control methods;

    v-show controls hiding through display:none, and the dom element is still there; v-if shows and hides the entire dom element to be added or deleted.

     (2) The compilation process is different;

     v-if switching has a partial compilation/uninstallation process, and the internal event listeners and sub-components are properly destroyed and rebuilt during the switching process; v-show is just a simple CSS-based switching.

     (3) Compilation conditions are different;

             v-if is lazy, if the initial condition is false, do nothing; only start partial compilation when the condition becomes true for the first time (is the compilation cached? After the compilation is cached, and then switch partial uninstall);

               v-show is compiled under any conditions (whether the first condition is true or not), and then cached, and the DOM   elements are retained.

     (4) Performance consumption;

        v-if has a higher switching cost; v-show has a higher initial rendering cost.

     (5) Applicable scenarios:

        v-if is suitable for operating conditions that are unlikely to change; v-show is suitable for frequent switching.