Interview front end (2)

Front-end needs to pay attention to what SEO

Reasonable title, description, keywords: search right in front of the three-by-weight decreases, the value of title to emphasize important points, important keywords appear no more than 2 times, and rely on before, different page title to be different; description put highly summarized the content of the page, the right length, not too much keyword stuffing, different page description is different; keywords include important keywords to
semantic HTML code to comply with W3C specifications: semantic code is easy to understand web search engines
important content HTML code in the forefront: the search engines to crawl HTML order is from top to bottom, there are restrictions on some search engines to crawl the length, to ensure that important content will be crawled
important not to use the contents of output js: reptile does not get executed js content
less iframe: search engines will not crawl the content of the iframe
non-decorative images must add alt
improve site speed: site speed is an important indicator of search engine ranking

Event delegates, without bubbling of how to implement an event agency, which event is not bubbling

Event delegates is to use event bubbling mechanism, in place of the parent element with child elements bind trigger event

Advantages: save memory, you do not need to log off events to child nodes

Page Optimization

CND reduce the number of queries
to reduce http requests
Ajax local cache
compression css, js
compress images

Git commands frequently used, at least five, and to say each command does.

Git init to create a local repository
Git add. Add local files to the staging area
Git commit -m '' contents submitted to the staging area version zone
Git log View Log
Git branch dev create a branch
Git branch looking at branches

Ajax the process outlined.

1. Create XMLHttpRequest object, the object is to create an asynchronous call
2. Create a new HTTP request, and specify the method of the HTTP request, URL and authentication information
3. Setting response function of the state change of the HTTP request
4. Send an HTTP request
5. Get data returned from an asynchronous call
6. Use JavaScript and DOM implementations partial refresh

Cross-domain

Because the browser for security reasons, have the same origin policy. That is, if the protocol, domain name or a different port is the cross-domain, Ajax request fails

JSONP

JSONP principle is very simple, it is to use

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>
    function jsonp(data) {
    	console.log(data)
	} 
</script>

JSONP simple to use and compatibility is good, but only if they get requests

HEARTS

CORS need to support both the browser and the backend

Key browser will automatically communicate CORS, CORS achieve communication is the back-end. As long as the back-end implementation of CORS, to achieve cross-domain.

Server set up Access-Control-Allow-Origin can open CORS. This attribute indicates which domains can access resources, if you set a wildcard indicates that all sites can access resources
document.domain

The case of this embodiment can only be used for the same two domains, such as a.test.com and b.test.com suitable for this embodiment.
Just give the page = add the document.domain ' test.com ' represents the secondary domain name can have the same cross-domain
postMessage

This is often used to obtain third-party page data embedded in the page. Sending a page message, and determine the source of another page message received

// 发送消息端
window.parent.postMessage('message', 'http://blog.poetries.com');

// 接收消息端
var mc = new MessageChannel();
mc.addEventListener('message', (event) => {
    var origin = event.origin || event.originalEvent.origin;
    if (origin === 'http://blog.poetries.com') {
        console.log('验证通过')
    }
});

prototype

Prototype chain is a plurality of objects by proto is connected up. Why obj can be accessed valueOf function, because obj found by valueOf function prototype chain

Object is the father of all objects, all objects can be found by __proto__

Function is the father of all functions, all functions are available through proto find it

prototype function of an object

__Proto__ property prototype object points, proto objects connected together to form a prototype and prototype chain

var, let const and differences

Enhance the function takes precedence over the variable lift, the function will enhance the entire function moved to the top of the scope, the variable will only enhance the scope statement moved to the top
var exists upgrade, we can use before it is declared. let, const because of a temporary dead zone can not be used before being declared
var to declare variables in global scope will lead to lower variable mounted on the window, the other two will not
let const role and basically the same, but the latter declared variables can not be assigned again

Class inheritance

In ES6, we can use the class inheritance to achieve, and is simple to implement

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

The core class inheritance is to use extends indicate which inherited from the parent class, and must be called in the subclass constructor Super , because the code can be viewed as Parent.call (the this, value) .

window.onload和$(document).ready

window.onload () method is to wait until after all of the elements within the page, including pictures loaded to perform.

$ (Document) .ready () is executed after the DOM structure drawing is completed, you do not have to wait until loaded