Short-answer questions
Transform: translateZ(0) in CSS3
Answer: GPU acceleration to optimize front-end performance
2. List the three header fields that prohibit browser caching and set the response values
Expires: Tells the browser how long to cache a returned resource -1 or 0 is a no-cache brief: Adding an Expires header can effectively take advantage of the browser’s caching capacity to improve page performance and prevent many unnecessary Http requests in subsequent pages. WEB servers use the Expires header to tell WEB clients that they can use the current copy of a component until a specified time. Example: Expires: Thu, 15 Apr 2010 20:00:00 GMT; He tells the browser that the cache is valid until April 15, 2010, when the same request is cached and HTTP requests are used outside of that time.
Cache-control: no-cache cathe-control: max-age=315360000
One big flaw with Expires is that it uses a fixed time, requires the server to be in strict sync with the client’s clock, and when that time comes, the server must reset the time. HTTP1.1 introduced Cathe-Control, which uses max-age to specify how long a component is cached. The browser can use the cache for max-age from the request, and use requests outside of it. This eliminates the Expires limitation, and can use both if browser compatibility is high.
Pragma: no cache
3. What are the exact ways to get the location of page elements
That is to use the getBoundingClientRect() method. It returns an object containing the left, right, top, and bottom attributes, which correspond to how far the upper left and lower right corner of the element is relative to the upper left corner of the viewPort.
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
// Add the rolling distance to get the absolute position
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
Copy the code4. Regex extracted from 2018-10-07t11:48:47 Asia/zh-cn [2018,10,07,11,48,47]
“2018-10-07T11:48:47 Asia/zh-cn”.match( /\d{1,}/g )
5. How to determine whether object is an array type?
alert(typeof 1); // Return string "number"
alert(typeof "1"); // Return the string" string"
alert(typeof true); // Return string "Boolean"
alert(typeof {}); // Return string "object"
alert(typeof []); // Return string "object"
alert(typeof function(){}); // Return string "function"
alert(typeof null); // Return string "object"
alert(typeof undefined); // Return string "undefined"
Copy the codeTypeof {} and typeof [] both result in object. How can I determine whether an object is an array type using typeof?
An object is an object, an array is an object, everything in JS is an object. Obviously, using a simple Typeof operator is not going to do the trick.
1, from the perspective of the prototype, Array. Prototype. IsPrototypeOf (obj);
Use the isPrototypeOf() method to determine if an Array is in the prototype chain of obj, and return true if so, false otherwise.
Array.isArray([1.2.3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false 
Copy the codeProgramming problem
[“a”,”b”] [“a”,”b”] [“a”,”b”]
var users=[{
id:1.name:"a"}, {id:2.name:"a"}, {id:3.name:"b"}, {id:4.name:"v"
}]
Copy the codeArray.prototype.unique = function () {
var res;
this.map(item= > {
this[item.id - 1] = item.name
})
// ES6 has two useful additions: set and array. from
// Set is a new data structure that accepts an array or array-like object and automatically removes duplicate items within it.
res=new Set(this);
console.log("New Set object",res)
// Set returns an object, but we want an array.
// Array.from converts an array-like object or iterable into an Array.
res=Array.from(new Set(this));
return res// The es6 array is deduplicated
}
console.log(users.unique());
Copy the code
2. If the following objects are known, design an example of Property interception and reading operation based on es6 proxy method. If you are required to access properties that do not exist in the example object, the Property “$(Property)” does not exist is thrown
const man={
name:'jscoder'.age:22
}
// Complete the code
const proxy = new Proxy(...). proxy.name//"jscoder"
proxy.age / / 22
proxy.location //Property "$(property)" does not exist
Copy the codeThe get() method is used to intercept a read of a property.
var man = {
name:'jscoder'.age:22
};
var proxy = new Proxy(man, {
get: function(target, property) {
if(property in target) {
return target[property];
} else {
throw new ReferenceError(`Property ${property} does not exist.`); }}});console.log(proxy.name)
console.log(proxy.age)
console.log(proxy.location)
Copy the codeOther methods of Proxy instance methods refer to this link, which is very detailed blog.csdn.net/qq_30100043…
3. Given the following virtual DOM data structure, how to achieve a simple virtual DOM, rendering to the target DOM tree
// Sample data
let demoNode = ({
tagName: 'ul'.props: {'class': 'list'},
children: [({tagName: 'li'.children: ['douyin'] ({}),tagName: 'li'.children: ['toutiao']]}}));Copy the code// Build a render function to render the demoNode object into the following DOM
<ul class="list">
<li>douyin</li>
<li>toutiao</li>
</ul>
Copy the codeLook at the virtual DOM and it might seem a bit weird, but peel it off and there you go:
- Using JavaScript to build a virtual DOM tree structure and render it into a page;
- When the data changes, the DOM tree structure changes, so as to generate a new virtual DOM tree, compare it with the previous DOM, and apply the changed part to the real DOM tree, that is, the page. With that in mind, let’s implement a simple virtual DOM and associate it with the real DOM.
Building the Virtual DOM
The virtual DOM, in fact, is to use JavaScript objects to build a DOM tree, as shown in the UL component template, the tree structure is as follows:
var elem = Element({
tagName: 'ul'.props: {'class': 'list'},
children: [
Element({tagName: 'li'.children: ['item1']}),
Element({tagName: 'li'.children: ['item2']]}}));Copy the codeNote: Element is a constructor that returns an Element object. To make the virtual DOM structure clearer, we omitted new and implemented it in Element.
/* * @Params: * tagName(string)(requered) * props(object)(optional) * children(array)(optional) * */
function Element({tagName, props, children}){
if(! (this instanceof Element)){
return new Element({tagName, props, children})
}
this.tagName = tagName;
this.props = props || {};
this.children = children || [];
}
Copy the codeNow, with Element we can build a virtual DOM tree at will. The e problem is, virtual is virtual, and we need to render it on the page, otherwise, it doesn’t work.
How do I present it?
Create a real DOM node node by traversing it node by node:
1. The createElement method;
2. The createTextNode.
How do I traverse it?
Because it’s a tree, there are two types of traversal:
1. Depth-first Traversal (DFS)
2. Breadth-first traversal (BFS)
For the actual situation, we have to use DFS, why?
Because we have to append the child to the parent
Let’s use DFS and implement a render function like this:
Element.prototype.render = function(){
var el = document.createElement(this.tagName),
props = this.props,
propName,
propValue;
for(propName in props){
propValue = props[propName];
el.setAttribute(propName, propValue);
}
this.children.forEach(function(child){
var childEl = null;
if(child instanceof Element){
childEl = child.render();
}else{
childEl = document.createTextNode(child);
}
el.appendChild(childEl);
});
return el;
};
Copy the codeAt this point, we can easily render the virtual DOM into the specified real DOM. Suppose we render the UL virtual DOM in the body of the page as follows:
var elem = Element({
tagName: 'ul'.props: {'class': 'list'},
children: [
Element({tagName: 'li'.children: ['item1']}),
Element({tagName: 'li'.children: ['item2']]}}));document.querySelector('body').appendChild(elem.render());
Copy the code