A, HTML
1. Briefly explain your understanding of HTML semantics.
With the right tag to do the right thing HTML semantics let the content of the page structured, so that the structure is more clear, easy to browser, search engine parsing; Easier to read; Search engine crawler also relies on HTML tags to determine the context and the weight of each keyword, which is beneficial to SEO. Easy to read the source code for people to read maintenance understanding.Copy the code2. The difference between Alt and title attributes on tags
Alt is for search engines, it's an alternative text for images that don't show up and title is extra information for people who are visiting the browser. When the mouse is placed on the text or picture, the title text is displayed. Alt plays the role of title in IE browser. When defining an IMG object, write the Alt and title attributes completely, so that they can be used in any browserCopy the code3. Advantages and disadvantages of iframe
Iframen can embed another HTML page into the current page. Advantages of iframe:. Solve the loading problem of slow loading third-party content such as ICONS and advertisements. Disadvantages of parallel loading scripts:.inframe loading blocks the onload event on the main page. Load time is required even if the content is emptyCopy the code4. Herf and SRC?
Href is the location of the web resource, not to reference the resource, but to establish an association so that the current tag can be linked to the target address. SRC is the location of the external resource, and that content will be applied to the current tag in the document. Herf refers to the location of the network resource and establishes a connection with the current element or document. Herf is used to establish a link between a document and a resource. Herf is used to establish a link between a document and a resource. SRC is used to replace content. 3. Browsers parse the content differently: When the browser parses the content to SRC, it suspends the downloading and processing of other resources until the resource is loaded and compiled.Copy the code5. Why put JS at the bottom of HTML instead of the head?
Because the browser will execute the JS file after loading it, this time if there is an operation on the DOM in the JS file, the DOM may not be loaded, this time will cause an error.Copy the code6. Solve cross-domain problems
What is a cross-domain request? * In the front-end development coding process, common HTML tags such as a tag, from tag, IMG tag, link tag, IFrame tag and Ajax operations, can point to a resource address, can also be said to be like an address request resource, so here the request is divided into the same domain request and cross-domain request, * The same origin policy is the core security policy of the browser. The same origin policy is used to defend against illegal attacks. In modern front-end development, we often need third-party service interfaces. With the advent of professional segmentation, there are many information providers that provide interfaces to front-end developers. In this case, cross-domain request is required (this front-end interface service is used to solve cross-domain problems in the way of CORS) * There is also a kind of front and back end separation, the front and back end is not in a domain, so it is necessary to achieve cross-domain request solutions: Ajax had cross-domain security issues but script tags didn't, so someone found a solution based on this featureCopy the code <script>
localFunction=function(data){
console.log(data)
}
</script>
<script src="http://localhost:3000/remote.php? callback=localFunction">
</script>
Copy the code
header('Content-type:application/json');
$callbackFunction = htmlspecialchars($_GET['callback']);
$data = 'data heha';
echo $callbackFunction.'('.$data.') ';
Copy the codeCors is a W3C standard, full name is "cross-origin resource Sharing" (cross-domain resource sharing). It allows the browser to issue XMLhttprequest requests to cross-source servers, overcoming the restriction that Ajax requests can only be used in the same source. The entire CORS communication process is done automatically by the browser without user involvement. For developers, CORS communication is no different from same-origin AJAX communication, the code is exactly the same so the key to CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible. 3, reverse proxy: what is the reverse proxy: the reverse proxy server is set up on the server side, by buffering frequently requested pages to ease the workload of the server, the client requests forward to the target server on the internal network; And returns the results from the server to the client, where the proxy server and the target server appear as one server. At present, web sites use reverse proxy to prevent malicious attacks from the Internet on Intranet servers, cache to reduce server pressure, and control access security. In addition, the reverse proxy can also implement load balancing and distribute user requests to multiple serversCopy the codeSecond, the CSS
1. Introduce the CSS box model
Box model: margin, border, padding, content
2. CSS selector priority
! Important > Inline style (Gravity 1000) > ID selector (100) > Class selector (10) > Label selector (Gravity 1) > Wildcard > Inheritance > Browser default style
3, horizontal and vertical in several ways:
Single-line text (inline elements):line-height:height; Text-align :center vertical-aline:middle (But only if the height is set to 100%) Use margins:
<style>
.father{
width: 400px;
height: 400px;
background-color: azure;
overflow: hidden;
/* Enable BFC */
}
.son{
width: 200px;
height: 200px;
background-color: red;
margin-top:50%;
margin-left:50%;
transform: translate(-50%, -50%);
}
</style>
Copy the code<body>
<div class="father">
<div class="son"></div>
</div>
</body>
Copy the codeIn addition to using margins, plus BFC (eliminate margin overlap)
You can also use absolute and relative positioning, and use margin and translation
<style>
.father{
width: 400px;
height: 400px;
background-color: azure;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
</style>
Copy the codeIn relative positioning and absolute positioning, the child element makes the top, bottom, left, and right 0 in absolute positioning, and then adds margin: Auto to achieve horizontal and vertical centering
<style>
.father{
width: 400px;
height: 400px;
background-color: azure;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top:0;
left:0;
right:0;
bottom: 0;
margin: auto;
}
</style>
Copy the codeUsing Flex layout
<style>
.father{
width: 400px;
height: 400px;
background-color: azure;
display: flex;
align-items: center;
justify-content: center;
}
.son{
width: 200px;
height: 200px;
background-color: red;
}
</style>
Copy the code4. Briefly explain the difference between link and @import
Links are HTML tags that define relationships with external resources, most commonly used for linked stylesheets (access management-style CSS files); @import is a CSS category (which may not be supported by older browsers) and is used to import style rules from other stylesheets, for example:
@import 'custom.css';
Copy the codeWhen link is introduced into CSS, it is loaded at the same time as the page loads, while @import is loaded only after the page is fully loaded
5. What is the difference between rGBA and opacity effect
Rgba: Children set by rgba do not inherit the opacity property of their parent element
6, display:none and visibility:hidden difference?
Display: None: Hides the corresponding element. It is no longer allocated space in the layout of the document
Visibility :hidden: The corresponding element is hidden, but space is allocated to it in the document
7. Value of position:
Relative: to one’s original position; If there is an overwrite, it is on top and is not out of the document flow absolute: want to position the ancestor element with the last relative position enabled, out of the document flow fixed: Position relative to the browser window
8. Common compatibility issues
*{margin:0; padding:0}
9. Submit the form
1) The general form submission is realized through type=submit, input type=’submit’, and the browser displays as a button. Click this button to submit the form data and jump to the action path.
<body>
<form action="url.do" method="post">
<input type="text" name="name">
<input type="text" name="age">
<input type="submit" value="Submit">
</form>
</body>
Copy the codeThree, js
1. Data type of JS
Basic data types: Number, String, BOOLen, NULL, undefined, symbol(new in ES6) Number, String, undefined, Boolen, Object, function (null will be output as object)
2. How many ways are there to determine what type a value is?
1, the typeof:
Bool boolen, boolen, boolen, BOOLen, BOOLen, BOOLen, BOOLen, BOOLen So when we return object we can't tell if it's an array or an object or something elseCopy the code2. The instanceof operator
What he returns is a Boolean, and he checks to see if the constructor on the right is on the prototype chain of the object on the left. The instanceof operator applies only to objects, not raw values.Copy the codeYou can use typeof and Instanceof above to implement type determination
<script>
function justify(value){
let type = typeof(value)
if(type! = ='object') {return type
}else if(value instanceof(Array)) {return 'Array'
}else if(value instanceof(Object)) {return 'Object'
}else{
return 'null'}}console.log(justify([]))
console.log(justify({}))
</script>
Copy the code3, the Object. The prototype. The toString () method
console.log(Object.prototype.toString.call(2))
console.log(Object.prototype.toString.call({}))
function justify(value){
let typestr = Object.prototype.toString.call(value)
let type = typestr.slice(8, -1)
return type
}
console.log(justify([]))
Copy the codeNull and undefined
Null means nothing.
(1)undefined means the variable does not exist or is declared but does not have a value assigned to it.
(2) When the function is called, the argument that should be provided is not provided, which is equal to undefined.
(3) The object has no assigned attribute. The value of this attribute is undefined
(4) If the function does not return a value, undefined is returned by default
4, the difference between ‘==’ and ‘===’?
When performing double equal comparison: Check whether the data types of the two operations are the same. If they are not, perform a type conversion first. After converting the data to the same type, perform a comparisonCopy the code5. What does Eval do?
The function parses the corresponding string into JS code and executes it. Eval should be avoided
6. What are the characteristics of arrow functions
You don’t need the function keyword to create a function that doesn’t have this, but points to the function at the next level.
Var, let, const
A, var
1. The variable of VAR is improved
console.log(a)
var a = 100;
Copy the codeVar has the function of variable promotion, so it does not display error, but output undefined equivalent to:
var a ;
console.log(a);
a=100;
Copy the code2, var only function scope, no block level scope, can declare global variables and local variables (function variables, only valid within the function)
3. There are no block-level elements, so variables defined by var can be accessed across blocks, but not functions. Cross-block access:
if(true) {var a = 100;
console.log(a)/ / 100
}
console.log(a)/ / 100
Copy the codeCross-function access:
function b(){
var a = 100
console.log(a)
}
b()/ / 100
console.log(a)//a is not defined
Copy the code4. The variable defined by var can be repeatedly defined, and the later definition overwrites the first one
1, let declaration variables have block scope, can only be used in the block scope (if not across the block scope, then not across the function scope)
if(true) {let a = 100;
console.log(a)/ / 100
}
console.log(a)//a is not defined
Copy the code2. Variable promotion cannot be carried out
3, can not be repeated definition
4. Temporary dead zones
Const not only has all the properties of a let, but the variables it defines cannot be changed and must be initialized
const a = {
b:1
}
a.b = 2
console.log(a.b)
Copy the code8. Temporary dead zones
Variables declared using let in the block-level scope are bound to this region and are no longer affected or accessible from outside. ES6 explicitly states that if there are let and const commands in a block, the block will initially form a closed interval for the variables declared by those two commands. If the variable is used before the declaration, an error will be reported. In short, the variable is not available in the block before the let variable is declared. It’s called a “temporary dead zone” in grammar.
9. What exactly does the new operator do
1. Create an empty object
Set the prototype chain so that the __proto__ of the created empty object points to the prototype of the constructor;
3. Make the constructor’s this point to the created empty object (which calls the function, so the function points to the empty object), and the function executes.
4. If the result of the function execution is the original value, the instance we create is the empty object we created, but if the return value is not the original value but a reference value (object), the instance we create is the reference value object
// is the process of creating an instance
// create an empty object
let obj = new Object(a);// set the prototype chain (indicating that this object is an instance of con)
obj.__proto__ = con.prototype;
// set this in con to obj and execute the function
var result = con.call(obj)
// 4, determine the return type of con, if it is a value type, let the instance object be us
If the return value is an object, then we create obj
// The instance object is the return value
if(typeof(result)=='object'){
c = result
}else{
c = obj
}
console.log(result)
Copy the code10. What do you know about JSON?
JSON is a lightweight data interchange format that is based on a subset of JS. 2. Json has two data formats: object and array, which is a subset of JS. Json.stringify converts the string to the josn.parse object, which replaces the troublesome XML.
What’s the difference between document.write and innerHTML?
Document. write Writing content to the content stream of the page causes the page to be completely redrawn
Ajax process
Create an XMLHttpRequest object, that is, create an asynchronous call object. 2. Initialize a request, including the request method and the requested URL. 3
Js same-origin policy
The same origin policy is the same as protocol, domain name, and port. The same origin policy is a convention, which is the core and most basic security function of the browser
Describe closures and their application scenarios
A closure is a function (F2) that has access to a variable in another function (F1). A common way to create a closure is to create another function (F2) in one function (F1) and return the created function (F2), which carries the information in F1 to be accessed. This F2 is called a closure. The purpose of closures is to read variables inside a function and keep the values of those variables in memory at all times
Js memory garbage collection mechanism
- At regular intervals, the garbage collector finds memory that is no longer used and then frees it
- The general approach is to mark variables as entering the environment and leaving the environment. At runtime, the garbage collector marks all variables stored in memory, then unmarks variables in the environment and those referenced by variables in the environment. After that, the variables that are still marked are the ones to be deleted.
- And reference counting method, is used in lower version of IE the counting method for recycling, the reference count of the strategy is to track the number of each value is used, when declaring a variable and will be a reference type assigned to the variable when the value of reference number plus one, if the value of the variable into another, this value is minus one, When this value is zero, it means that no variable is in use and the value cannot be accessed, so it can reclaim the space it occupies, and the garbage collection period will clean up the space of the value with zero references at runtime.
16, prototype chain interview questions
1, Object is not the top layer of the prototype chain, Object. Prototype is the top layer of the prototype chain, including: Prototype. Prot =null 2, all functions are Function instances (including Function), Fuction. Proto = Fuction. The prototype 3, all objects are Object instance (including a prototype Object), the Function, the prototype. The proto = Object. The prototype
<script>
let p = Object.prototype.constructor.__proto__==Function.prototype
console.log(p)//true
let f =Function.__proto__===Function.prototype
console.log(f)//true
Function.prototype.__proto__===Object.prototype//true
Object.prototype.__proto__===null//true
</script>
Copy the code17. Implement asynchronous submission of forms
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form ref='su' method="get">User name:<input type="text" name="username">Password:<input type="text" name="password">
<button @click='cheakForm'>Am I</button>
</form>
<button @click='cheakForm'>Am I</button>
</div>
<script>
// var su = document.getElementsByName('form1')
// function cheakFrom(e){
// if(document.form1.username==''){
// alert(' name cannot be empty ')
/ /}
// if(document.form1.password.value.length<5||document.form1.password.value.length>11){
// alert(' password entered incorrectly ')
// }else{
// su.submit()
/ /}
// }
// Vue submits the form
let vm = new Vue({
el:'#app'.methods: {
cheakForm(e){
e.preventDefault();
setTimeout(() = >{
let p = this.$refs.su
p.submit()
},2000)}}})</script>
</body>
</html>
Copy the code18. Deep and shallow copies
In JS, both deep copy and shallow copy are for reference types only. Shallow copy copies objects one by one, but only memory addresses. Instead of copying the object itself, the copied content and the original content refer to the same object, and as one object changes, so does the other. Deep copy copies an identical object. Changes in the copy object and the source object do not affect the other.
Four, Vue
1. What is your understanding of MVVM development mode?
M is model, V is view, VM is ViewModel
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>/ / v<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
/ / vm layer
var vm = new Vue({
el:'#app'.data(){/ / M layer
return{
msg:'hello world'}}})</script>
</body>
</html>
Copy the codeModel represents the data Model, and data and business logic are defined in the Model layer. View represents the UI layer, which is responsible for the display of data. ViewModel is responsible for monitoring the changes of data in the Model and controlling the update of the View, and handling the user’s interactive operations. Model and View are not directly related, but through the ViewModel to contact, Model and ViewModel is two-way data binding connection. Therefore, when the data in the Model changes, it will trigger the ViewModel and let it control the View to update the View. The data in the View changed by the user’s interactive operation will also be synchronized in the Model, which realizes the data synchronization between the Model and the View. Developers only need to focus on the maintenance of data. You don’t need to manipulate the DOM yourself
2. What’s the difference between V-if and V-show?
V-if is a true conditional rendering that controls the presence or absence of the DOM node. Because it ensures that event listeners and subcomponents in the condition block are properly destroyed and rebuilt during the switch; V-if is also lazy: if the condition is false during the initial render, do nothing until the condition is true, and then render
V-show is simpler, regardless of whether the condition is true or not, the element is always rendered and simply switched based on the ‘display’ property in the CSS.
When we need to switch frequently, using V-show can save more performance overhead. It makes more sense to use V-if when you only need to show or hide once.
3. Use of VUEX
Vuex is a state management mode developed specifically for vue.js applications. It manages shared data between multiple components. The core is to create a Store repository. A Store is a repository that stores most of the state states in an application. (1)Vuex state storage is also responsive. When Vue components read the state from the Store warehouse, if the state in the Store warehouse changes, the components will update accordingly. (2) The only way to change the state in the Store is explicit mutation. In this way, we can easily track state changes. These modules are mainly included in the Store
Action: Wrap mutations, because commit(mutation) receives two parameters (behavior function, data) if it is asynchronous, but may not return data if it is asynchronous. Add a layer of action to handle these asynchronous operations. After the data is returned, the next mutation will be performed, but the action cannot directly change the state.
Mutation: State can be changed directly and must be a synchronization function
State: Basic data, which defines the data structure of the application state
Getter: Data derived from the base data, allowing the component to get data from it
4. Tell me your understanding of SPA single page. What are its advantages and disadvantages?
SPA loads the corresponding Html, JavaScript, and CSS only when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page because of the user’s operation. Instead, routing mechanisms enable changes in Html content (component jumps), UI interaction with the user, and avoidance of page reloading benefits:
Good user experience, fast; Content changes do not require reloading the entire page, avoiding unnecessary jumps and repeated rendering; Less pressure on the server; Separation of front and rear ends, clear architecture;Copy the codeDisadvantages:
The initial load takes a long time, forward and backward by route management, can not use the browser forward and backward functionCopy the code5, V-bind class and Style dynamically?
Classes can be dynamically bound using object syntax and array syntax
Class object syntax:
A class can be bound to an object: Such as v - bind: class = '{active: isactive, text: hasError}' data in the vm, if isactive trueiness is real, then. The active style sheet will be show, Similarly, if hasError's trueiness is true, the.text stylesheet will also show upCopy the code<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.active{
height: 200px;
width: 200px;
background-color:red;
}
.text-danger{
font-size: 50px;
}
</style>
</head>
<body>
<div id="app" v-bind:class="{active:isactive,text-danger:hasError}">
hahh
</div>
<script>
let vm = new Vue({
el:"#app".data() {
return {
isactive:true.hasError:true}}})</script>
</body>
</html>
Copy the codeYou can also write the object below
<body>
<div id="app" v-bind:class="classObject">
hahh
</div>
<script>
let vm = new Vue({
el:"#app".data() {
return {
classObject: {active:true,
text-danger:true}}}})</script>
</body>
Copy the code2. The array writing of a class can be used to write all of the class stylesheets that will be shown to you in an array
<body>
<div id="app" v-bind:class="[activeClass, errorClass]">
hahh
</div>
<script>
let vm = new Vue({
el:"#app".data() {
return {
activeClass: 'active'.errorClass: 'text-danger'}}})</script>
</body>
Copy the codeHowever, the style sheet written in the array will be displayed all the time. If it does not achieve the dynamic effect, we can add a judgment as follows:
<body>
<div id="app" v-bind:class="[isactive?activeClass:'', errorClass]">
hahh
</div>
<script>
let vm = new Vue({
el:"#app".data() {
return {
activeClass: 'active'.errorClass: 'text-danger'.isactive:true}}})</script>
</body>
Copy the codeAs in the code above, if isActive’s authenticity is true, the. Active stylesheet corresponding to activeClass will be displayed. You can also mix object and array
<body>
<div id="app" v-bind:class="[{active:isactive}, errorClass]">
hahh
</div>
<script>
let vm = new Vue({
el:"#app".data() {
return {
errorClass: 'text-danger'.isactive:true}}})</script>
</body>
Copy the codeUsed in components:
<body>
<div id="app">
<my-component class="baz boo"></my-component>
</div>
<script>
Vue.component("my-component", {template:`
`,})let vm = new Vue({
el:"#app".data() {
return {
errorClass: 'text-danger'.isactive:true}}})</script>
</body>
Copy the codeOne note: because Vue.com Ponent is globally registered, it can be used in any newly created VM root instance, and the sub-components can be used with each other. The downside: you will no longer use this component, but it will still be wrapped in the project. This has resulted in unnecessary increases in user downloads.
Components can also be registered locally:
<body>
<div id="app">
<my-component class="baz boo"></my-component>
</div>
<script>
let MyComponent = {
template:`
`,}let vm = new Vue({
el:"#app".data() {
return {
errorClass: 'text-danger'.isactive:true}},components: {'my-component':MyComponent
}
})
</script>
</body>
Copy the codeNote: locally registered components are not available in their children.
<body>
<div id="app" v-bind:style="basecase">
hahh
</div>
<script>
let vm = new Vue({
el:"#app".data() {
return {
basecase: {color: 'red'.fontSize: '50px'}}}})</script>
</body>
Copy the code6. One-way data flow in Vue
A one-way data flow can change state in only one direction. In a two-way data flow, a Model(a collection of states) can change its own state or that of other models, as can user actions. This makes changing one state likely to trigger a cascade of state changes, making code difficult to debug. Two-way data binding is the syntactic sugar of Vue, that is to say, Vue can realize both one-way data flow and two-way data binding in terms of data flow
Two-way data binding is to dynamically modify model and View by adding chage(input) events to inputable elements (input, Textare, etc.) on the basis of one-way data binding. That is, MVVM effect can be achieved by triggering ($emit) events of the parent component to modify MV. The child component can maintain its own data internally, but it has no right to modify the data passed to it by the parent component. When a developer tries to do so, Vue will report an error. Because when multiple child components depend on data in the parent component, if the child component can modify the data in the parent component, a change in the child component will cause all the child components that depend on the data to change. Therefore, Vue does not recommend that the child directly modify the data in the parent component
When you want to modify the props in a child component, use the child as the parent in the parent component: 1. Define a variable, initialize it with the data in props, and then change the variable. 2
7. Why does Vue need asynchronous update mechanism
A VUE is a componentized update, and if the corresponding component changes every time it changes, frequent updates can occur if more than one component’s data changes.
8. The responsive principle of Vue
By default, when data is initialized, getter and setter methods are added to each layer of attributes in data by iterating through object.defineperty. When render initializes, render retrieves the data from the data, invokes the getter, and the closure deP publishes the data to any watcher that needs to listen for it, It then relies on collection (collecting the watcher for the current component) and notifying Watcher of the change and then updating the view. If the data is modified, the setter is triggered, and the setter notifes Watcher via deP to render again
9. Vue2.0 has some shortcomings in the implementation of responsive data:
Cannot detect addition of object and array properties. Cannot detect array changes by index. Because object.defineProperty only adds getter and setter methods, only data fetching and modification can be detected, not property addition. Object.defineproperty is not the same as Object. Defineproperty. Vue responds to all seven of the array’s variances. Object.defineproperty can detect an operation that changes an array by index. However, due to performance issues, VUE is not responsive to it.
10, how to detect array changes in Vue: using function hijacking method, overwriting array methods
__proto__ is used to intercept the prototype chain so that the data values (arrays) detected point to the override method, Arraymethods = array.create (array.prototype); arrayMethods = array.prototype; arrayMethods = array.create (array.prototype); Arraymethods can then access the methods of the Array prototype through the prototype chain, save the methods on the Array prototype, and then override them with def(which encapsulates the Object.prototype() method for function hijacking). If the array contains reference values, then each entry in the ObserveArray() depth-observing array is called.
11. Why does Vue use asynchronous rendering
If you assign the same value in data twice, the rendering of the page will be synchronized with the data changes, and the page will be rendered as the data changes. However, due to the asynchronous rendering mechanism inside Vue, the page is actually rendered only once because of the de-redo operation in the call to Watcher. The changes are stored temporarily, and the changes are thrown to callback functions in the asynchronous API, promise. then (i.e., create a task stack, throw microtasks and macros into it), and wait until all synchronous tasks have finished executing the microtasks and macros in the task stack. It will eventually be merged with the parts of the synchronized code that need to be rendered together.
Computer networks
1. The difference between HTTP and HTTPS?
1. The HTTPS protocol requires ca to apply for a certificate. Generally, there are few free certificates, because certain fees are required
2. HTTP is a hypertext transmission protocol, and information is transmitted in plain text. HTTPS is a secure SSL encryption transmission protocol.
3. HTTP and HTTPS use completely different links and use different ports. The former is 80. The latter is port 443
4. Https is a network protocol constructed by SSL and Http to encrypt transmission and authenticate identity. It is more secure than Http.
HTTPS workflow can be simply understood as HTTP + certificate authentication + encryption + integrity protection
HTTP protocol has the following disadvantages: 1. Communication uses plaintext, so the content may be eavesdropped; 2. The identities of communication parties cannot be authenticated, and the identities may be disguised; 3
To solve the following problems: HTTPS improvement measures: 1. Encryption: HTTP encrypts packets using SSl or TLS. 2. Authentication: The identity of both parties can be confirmed by a certificate issued by a trusted third party.
Why is HTTP a stateless protocol? How to solve HTTP stateless protocol?
HTTP protocol is a stateless protocol, the protocol itself does not save the communication state between the request and response, that is, to send the request and response does not do persistent processing, the HTTP protocol is designed so simple in order to deal with a large number of transactions faster. In order to solve the problem that HTTP protocol can not save the communication state, cookie(save the client data) state management is introduced. Cookie technology controls client status by adding cookie information to request and response packets. The Cookie reminds the client to save the Cookie based on a set-cookie field in the response packet sent from the server. When the client sends the request again next time, it will send it together with the cookie. When the server finds the cookie sent by the client, it will check which client sent the link request and compare the records on the server to get the previous information.
What is the difference between A URL and a URI?
A Uniform Resource Identifier (URI) that uniquely identifies a resource on the Internet
4. Composition of HTTP packets
HTTP, hypertext transfer protocol. An HTTP packet is a text message transmitted between a client and a server based on the HTTP protocol. The text is an HTTP packet. There are request packets and response packets.
Request line/response line: The request line consists of the HTTP verb, URL, and protocol version of HTTP. It mainly reflects what operation to do on what resource. The response line consists of an HTTP return status code, a reason phrase, and an HTTP version that represents the server’s handling of the request. Through the information of the response line, we can know whether the request is successful, whether the bug is on the client side or the server side, and why. Header field: The header field is equivalent to the metadata of the HTTP packet and records the detailed description of the HTTP packet, such as the time and server domain name. Packet body: The packet body does not exist in every packet. It depends on what the packet does. The format returned by the packet body is GENERALLY XML or JSON.
5. What are the application layer protocols corresponding to TCP? What application-layer protocols does UDP correspond to?
TCP corresponds to the typical application layer protocol: HTTP protocol: hypertext transfer protocol; FTP: file transfer protocol. SSH: remote login protocol. UDP typical application layer protocols: DNS: domain name resolution protocol TFTP: simple text transfer protocol SNMP: simple network management protocol
6. ARQ?
The ARQ protocol, or automatic retransmission request, means that if the sender does not receive a receipt after a period of time, it will usually resend the request. ARQ includes stop-wait ARQ and continuous ARQ. (1) Stop waiting ARQ protocol means that in stop waiting, if the receiving end does not receive the data from the sender end, the receiving end will not send the acknowledgement receipt. The sender resends the previous data. The sender maintains a timeout timer. (2) continuous ARQ protocol continuous ARQ protocol refers to the sender to maintain a window, the window can have a number of groups, the number of the size of the window is a window group, all located within the window data will be continuous to send don’t have to wait for the receipt, and finally a packet is sent, the server will send the receipt to the client, if there is a group did not send success, The sequence number of the preceding packet that failed to be sent is returned, and all subsequent packets are re-sent.
7, say something about TCP flow control?
Traffic control is to control the rate at which the sender sends data and ensure that the receiver can successfully receive all the packets that should be received. Otherwise, the automatic retransmission mechanism is triggered, resulting in resource waste. The specific operation of flow control is as follows: the receiving end informs the sending end of the size of the data it can accept, and the sending end sends no more than the size of the data, which is called the size of the window. There is a special field in the TCP header to represent the size of the window.
Talk about TCP congestion control
If a large amount of data is immediately injected into the network during communication, network congestion or even network breakdown may occur, and congestion may lead to packet loss. TCP uses the congestion control policy to prevent this problem. The four TCP congestion control algorithms are as follows: 1. Slow Start 2. Congestion avoidance 3. Fast Retransmission 4.
1) Different slow start algorithms have different logic, and the classical algorithms are as follows: 1. After the link is established, the CWND (congestion window) is initialized first, indicating that data with the size of 10 MSS(maximum message segment) can be transmitted. 2. Each time an ACK is received, the CWND will increase by one, and then the CWND will double between a round trip, increasing exponentially. 3. There is an upper limit, and when CWND exceeds the upper limit, it enters the congestion avoidance algorithm. 2) Congestion avoidance algorithm When CWND grows to an upper limit, it will enter the congestion avoidance algorithm. Under the congestion avoidance algorithm, CWND grows linearly, and after each round trip time, the congestion window CWND increases by 1. Instead of doubling, avoid congestion window growth too fast. 3) Fast retransmission algorithm Fast retransmission is mainly used for packet loss detection so as to retransmit packets faster. 4) When packet loss is detected, TCP will trigger fast retransmission and enter the state of down window. In this state, CWND will reduce to a reasonable value through fast recovery algorithm.
9. Network protocol layer cache
To understand what is cache, cache can be understood as a backup of resources, when we request resources to the server, we will copy a local copy, the next time the request directly out of the use. It is different from localstorage such as localstorage and cookie. Localstorage is mainly used to store data records with small storage capacity and more for convenient operation. The cache is to reduce resource requests, mostly used to store files, generally large storage capacity. Strong caches include: Expires (is an event timestamp. When a client sends a request again, the client time will be compared to this event timestamp. If it is larger than this event timestamp, the resource will be requested again. Disadvantages: The time of the client is used to compare requests, but the time of the client is inconsistent with the time of the server. In addition, the time of the client can be modified, so it may not meet the expectation. Cache-control and cache-Control (cache-Control has a higher priority. This field is a length of time, in seconds, indicating that the resource will automatically expire after too long. When a client requests a resource and finds that the resource is still within the validity period, it directly uses the cache. Max-age and s-maxage are the primary fields. Max-age and s-maxage are numbers that indicate how many seconds elapsed before the resource expires. Max-age and s-maxage are both valid in browsers, but s-maxage takes precedence. In general, only S-maxage is valid in proxy servers. You can set max-age to 0 to send requests to the server whenever the client requests a resource. Public and Private: If public is set, it can be cached by clients and proxy servers. If private is set, it can only be cached by clients. However, if s-maxage is set, it indicates that it can be cached by both client and proxy servers, which is equivalent to enabling public. No-cache and no-store No-cache means that the browser does not ask for the resource directly, but sends a request to the server to verify that the resource is updated (which is equivalent to negotiating the cache). No-store is even more aggressive. It directly fetches new resources from the server without using the cache policy. Both Expires and cache-Control get the cache from the browser, get the cache if it hasn’t expired, and then return 200. If cache-control sets no-cache, the request is sent to the server first. If the resource is not updated, the cache is used, and 304 is returned. Negotiation cache: last-Modified and ETAG 1, last-Modified: Records the last modification time of a resource. After this function is enabled, a last-Modified field is displayed in the response header after a resource is requested, which records the last modification time of the resource. If the request is sent again, the request header will carry the if-modified-since field with the value of the previous last-modified value. The server then compares the value of if-modified-since with the last modification time of the corresponding resource. If the value is consistent, the resource has not changed. If not, resend the resource and return 200. However, last-Modified also has the disadvantage that once an edit is made, regardless of whether the content actually changes, it will cause a new request for the resource, which is the main problem that the cache needs to solve, resulting in unnecessary requests. Etag generates a unique string based on the content of the resource. If the resource is requested, the response will contain a unique string identified by the ETAG. When the request is sent again, the request header will contain the if-none-match field whose value is the value in the ETAG. The server generates a string based on the content of the resource and compares the newly generated string with the string in if-none-match. If the string is consistent, the resource is not updated; if the string is inconsistent, the resource is updated. But this adds overhead to the server.
10CSRF and how to prevent CSRF?
CSRF is cross-domain request forgery. When a user visits a trusted website, he clicks on a cross-domain malicious link, and then the malicious link obtains the user’s unexpired cookie and session to visit a trusted website (such as a bank client) for malicious operations. How do I prevent CSRF attacks? 1. Verify the token value. Because the token is encrypted, third-party malicious websites cannot forge it.