Write in front
The knowledge that the front end needs to understand can be said to be all-encompassing. And it is a lot of effort to dig into a certain point of knowledge. I have been busy with interviews recently, and I have read a lot of interview guides to record the front-end knowledge that I think is worth watching.
HTML and CSS part
Browser kernel: The browser kernel is the core of the browser, also known as the "rendering engine", used to interpret the syntax of the web page and render it on the web page. The browser kernel determines how the browser should display web content and page format information. The browser kernel can be divided into two parts: the rendering engine (layout engineer or Rendering Engine) and the JS engine.
1. IE browser kernel: Trident kernel, also commonly known as IE kernel;
2. Chrome browser kernel: collectively called Chromium kernel or Chrome kernel, used to be Webkit kernel, now Blink kernel;
3. Firefox browser kernel: Gecko kernel , Commonly known as Firefox kernel;
4. Safari browser kernel: Webkit kernel;
5. Opera browser kernel: originally its own Presto kernel, later Webkit, and now Blink kernel;
6. 360 browser, cheetah browser kernel: IE +Chrome dual-core;
7. Sogou, Aoyou, QQ browser kernel: Trident (compatible mode) + Webkit (high-speed mode);
8. Baidu browser, Window of the World kernel: IE kernel;
9, 2345 browser kernel: before It is the IE core, and now it is also the IE+Chrome dual core;
Box model: The difference between the standard box model and the IE box model, use boder-sizing for conversion.
flex layoutDraw a nine-square grid
.wrap{
display:flex;
flex-direction:column;
height:300px
}
.flex-box{
display:flex;
flex-direction:row;
flex:1
}
.flex-item{
flex:1;
}
Talk about clearing floats:
1. Add to the floating element to be cleared overflow:auto;zoom:1;
2. Add a <div class="clear"></div>.clear {clear:both;overflow:hidden}
This part is relatively basic and there is no problem, the next is the JS part
JavaScript
What is the difference between undefined and undeclared?
Variables that have been declared in the scope but have not yet been assigned are undefined. In contrast, variables that have not been declared in scope are undeclared.
For references to undeclared variables, the browser will report a reference error, such as ReferenceError: b is not defined. But we can use the typeof security protection mechanism to avoid errors, because for undeclared (or not defined) variables, typeof will return "undefined".
What is the result of the valueOf and toString of {} and []?
The valueOf result of {} is {}, the result of toString is "[object Object]"
The result of [] valueOf is [], and the result of toString is ""
Speaking of this, I should extend the prototype chain:
When we access an object and property, if the property does not exist in the object, then it will go to its prototype object to find the property, and this prototype object will also have its own prototype, so we keep looking for it. The source is : Object.prototype.
js method to get the prototype: p.proto,Object.getPrototypeOf§
Talk about the understanding of this, call, apply and bind
In the browser, this points to the window object in the global scope;
In the function, this always points to the object that called him last;
In the constructor, this points to the new object from new;
This in call, apply, and bind is strongly bound to the specified object;
The this in the arrow function is special. The arrow function this is the this of the parent scope, not the this when calling. You must know that the first four methods are determined when calling, which is dynamic, and the this point of the arrow function is static , It is confirmed when the statement is made;
Apply, call, and bind are some of the APIs built into the function by js, calling them can specify the execution of this for the function, and can also pass parameters.
Everyone knows how to use it, but you need to pay attention to how to understand it.
About closures
Closures are also commonplace. They are introduced in "JS You Don’t Know": == When a function can remember and access the lexical scope it is in, a closure is produced, even if the function is within the current scope. Outside execution. == I think a little partner with a little knowledge suddenly realized.
In layman's terms: A closure refers to a function that has access to variables in the scope of another function. The most common way to create a closure is to create another function within a function. The created function can access the local variables of the current function. .
function a(){
var n = 0;
function add(){
n++;
console.log(n);
}
return add;
}
var a1 = a(); //注意，函数名只是一个标识（指向函数的指针），而（）才是执行函数；
a1(); //1
a1(); //2 第二次调用n变量还在内存中
About events (three event models)
eventIt is the interactive actions that occur when the user operates the webpage or some operations of the webpage itself. There are three event models in modern browsers.
1. DOM0-level model: This model will not spread, so there is no concept of event flow, but some browsers now supportBubbling wayTo achieve, it can directly define the monitoring function in the web page, or specify the monitoring function through the js attribute. This method is compatible with all browsers.
2. IE event model: In this event model, an event has two processes,Event processing stage,withEvent bubbling phase. The event processing stage will first execute the listening event bound to the target element. Then there is the event bubbling phase. Bubbling refers to the event bubbling from the target element to the document, and then checking whether the passing node is bound to the event listener function, and executing it if there is. This model adds monitoring functions through attachEvent. Multiple monitoring functions can be added, which will be executed in sequence.
3. DOM2 event model: In this event model, an event has three processes, the first process isEvent capture phase. Capture refers to the event propagating from the document all the way down to the target element, checking in turn whether the passing node is bound to an event listener function, and executing it if there is one. The latter two stages are the same as the two stages of the IE event model. In this event model, the event-bound function is addEventListener, and the third parameter can specify whether the event is executed in the capture phase.
DOM manipulation-how to add, remove, move, copy, create and find nodes?
(1) Create a new node
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点`
(2) Add, remove, replace, insert
appendChild(node)
removeChild(node)
replaceChild(new,old)
insertBefore(new,old)
(3) Find
getElementById();
getElementsByName();
getElementsByTagName();
getElementsByClassName();
querySelector();
querySelectorAll();
(4) Attribute operation
getAttribute(key);
setAttribute(key, value);
hasAttribute(key);
removeAttribute(key);
What are the native methods of js arrays and objects?
Handwriting an ajax
Primitive:
//1：创建XMLHttpRequest对象
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send(null); // 严谨写法
//4:监听请求，接受响应
xhr.onreadysatechange=function(){
if(xhr.readySates==4&&xhr.status==200 || xhr.status==304 )
console.log(xhr.responsetXML)
}
jquery:
$.ajax({
type:'post',
url:'',
async:ture,//async 异步 sync 同步
data:data,//针对post请求
dataType:'jsonp',
success:function (msg) {
},
error:function (error) {
}
})
Your understanding of modular development
Combining with your own project, carry an introduction of a senior:
My understanding of modules is that a module is a set of methods to achieve a specific function. At the very beginning, js only realized some simple functions, so there was no concept of modules, but as the program became more and more complex, the modular development of code became more and more important.
Since functions have the characteristics of independent scope, the most primitive way of writing is to use functions as modules and several functions as one module, but this method is easy to cause pollution of global variables
, and there is no connection between modules.
Behind the proposed wording of the object, is achieved by the method as a function of an object, such as a function to solve the direct use of some of the shortcomings of the module, but that would be exposed by
some members of all modules, external code can modify the internal properties value.
Nowadays, the most commonly used method is to execute the function immediately. By using closures, the private scope of the module can be established without causing pollution to the global scope.
js module specification
CommonJS: Modlue.exports.x throws (define the output interface of the module), require to reference. This module loading solution is a server-side ( nodejs ) solution. It introduces modules in a synchronous manner. Because the files on the server-side are stored on the local disk, the reading is very fast, so there is no synchronous loading. problem. But if it is on the browser side, because the module is loaded using network requests, it is more appropriate to use asynchronous loading.
AMD: This solution uses asynchronous loading to load the module. The loading of the module does not affect the execution of subsequent statements. All statements that depend on this module are defined in a callback function, and the callback function is executed after the loading is completed. **require.js ** implements the AMD specification.
CMD: This solution and AMD solution are both to solve the problem of asynchronous module loading. sea.js implements the CMD specification. The difference between it and require.js lies in the processing of dependencies and the timing of execution of dependent modules when the module is defined.
ES6 proposed: Refer to the previous blog
(Important) js operating mechanism
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(resolve, reject) {
console.log(2);
resolve()
}).then(function() {
console.log(3)
});
process.nextTick(function () {
console.log(4)
})
console.log(5)
Think about the result first. First introduce the operating mechanism
js single thread:
A major feature of JavaScript language is single thread, that is, only one thing can be done at the same time.
The single thread of JavaScript is related to its purpose. As a browser scripting language, the main purpose of JavaScript is to interact with users and manipulate the DOM. This determines that it can only be single-threaded, otherwise it will bring very complicated synchronization problems. For example, suppose that JavaScript has two threads at the same time. One thread adds content to a certain DOM node, and the other thread deletes the node. At this time, which thread should the browser use?
Therefore, in order to avoid complexity, JavaScript has been single-threaded since its birth. This has become a core feature of the language and will not change in the future.
js event loop
There will be many tasks during the execution of js code. These tasks are generally divided into two categories: 1. Synchronous tasks 2. Asynchronous tasks
When we open the website, the rendering process of the web page is a lot of synchronous tasks, such as page skeleton and page element Rendering. Asynchronous tasks are tasks that take up resources and take a long time, such as loading pictures and music.
Synchronous tasks enter the main thread, asynchronous tasks enterEvent TableRegister to report.
When the specified thing is completed, the Event Table will move this function intoEvent Queue.
The task in the main thread is empty after execution, it will go to the Event Queue to read the corresponding function, and enter the main thread for execution.
The above process will be repeated continuously, which is often saidEvent Loop(Event loop).
Asynchronous tasks can be divided into:
microtask (microtask):
When the code in the execution stack is executed, it will first check whether there are any tasks in the micro task queue before executing the macro task queue. The macro task queue will be executed when the task is cleared,
including: Promise, nextTick, callback, Object.observe, MutationObserver
macrotask (macro task):
wait for the execution stack and micro task queue to be executed before execution, and after each macro task is executed, it will go to see if there are any newly added tasks in the micro task queue, if so, it will first Only when the tasks in the micro task queue are cleared will the next macro task continue to be executed,
including: script code block, setTimeout, setInterval, I/O
Recommended interview answer:
First of all, js runs in a single thread. When the code is executed, the execution context of different functions is pushed onto the execution stack to ensure the orderly execution of the code.
When executing synchronous code, if an asynchronous event is encountered, the js engine will not wait for its return result, but will suspend the event and continue to execute other tasks in the execution stack
When the synchronization event is executed, the callback corresponding to the asynchronous event is added to another task queue different from the current execution stack to wait for execution.
The task queue can be divided into a macro task pair column and a micro task pair column. When the event in the current execution stack is executed, the js engine will first determine whether there is a task in the micro task pair column that can be executed, and if there is one, the micro task queue will be the first The event is pushed onto the stack for execution.
When all the tasks in the micro-task pair are executed, the tasks in the macro-task pair are determined.
Then the first topic should be clear at a glance: 25431
What is the difference between var, let and const?
The var declaration has variable promotion, let, const will not
console.log(a); // undefined ===> a已声明还没赋值，默认得到undefined值
var a = 100;
console.log(b); // 报错：b is not defined ===> 找不到b这个变量
let b = 10;
console.log(c); // 报错：c is not defined ===> 找不到c这个变量
const c = 10;
let and const declarations form block scope
if(1){
var a = 100;
let b = 10;
}
console.log(a); // 100
console.log(b) // 报错：b is not defined ===> 找不到b这个变量
-------------------------------------------------------------
if(1){
var a = 100;
const c = 1;
}
console.log(a); // 100
console.log(c) // 报错：c is not defined ===> 找不到c这个变量
In the same scope, let and const cannot declare variables with the same name, and var can
declare variables with var will be mounted on the window, while let and const declared variables will not
var a ="lly" console.log(window.a)//lly
What does the new operator do
Create an empty simple JavaScript object (ie {});
link the object (ie, set the object's constructor) to another object;
use the newly created object in step 1 as the context of this;
if the function does not return an object, then Return this.
If you are familiar with the prototype chain:
Gracefully handle Promise callbacks (async, await)
async/await is a new method of writing asynchronous or non-blocking code based on Promise, and is generally considered to be the ultimate and most elegant solution for JS asynchronous operations. Compared with Promises and callbacks, it is more readable and concise. After all, then() is also very annoying.
Async means asynchronous, and await is short for async wait, that is, asynchronous wait.
So semantically it is well understood that async is used to declare that a function is asynchronous, and await is used to wait for an asynchronous method to complete.
If a function is added with async, then the function will return a Promise
async function test() {
return "lly"
}
console.log(test()) // -> Promise {<resolved>: "lly"}
You can see that the output is a Promise object. Therefore, the async function returns a Promise object. If you return a direct quantity directly in the async function, async will encapsulate the direct quantity into a Promise object and return it through PromIse.resolve().
Make a comparison
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${
n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${
n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${
n}`);
return takeLongTime(n);
}
Proime processing:
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${
result}`);
});
}
doIt();
async/await processing
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${
result}`);
}
doIt();
The advantage of async/await is that it handles the then call chain, can write code more clearly and accurately, and can also elegantly solve the callback hell problem.
Advanced reading: "Hardcore JS" in-depth understanding of asynchronous solutions
https://juejin.im/post/6844904064614924302#heading-69
JS inheritance
Prototype chain, apply or call
View
MVVM framework
It is best to combine the project introduction, for example. In my project, I requested the user's personal information from the back-end interface (Model) through the vue.js code (axios or ajax communication), and after the request successfully obtained the response data. The VM sends the data to the View (page), and the page changes accordingly.
Because VUE is data-driven, Vue itself binds the DOM and data. Once the binding is created, the data changes and the DOM also changes, then the core isVM(ViewModel)
Recommended reading: https://www.jianshu.com/p/e4e3519a58a6
vuex
Mutations are the only ones that can change the state.
Actions are initiated by dispath in the Vue component. Actions then call Commit to redistribute mutations, and submit mutations to change data and change views.
Combining your own project is simple.
Life cycle
Vue computed principle, the difference between computed and watch;
Vue component communication
vue-router
When dynamic components (routes) are wrapped, inactive component instances will be cached, which is mainly used to preserve component state and avoid re-rendering
Finish here first