The answer is for reference only. The answers are incomplete or biased, and you are welcome to add and correct them in the comment area.
What is the box model?
Think of all web page elements as a box, which has four attributes :
content, padding, border, and margin
. This is the box model.
What are the elements in the line? What are the block-level elements? What are the viod elements?
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
Block-level elements: div, ul, li, dl, dt, dd, p, h1-h6, blockquote
Empty elements: HTML elements with no content, such as: br, hr, link, input, img, meta
List some new features of HTML5 and CSS3 that you know
HTML5: more
semantic content tags (header, nav, aside, article, section, footer)
Video and audio elements for media playback
Custom attribute data-id
HTML5 has several new form input types. These new features provide better input control and verification.
calendar, date, time, email, url, search
CSS3:
Color: RGBA, HSLA mode added
Text-shadow
Border: rounded corners (border-radius) Border shadow: box-shadow
Box model: box-sizing
背景:background-size background-origin background-clip
渐变: linear-gradient , radial-gradient
Transition: transition can be animated
Custom animation animate @keyfrom
Media query multi-column layout @media screen and (width:800px) {…}
border-image
2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
3D conversion
Font-face
Flexible layout flex
Briefly describe the difference between src and href
href is used to establish the relationship (link) between the current page and the referenced resource, and src will replace the current label. When encountering href, the page will load subsequent content in parallel; while src is different, the browser needs to load the content of src before it continues to go down
It is recommended that the js file be placed at the end of the HTML document. If the js file is placed in the head tag, you can use window.onload to achieve the final loading of js.
For details, please refer to: The difference between href and src
CSS to achieve vertical and horizontal centering (list one)
Method 1: Use position: absolute and transform to achieve
If you are not sure about the height of the child element, you can skip margin-top and use transform:translate(-50%,-50%)
Method 2: Flexible layout (flex)
Set the display value of the parent element to flex, and then set align-items: center; justify-content: center;
Refer to: Several methods for css to achieve vertical and horizontal centering
The difference between px and em, rem
- PX is actually pixels. When PX is used to set the font size, it is more stable and accurate. But if you change the zoom of the browser, the original layout will be broken
- Compared with px, em and rem are more flexible. They are relative length units, meaning that the length is not fixed and is more suitable for responsive layouts.
- The difference between em and rem is summarized in one sentence: em is relative to the parent element, rem is relative to the root element
- IE6-IE8 does not support em and rem attributes, px is supported by all browsers.
Therefore, for browser compatibility, you can use "px" and "rem" together, use "px" to achieve the effect under IE6-8, and then use "Rem" to achieve the effect of the generation browser
For practical examples, please refer to: https://www.cnblogs.com/nannan1221/p/10772977.html
Talk about the difference between synchronous and asynchronous
Synchronous will block, asynchronous will not block
Synchronization: The program runs from top to bottom, the browser must complete this task before it can continue to execute the next task
Asynchronous: The program runs from top to bottom. The browser task is not executed, but the next line of code can be executed. When the callee gets the result, it will actively notify the caller through the callback function.
What does Doctype do? How is strict mode and promiscuous mode different? What do they mean?
Role: The
<!DOCTYPE> declaration is located in the first line of the HTML document, before the tag. Tell the browser's parser what document standard to parse this document . The absence or incorrect format of DOCTYPE will cause the document to be rendered in compatibility mode.
How is strict mode and promiscuous mode different?
1. Standard mode (strict mode) typesetting and JS operation mode are run at the highest standard supported by the browser (W3C standard).
2. In compatibility mode (promiscuous mode or weird mode), the page is displayed in a loosely backward compatible manner, simulating the behavior of old browsers to prevent the site from not working. (Backward compatibility here refers to discussing compatibility issues of past versions from the standpoint of the new version)
Significance:
As standard consistency becomes more and more important, browser developers have to face a difficult choice: gradually following w3c standards is the way forward. However, changing the existing css and completely following the standard will cause many old websites to be more or less damaged. If the browser suddenly parses the existing css in the correct way, the display of the old website will inevitably be affected. Therefore, all browsers need to provide two modes, the hybrid mode serves the old-world rules, and the strict mode serves the standard rules.
The difference between null and undefined
The values of null and undefined are equal, and the types are not equal when the two are compared for equality
console.log(null==undefined); //true 因为两者都默认转换成了false
console.log(null===undefined); //false "==="表示绝对相等，null和undefined类型是不一样的，所以输出“false”
console.log(typeof undefined); //"undefined"
console.log(typeof null); //"object"
null: Null type, representing "null value", representing a null object pointer, using typeof operation to get "object", so you can think of it as a special object value.
Generally used to actively release references to objects, for example:
var emps = ['ss','nn'];
emps = null; // 释放指向数组的引用
undefined : Indicates that the variable has been declared but has not been assigned a value.
var a; // a 自动被赋值为 undefined
So when is it null and when is it undefined? ? ?
Null means "no object", that is, there should be no value there. Typical usage is:
(1) As a function parameter, it means that the function parameter is not an object.
(2) As the end of the object prototype chain.
undefined means that the value is missing, that is, there should be a value here, but it is not defined. Typical usage is:
(1) Formal parameters are defined, but no actual parameters are passed, undefined is displayed
(2) When the object property name does not exist, undefined is displayed
(3) The function did not write the return value, that is, did not write return, and got undefined
(4) I wrote return, but did not assign a value, and got undefined
When to use null?
When a relatively large object is used up and the memory needs to be released, set it to null.
Briefly describe your understanding of json
(1) JSON is a lightweight data exchange format; using key-value pairs, it is easy to read and write, and it is also easy to parse and generate by machine.
(2) JSON is language independent, which means that no matter what language it is, it can be parsed as json, just follow the json rules.
(3) The JSON syntax represents three types of values, simple values (string, numeric, boolean, null), array , and object
A brief introduction to the constructor
An example is to explain the constructor. I think it’s quite appropriate to quote it here. Someone wants to make a thousand gold coins, and each gold coin is engraved with a different number. The easiest way is to create a gold coin model , And then engrave their respective numbers. The constructor is the model of this gold coin. Every time you make a new one, you create a gold coin.
A constructor is an ordinary function, and its creation method is no different from an ordinary function. The difference is that the first letter of the constructor is customarily capitalized. The other is the difference in calling methods, ordinary functions are called directly, and constructors need to use the new keyword to call.
For details, please refer to: the difference between constructor and ordinary function
Prototype and prototype chain in javascript
Prototype :
In JavaScript, whenever a function data type (ordinary function, class) is defined, a prototype property is born. This property points to the prototype object of the function, and this property is the value of an object data type.
The prototype object is equivalent to a public area. All instances of the same class can access this prototype object. We can set the common content of the object to the prototype object.
Prototype chain:
Every object created will have a prototype attribute of prototype. When a certain attribute of this object does not exist, it will look for its prototype, and the prototype has its own prototype, and then this cycle is the prototype chain
individual Understanding: Only functions have prototype properties. This statement may not be accurate, but it means that most of the time.
1. proto is actually used in the prototype chain query, and it always points to prototype;
2. prototype is a function Unique, it is automatically created when the constructor is defined, and it is always referred to by proto .
Reference: Detailed explanation of prototype and prototype chain
Scope and closure
Scope: In JavaScript, the scope is a collection of accessible variables, objects, and functions .
The function Acontains the function B, and the variable of the function is Bused in the function A, then the function Bis called a closure.
Or: A closure is a function that can read the internal variables of other functions
function A() {
var a = 1;
function B() {
console.log(a);
}
return B();
}
Closures give an example: the
above three lines of code are in an immediate function.
In the three lines of code, there is a local variable local and a function foo. The local variable can be accessed in foo.
Well, this is a closure:
the sum of "function" and "variables accessible within the function" (also called environment) is a closure.
It's that simple.
For detailed cases, please refer to: JavaScript Scope
JavaScript Closure
What is the closure in JS? Speak super good
what is closure? And the advantages, disadvantages, uses, and characteristics of closures
It has two biggest uses, one is to read the variables inside the function mentioned earlier , and the other is to keep the values of these variables in memory .
Why not abuse closures
Since closures will cause the variables in the function to be stored in memory, which consumes a lot of memory, closures should not be abused, otherwise it will cause performance problems of the web page and may cause memory leaks in IE. The solution is, before exiting the function, will not use the delete all local variables.
Let me talk about another concept: memory leaks refer to variables that you do not use (cannot access), which still occupy memory space and cannot be reused.
What is ajax?
Ajax is the full name of asynchronous JavaScript and XML, that is, asynchronous JavaScript and XML, used to realize asynchronous data interaction in Web pages, and realize partial refresh of the page
Advantages and disadvantages of ajax?
advantage:
- Asynchronous communication effect can be realized, partial refresh of the page, and a better user experience
- Front-end and back-end load balancing (delegating some back-end work to the front-end to reduce the burden on servers and broadband)
- Interface and application are separated (ajax separates interface and application, that is, data and presentation are separated)
Disadvantages:
- ajax does not support the browser back button
- Security issues ajax exposed the details of interacting with the server
- Support for search engines is weak
- Broken the normal behavior of the Back and History back buttons and other browser mechanisms
ajax principle? ? (The process of page rendering?? Creating the ajax process??)
Create an XHR object, send an asynchronous request, then listen to the server's response result, and render it on the page
The difference between get and post?
This question is relatively simple, but it must be answered comprehensively.
1. The get parameter method is passed through the address bar URL, and you can directly see the parameters passed by get. The parameter URL of the post parameter method is not visible. Get puts the requested data in the URL After passing? Connect and split parameters through &. psot stores the parameters in the HTTP package body
2. Get transfers data through URL. The length of the transferred data is limited by the size of the URL. The maximum length of the URL is 2048 characters. No length limit for post
3. Get back will not affect, post back will resubmit
4. Get request can be cached, post cannot be cached
5. Get request only URL encoding, post supports multiple encoding methods
6. The record of get request will stay in the history record, and the post request will not stay in the history record
7.get only supports ASCII characters, post has no character type restrictions
What is cross-domain?
The problem stems from the cross-domain JavaScript same origin policy that only protocol + hostname + port number (if present) the same , then allow each other access to or can not access each other's resources.
Cross-domain issues are for JS and ajax.
How to solve cross-domain issues? (Three solutions)
1. Proxy server
Use a new server to put all the codes you need to use together and you can access it normally.
2. Setting the request header in the background
The security basis of the cross-domain access solution is based on " JavaScript cannot control the HTTP header ".
It needs to authorize whether to allow cross-domain access through the HTTP header returned by the target domain.
response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式
3. Use JSONP (json+padding) to fill in the data
3.1 What is jsonp:
jsonp is a data transmission method or non-mandatory protocol
3.2 The essence of jsonp and ajax:
The core of ajax is to get non-page content through xmlHttpRequest
The core of jsonp is to dynamically add script tags to call the js script provided by the server
3.3 Note on the use of jsonp:
Only the data passed by GET can be passed (parameters are passed by url, so the type of jsonp can only be get!)
3.4 jsonp use code:
js version:
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
document.head.appendChild(script);
// 回调执行函数
function handleCallback(res) {
alert(JSON.stringify(res));
}
</script>
The server returns as follows (when returning, the global function is executed):
handleCallback({
"success": true, "user": "admin"})
jQuery version:
$.ajax({
type : "GET",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "jsonp",//数据类型为jsonp
jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert('fail');
}
});
Refer to: Solve Ajax cross-domain problems [5 solutions]
9 common front-end cross-domain solutions (detailed)
Explain the principle of jsonp
The principle of jsonp is to use <script>tags without cross-domain restrictions. Use <script>tag srcattributes to send GET requests with callback parameters. The server will piece together the interface return data into the callback function and return it to the browser. The browser parses and executes it, so that the front end gets it. The data returned by the callback function.
What are the common HTTP methods?
- GET: Used to request access to resources identified by URI (Uniform Resource Identifier), which can be passed to the server through URL
- POST: Used to transmit information to the server. The main function is similar to the GET method, but POST is generally recommended.
- PUT: Transfer files, the body of the message contains the content of the file and save it to the corresponding URI location.
- HEAD: Get the message header, similar to the GET method, except that the message body is not returned, and is generally used to verify whether the URI is valid.
- DELETE: Delete the file, contrary to the PUT method, delete the file corresponding to the URI location.
- OPTIONS: Query the HTTP method supported by the corresponding URI
The difference between HTTP and HTTPS:
Let me talk about what is HTTP? ? HTTP is a TCP/IP-based protocol on how data is communicated in the World Wide Web.
- The HTTP URL starts with http://, and the HTTPS URL starts with https://
- HTTP is not secure, but HTTPS is secure
- The HTTP standard port is 80, and the HTTPS standard port is 443
- In the OSI network model, HTTP works at the application layer, while the secure transmission mechanism of HTTPS works at the transport layer
- HTTP cannot be encrypted, and HTTPS encrypts the transmitted data
- HTTP does not require a certificate, while HTTPS requires an SSL certificate issued by the CA organization wosign
The complete process of HTTP request
1) Domain name resolution
2) Initiate TCP 3-way handshake
3) After the TCP connection is established, the browser initiates an http request to the server
4) The server responds to the http request, and the browser gets the html code
5) The browser parses the html code and requests resources in the html code (such as js, css, pictures, etc.)
6) Close the TCP connection, and the browser renders the page to the user
TCP three-way handshake
For the first handshake, the client sends a connection request message to the server. After receiving the information, the server knows that it can connect with the client successfully, but the client does not know whether the server has received it. Request, so the server responds after receiving the message, and the client determines that it can connect with the server after receiving the feedback from the server. This is the second handshake.
If there are only two handshakes, then the connection is established here, but at this time the client does not have any data to send, and the server is still waiting for good news stupidly, causing a huge waste of resources. Therefore, a third handshake is required, and this situation can be avoided only if the client responds again.
The so-called Four-Way Wavehand terminates the TCP connection
For details, please refer to: TCP three-way handshake, this is the best interpretation I have ever seen
The meaning of http protocol return code
2xx: successful
200 OK: indicates that the request sent from the client to the server was processed normally and returned ;
3xx：页面重定向（需要进行附加操作以完成请求）
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
4xx：客户端错误；
400 Bad Request：表示请求报文中存在语法错误；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源
5xx：服务端错了；
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
TCP和UDP的区别
TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境
说说网络分层里七层模型是哪七层
应用层：允许访问OSI环境的手段
表示层：对数据进行翻译、加密和压缩
会话层：建立、管理和终止会话
传输层：提供端到端的可靠报文传递和错误恢复
网络层：负责数据包从源到宿的传递和网际互连
物理层：通过媒介传输比特,确定机械及电气规范
For details, please refer to: Front-end Interview Questions-HTTP