Front-end Developer Interview Questions
Category Programming Skills
This article collects and summarizes some front-end interview questions. Beginners should also study the principles carefully after reading, and systematically and thoroughly learn the important knowledge to form their own knowledge chain. It is wrong and impossible to take shortcuts and rely on last-minute efforts just to pass the interview! It's impossible! Impossible! Impossible!
Front-end is still a young industry, with new industry standards, frameworks, and libraries constantly being updated and added. As Herman said in his keynote speech at the 2015 Deep JS Conference, "Every 18 to 24 months, the front-end will become twice as difficult." These changes enrich the front-end capabilities and make the applications more perfect. Therefore, paying attention to various front-end technologies and keeping up with the fast pace of change is one of the essential skills for a front-end programmer.
Recently, I have also received a lot of encouragement and correction of question information through Weibo private messages. I will frequently update the questions and answers on the github blog. I hope that front-end developers can not only use but also express themselves, and have their own understanding of theoretical knowledge. You can learn and form your own professional skill chain based on the following knowledge points one by one.
There are a few things to pay attention to in the interview: (Source
-
Interview Questions: According to your level and position, the breadth and depth will increase from entry-level to expert level.
-
Question Types: Theoretical knowledge, algorithms, project details, technical vision, open-ended questions, and work cases.
-
Detail Inquiry: You can ensure that the questions go on until you start to not understand or the interviewer starts to not understand, which can greatly extend the differentiation and depth of the questions, and know your actual ability. Because this knowledge association is a long-term learning, last-minute efforts are absolutely impossible to remember.
-
No matter how well you answer the questions, the interviewer (who may be the direct leader of your interview position) will consider whether I want this person to be my colleague? So attitude is very important, in addition to being able to do things, but also to be a good person. (It feels more like a blind date ( •̣̣̣̣̣̥́௰•̣̣̣̣̣̣̀ ))
-
Senior front-end developers who can mix up absolute and relative should not be needed, because the team needs: your ability to be reliable (reliable).
Front-end Development Knowledge Points:
HTML & CSS:
Understanding of Web standards, browser kernel differences, compatibility, hacks, CSS basics: layout, box model, selector priority,
HTML5, CSS3, Flexbox
JavaScript:
Data types, operations, objects, Function, inheritance, closures, scope, prototype chain, events, RegExp, JSON, Ajax,
DOM, BOM, memory leaks, cross-domain, asynchronous loading, template engines, front-end MVC, routing, modularization, Canvas, ECMAScript 6, Nodejs
Others:
Mobile, responsive, automated building, HTTP, offline storage, WEB security, optimization, refactoring, team collaboration, maintainability, usability, SEO, UED, architecture, career, rapid learning ability
As a front-end engineer, the knowledge points that should be mastered regardless of the length of work:
This article was published by Wang Zimo on The Lab of the Siege Engineer
1. DOM structure — What relationships may exist between two nodes and how to move freely between nodes.
2. DOM operations — How to add, remove, move, copy, create, and find nodes, etc.
3. Events — How to use events and the differences between IE and standard DOM event models.
4. XMLHttpRequest — What it is, how to complete a GET request, and how to detect errors.
5. Strict mode and mixed mode — How to trigger these two modes and what it means to distinguish them.
6. Box model — The relationship between margins, padding, and borders, and the box model in browsers below IE8
7. Block elements and inline elements — How to control them with CSS and how to use them reasonably
8. Floating elements — How to use them, what problems they have, and how to solve these problems.
9. HTML and XHTML — What are the differences between the two, which one do you think should be used and why.
10. JSON — Function, usage, and design structure.
Note:
Choose to read selectively according to your own needs. The interview questions are a summary of theoretical knowledge, allowing you to learn how to express yourself.
The material answers are not correct and comprehensive enough, welcome to Star and submit issues
When online, if the browser detects a manifest attribute in the HTML header, it will request the manifest file. If it is the first time visiting the app, the browser will download the corresponding resources according to the content of the manifest file and store them offline. If the app has been visited before and the resources have already been stored offline, the browser will use the offline resources to load the page, then compare the new manifest file with the old one. If there is no change in the file, no action will be taken; if the file has changed, the browser will download the resources in the file again and store them offline.
When offline, the browser will directly use the resources stored offline.
For detailed usage, please refer to: [Interesting HTML5: Offline Storage](http://segmentfault.com/a/1190000000732617)
-
Please describe the differences between cookies, sessionStorage, and localStorage?
Cookies are data stored on the user's local terminal (Client Side) by websites to identify user identity (usually encrypted). Cookie data is always carried in HTTP requests of the same origin (even if not needed) and will be transmitted back and forth between the browser and the server.
sessionStorage and localStorage do not automatically send data to the server and are only saved locally.
Storage size:
Cookies cannot exceed 4k in size.
sessionStorage and localStorage have larger storage size limits than cookies, up to 5MB or more.
Expiry time:
localStorage stores persistent data, which is not lost after the browser is closed unless the data is actively deleted;
sessionStorage data is automatically deleted after the current browser window is closed.
Cookies are valid until their set expiration time, even if the window or browser is closed.
-
What are the disadvantages of iframes?
* Iframes block the main page's Onload event;
* Search engine crawlers cannot interpret such pages, which is not conducive to SEO;
* Iframes share the connection pool with the main page, and browsers limit the number of connections to the same domain, which can affect the parallel loading of pages.
Consider these two disadvantages before using iframes. If you need to use an iframe, it is best to dynamically add the src attribute value to the iframe through JavaScript, which can bypass the above two issues.
-
What is the function of the Label and how is it used?
The label tag defines the relationship between form controls. When the user selects the label, the browser will automatically focus on the form control related to the label.
`<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>`
`<label>Date:<input type="text" name="B"/></label>`
-
How to disable the auto-complete function in an HTML5 form?
Set the autocomplete attribute to off for the form or a specific input that does not require prompts.
-
How to implement communication between multiple tabs in the browser? (Alibaba)
WebSocket, SharedWorker;
You can also use local storage methods such as localStorage and cookies;
When localStorage is added, modified, or deleted in another browsing context, it triggers an event.
We can control its value by listening to the event to communicate page information;
Note quirks: Safari throws a QuotaExceededError exception when setting localStorage values in incognito mode.
-
How does WebSocket support low-version browsers? (Alibaba)
Adobe Flash Socket,
ActiveX HTMLFile (IE),
XHR based on multipart encoding,
XHR based on long polling
-
What are the uses of the Page Visibility API?
Detect whether the page is currently visible through the value of visibilityState, as well as the time when the web page is opened;
Automatically pause the playback of music or video when the page is switched to another background process.
-
How to implement a circular clickable area on the page?
1. Map + area or SVG
2. Border-radius
3. Pure JS implementation requires a simple algorithm to determine whether a point is on a circle, getting mouse coordinates, etc.
-
Implement a 1px high line without using border, and keep consistent effects in different browsers' standard and quirks modes.
`<div style="height:1px;overflow:hidden;background:red"></div>`
-
What is the purpose of the web page captcha, and what security issues does it solve?
It distinguishes whether the user is a computer or a human, a public fully automatic program. It can prevent malicious password cracking, vote rigging, forum flooding;
Effectively prevent hackers from continuously attempting to log in to a specific registered user with a specific program using brute force methods.
-
What are the differences between title and h1, b and strong, i and em?
The title attribute has no clear meaning and only indicates a title, while H1 indicates a clear hierarchical title, which also greatly affects the extraction of page information;
Strong marks key content with an emphasis, and when reading the web with a reading device, the content in strong will be read with emphasis, while
The following two divs are each 50% wide,
then use float or inline to prevent line breaks.
-
What are the common browser compatibility issues encountered? What are the causes and solutions, and what are the commonly used hacking techniques?
- The 24-bit PNG image has a background on the iE6 browser. The solution is to make it into PNG8.
Different browsers have different default margins and padding. The solution is to add a global *{margin:0;padding:0;} to unify.
IE6 double margin bug: After the block attribute tag is floated and there is a horizontal margin, the margin is larger than set in ie6.
Floating ie generates double distance #box{ float:left; width:10px; margin:0 0 0 100px;}
In this case, IE will produce a 20px distance. The solution is to add ——_display:inline; in the style control of the floating tag to convert it to an inline attribute. (_This symbol is only recognized by ie6)
Progressive recognition, gradually excluding parts from the whole.
First, cleverly use the "9" mark to separate IE browsers from all situations. Then, use the "+" again to separate IE8 from IE7 and IE6, so that IE8 has been independently recognized.
css .bb{ background-color:#f1ee18;/All recognize/ .background-color:#00deff\9; /IE6, 7, 8 recognize/ +background-color:#a200ff;/IE6, 7 recognize/ _background-color:#1e0bd1;/IE6 recognize/ }
In IE, you can use the method of getting regular attributes to get custom attributes, You can also use getAttribute() to get custom attributes; In Firefox, you can only use getAttribute() to get custom attributes. Solution: Unify by getting custom attributes through getAttribute().
In IE, the even object has x, y attributes, but there are no pageX, pageY attributes; In Firefox, the event object has pageX, pageY attributes, but there are no x, y attributes.
Solution: (Conditional comments) The disadvantage is that it may increase the number of additional HTTP requests in IE browsers.
In Chrome, the Chinese interface will forcibly display text less than 12px according to 12px by default, It can be solved by adding the CSS property -webkit-text-size-adjust: none;
The hyperlink visit is over, and the hover style does not appear. The style of the hyperlink that has been clicked and visited no longer has hover and active. The solution is to change the order of the CSS property arrangement: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
-
What causes the invisible blank space between li and li? What is the solution?
The arrangement of the line frame will be affected by the middle blank (return \space) and so on, because the space is also a character, and these blanks will also be applied to the style, occupying space, so there will be a gap, and the character size is set to 0, and there will be no space.
-
Why is it necessary to initialize CSS styles.
- Because of browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, there will often be differences in page display between browsers.
- Of course, initializing the style will have a certain impact on SEO, but you can't have your cake and eat it too. But try to initialize with the least impact.
The simplest initialization method: * {padding: 0; margin: 0;} (strongly not recommended)
Taobao's style initialization code: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; }
Other objects: Function, Arguments, Math, Date, RegExp, Error
-
What are some basic rules for writing JavaScript?
- Do not declare multiple variables in the same line.
- Please use ===/!== to compare true/false or numeric values.
- Use object literals instead of forms like new Array.
- Do not use global functions.
- Switch statements must have a default branch.
- Functions should not sometimes have return values, sometimes not.
- For loops must use curly braces.
- If statements must use curly braces.
- Variables in for-in loops should use the var keyword to explicitly limit scope, thus avoiding scope pollution.
-
What are the characteristics of JavaScript prototypes and prototype chains?
Each object initializes an internal property called prototype. When we access a property of an object, if the object does not have this property internally, it will look for it in the prototype. This prototype will have its own prototype, and so on, which is the concept of the prototype chain we usually talk about.
Relationship: instance.constructor.prototype = instance.__proto__
Features: JavaScript objects are passed by reference, and each new object entity we create does not have its own prototype copy. When we modify the prototype, the related objects will also inherit this change.
When we need a property, the JavaScript engine first checks if the current object has this property. If not, it will look for the prototype object to see if it has this property, and so on, until it searches to the built-in Object.
function Func() {}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function() {
return this.name;
}
var person = new Func(); // Now you can refer to var person = Object.create(oldObject);
console.log(person.getInfo()); // It has the properties and methods of Func
// "Sean"
console.log(Func.prototype);
// Func { name="Sean", getInfo=function()}
-
What are the types of values in JavaScript? Can you draw a memory diagram for them?
Stack: Primitive data types (Undefined, Null, Boolean, Number, String) Heap: Reference data types (Objects, arrays, and functions)
The difference between the two types is the storage location; Primitive data types are directly stored in a simple data segment in the stack, occupying a small space, with a fixed size, and are frequently used data, so they are stored in the stack; Reference data types are stored in objects in the heap, occupying a large space, with an unpredictable size. If stored in the stack, it will affect the performance of the program; Reference data types store a pointer in the stack, which points to the starting address of the entity in the heap. When the interpreter looks for a reference value, it first searches for its address in the stack, and after obtaining the address, it gets the entity from the heap.
-
How does JavaScript implement inheritance?
- Constructor inheritance
- Prototype inheritance
- Instance inheritance
- Copy inheritance
The prototype mechanism or apply and call methods are relatively simple to implement, and it is recommended to use a hybrid approach of constructor and prototype.
function Parent() {
this.name = 'wang';
}
function Child() {
this.age = 28;
}
Child.prototype = new Parent(); // Inherits Parent through the prototype
var demo = new Child();
alert(demo.age);
alert(demo.name); // Gets the inherited property
-
What are the several ways to implement inheritance in JavaScript?
-
What are the several ways to create objects in JavaScript?
Creating objects in JavaScript can be simply described as using built-in objects or various custom objects, and of course, you can also use JSON; but there are many ways to write them, and they can also be used in combination.
Object literal method
person = {firstname: "Mark", lastname: "Yun", age: 25, eyecolor: "black"};Using a function to simulate a constructor without parameters
function Person() {} var person = new Person(); // Define a function, if you use new to "instantiate", this function can be seen as a Class person.name = "Mark"; person.age = "25"; person.work = function() { alert(person.name + " hello..."); } person.work();Using a function to simulate a constructor with parameters (using the this keyword to define the context of the constructor)
function Pet(name, age, hobby) { this.name = name; // this scope: current object this.age = age; this.hobby This is a Chinese to English translation, please provide the English translation for this text. Do not provide any explanations or text apart from the translation. Chinese: element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // Remove event removeEvent: function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // Stop event propagation (mainly event bubbling, because IE does not support event capture) stopPropagation: function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // Prevent the default behavior of the event preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // Get the event target getTarget: function(event) { return event.target || event.srcElement; }, // Get the event object reference, get all the information of the event, and ensure that the event can be used at any time; getEvent: function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } }; - What is the result of ["1", "2", "3"].map(parseInt)?[1, NaN, NaN] because parseInt requires two arguments (val, radix), where radix represents the base used for parsing. map passed 3 (element, index, array), the corresponding radix is illegal, resulting in parsing failure.
- What is an event? What is the difference between the event mechanisms of IE and Firefox? How to prevent bubbling?- An operation in a web page (some operations correspond to multiple events). For example: when we click a button, an event is generated. It is a behavior that can be detected by JavaScript.
- Event handling mechanism: IE is event bubbling, Firefox supports both event models, that is: capture events and bubbling events;
- ev.stopPropagation(); (the old IE method ev.cancelBubble = true;)
A closure is a function that has access to a parent function's scope chain, including its variables and parameters. The most common way to create a closure is by nesting a function inside another function, allowing the inner function to access the outer function's local variables. Closures can break the normal scoping rules, allowing variables and methods from within a function to be passed to the outside.- What is a closure, and why is it used?
Characteristics of closures:
- Functions nested within other functions
- Inner functions can reference the outer function's parameters and variables
- Parameters and variables are not subject to garbage collection
// The onclick event of the li nodes can correctly pop up the index of the currently clicked li <ul id="testUL"> <li> index = 0</li> <li> index = 1</li> <li> index = 2</li> <li> index = 3</li> </ul> <script type="text/javascript"> var nodes = document.getElementsByTagName("li"); for(i = 0; i < nodes.length; i += 1) { nodes[i].onclick = function(i) { console.log(i + 1); // If closures were not used, the value would always be 4 }(i); } </script>
After executing say667(), the internal variables of the say667() closure will exist, but the internal variables of the inner function of the closure will not exist. This prevents the JavaScript garbage collection mechanism (GC) from reclaiming the resources occupied by say667(). This is because the execution of the inner function of say667() depends on the variables in say667().
function say667() { // Local variable that ends up within closure var num = 666; var sayAlert = function() { alert(num); } num++; return sayAlert; }
var sayAlert = say667(); sayAlert(); // The result should be an alert with the number 667
-
What does "use strict" mean in JavaScript code? What is the difference when using it?
"use strict" is JSONP, iframe, window.name, window.postMessage, set up proxy page on the server
-
How to handle the situation when the page encoding is inconsistent with the encoding of the requested resource?
-
How to do modular development?
Immediately Executed Function, without exposing private members
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
(To be completed)
-
What are the differences between AMD (Modules/Asynchronous-Definition) and CMD (Common Module Definition) specifications?
>
AMD specification is here: https://github.com/amdjs/amdjs-api/wiki/AMD
CMD specification is here: https://github.com/seajs/seajs/issues/242
Asynchronous Module Definition, all modules are loaded asynchronously, and the module loading does not affect the execution of subsequent statements. All statements that depend on certain modules are placed in the callback function.
Differences:
1. For dependent modules, AMD is executed in advance, and CMD is executed with delay. However, RequireJS has also been changed to be able to execute with delay from version 2.0 (the handling method is different according to the writing method). CMD advocates as lazy as possible.
2. CMD advocates dependency proximity, and AMD advocates dependency prepositioning. See the code:
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// Omitted 100 lines here
var b = require('./b') // Dependencies can be written nearby
b.doSomething()
// ...
})
// AMD default recommendation
define(['./a', './b'], function(a, b) { // Dependencies must be written at the beginning
a.doSomething()
// Omitted 100 lines here
b.doSomething()
// ...
})
-
What is the core principle of requireJS? (How is it dynamically loaded? How to avoid multiple loads? How is it cached?)
-
Talk about your understanding of ECMAScript6?
-
How to write a class in ECMAScript6, and why does the class appear?
-
What are the ways to asynchronously load JS?
(1) defer, only supports IE
(2) async:
(3) Create a script, insert it into the DOM, and call back after loading is complete
-
What is the difference between document.write and innerHTML?
document.write can only redraw the entire page
innerHTML can redraw part of the page
-
DOM operation - how to add, remove, move, copy, create, and find nodes?
(1) Create new nodes
createDocumentFragment() // Create a DOM fragment
createElement() // Create a specific element
createTextNode() // Create a text node
(2) Add, remove, replace, insert
appendChild()
removeChild()
replaceChild()
insertBefore() // Insert a new child node before an existing child node
(3) Find
getElementsByTagName() // By tag name
getElementsByName() // By the value of the element's Name attribute (IE has strong fault tolerance and will get an array, including those with an id equal to the name value)
getElementById() // By element Id, uniqueness
-
What is the difference between .call() and .apply()?
In the example, replace sub with add, add.call(sub,3,1) == add(3,1), so the result is: alert(4);
Note: In js, functions are actually objects, and function names are references to the Function object.
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
-
What are the native methods of arrays and objects, list them?
-
How to implement a class in JS. How to instantiate this class
-
What is the scope and variable hoisting in JavaScript?
-
How to write high-performance JavaScript?
-
What operations can cause memory leaks?
-
Have you seen the source code of jQuery? Can you briefly describe its implementation principle?
-
What object does jQuery.fn's init method return, and why is this returned?
-
How to convert an array to (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36
-
What is a Polyfill?
A polyfill is a "JavaScript supplement that replicates standard APIs in older browsers," which can dynamically load JavaScript code or libraries to emulate them in browsers that do not support these standard APIs.
For example, a geolocation polyfill can add a global geolocation object to the navigator object, as well as add the getCurrentPosition function and the "coordinates" callback object. All of these are objects and functions defined by the W3C Geolocation API. Because polyfills simulate standard APIs, development can be carried out in a future-oriented way for all browsers, and once support for these APIs becomes the absolute majority, polyfills can be easily removed without any additional work.
-
Have you ever used or implemented any polyfill solutions (compatibility handling schemes) in your projects?
For example: html5shiv, Geolocation, Placeholder
-
If we bind two click events to a DOM element at the same time, one with capture and one with bubbling, how many times will the event be executed, and will the bubbling or capture be executed first?
ECMAScript6 Related
-
What is the difference between Object.is() and the original comparison operators " ===" and " =="?
The double equals operator compares for equality, performing type conversion during the comparison; the triple equals operator (strict equality) does not perform implicit type conversion during the comparison (it returns false if the types are different).
Object.is, on the basis of the triple equals strict equality, specially handles NaN, -0, and +0, ensuring that -0 and +0 are no longer considered equal, but Object.is(NaN, NaN) returns true.
Object.is should be considered as having its own special use cases and should not be regarded as more lenient or strict than other equality comparisons.
Front-end Framework Related
-
What is the implementation principle of the react-router routing system?
-
How to solve the problems of third-party libraries in React?
Other Questions
-
What was the workflow like in your previous company, and how did you collaborate with others? How did you cooperate across departments?
-
What difficult technical issues have you encountered? How did you solve them?
-
Do you know what singleton, factory, strategy, and decorator patterns are?
-
What libraries do you commonly use? What front-end development tools do you use? What applications or components have you developed?
-
How to perform page reconstruction?
Website reconstruction: Simplify the structure and add readability without changing external behavior, while maintaining consistent behavior on the website front end.
In other words, it is optimizing the website without changing the UI, and maintaining consistent UI while expanding.
For traditional websites, reconstruction usually involves:
Changing table layout to DIV+CSS Ensuring website front-end compatibility with modern browsers (for non-standard CSS, such as those effective for IE6) Optimizing for mobile platforms Optimizing for SEO Deep-level website reconstruction should consider:
Reducing code coupling Keeping code flexible Writing code strictly according to standards Designing extensible APIs Replacing old frameworks and languages (such as VB) Enhancing user experience Generally, speed optimization is also included in reconstruction.
Compressing front-end resources such as JS, CSS, and images (usually solved by the server) Performance optimization of the program (such as data reading and writing) Using CDN to accelerate resource loading Optimizing JS DOM HTTP server file caching
-
List the unique features of IE compared to other browsers?
Event differences:
The element that triggers the event is considered the target. In IE, the target is included in the srcElement property of the event object;
Getting character codes, if the key represents a character (excluding shift, ctrl, alt), IE's keyCode returns the character code (Unicode), while in DOM, key codes and characters are separated, and character codes need to be obtained using the charCode property;
To prevent the default behavior of an event, in IE, you must set the returnValue property to false, while in Mozilla, you need to call the preventDefault() method;
To stop event bubbling, in IE, you need to set cancelBubble to true, while in Mozilla, you need to call the stopPropagation().
-
Which book is it written that 99% of websites need to be reconstructed?
Website Reconstruction: Design with Web Standards (2nd Edition)
-
What are graceful degradation and progressive enhancement?
Graceful degradation: Web sites work properly in all modern browsers, and if the user is using an old browser, the code will be downgraded for the old version HTTP 401.5 - Unauthorized: ISAPI or CGI authorization failed 402 - Reserved for valid ChargeTo header responses 403 - Forbidden: The server has received the request but refuses to provide the service HTTP 403.1 - Forbidden: Executable access is forbidden HTTP 403.2 - Forbidden: Read access is forbidden HTTP 403.3 - Forbidden: Write access is forbidden HTTP 403.4 - Forbidden: SSL required HTTP 403.5 - Forbidden: SSL 128 required HTTP 403.6 - Forbidden: IP address rejected HTTP 403.7 - Forbidden: Client certificate required HTTP 403.8 - Forbidden: Site access denied HTTP 403.9 - Forbidden: Too many users connected HTTP 403.10 - Forbidden: Configuration invalid HTTP 403.11 - Forbidden: Password change HTTP 403.12 - Forbidden: Mapper denied access HTTP 403.13 - Forbidden: Client certificate revoked HTTP 403.15 - Forbidden: Client access license exceeded HTTP 403.16 - Forbidden: Client certificate untrusted or invalid HTTP 403.17 - Forbidden: Client certificate expired or not yet valid 404 - A 404 error indicates that the server is reachable, but the server cannot retrieve the requested page, and the requested resource does not exist. For example: entering the wrong URL 405 - The method defined by the user in the Request-Line field is not allowed 406 - The requested resource is not accessible according to the Accept sent by the user 407 - Similar to 401, the user must first be authorized on the proxy server 408 - The client did not complete the request within the time specified by the user 409 - The request cannot be completed due to the current state of the resource 410 - The resource is no longer available on the server and there is no further reference address 411 - The server rejects the request for the Content-Length attribute defined by the user 412 - One or more request header fields are incorrect in the current request 413 - The requested resource is larger than the size allowed by the server 414 - The requested resource URL is longer than the length allowed by the server 415 - The requested resource does not support the format of the request item 416 - The request includes a Range request header field, and there is no range indication value in the current request for the resource, and the request does not include an If-Range request header field 417 - The server does not meet the expected value specified in the Expect header field of the request. If it is a proxy server, it may be that the next-level server cannot meet the request
5** (Server Error Category): The server cannot correctly execute a correct request HTTP 500 - The server encountered an error and could not complete the request HTTP 500.100 - Internal Server Error - ASP error HTTP 500-11 Server shutdown HTTP 500-12 Application restart HTTP 500-13 - Server too busy HTTP 500-14 - Application invalid HTTP 500-15 - Request global.asa not allowed Error 501 - Not Implemented HTTP 502 - Gateway Error HTTP 503: Due to overload or maintenance downtime, the server is currently unavailable and may return to normal after a period of time
-
What happens from the time a URL is entered to the completion of the page loading display? (The more detailed the process, the better)
``` Note: This question is superior in distinguishing, covering a wide range of knowledge points. Even those who do not understand can answer a few sentences, and experts can freely play to their strengths, from URL specifications, HTTP protocol, DNS, CDN, database queries, to browser streaming parsing, CSS rule construction, layout, paint, onload/domready, JS execution, JS API binding, etc.;
Detailed version: 1. The browser will start a thread to handle this request, and if the URL is analyzed as the http protocol, it will be processed in a web manner; 2. Call the corresponding method in the browser kernel, such as the loadUrl method in WebView; 3. Obtain the IP address of the website through DNS resolution, set UA and other information, and send a second GET request; 4. Engage in the HTTP protocol session, the client sends the header (request header); 5. Enter the web server on the web server, such as Apache, Tomcat, Node.JS, etc.; 6. Enter the deployed backend application, such as PHP, Java, JavaScript, Python, etc., and find the corresponding request processing; 7. After processing, the header is returned, if the browser has visited, the cache has the corresponding resource, it will compare with the server's last modified time, if it is consistent, it will return 304; 8. The browser starts to download the HTML document (response header, status code 200), while using the