前端相关知识点

1.你所知道的前端优化有哪些内容？ 

性能优化:

减少dom操作，dom操作会带来repaint和reflow

尽量不要使用table布局，table中某个元素变了，就要reflow

采用更优的API替代消费高的api，转换优化消费高的集合

减少重排

（1）资源压缩与合并：html压缩、css压缩、js压缩

采用nodejs 提供了html-minifier工具，可以压缩html、css和js

nodejs还提供了CleanCss工具，对css代码进行压缩

nodejs提供的uglyfyjs2，对js代码进行压缩

实现文件合并（用gulp）

（2）非核心代码异步加载：异步加载的方式

defer和async的区别：

defer:只适用于外部文件，等到页面其他部分全部渲染完成，然后defer按照文件在页面出现的顺序执行

async:适用于外部文件，渲染完成就执行，谁先渲染完谁先执行，会打乱在页面出现的顺序

动态创建script标签：通过window.onload确保页面加载完毕再将script标签插入dom结构

（3）利用浏览器缓存

强制缓存优先于协商缓存进行，若强制缓存(Expires（http1.0）和Cache-Control（http1.1）)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存。

1.地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制；

2.F5刷新，浏览器会设置max-age=0，跳过强缓存判断，会进行协商缓存判断；

3.ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。

（4）使用CDN

（5）预解析DNS

浏览器会对a标签的href自动启用DNS Prefetching，所以a标签里包含的域名不需要在head中手动设置link。但是在HTTPS下不起作用，需要meta来强制开启功能。

（6）懒加载

原理：首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，

当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

（7）预加载

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.事件

onBlur:当失去输入焦点后产生该事件；

onFocus:当输入获得焦点后，产生该事件；

onchange:当文字值改变时，产生该事件；

onselect:当文字加亮后，产生该事件；

onClick：当组件被点击时产生的事件

一、事件捕获和冒泡是现代浏览器的执行事件的两个不同阶段

二、事件委托是利用冒泡阶段的运行机制来实现的

事件委托（代理）：

事件代理就是，本来加在子元素身上的事件，加在了其父级身上。

那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？

答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。

它存在兼容性问题，在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target

用事件委托有什么好处呢？

第一个好处是效率高，比如，不用for循环为子元素添加事件了

第二个好处是，js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

4. Flash

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

5.边距

上右下左

6.Ajax

Ajax技术核心就是XMLHttpRequest对象。

Ajax技术的工作原理：可以分成3步

（1）创建Ajax对象：var xhr = new XMLHttpRequest();

（2）xhr 发送请求：xhr.open('get','test.html','true');

xhr.send();

（3）xhr获取响应：

xhr.onreadystatechange =function(){

 if(xhr.readystate == 4){//请求的状态码

/*0:请求还没有建立（open执行前）

    1：请求建立了还没发送（执行了open）

     2：请求正式发送（执行了send）

     3：请求已受理，有部分数据可以用，但还没有处理完成

      4：请求完全处理完成*/

       alert(xhr.responseText);//返回的数据

}

可以看到，send()前是open()

7. Angular、jquery区别

Angular大大减少了对DOM的访问；jQuery极大的丰富了DOM操作

8.深拷贝与浅拷贝

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

36. text-transform:capitalize是首字母大写

text-transfrom:lowercase是全部字母为小写

text-transfrom:uppercase是全部字母为大写

9.事件执行顺序

事件捕获->事件处理->事件冒泡

以下三个事件都是事件对象的方法：

stopPropagation()：阻止事件冒泡，这个事件不会阻止定义在元素上的其他事件。

stopImmediatePropagation()：会彻底的阻止事件，在其之后的绑定在元素上的其他监听事件都不会触发。

preventDefault()：阻止事件的默认动作。

10.前端使用异步的场景

定时任务：setTimeout，setInterval

网络请求：ajax请求，动态加载

事件绑定

11．substr与substring

substr(2,3)，从下标为2开始，截取长度为3的字符串。而substring(2,3)，则是从下标为2开始，截取到下标为3的前一位的字符串，也就是截取1位字符。

12、重排（回流）和重绘

重排： 根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息（DOM对象的位置和尺寸大小），并将其安置在界面中的正确位置。

引起重排的原因：

页面首次渲染。

浏览器窗口大小发生改变。

元素尺寸或位置发生改变。

元素内容变化（文字数量或图片大小等等）。

元素字体大小变化。

添加或者删除可见的DOM元素。

激活CSS伪类（例如：:hover）。

设置style属性

查询某些属性或调用某些方法。

重绘，就是当页面中元素样式的改变并不影响它在文档流中的位置时，例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程。

重排一定会重绘，重绘不一定重排

13.前端模块化

 commonJS  CMD AMD es6区别

commonJS：每个文件就是一个模块，有自己的作用域，在文件中定义的变量、类和函数都是私有的，对其他文件不可见，在服务器端模块的加载是运行时同步加载的，在浏览器端，模块需要提前编译打包处理。

特点：所有代码都运行在模块作用域，不会污染全局作用域。

模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

模块加载的顺序，按照其在代码中出现的顺序。

暴露模块：module.exports.xx=value;

引入模块：require('')

CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

AMD：浏览器端，非同步加载模块，根据需要动态加载模块

定义暴露模块：define(function(){return 模块})//没有依赖

                         define(['module1', 'module2'], function(m1, m2){ return 模块})//有依赖

引入使用模块：require(['module1', 'module2'], function(m1, m2){使用m1/m2})

CMD：浏览器端，异步加载，模块使用时才会加载执行

AMD推崇依赖前置，CMD推崇依赖就近

定义暴露模块：define(function(require, exports, module){exports.xxx = value；module.exports = value})//没有依赖

                        定义有依赖的模块：define(function(require, exports, module){

                      //引入依赖模块(同步)

                                                          var module2 = require('./module2')

                      //引入依赖模块(异步)

                                                            require.async('./module3', function (m3) {

                                                        })

                      //暴露模块

                                                          exports.xxx = value

                                                        })

引入使用模块：define(function (require) {

                                  var m1 = require('./module1')

                                  var m4 = require('./module4')

                                  m1.show()

                                  m4.show()

                          })

ES6模块化

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

ES6与commonJS的差异

（1）commonJS模块输出的是值的拷贝，ES6模块输出的是值的引用

（2）commonJS是运行时加载，ES6是编译时输出接口

14.异步编程的四种方式

回调函数：容易造成回调地狱

事件监听：异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

发布/订阅

promise

generator，yield可以暂停，通过next调用下一个

Async/Await

15.new的过程

创建一个空对象 obj;

将新创建的空对象的隐式原型指向其构造函数的显示原型。

使用 call 改变 this 的指向

如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。

var a =new myFunction("Li","Cherry");

new myFunction{

var obj = {}; 

 obj.__proto__ = myFunction.prototype;

var result = myFunction.call(obj,"Li","Cherry");

return typeof result ==='obj'? result : obj;

}

16.内存泄露的几种情况

（1）当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。

可以通过在事件刚开始将事件置为空或者通过事件代理（委托）来完成。

（2）在 Internet Explorer 中，如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象，垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中，直到浏览器关闭。

（3）闭包可以维持函数内局部变量，使其得不到释放。

处理方式：将事件处理函数定义在外部，解除闭包

（4）a = {p: {x: 1}};

         b = a.p;deletea.p;

所以在销毁对象的时候，要遍历属性中属性，依次删除。

17.页面刷新

location.reload(bool)//如果bool为true，跳过缓存，直接重新下载文档，如果bool为false，从缓存获取文档

location.replace('url')//用一个新文档取代当前文档

页面自动刷新

18.原生实现apply、call、bind

Function.prototype.myapply=function(obj,arr){

    obj=obj||window;

    let args=[];

    for(let i=0;i

        args.push('arr['+i+']');

    }

    obj.fn=this;

    let result;

    if(!arr){

        result=eval(obj.fn())

    }else{

        result=eval('obj.fn('+args+')');

    }

    delete obj.fn;

    return result;

}

Function.prototype.mycall=function(obj){

    obj=obj||window;

    obj.fn=this;

    let args=[];

    for(let i=1;i

        args.push('arguments['+i+']');

    }

    let result=eval('obj.fn('+args+')');

    delete obj.fn;

    return result;

}

var value = 2;

var obj = {

    value: 1

}

function bar(name, age) {

    console.log(this.value);

    return {

        value: this.value,

        name: name,

        age: age

    }

}

//bar.mycall(null); // 2

//console.log(bar.mycall(obj, 'kewkin', 18));

console.log(bar.myapply(obj, ['kewkin', 18]));*/

//实现bind

/*Function.prototype.mybind=function(obj){

   if(typeof this!=='function'){

    throw new Error('Not Be Function');

   }

   var self=this;

   var args=Array.prototype.slice.call(arguments,1);

   var fNop=function(){};

   var fBound=function(){

       var argsinside=Array.prototype.slice.call(arguments,0);

        self.apply(this instanceof self?this:obj,args.concat(argsinside));

   };

   //直接修改fBound的prototype也会修改函数的prototype，所以通过一个空函数做中转站

   fNop.prototype=this.prototype;

   fBound.prototype=new fNop();

   return fBound;

}

19自适应布局方式

使用meta

使用rem em单位（计算时可以用calc）

使用百分比布局

使用媒体查询 @media only screen and (max-width: 500px) { body {

        background-color: lightblue;    }}