1. The difference between local storage (local storage, session storage) and cookie?

1.seesionStorage 用于本地存储一个临时会话数据，这些数据只有在同一个会话页面才能访问，当页面关闭，数据也随之销毁。
2.localStorage 用于永久性本地存储，除非主动删除，不然数据会一直存在。
3.本地存储：只有本地浏览器端可以访问数据，服务器不能访问本地存储直到通过post或get发送数据到服务器。
4.cookie：服务器和客户端都可以访问，大小只有4kB左右，有有效期，过期会自动删除。
  cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据

2. briefly the difference between the src and href?

src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本/img图片/frame等元素。
href用于在当前文档中和引用资源之间确立关系。
注：src引入时，当浏览器解析到该元素，会暂停其他元素的下载和处理，直到将该资源加载、编译、执行完毕。所有一般建议将src引入文件放在底部而不是头部。

3.json understanding

json是一种轻量级的数据交换格式。它是基于javascript的一个子集。数据格式简单，易于读写，占用带宽少。

4.jsonp principle

通过<script>标签的src属性并不被同源策略所约束来实现跨域访问，
同源策略所谓的同源指的是域名、协议、端口、相同
与AJAX的区别是什么？
ajax和jsonp本质上是不同的东西。
ajax的核心是通过XmlHttpRequest获取非本页内容
jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

The difference 5.document.write and innerHTML?

document.write是对整个页面的重写，写入的内容是字符串的html;
innerHTML 是HTMLElement的属性，是一个元素的内部html内容

var zzz= document.getElementById('aaa')
zzz.innerHTML="xiaoxin"
document.write('<h2>我是h2</h2>')//docment.write可以识别标签

6. What is the function of the arrow

箭头函数就是使用(=>)定义函数的新语法，有以下特征：
1.不能通过new关键字调用
2.没有原型（因为不能通过new调用）
3.没有this的绑定，箭头函数中的this指向它的外层非箭头函数this的指向
4.没有arguments对象，但是可以获取到外层函数的arguments
5.call,apply,bind不能改变this的指向

Timers this point window

In JavaScript, arguments object is an object is rather special, in fact, is currently a built-in properties of the function. arguments very similar Array, but in fact it is not an Array instance.

 function f(a, b, c){
     alert(arguments.length);   // result: "2"
     a = 100;
     alert(arguments[0]);       // result: "100"
     arguments[0] = "qqyumidi";
     alert(a);                  // result: "qqyumidi"
     alert(c);                  // result: "undefined"
     c = 2012;
     alert(arguments[2]);       // result: "undefined"
 }
 
 f(1, 2);

6. realization of the principle of lazy loading

When users browse to the current set of resources when, or trigger an event, the page is loaded in the request.

1. We can use the listener event callback to implement lazy loading

2. Use a timer to achieve lazy loading

7. Timer

Timers this point window

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

8. for loop / for in loop / loop and for of difference?

    var arr = [1,5,6];
    arr.length = 10;
    arr[12] = 16;
    arr[15] = 20;
    console.log(arr)
    
    // --------------------------------------------
    // for 循环,循环数组中所有数据包括空undefine
    for ( var i=0; i<arr.length; i++){
        console.log(arr[i]) // 1 5 6 undefine*9 16 undefine*2 20
    }
    // ---------------------------------------------
    // for in 循环,可以遍历数组的索引,和遍历数组中不为空的数据
    for (var j in arr){
        console.log(j)// 0 1 2 12 15
    }
    for (var j in arr){
        console.log(arr[j]) // 1,5,6,16,20
    }
    // --------------------------------------------------
    //  for of 循环,遍历数组中数据,跟for循环一样
    for (var k of arr){
        console.log(k) //1 5 6 undefine*9 16 undefine*2 20
    }

Deletions 9.map/set/foreach/ change search flattened array / array

10. The array deduplication

The method set 1.ES6 deduplication

// Array.from()方法可以将 Set 结构转为数组
let newArray = Array.from(new Set(oldarr));

2.index of deduplication method, index of the lookup value, returns -1 if not found, returns a match is found, the index value to the first

For loop through the array, and then traversed to get one value to compare the array index value -1 indicates if there are no duplicate data is added to the new array

for(let i=0; i<oldarr.length; i++){
         if(newarr.indexOf(oldarr[i]) === -1 ){
             newarr.push(oldarr[i]);
         }
     }

3.Filter method returns all of the contents tested also using the index of properties

By comparing the old array Filter method old one inside the array of data, if the same index value is added to the new array,

Because the index of the index returns a first value, if a different representation of the repeated

let newarr2 =[];
     newarr2 = oldarr.filter((item,index) => oldarr.indexOf(item) === index)
     console.log(newarr2);

The method 4.sort // sort sorted array, comparing the first element and the second element, is not the same joined

 let newarr3 = [];
  oldarr = oldarr.sort();
  newarr3.push(oldarr[0]);
  for(let j =1; j<oldarr.length; j++){
      // if( oldarr[j] !== oldarr[j-1]){
      //     newarr3.push(oldarr[j]);
      // }
      oldarr[j] !== oldarr[j-1] && newarr3.push(oldarr[j])
  }
  console.log(newarr3);

11. talk about the browser kernel, and what is the kernel

Google and safari - webkit

IE——trident

Browser kernel is divided into two parts: the rendering engine and JS engine

12. What is the BFC

Block-level formatting context

13. understand garbage collection mechanism

JavaScript parser program can detect when an object is no longer used, and when he identified an object is useless, he knew the object is no longer needed, it can release the memory occupied out. Function call to the function may retain closure station perform the function, not garbage collection mechanism.

14. canvas graphics rendering tags. Element itself does not have the ability to draw (it is just a graphical container) - must use a script to do the actual drawing tasks.

html:

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>

js:

//绘制矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

//绘制曲线
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制

//绘制内容/字体/大小
ctx.font="40px Arial";
ctx.fillText("Hello World",50,150);//后面2位参数决定了内容距离左边的距离和上面的距离

15. The mobile terminal 300ms delay Solutions

1. faskclick

How it works: When an event is detected touchend, will simulate a click event starting immediately through a custom DOM events, and the browser after 300ms real click event to stop off
Disadvantages: the script is relatively large, is not recommended

2. Disable the browser zoom

3. Change the default viewport width

The browser can be considered that the site has moved to end the adaptation and optimization done, no need to double-click the zoom operation.

4. The simulation is achieved by touchstart and touchend

Can not be directly used touchstart instead of click it,
the answer is not to use touchstart to replace the click event has two disadvantages.
First: touchstart finger touches the screen is triggered, sometimes users just want to slide the screen, but it triggered touchstart event, this is not what we want;
second: use touchstart events may appear in some scenes penetrate click The phenomenon.

What is click penetrate?

If there are two page elements A and B. A B element on the element. We registered a callback function in the event touchstart B elements, the role of the callback function is to hide the B element. We found that when we click on the B element, B element is hidden, then, A element triggers the click event.

This is because the mobile terminal browser, order of events is touchstart> touchend> click. The click event of delay 300ms, when the B element hiding touchstart event, after a 300ms, browser triggered the click event, but this time the B element gone, so the event is distributed to the A element body. If A is a link to that page at this time would jump unexpectedly

16. In response to bind multiple events on the same object and perform

Because onclick = "" elements added in response to events, add the event to, the event will be added later stacked away, can only be performed in response to the last event

So to use the event listener addElementLitener () to bind multiple handlers

addEventListener(myGet("btn"),"click",function () {
　　　　console.log("111");
　　});
　　addEventListener(myGet("btn"),"click",function () {
　　　　console.log("222");
　　});
　　addEventListener(myGet("btn"),"click",function () {
　　　　console.log("3333");

Modular development of understanding

commonJS规范 import export default amd requied.js
post, get the difference

Safety

speed

Submission three-way handshake

18.var let differences

var statement is a global variable

let declaration is a local variable, block-level scope, can cause temporary dead zone, can not be repeated declarations, variables will not improve.

19. JS which actions will cause the contents of leaked

Memory leaks caused by unexpected global variables
Memory leaks caused by closure
No cleanup timer
Business logic has died of circulation problems caused by

20js execution environment, js operating principle

21. The mobile terminal issues a pixel Solutions

Common package is a good company scss library before we solve the problem of a pixel.

We can also use media queries combined transform to solve, first use media queries, the proportion of the screen, and then transform to zoom.

The main difference between the 22.vue1.0 and vue2.0

I began to understand vue time already vue2.0 version, all without too much knowledge of vue1.0, 1.0 and 2.0 but I know a lot of changes of life cycle changes, 2.0 life cycle to do a lot of optimization. (17 years before the contact is about 2.0, 2.0 out of 16 in May)

23. how to understand the underlying principles of the pack webpack

24 map and set of difference

Set is an ordered list without duplicate values. Set automatically removes duplicate values,

Map keys are ordered pairs, where the key is to allow any type.

They are more similar to the function of the objects quick traversal.

25 browser cache principle

26.200 304 404 500

27. talk understanding Promise / Generator / async await the

简单的来说，promise就是一个容器，它里面存放着一个未来才会结束的时间的结果，从语义上来说，它就是一个JavaScript对象，是解决异步编程的一种方法，执行成功会执行对应的函数，失败会执行失败对应的函数。

Generator是ES6提供的一种异步编程的解决方案。它的语法行为与传统函数完全不同。执行generator函数会返回一个遍历器对象，可以依次遍历Generator函数内部的每一个状态。

async await  就是Generator函数的语法糖。它使用起来更加方便、简单。

8-11 interview questions

1. How to optimize SPA-fold problem of slow loading

Modular Development
Use lazy loading techniques
Extraction css file
Pre-rendered (data independent, skeletal structure)
gulp code compression

2.vue server-side rendering (SSR) understanding

Vue.js is a framework for building client applications. By default, Vue assembly may be output in the browser, and operation for generating a DOM DOM. However, it is also possible to render the same component as the server-side HTML string, send them directly to the browser, and finally these static marks "activate" the application to the client fully interactive.

Rendering Vue.js server applications can also be considered a "homogeneous" or "universal" because most of the code of the application are available on the server and client run on.

Side rendering service

Better SEO.
Faster content arrival time, the user will see a more complete rendering pages quickly
Server-side rendering (SSR) can help you achieve the best performance of the initial load.
More server load.

3. Vue appreciated dependency injection

当嵌套组件的层级较深时，我们的父级组件无法很好的将数据和方法提供给后代组件。此时我们可以使用依赖注入，它用到两个新的实例选项：provide和inject

`provide` 选项允许我们指定我们想要**提供**给后代组件的数据/方法。

然后在任何后代组件里，我们都可以使用 `inject` 选项来接收指定的我们想要添加在这个实例上的属性

However, dependency injection or have a negative impact. Your application components will couple it with their current organization, make reconstruction more difficult. Meanwhile attributes provided in non-responsive.

If you want to share this property is unique to your application, rather than generalized, or if you want to update the data provided in the ancestral component, then this means that you may need to switch to a like Vuex this true the state management program.

8-13

1. Common-centric approach

水平：margin: 0 auto;
垂直已知元素宽高：
1.定位top50%,left50%,减去自身宽高的一半
未知自身的宽高：
2.弹性盒布局：justify-content: center; align-item: center
3.基线对齐：写一个空的span的设置为行内块元素，高度100%，vertical-align:middle,未知元素也设置基线居中对齐。
4.表格居中对齐：父元素设置display:table;子元素设置table-cell;然后vertical-align:middle基线居中对齐
5.固定定位：position:fixed; top:0;left:0;right:0;bottom:0; margin:auto;

Daily interview 01