Investigation of basic skills

First, about HTML

  1. HTML semantic tag understanding seo optimization

    Semantic simply means to do the right thing with the right meaning of the tag eg: header: header navigation: nav, etc. The advantages of semantic are easy to modify and maintain, support accessible reading, search engine friendly, convenient SEO, future-oriented HTML, browsers may provide richer support in the future

  2. Seo optimization

    tag,
    tag and
    tag. As the name implies, they represent the title, content summary, and keywords of the current page, respectively

    Robots files tell search engines what content and relevant pages can be captured

    Sitemap files to help search engines access sites (protocol)

    Baidu automatically pushes the code

let bp = document.createElement('script'); const curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = `https://zz.bdstatic.com/linksubmit/push.js`; }else { bp.src = `http://push.zhanzhang.baidu.com/push.js`; } let s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); }) ();Copy the code

  1. H5 Added attributes and labels

    Form attributes: Autofocus — automatically gets focus, multiple– selects multiple values, and Required — cannot be null

    Connection property: Size Target Hyperlink

    Defer: Instead of executing the script after it has loaded, wait until the entire page has loaded

    Async: executes the script immediately after it is loaded, rather than waiting for the entire page to be loaded. This is asynchronous execution. Multimedia labels Multimedia labels such as Video Audio Source and new labels such as Time and Time

  2. New API for H5

    LocalStorage: permanent storage, multi-window sharing, maximum 20MB

    SessionStorage: the life cycle is to close the browser window, close the current window data storage failure; The data can be accessed in the same window and cannot be shared by multiple Windows. The data size is 5mb

    New DOM action document.querySelector(” selector “); Document. QuerySelectorAll (‘ selector ‘);

    The new class operation can delete and replace classes

2. About CSS

  1. CSS selectors

    • Label selector, pseudo-element selector: 1

    • Class selector, pseudo-class selector, attribute selector: 10

    • Id selector: 100

    • Inline style: 1000

    • ! The style declared by important has the highest priority;

    • If the priority is the same, the last style to appear takes effect;

    • Inherited styles have the lowest priority;
    • The universal selector (*), child selector (>), and neighboring sibling selector (+) are not among the four levels, so they all have weights of 0;

    • Depending on the source of the style sheet, the order of priority is inline style > Internal Style > External Style > Browser User Defined Style > Browser Default style.

  2. Landing the mechanism

    The Block Format context (BFC) is the part of the visual CSS rendering of a Web page that generates block-level boxes during the layout process and defines the interaction between floating elements and other elements

    Generally speaking, BFC is an independent layout environment, which can be understood as a container. Items placed in this container according to certain rules will not affect items in other environments. If the elements meet the conditions that trigger the BFC, the layout of the elements in the BFC is not affected by external elements

    Conditions for creating a BFC
    - Root element: body - Element set float: float Value other than None - Element set absolute position: position to absolute, fixed-displa value to: Inline-block table-cell table-caption flex-overflow The value is hidden. Auto scrollCopy the code
    The characteristics of the landing
    Vertically, from top to bottom, just like the flow of documents in the BFC the margin of the two adjacent containers will overlap and when you calculate the height of the BFC, you need to calculate the height of the floating element and the BFC area does not overlap with the floating container and the BFC is a separate container, The margin of each element touches the border of the containerCopy the code
    Landing the role of
    Solve the problem of margin overlap: since BFC is an independent region, the internal elements and external elements do not affect each other. By turning the two elements into BFC, the problem of margin collapse can be solved and the problem of height collapse solved: When you float the child element, the height of the parent element will collapse, that is, the height of the parent element will become 0. Just set overflow: Hidden on the parent element to create an adaptive two-column layout: Left :{width:100px; hight:200px; float:left; } .right { hight:200px; overflow:hidden; }Copy the code

  3. The box model

    Css3 has two types of box models: standard box model, IE box model, using the box-sizeing attribute to modify the box model of elements, the difference between standard box model and IE box model is that the width and height range is different.

    The range of the width and height attributes of the standard box model only contains content, by setting box-sizeing: content-box

    The width and height attributes of the IE box model include border, padding, and content. This can be done by setting box-sizeing: border-box

  4. CSS Modular Development

    CSS modularity is the partitioning of a page into components that have no dependencies, so that when we modify one part of the CSS, it doesn’t have an unexpected impact on the other parts.

    All preprocessors (such as Sass or LESS) provide the ability to combine scattered CSS files into a single file. The preprocessor imports the base styles from base.scss, the corresponding module styles from each module file, and then outputs a stylesheet file containing all the styles. In this way, each module has a separate file that is easy to maintain. CSS preprocessor, generally speaking, they extend their own DSL based on CSS to solve problems that are difficult to solve when we write CSS:

    • The syntax is not powerful enough for nested writing, resulting in many repetitive selectors to be written in modular development
    • Without a mechanism for reuse of variables and appropriate styles, logically related attribute values must be repeated as literals, making it difficult to maintain.

    So the goal of the preprocessor is to provide the style layer reuse mechanism that CSS lacks, reduce redundant code, and improve the maintainability of style code.

  5. Screen adaptation and page adaptation

    link

  6. New selector in CSS3

    Pseudo class selector Pseudo element selector property selector

  7. Css3 new properties added

    The transform property applies to 2d to 3D transformations of elements. This property allows you to rotate, scale, tilt, etc

    Transition-property: specifies the name of the CSS property. Transition-duration: Transition-timing -function: specifies the transition speed curve. Transition-delay: specifies the transition delay

    The animation property defines an animation with @keyframes XXX and then uses animation: XXX 2s in the box where the animation needs to be added; 2s refers to the length of animation execution

About the layout

  1. Standard document flow (padding+margin+ negative margin) + floating float+ positioning

    Definition: A standard document flow is the automatic left-to-right, top-to-bottom streaming of elements during element layout. As the previous content changes, the position of the following content changes as well.

  2. Percentage layout (streaming layout): the px unit is replaced by %, the percentage of the parent element

    Definition: A streaming layout is a percentage layout, also known as a non-fixed pixel layout, where the width of the box is set as a percentage to scale according to the width of the screen, not limited by fixed pixels, and content is filled to the side. Note, however, that you need to define the maximum and minimum supported widths for your page.

  3. Flex flex layout: Several properties of the spindle auxiliary axis

    Definition: Flex stands for Flexible Box and is used to provide maximum flexibility for boxed models. Any container can use flex layout

    Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members, called Flex projects, or projects for short

    Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members and are called Flex items, or “items.”

    The container has two axes by default: the horizontal axis and the vertical cross axis. The starting position of the main axis (where it intersects with the border) is called main Start and the ending position is called main End.

    It has six properties that can be set on the container. They are:

    -flex-direction: specifies the absolute direction of the main axis. The default direction is horizontal, starting from the left. -flex-wrap: specifies whether or not a line is wrapped inside the container. Short for flex-direction and flex-wrap - justify-content: defines the alignment of spindles - align-items: defines the alignment of multiple trailing axesCopy the code

    They all have the following parameters

    flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the code

  4. Grid layout: Use class names in the framework instead: essentially a percentage layout

    Gird layout is a new CSS layout model, which is good at dividing a page into several main areas, and defining the size, location, hierarchy and other relationships of these areas. Gird layout is the only two-dimensional layout of CSS.

    We create a grid container by declaring display:grid or display:inline-grid on the element, and all of the element’s immediate children will become grid items. Grid tracks: Grid-template-columns and grid-template-rows attributes define rows and columns in the grid. The grid-row-gap and grid-column-gap attributes set the row spacing and column spacing respectively. The grid-gap attribute is a shorthand for both. The grid-auto-flow property controls how the automatic layout algorithm works, specifying exactly how the elements to be automatically laid out in the grid are arranged, with the default prevent order being first column after column. The context-items property sets the horizontal position of the cell’s content, and the align-items property sets the vertical position of the cell.

    Application: You can use GIRD layout for responsive layout.

About JS Basics

  1. Variable data types and detection: basic + reference JavaScript there are eight data types: Undefine, NULL, Boolean, Number, String, object, Bigint, and symbol.

    Bigint and symbol are new data types in ES6:

    • Symbol represents a unique and immutable data type created to solve the problem of possible global variable conflicts.
    • Bigint is a numeric type of data, he can represent any precision format of the integer, using Bigint can safely store and use large integers.

These data can be divided into raw data types and reference data types:

  • Stack: primitive data type (undefined, NULL, Boolean, number, string)
  • Heap: Reference data types (object arrays and functions)

The difference between these two types of data mainly lies in the location of storage:

  • Raw data types are stored directly in simple data segments on the stack. They occupy a small space and have a fixed size. They are frequently used data
  • An object whose data is in the heap takes up a large amount of space and is of a variable size. If it exists in the stack, it will affect the performance of the program. The reference data stores a pointer on the stack that points to the starting address of the changed entity in the heap. When the interpreter looks for a reference value, it first retrieves its stack address and then retrieves the heap entity from that address.
  • Detection method:

1) typeof

console.log(typeof true); // boolean 
console.log(typeof 'str'); // string 
console.log(typeof []); // object 
console.log(typeof function(){}); // function 
console.log(typeof {}); // object 
console.log(typeof undefined); // undefined 
console.log(typeof null); // object
Copy the code

2) instanceof

  • Instanceof can correctly determine the type of an object. The internal mechanism is to determine whether the type of the object can be found in its prototype chain. Instanceof can only correctly determine the reference data type, not the base data type. The instanceof operator can be used to test whether an object has a constructor’s Prototype property on its prototype chain. The basic logic of Instanceof is as follows
let proto = Object.getPrototypeOf(left) let prototype = right.prototype; while(true) { if(! proto) return false if(proto === prototype) return true proto = Object.getPrototypeOf(proto) } }Copy the code

  1. constructor

    Constructor serves both the purpose of determining the type of data and that object instances access their constructors through constructor objects. But by creating an object and then changing its prototype, constructor cannot be used to judge data types

4) the Object. The prototype. ToString. Call ()

  • Object. The prototype. ToString. Call using the Object prototype method toString () to determine the data type, but is also testing Object obj call the toString method, Obj. ToString and the result of the Object. The prototype. ToString. The result of the call is not the same. This is because toString is the prototype method of Object, Array, function, etc., as instances of Object, have overridden toString. ToString methods of different Object types, according to the knowledge of prototype chain, call the overridden method. Instead of calling toString on object, obj. ToString cannot take its object type.

  1. Operators: arithmetic + condition + logic + bit + short circuit, implicit conversion, etc

    This specific can refer to rookie tutorial what, write a few more often test examples.

    1. 0.1 + 0.2! == 0.3: The computer stores data in binary, so the computer calculates 0.1+0.2 by calculating the binary sum of the two numbers. Binary of 0.1:0.00011001100…… (1100) cycle, 0.2 is 0.0011001100… (1100) loop, the binary of these two are infinite loop Number, JavaScript standard compliance IEEE754, using the specified length of 64 bits, also known as double precision floating point Number, the decimal part of the double precision floating point Number is reserved 52 bits, the rest should be omitted, follow: The “rounding of zeros” principle, according to which 0.1+0.2 binary sum to decimal is 0.3000000000004

    2) When is the + operator used to concatenate strings

    If one of the operands of + is a string, string concatenation is performed, otherwise digit addition is performedCopy the code

    3) | | and && operator return values

    For | | if the conditions for judging to true return values of the first operand, or return to the second value For && If the condition judgment to true return values of the second operand, otherwise returns the first valueCopy the code

  2. Function definition, call method (apply, call, direct call)

    1) Definition of function

    Var fn=function(a, b){} 'var func = (params) => params + 2'Copy the code

    2) Call method:

    Call and Apply call functions in a particular scope to change the direction of this. They do the same thing, but the calls differCopy the code

    • Apply takes two arguments. The first argument specifies what this object refers to, and the second argument is a collection with an underlying index. This collection can be an array or an array of classes

    • Call takes variable arguments. The first argument, like apply, refers to the this object inside the function, and the second and subsequent arguments are passed to the function in turn

  3. Scope, chain of scope

    Scopes are divided into global scope, block-level scope and function scope

    Global scope:

    The outermost function and variables defined outside of the outermost function have global scope All variables that are not directly copied are automatically declared global scope all properties of window objects have global scope Global scope has a big disadvantage, too many global scopes can pollute the global namespaceCopy the code

    Function scope:

    A function scope declares variables inside a function. Normally, only fixed code snippet can access the scope. The scope is layered, with inner groups used to access outer layers and vice versaCopy the code

    Block-level scope

    Let and const can declare accounting scope. Variables that are wrapped in {} or created in functions with let and const declarations do not have variable promotion. They cannot be repeated in a common declaration loopCopy the code

    Scope chain:

    The scope chain is used to ensure that the execution environment has access to all variables and functions. The scope chain is used to ensure that the execution environment has access to all variables and variables. Is a list of Pointers to a variable object that contains all variables and functions in the execution environment. The scope chain is preceded by the variable object of the context in which it is currently executing.Copy the code

  4. closure

    Definition: a function that has access to variables in the scope of another function. A common way to create a closure is to create a new function within a function that has access to local variables of the function

    Closures have two common uses:

    One is to give us access to variables inside the function when we outsource the function. Through closure, can call outside the closure function, thus in the internal variables, the external access to function through this method to create private variables Another is a function of at the end of the already running in the context of the variable object to remain in the memory, because of the closure function retained the variable object reference, so the variable object will not be recycledCopy the code

SetTimeout is an asynchronous function. SetTimeout is an asynchronous function, so it will execute the entire loop first, at which point I will be 6

for (var i = 1; i <= 5; i++) {
    setTimeout(function timer() { 
        console.log(i) 
    }, i * 1000) 
}
Copy the code

And that’s what we usually use to solve this problem

for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i) 
      }, i * 1000) 
 }
Copy the code

  1. Prototype, prototype chain, inheritance

    JavaScript uses constructors to create a new object. Each constructor has the prototype property, whose value is an object containing properties and methods shared by all instances of the constructor. When a constructor is used to create a new object, the object contains a pointer that points to the value of the constructor’s Prototype property. The value of the constructor’s prototype property points to the constructor via the __proto_ property.

    When accessing an object’s property, if the object doesn’t have the property inside it, it will look for the property in its prototype object, which will have its own prototype, and keep looking until object.prototype, which will point to null, Typically the end of the prototype chain is NULL.

    JavaScript objects are passed by reference, and each new object entity created does not have a copy of its own, so modifying the prototype and related objects will inherit the change as well.

  2. Function context, this points to

    1) Execution context types are divided into global execution context function execution context eval function execution context

    Global any execution context is not in the inside of the function said global execution context, he will first create a global object of the window, and set this value is equal to the global object, a program is only a global execution context function execution context When a function is called, will create a new execution context for this function, The context of a function can have any number of code in an eval function that has its own execution contextCopy the code

    The JavaScript engine uses the execution context stack to manage the execution of the script. When JavaScript executes code, it encounters global code first, and creates a global context and pushes it onto the stack. Whenever a function is called, it creates a new execution context for the function and pushes it onto the top of the stack. After execution, continue execution of other contexts until all code has completed execution and the global execution context is popped from the stack

    Yamashita has two phases, one is the creation phase and the other is the execution phase:

    Creation phase: 1) This is bound in the global execution context, this refers to window in the function execution context, this refers to depending on how the function is called. If called by a reference object, this refers to an object, otherwise the value of this is set to global or undefined. 2) Create a lexical environment Component A lexical environment is a data structure with identifiers -- variable mappings. Identifiers are variable/function names, and variables are references to actual objects or raw data. The environment variable is also a lexical environment whose environment logger holds the execution phase of the binding relationship created by the variable declaration statement in the execution context: this phase completes the assignment of the variables and then executes the playcodeCopy the code

    Simply put, the execution context is the need to parse the JS code before it can be executed. When parsing, create a global execution context first, first take out the variable function declaration in the code to be executed, first assign the value of undefined function declaration can be used first. Then the formal procedure is carried out. Before a function executes, there is also an execution context, but more than the global context, there is this and argument, as well as function arguments

    This is a property of the execution context that points to the object on which it was last called. There are generally four invocation modes

    1) Function call mode, when a function is called directly as a function that is not an object property, this refers to the global object. 2) Method calls a function as a method property, this refers to the object. 3) Constructor calls a function with a new method, which generates a new object, This refers to the new object. 4) Apply, call, and bind specify what this refers to, depending on how they are called and the parameters they accept.Copy the code

    The four modes constructor new has the highest precedence

  3. Js running mechanism, event queue and loop

    Js is single-threaded, event-based, non-blocking IO, suitable for HANDLING I/O applications.

    Js is single-threaded, so the code are executed from top to bottom, so the code is performed on the execution stack, met an asynchronous function will throw into the task queue, the callback function when performing stack code is complete, the inside of the task queue to a loop, will be a function of task queue into the execution stack, so cycle called the event loop.

    Wherein, micro-task and macro task constitute the task queue, where:

    The macro task queue is Tasks, and its asynchronous tasks include setTimeout setInterval I/O UI rendering, serImmediate and requestAnimationFrame

    Microtasks are jobs, including process.nextTick Promise object.observe mutationObserve

    A complete cycle of events looks like this:

    1) Execute the global script synchronous code, some of which are synchronous statements, some of which are asynchronous statements 2) execute the global script code after the completion of execution, the stack of execution will be cleared 3) fetch from the micro queue at the head of the queue think I put on the stack, After execution of the micro queue length minus 1 4) continue to cycle in micro teams lined up first kiss in the execution stack, so cycle, until completion of the micro queue execution, create new tasks, if the queue will join the queue, also in this period is called 5) all after the completion of the tasks in the queue, the queue is empty at this time, 6) Start fetching macro tasks from the macro queue and put them into the execution stack. When the execution is finished, the execution stack is also empty. 7) Cycle to execute fetching tasks from the microqueue and macro queueCopy the code

    This is the case for task queues and event loops in the browser, which are slightly different in Node

    The node event loop is divided into six phases:

    2) I/O callback phase, Execute callbacks except for close events, callbacks set by timer, setTimeout, and setInterval. 5) Check, execute callback set by serImmediate 6) Close callback: execute close.on('close',..)Copy the code

The macro queues in Node include Timer Queue, IO Callback Queue, Check queue, Close Callbacks queue. In the browser, all macro tasks are loaded into a macro queue. Different macro tasks in Node have different queues

The microtasks in Node include Next Tick Queue, which is a callback placed in process.Nexttick (callback), and Other Micro Queue, which places Other microtasks, such as promises

Event loops in node;

1) Execute the global synchronization code 2) Execute the Micro task, first execute the Next Tick Queue, then execute the Other Micro Queue 3) Execute the macro task.Copy the code