Q: Under what circumstances will you encounter cross-domain issues? What are the solutions?
The cross-domain problem is caused by the same-origin policy implemented by browsers for security. The same-origin policy restricts documents and scripts from different sources. Same-origin means that the domain names, protocols, and ports of two URLs must be the same. The script tag jsonp cross-domain, nginx reverse proxy, node.js middleware proxy cross-domain, the backend sets the security domain name in the header information, and the backend sets cors on the server.
Q: How to judge whether a variable is an object or an array? There are several methods for judging arrays and objects, among which prototype.toString.call() is the most compatible. function isObjArr(variable){ if (Object.prototype.toString.call(value) === "[object Array]") { console.log('value is an array'); }else if(Object.prototype.toString. call(value)==='[object Object]'){//This method is more compatible console.log('value is an object'); }else{ console.log('value is neither an array nor an object') } }
Q: What is the difference between title attribute and alt attribute in html? This question was asked once. At that time, I only remembered that the alt attribute is used for the img tag. When the image fails, the content in the alt attribute will appear, and the title is used to mark the title of the page. At that time, the interviewer asked me if I still had it. other differences. I. . . Then I looked for an article to read, and I increased my posture: 1.<img src="#" alt="alt information" /> //1. When the picture does not output information, the alt information mouse will be displayed There is no information on it. When the picture is read normally, there will be no alt information. 2.<img src="#" alt="alt information" title="title information" /> // 2. When the picture does not output information , the alt information will be displayed, and the title information will appear when the mouse is placed. //When the picture is output normally, the alt information will not appear, and the title information will appear when the mouse is placed on it.
There is also some knowledge about the title attribute: The title attribute can be used on all tags except base, basefont, head, html, meta, param, script and title The function of the title attribute is a hint. Use the title attribute for additional descriptive and non-essential information. The title attribute value can be longer than that set by the alt attribute value. A good use for the title attribute is to add descriptive text to the link, especially when the link itself is not very clear about the purpose of the link.
Q: The problem of standard box model and IE weird box model will mainly appear on the written test questions, such as:
<div style="width:100px;height="100px;border:10px;padding:10px;"></div>
What is the width of this box under the w3c standard box model and IE's weird box model? Standard box model: total width=content100px+border 10px 2+padding 10px 2 //140px Weird box model: total width=content60px+ border 10px 2+padding 10px 2 //100px
ps: box-sizing: content-box || border-box; //css3 box-sizing set to border-box will use the weird box model. When the width of the weird box is smaller than the width of border+padding, the content width will become 0, the width of the box will be stretched by the total width of border and padding
Q: What http status codes do you know? 1xx: 1 starts with information status code 2xx: 2 starts with request success 3xx: 3 starts with redirect 4xx: 4 starts with client error 5xx: 5 starts with server error
Q: What methods are there for vertical centering?
For a single line of text, you can use height and line-height to set the same height. position+margin: set parent element: position: relative;, child element height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; (fixed height) position+transform: set parent element position: relative , Child element: position: absolute;top: 50%;transform: translate(0, -50%); (variable height) Wild flex layout (ie10+), set the parent element display:flex;align-items: center;( Uncertain height)
Q: JS event stream?
A complete JS event flow is a process that starts from the window and finally returns to the window.
The event flow is divided into three stages (1~5) capturing process, (5~6) event triggering process, (6~10) bubbling process.
Do you know about scope? How to prevent scope pollution
In fact, there are many articles about scopes on the Internet, which are uneven. In my opinion, the scope is nothing more than js as a function function declaration, which will be promoted to execute before other declaration statements, and if the scope in a {} cannot be found If a property is found, it will look for the property in the {} context, and if it is not found, it will be similar.
Scope pollution is nothing more than closure, I understand it personally.
Talk about closures
There are too many descriptions about closures on the Internet, but many of them are unclear, and there are too many headlines. Here I suggest to directly look at the books in the third edition of the js advanced tutorial.
In fact, a closure is just a function that has access to the scope of another function. A common way to create a closure is to create another function inside a function.
function a(){ var a; // ... return function(){ // Here you can refer to the scope in the a function, that is, you can use a // and the a function scope cannot use the value here. }}
Do you understand front-end caching? What are the types of caches?
The front-end cache is nothing more than Cookie, LocalStorge, and SessionStorge.
Personally, I will briefly introduce these three. For more details, you can go to Baidu Baidu.
Cookie, the storage capacity is small, only about 4kb. It can be sent when the network is requested. It is not recommended to store important data, because it will be scammed by the Internet. Send the local cookie to someone else's server, and then obtain your account password.
Both LocalStorge and SessionStorge are mainly used for local cache. The usage of both is very simple, and they have their own Set and get methods. The main difference is that LocalStorge is a persistent storage method, which means that data will never expire if it is not cleared manually. And SessionStorge closes the browser to clear the data.