Self-study for four months, successfully transferred to the pit before + learning to share | mining technology essay

I started to learn by myself in August last year and interview in December last year. Finally, I won the offer of 15K with eight wins in nine battles. Now I have just passed the probation period. Now the middle of the many detours through the interview, the problems encountered in the interview, the middle of the learning experience, here one summary to share with you. Offer first

HTML part

• How many HTML semantic tags?
  • article,footer,header,nav,section
  • Benefits of semantic tags: Semantic tags are good for SEO, with clearer structure and better readability
• What attributes does the input tag have?
  • 5, Button (checkbox) file(upload) radio data(date) number color range(range)
• What are the considerations for SEO optimization?
  • reasonabletitle,description,keywords: The weights of the search terms decrease one by one,titleValue to emphasize the focus can be, important keywords do not appear more than 2 times, and to the front, different pagestitleBe different;descriptionThe page content is highly summarized, the length is appropriate, not excessive stacking keywords, different pagesdescriptionMake a difference;keywordsJust list the key words
  • The semanticHTMLCode, W3C compliant: Semantic code makes it easy for search engines to understand web pages
  • Important contentHTMLCode comes first: search engine crawlsHTMLThe order is from top to bottom, and some search engines have restrictions on the length of the crawl to ensure that important content will be captured
  • Don’t use important contentjsOutput: Crawlers do not execute JS to get content
  • Non decorative pictures must be addedalt

The CSS part

• What are the values and characteristics of the Position property?

• calc()What are the considerations when writing functions?
  • Note that Spaces are required before and after the ‘-‘
• The difference between Transition and animaltion?

• What is landing? What are the features of the BFC?

  

• What are the features of link import and @import of CSS files?

  • Import position: Link is an HTML tag and can only be introduced in the header of the page, while @import must be written in the CSS file
  • Function: Link tag consists of many attributes :href target ref type, so that it can not only introduce CSS files, but also other files, and @import is provided by CSS, can only be used to load CSS;
  • Load order: Pages are loaded in order, so the CSS files for the link tag are loaded in order before the CSS files referenced by @import, and the files introduced by @import are not loaded until the page is loaded
  • Compatibility: the link tag is incompatible and applies to all browsers. Import is introduced in CSS2.1 and can only be identified in Internet explorer 5 or later.
  • Dynamic import aspect: Link tags can be dynamically imported through JS, but @import cannot.

• How does LESS declare a variable

  • @+ characters, such as @headerColor: red
  • Here the interviewer wants to test your foundation, you must learn LESS or SASS common methods, such as parsing functions mixed with inheritance nesting

• Let’s talk about SASS and LESS

  • Sass and Less are both CSS preprocessors, Their role is actually allows us to write CSS is more conducive to maintenance, a more logical, more convenient and efficient, less, and they have a lot in common, such as can use variables, nested, function, etc., of course, there are some differences between less by JS in the client for processing, and sass is based on the ruby on the server for processing. In a word, they are in order to improve our work efficiency.

• What is the difference between a streaming layout and a responsive layout?

• What are some ways to modify the style of an element-UI component?
  • This can be set using >>> Penetration
  • You can set it by adding deep before the element class you want to set
• Implement a two-line layout with fixed navigation bar height and adaptive navigation bar height?

<style>
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .box1 { 
    height:100px;
    background-color: red;
  }
  .box2 {
    flex:1;
    background-color: green;
  }
</style>
<body>
  <div class="container">
    <div class="box1">BOX1</div>
    <div class="box2">BOX2</div>
  </div>
</body>
Copy the code

• How to achieve the dual wing layout?

<body>
  <div class="header"></div>
  <div class="container" class="column">
    <div class="center">CNETER</div>
  </div>
  <div class="left" class="column">LEFT</div>
  <div class="right" class="column">RIGHT</div>
  <div class="footer"></div>
<body>
<style>
.container {
  width: 100%;
}

.column {
  float: left; } .center { margin-left: 200px; margin-right: 150px; } .left { width: 200px; } .right { width: 150px; }.#footer {
  clear: both;
}
</style>

Copy the code

JavaScript part

• Tell me aboutvar, let,constThe difference between?

• javascriptBuilt-in types of?
  • Number, String, Boolean, Object, Null, Undefined, Symbol.
• javascriptType conversion problems in?
  • Cast: String(val) Number(val) Boolean(val)
  • Implicit type conversion: type conversion caused by “==” and “+”. Null, undefined, 0, “”, false are false when converted to A Boolean type
• javascriptThis object in?
  

  

  The nature of this pointing problem is related to the context of JS execution. Here we recommend you to learn the seventh chapter of “JS Advanced Programming” and the second part of “Javascript you don’t know” about this chapter. Here is generally combined with closure or micro task macro task, pit or more, recommend focus on learning.

• javascriptPrototype and prototype chain understanding?
  • The first instance we create from an object will have a __proto__ attribute, which points to the prototype of the constructor’s prototype. The prototype is also an object, and it also has a __proto__ attribute, which points to the object above it. Here we have __proto__ prototype chains made up of layers of links. Objects linked by a prototype chain can call the methods of objects at the next level. Here you can also extend to the various JS inheritance methods……

• Anti-shake and throttling function?
  • Throttling function to use an analogy, for example, if you play kiss with your girlfriend, she says, you can kiss once every minute, that’s fine. But if you say two blind dates a minute, your girlfriend says no! Your patience is low! You think 2 minutes kiss once, also not line, at this time girlfriend is not happy, say you are not enthusiastic to her!
  • The stabilization function is equivalent to having a kiss every minute with your girlfriend, but if you start dating one minute earlier, you have to reset the timer. Not for another minute.

// The buffeting functionfunction debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait); }} // throttling functionfunction throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) { func.apply(context, args); previous = now; }}}Copy the code

• javascriptInheritance problem in? How many ways are there to inherit? What are the advantages and disadvantages of each?
  • There is no real inheritance in Javascript, Js inheritance is achieved through the prototype chain, the essence is just a reference to the prototype methods and properties. Rather than inheritance, delegates from javascript You Don’t Know are more appropriate. The main answer is parasitic combinatorial inheritance and ES6 Class. I recommend reading chapter 6 of javascript Advanced Programming
    

    

• javascriptClosure in?
  • Closure can realize the function inside the function to access the external function scope, can realize the variable “cache” effect, but the excessive use of closure will affect the memory, use should pay attention to timely cleaning, in addition to function corrification is the use of JS closure principle. Note that the execution environment of the function has changed.
• Handwriting for single column mode?
  • In this case, the main use of closures is to determine whether there are object instances in the current environment. If there are no object instances, they will be created, and if there are, they will be returned.

let SingleInstance = (()=>{
    let_instance = null; // A class to be instantiatedfunction _module(){
        this.name = 'xxx';
        this.callLeader =function() {return 'The Leader Is '+ this.name; } this.setLeader = (name) => { this.name = name; }}return {
        getInstance = function() {
            if(! _instance){ _instance = new _module(); }return_instance; }}}) ();Copy the code

• javasriptAsynchronous in?
  

  

• How to realize the depth copy?
  • In JavaScript, basic data types are stored on the stack, while objects are stored in the heap. And this leads to the fact that when you assign a value to a variable, you assign the underlying type variable which records the value, which records the object type, which actually records the pointer. When we change an attribute or method in an object, the pointer to the object does not change, causing all attributes or methods in variables pointing to the same object to change.

// Shallow copy // Method 1let obj1 = {
    name: lihua
}
letObj2 = object.assign ({},obi1) obj2.name = darui console.log(b.name) // darui // method 2let obj1 = {
    age: 1,
    jobs: {
        first: 'IT'}}letobj2 = {... obj1} obj1.jobs.first ='CF'Console. log(obj2.jobs.first) // CF // deep copy // method 1 /** * Disadvantages: * will ignore undefined * cannot serialize functions * cannot resolve looping referenced objects /let obj1 = {
    name: "darui".jobs: {
        first: 'IT'}}let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.jobs.first = 'CF'Console. log(obj2.jobs.first) // IT // Method 2 // Deep copy with recursion // get data type methodsexport const getObjType = obj => {
  var toString = Object.prototype.toString;
  var map = {
    "[object Boolean]": "boolean"."[object Number]": "number"."[object String]": "string"."[object Function]": "function"."[object Array]": "array"."[object Date]": "date"."[object RegExp]": "regExp"."[object Undefined]": "undefined"."[object Null]": "null"."[object Object]": "object"
  };
  if (obj instanceof Element) {
    return "element";
  }
  returnmap[toString.call(obj)]; }; /** * Object deep copy */export const deepClone = data => {
  var type = getObjType(data);
  var obj;
  if (type= = ="array") {
    obj = [];
  } else if (type= = ="object") {
    obj = {};
  } else{// There is no further layerreturn data;
  }
  if (type= = ="array") {
    for(var i = 0, len = data.length; i < len; i++) { obj.push(deepClone(data[i])); }}else if (type= = ="object") {
    for (var key indata) { obj[key] = deepClone(data[key]); }}returnobj; }; // Method 3: ConardLi's method is recommended herefunction clone(target, map = new WeakMap()) {// Clone the original typeif(! isObject(target)) {returntarget; } // initialize consttype = getType(target);
    let cloneTarget;
    if (deepTag.includes(type)) {
        cloneTarget = getInit(target, type); } // prevent circular referencesif (map.get(target)) {
        return map.get(target);
    }
    map.set(target, cloneTarget); / / cloneset
    if (type= = =setTag) {
        target.forEach(value => {
            cloneTarget.add(clone(value,map));
        });
        return cloneTarget; } // Clone the mapif (type === mapTag) {
        target.forEach((value, key) => {
            cloneTarget.set(key, clone(value,map));
        });
        return cloneTarget; } // Clone objects and arrays const keys =type === arrayTag ? undefined : Object.keys(target);
    forEach(keys || target, (value, key) => {
        if (keys) {
            key = value;
        }
        cloneTarget[key] = clone(target[key], map);
    });

    return cloneTarget;
}
Copy the code

• How many ways to implement array de-duplication? (Interviewers typically ask for multiple approaches.)

// Use Set in ES6function unique (arr) {
  returnArray.from(new Set(arr))} var arr = [1,1,'true'.'true'.true.true, 15, 15,false.false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'.'a', {}, {}]; Console. log(unique(arr)) //function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[I]==arr[j]){// if arr[I]==arr[j]); j--; }}}returnarr; } var arr = [1,1, 1]'true'.'true'.true.true, 15, 15,false.false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'.'a', {}, {}]; Console. log(unique(arr)) //function unique(arr) {
    if(! Array.isArray(arr)) { console.log('type error! ')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    returnarray; } var arr = [1,1, 1]'true'.'true'.true.true, 15, 15,false.false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'.'a', {}, {}]; Console. log(unique(arr)) //function unique(arr) {
    if(! Array.isArray(arr)) { console.log('type error! ')
        return
    }
    var arrry= [];
     var  obj = {};
    for (var i = 0; i < arr.length; i++) {
        if(! obj[arr[i]]) { arrry.push(arr[i]) obj[arr[i]] = 1 }else {
            obj[arr[i]]++
        }
    }
    returnarrry; } var arr = [1,1, 1]'true'.'true'.true.true, 15, 15,false.false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'.'a', {}, {}]; Console. log(unique(arr)) //function unique(arr){
    returnarr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]); } var arr = [1,1, 1]'true'.'true'.true.true, 15, 15,false.false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'.'a', {}, {}]; console.log(unique(arr)); // method 6 [...new Set(arr)]Copy the code

• How many ways can arrays be flattened?

1 / / methodfunction flatten(arr){
    return arr.reduce(function(prev,item){
        returnprev.concat(Array.isArray(item)? flatten(item):item); } []); } // Method 2 // uses ES6function flatten(arr){
    return arr = arr.flat(Infinity)
}
Copy the code

• JS macro task and micro task?
  • The main reason for the emergence of macro tasks and micro tasks is that JS is executed by a single thread. The previous task is not completed, and the subsequent task cannot be carried out. In order to solve this problem, we need to do some request tasks while presenting the page to the user or processing user interaction. JS introduces the concept of macro task and micro-task, namely synchronous and asynchronous. In JS, synchronous task mainly refers to the whole JS code block, setTimeout and setInterval, and micro-task includes promise, await and process.nexttick.
  • When our mission into the execution stack, the first will determine task is synchronous or asynchronous, if is asynchronous direct hangs, separate, end with a task or tasks in the queue waiting, if is synchronization task, directly into the main thread execution, after the synchronization task execution will judgment task queue have to execute tasks, If so, all the microtasks will be executed at one time. After the execution, if the page needs to be re-rendered, the rendering work will be carried out. After the rendering, the next round of the cycle will be entered.
    

    

• What do you understand about Promise?
  • The reason for promise is the callback hell problem caused by THE CALLBACK function of JS. Once the callback function is nested layer by layer, it will cause the code to be too coupling and difficult to read, and it is difficult to find the error. The chained invocation of promises is a good solution to callback hell. Promises are much more elegant in writing than callback functions, and promises can handle special scenarios through.race.all.finall. But there are problems with promises. Once promis are created, they are executed immediately, and once the status changes, it doesn’t change again.
  • (It is recommended to study the relevant chapters of ES6 by Ruan Yifeng.)
• What about classes in ES6?
  • There is no such thing as a Class per se, and ES6 was designed in part because of the complexity of using combinatorial or parasitic combinatorial inheritance. With class, we can write more smoothly and semantically when creating classes and implementing inheritance. But Class also has its drawbacks. For example, we cannot pass methods to Class (in my humble opinion).
  • (It is recommended to study the relevant chapters of ES6 by Ruan Yifeng.)
• What methods can be called on the Array object? What is the role of each? In what context has it been used?
  • Here is a summary of the map for you

• What’s the difference between an arrow function and a normal function?
  • 1. Writing features: 3. Call (), apply(), bind(), and call() cannot change the direction of this in arrow functions. 4. Arrow functions do not have their own arguments
  • Ordinary functions (1), indicated by the function keyword (2), can be used as constructors and have archetypes (3), can have their own this object
• What are the methods of JS modularization, and what are the advantages and disadvantages?
  • First, the problems modularity solves: modularity solves the problem of naming conflicts and improves the reusability and maintainability of code.
  • JS module development history
    

    

• What new ES6 syntax have you used?
  • Reflect and your interviewer will probably ask you to Reflect if you think you’re familiar with something and don’t dig a hole for yourself.
  • The new variable declaration method let const
  • Arrow function
  • Structure assignment of a variable
  • Promise await that can be processed asynchronously
  • New modular approach
• What’s the maximum value in the array? Go straight to code

Method 1 uses the Max () method of the Math objectletarr = [125, 448 , 340 , -895 ]; Math.max.apply(Math, arr ); Math.max.call(Math, 125, 448 , 340 , -895); Math.max.call(Math, Math,... Arr. Reduce ((num1, num2) => {returnnum1 > num2 ? Num1: num2}forCycle through to find the maximumCopy the code

• Array sort algorithm: bubble sort, select sort, merge sort, fast sort
  • Here we need to focus on learning fast discharging and bubbling

// Bubble sortfunction bubbleSort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
    for(var j = 0; j < arr.length - i - 1; j++) {
        if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; }}}returnarr; } // Select sortfunction fnSort(arr){
    var t;
    for(var i = 0; i<arr.length-1; i++) {for(var j = i+1; j<arr.length; j++) {if(arr[i]>arr[j]){ t = arr[i]; arr[i] = arr[j]; arr[j] = t; }}}returnarr; } // Quick sort (5 lines of code)function quickSort(array, start = 0, end = array.length -1) {
  let pivotIndex = partition(array, start, end)
  quickSort(array, start, pivotIndex - 1)
  quickSort(array, pivotIndex + 1, end)
  returnArray} // Quicksort twofunction quickSort(arr) {
    if(arr.length == 0) {
        return[]; } var cIndex = math.floor (arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = [];for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else{ r.push(arr[i]); }}return quickSort(l).concat(c, quickSort(r));
}
Copy the code

Browser dependent

• The process from entering the URL to appearing in the middle of the page? (study)
  • There are too many answers, a lot of online search, I won’t write here. But there are a couple of key points that I want to remind you of, and I want to talk about the Http connection process, the Tcp three-way handshake and three-way wave. The presentation of the page after the requested data arrives in the browser.
  • The other thing to think about is, we all ask this question in interviews, we all know, how can you say your highlight that will make the interviewer stand out? Here’s what I think, although we all know that the process from entering urls to displaying pages doesn’t have a big impact on our daily work. But we look at it from another Angle. That’s performance optimization. Now if you think back to the whole process of the request, did each node of the request correspond to the work we did to optimize the project, such as reducing DNS queries, using CSS selectors properly and properly, reducing redraw and backflow, minimizing file size, making persistent connections, To avoid TCP each link caused by performance loss and so on. Here you can put the previous request process to say how detailed, you can optimize the project to say how beautiful. Sweet not sweet?
• Please describe the difference between cookies, sessionStorage and localStorage?

• Can you say something about the browser caching mechanism?
  • In fact, this is also about the topic of performance optimization, if your previous answer is perfect enough, the interviewer will not ask about the browser cache content, I will not introduce too much here, but I will recommend a big guy’s blog address, I believe you will grow after reading.

Vue related

• VueWhat are the common instructions, please write at least 9?
  • Basic knowledge of
• VueThe difference between the instruction V-if and v-show

• Why does data in Vue have to return an object through a function?
  • This involves the reuse of components and the storage of objects in JS. If there is only one object, there may be multiple pages with a common component. Once the data of components is changed, it will affect other components. If one object is returned each time, it is equivalent to redividing a chunk of memory to store data, and there will be no interaction
• What do you understand about MVVM?
  • The Model represents the data Model, where you can also define the business logic for data modification and manipulation.
  • View represents the UI component that transforms the data model into a UI for presentation.
  • A ViewModel listens for changes in Model data, controls the behavior of the View, and handles user interactions

  • inMVVMArchitecture,ViewandModelThere’s no direct connection between themViewModelTo interact,ModelandViewModelThe interaction is two-way, thereforeViewChanges to the data are synchronized to the Model, and changes to the Model data are immediately reflectedViewOn.
  • ViewModelThrough two-way data bindingViewLayer and theModelThe layers are connected, andViewandModelThe synchronization is completely automatic without human intervention, so developers only need to focus on the business logic, there is no need to manually manipulate DOM, there is no need to pay attention to the synchronization of data state, complex data state maintenance is completely byMVVMTo unify management

• Questions about the lifecycle of Vue components?
  • What are the phases of the Vue life cycle? What are their characteristics? What did you do in which life cycle?
    • It is recommended that you learn the flow chart of the life cycle of the Vue website, but when answering this question, you should note that the life cycle of the keep-alive component changes when it is used. Components can have only two cycles, activated (called when the component is active) and deactivated (called when the component cache fails).
  • Which life cycles are triggered when a page is re-rendered?
    • beforeUpdate===>updated
  • Vue lifecycle execution order from parent to child?

• What is the difference between computed and Watch in Vue? Where was it used in the project?

• What are the communication modes in some Vue components? And the usage scenarios of various communication modes
  • The main way here is not to say, the relevant online blog a lot of search. Here’s how to answer that question:

  Classification: What are the father’s ways and children? What are the children to the father? What is communication across hierarchies? Basically from these three angles to answer there will be no omission.

• What is the effect of keep-alive on routing?
  • Only the Activated and Deactivated phases are triggered when the component life cycle changes.
• Questions about the VueRouter?
  • What are the modes of Vue routing?
  • How to implement lazy loading of Vue routing?
  • Vue route navigation guard understanding? What can you do in the navigation guard?
  • Vue routing primitives? Which scenarios are used?
  • What is the execution order of Vue route navigation?
  • Router?
• How to implement dynamic binding between class and style in Vue? (basic)
• Why can only one HTML tag be wrapped around the template tag in every.vue file? (Foundation)(Foundation)
• What is the difference between mixins and mixins in Vue? (basic)
• What is Vuex? How to use it? What scenarios have you used it in? What’s wrong with him? (basic)
• How does Vue implement bidirectional data binding? (basic)
  • It’s going to be extended hereObject.definePropertyThe defects?
  • It also extends to asking Proxy andObject.definePropertyThe contrast of
• So what does NextTick do? Where has it been used? Say some usage scenarios (basics)
• What does the key in the V-for loop in Vue do? (basic)
• What are your advantages and disadvantages of SPA page? (basic)
• How to implement asynchronous components? (basic)
• Did you encapsulate components yourself as you worked on the project? If so, what? How is it packaged?

Http related

• What are Http request methods? And the use of the method
• Http status code and its meaning?
• What is the structure of Http request or response packets?
• Https encryption, TLS related questions?
  • Here the main design to the problem of digital visa and public key private key, here we go to search, big guys write much better than ME
• Here is a table showing the history of HTTP

Webpack

• What do you think of Webpack? His main role?
  • WebPack is a module packaging tool. You can use WebPack to manage your module dependencies and compile the static files required by the output modules. It is mainly divided into four groups to module entrance, loader, Plugin, export. Loader allows us to package files in different formats, Plugin can perform performance optimization for our project, or other operations, such as hot update, debugging, etc. It can well manage and package HTML, Javascript, CSS and various static files (images, fonts, etc.) used in Web development, making the development process more efficient. Webpack has module loaders for different types of resources. The WebPack module packer analyzes the dependencies between modules and generates optimized and merged static resources
• Which plug-ins for WebPack have you used? What does a plug-in do? (It is possible to ask what properties the plug-in has, or what the packaged project looks like)
• How to use Webpack for project optimization?
  • Mainly from the following aspects: JS related plug-ins, CSS related plug-ins, package volume, figure optimization, loader optimization, basically not bad.

The interview

• Story-style self-introduction + communicative q&A + solid basic knowledge + marketing = Offer

Personal summary and reflection

A Wolf travels thousands of miles to eat meat. A dog travels thousands of miles to eat shit. The 4 months of self-study in isolation is actually quite great for my growth, and also gives me a new understanding of the surrounding environment. The offer result I got is only a reflection of my learning achievements during this period, but the harvest beyond learning is what touches me the most. During this period, I have faced fear, anxiety, escape, depression and other problems, and I have realized a deep level of myself: stupid self-esteem, mixed contradictions, inner strength. And these deep-seated problems and constantly forced me to learn, to progress, to torture their meat or eat shit? Fortunately their hobby did not lose, clear answer to eat meat. At the end of the program: “If any students want to analyze themselves with me, welcome to communicate”

Thank you to my friends and family who have supported me throughout this time, to the nuggets community for their excellent posts, and to all of you for reading them.